vue-element-admin 框架應用1

最近公司要坐後臺系統–原本一直用react，但技術大大決定要用vue，所以就用了這個框架，講講我的這個框架的理解吧，幫助新手可以快速上手

先看程式碼吧~~

官方文件：https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md
git下載

# 克隆專案
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 安裝依賴
npm install

# 建議不要用cnpm安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
# 我個人用的yarn
npm install --registry=https://registry.npm.taobao.org

# 啟動服務
npm run dev

開啟介面

看原生程式碼還有我自己對程式碼的解釋

許可權控制

我們現在開啟src/router/index.js 搜尋admin

  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    alwaysShow: true, // will always show the root menu
    meta: {
      title: 'permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // 這裡就是許可權啦，
    },
    children: [{
      path: 'page',
      component: () => import('@/views/permission/page'),
      name: 'pagePermission',
      meta: {
        title: 'pagePermission',
        roles: ['admin'] // 這裡只能admin訪問的到
      }
    }, {
      path: 'directive',
      component: () => import('@/views/permission/directive'),
      name: 'directivePermission',
      meta: {
        title: 'directivePermission'
        // if do not set roles, means: this page does not require permission
      }
    }]
  },

上面就是在選單裡面控制許可權了。

---

那在頁面我們怎麼控制許可權呢？？
開啟src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">
    <!-- {{console.log('343434')}} -->

    <!-- {{this.data |json}} -->
    //切換元件
    <component :is="currentRole"></component>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'

export default {
  name: 'dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'roles' //這裡是從vuex裡面獲取roles,許可權是存在vuex裡面的，之後就會介紹
    ])
  },
  created() {
    console.log(this.roles)
    if (!this.roles.includes('admin')) {//如果roles不是admin，剛currentRole 賦值，那麼我們的元件會發生變化
      this.currentRole = 'editorDashboard'
    }
  }
}
</script>

---

mock資料

開啟src/mock/transaction.js

import Mock from 'mockjs'

const List = []
const count = 20

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    date: +Mock.Random.date('yyyy-MM-dd'),
    order_no: '@guid()',
    timestamp: +Mock.Random.date('T'),
    username: '@name()',
    price: '@float(1000, 15000, 0, 2)',
    'status|1': ['success', 'pending']
  }))
}

export default {
  getList: () => {
    return {
      total: List.length,
      items: List
    }
  }
}

這裡便是mock了一個transaction交易的資料

開啟src/mock/index.js

import Mock from 'mockjs'
import loginAPI from './login'
import articleAPI from './article'
import remoteSearchAPI from './remoteSearch'
import transactionAPI from './transaction'
import wanziAPI from './wanzi'


// Mock.setup({
//   timeout: '350-600'
// })

// 登入相關
Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)

// 文章相關
Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
Mock.mock(/\/article\/create/, 'post', articleAPI.createArticle)
Mock.mock(/\/article\/update/, 'post', articleAPI.updateArticle)

// 搜尋相關
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)

// 賬單相關
Mock.mock(/\/transaction\/list/, 'get', transactionAPI.getList)

// 丸子
Mock.mock(/\/wanzi\/list/, 'get', wanziAPI.getList)

export default Mock

這裡記得要攔截哦~~

---

=》vue-element-admin 框架應用2