Vue LinUI框架林間有風-慕課官方出品

【林間有風LinUI】

1.官方demo：http://face.cms.7yue.pro/

2.文檔：http://doc.cms.7yue.pro/lin/client/

3.github：https://github.com/TaleLin/lin-cms-vue

4.JWT加密composer：https://packagist.org/packages/firebase/php-jwt

 -------------

 

Lin-CMS 是工程類開源項目，不能保證無縫升級

文檔地址

http://doc.cms.talelin.com/

線上 Demo

http://face.cms.talelin.com/

案例

http://sleeve.talelin.com/

 

 

前端vue代碼目錄結構：

├───public // 公共資源目錄，該目錄webpack原封打包
│    ├───icons // icon圖片存放目錄
│    │   favicon.ico // 本站favicon圖片
│    │   iconfont.css // 阿里iconfont文件
│    │   index.html // template模板
│    │   robots.txt // Robots協議
├───script // 腳本
├───src　　【下邊】
│    
│   babel.config.js // babel配置文件
│   .browserslistrc // 適配瀏覽器版本
│   .eslintrc.js // eslint配置文件
│   .gitignore // git上傳忽略文件


【src文件目錄】

├───assets // 靜態資源文件存放目錄
│    ├───components // 布局組件及業務基礎組件
│    │   ├───layout // layout布局組件
│    │   ├───base // 通用基礎組件庫（包含element-ui二次封裝組件）
│    ├───config // config配置項
│    │   ├───stage // 路由配置文件
│    │   │   error-code.js // 與服務端約定的錯誤狀態碼
│    │   │   index.js // 前端自定義配置項
│    ├───lin // Lin CMS核心庫
│    │   ├───directives // 全局指令
│    │   ├───filter // 全局過濾器
│    │   ├───mixin // 全局mixin
│    │   ├───models // model層
│    │   ├───utils // 各種工具函數
│    ├───plugins // 插件
│    ├───router // 前端路由
│    │   ├───modules // 每個業務模型的路由樹
│    │   │   home-router.js // 菜單路由
│    │   │   index.js // vue-router入口文件
│    │   │   routes.js // vue-router路由配置
│    ├───store // vuex狀態管理文件
│    ├───views // 業務組件
│    │   App.vue // vue根組件
│    │   main.js // webpack打包入口

 

增加左側導航eg：會員卡

①：[src]->[config]->[stage]　　創建card.js　　　　並在同級目錄index.js,

②：import cardConfig from './card'   //  引入會員卡路由　　cardConfig

[views]->[card]->CardList.vue

路由配置：接口地址
[src]->[lin]->[models]->user.js

登陸路由獲取token並保存

 

 

=================================================

 

1.分頁

<el-pagination
  :current-page="currentPage4"
  :page-sizes="[5, 10, 20, 30, 40,50,100]"
  :page-size="list_rows"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="onChangeListRows"
  @current-change="onChangePage"
/>

-----------

onChangeListRows(val) {

  this.per_page = val
  this.list_rows = val
  this.getAvatarListData()
  console.log(`每頁 ${val} 條`)
},

onChangePage(val) {

  this.page = val
  this.getAvatarListData()
  console.log(`當前頁: ${val}`)
},

 

<el-table-column
                        prop="tag"
                        label="分類"
                        width="150"
                        filter-placement="bottom-end"
                >
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.pid === '1' ? 'success' : 'primary'"
                                disable-transitions
                                @click="onClickStatus(scope.$index, scope.row)"
                        >{{ scope.row.pid>0?scope.row.permission.name:'————' }}
                        </el-tag>
                    </template>
                </el-table-column>

 

 

// 判斷增加的權限
            for (let i = 0; i < addAuths.length; i++) {
              // eslint-disable-line
              for (let j = 0; j < this.cacheAuths.length; j++) {
                // eslint-disable-line
                if (addAuths[i] === this.cacheAuths[j]) {
                  addAuths.splice(i, 1)
                }
              }
            }

-----------
遍歷對象

for (let item in this.getAdminPermissionListAdmin) {
    console.log(item)
}

 

判斷第一種寫法：