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頁面
    - 動態加載路由
    - 頁面、按鈕指令權限管理
    - 無限級菜單
- 封裝vue-i18n@8.x國際化組件
- 系統全屏化
- 菜單收縮
- 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()
      })
    }
  },