Vue2.0 + ElementUI 手寫權限管理系統後臺模板（一）——簡述

簡介

最近寫了一個基於vue2.0+element-ui權限管理系統的後臺模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注於項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。

源碼地址：

• github：https://github.com/Nirongxu/v...
• 碼雲：https://gitee.com/nirongxu/xu...

預覽地址：https://nirongxu.github.io/vu...

vue-xuAdmin是基於vue2.0全家桶 + element-ui 開發的一個後臺模板，實現了無限級菜單，頁面、按鈕級別的權限管理，爲了減少前後端的溝通成本，頁面、按鈕級別的權限驗證和動態路由表的存儲校驗，也都由前端完成，這樣前端新建頁面或者刪除頁面都不需要告訴後臺去增加刪除路由表

部分截圖

2. 準備工作

-開發環境

• node.js v8.0+
• webpack v3
• git

-技術棧

• ES6+
• vue2.0+
• vue-router
• vuex
• axios
• scss
• element-ui v2.4+

3. 基礎框架功能

- 登錄、退出
+ 基於token
    - 狀態攔截、404頁面
    - 動態加載路由
    - 頁面、按鈕指令權限管理
    - 無限級菜單
- 封裝[email protected]國際化組件
- 系統全屏化
- 菜單收縮
- icon 圖標
+ tab標籤導航
    - 右擊快捷功能
- 表格拖拽排序
- 編輯器
    - markdown（編輯器目前只封裝了這一個組件，重寫了markdown編輯和預覽的皮膚，實時獲取：markdown，html，json 三種格式文本）
- Echarts 組件封裝

封裝了一些element-ui沒有但是常用的組件，正常需要的功能element-ui裏面都有，可以直接複製，如果element-ui不能滿足你的需求只有自己寫了

4. 開發

登錄

登錄頁面只有輸入賬號密碼，需要驗證碼的可以自行去搜第三方驗證插件，有收費有免費。這裏僅爲了測試，就把輸入的賬號當做 token 來存儲，完成整個系統的會話，實際開發以登錄成功後後臺返回的 token 爲準

// 登錄頁面
submitForm () {
      let that = this
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        this.$message({
          showClose: true,
          message: '賬號或密碼不能爲空',
          type: 'error'
        })
        return false
      } else {
        // 將 username 設置爲 token 存儲在 store，僅爲測試效果，實際存儲 token 以後臺返回爲準
        that.$store.dispatch('setToken', that.loginForm.username).then(() => {
          that.$router.push({path: '/'})
        }).catch(res => {
          that.$message({
            showClose: true,
            message: res,
            type: 'error'
          })
        })
      }
    },

// vuex 
  state: {
    token: Cookies.get('token') // 防止刷新頁面或者在新標籤頁打開，從cookie獲取初始token
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      Cookies.set('token', token ,{ expires: 1/24 }) // 引用‘js-cookie’模塊，存儲 token 到cookie
    }
  },
  actions: {
    setToken ({commit}, token) {
      return new Promise((resolve, reject) => {
        commit('setToken', token)
        resolve()
      })
    }
  },