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

_ivan 發布于2019-08-23 14:06 / 2065人閱讀

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

簡介

最近寫了一個基于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()
      })
    }
  },

GPU云服務器云服務器 vue2.0 cdn 后臺管理模板html 簡述域名系統的作用后臺權限設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100077.html

vue2.0-基于elementui換膚[自定義主題]

摘要：直接上預覽鏈接基于換膚自定義主題項目增加主題組件在項目的下添加文件夾文件獲取地址項目增加自定義主題自定義添加主題下載地址項目引入和使用選擇你想要隨主題改變的元素在里面，不希望隨主題改變的可以注釋掉選擇皮膚之后把記錄存在里面。 0. 直接上預覽鏈接 [vue2.0-基于elementui換膚[自定義主題]](https://mgbq.github.io/vue-pe... 1. ...

lx1036 2019-08-29 15:17 評論0 收藏0
vue2.0-基于elementui換膚[自定義主題]

摘要：直接上預覽鏈接基于換膚自定義主題項目增加主題組件在項目的下添加文件夾文件獲取地址項目增加自定義主題自定義添加主題下載地址項目引入和使用選擇你想要隨主題改變的元素在里面，不希望隨主題改變的可以注釋掉選擇皮膚之后把記錄存在里面。 0. 直接上預覽鏈接 [vue2.0-基于elementui換膚[自定義主題]](https://mgbq.github.io/vue-pe... 1. ...

scwang90 2019-08-26 11:53 評論0 收藏0
vue2.0+axios+elementUI實現增刪改查

最近嘗試使用vue+element實現增刪改查功能，在實現的過程中遇到了蠻多問題，現在總結如下：首先安裝相關的插件1、根據vue官網推薦，使用axios進行前后臺交互，安裝axiosnpm install axios -S2、安裝elementUI，官網npm i element-ui -S3、安裝 loader 模塊npm install style-loader -Dnpm install c...

rollback 2019-08-23 10:33 評論0 收藏0