現(xiàn)在網(wǎng)上有一個(gè)很棒的案例vue-element-admin，它已經(jīng)集成了管理后臺的絕大部分的功能，可以適合很多的項(xiàng)目構(gòu)建，對于程序員來說思想很重要，于是參照它的思想，自己擼了一個(gè)管理后臺。
管理后臺構(gòu)建思想
1 對使用人員：先創(chuàng)建角色，在創(chuàng)建人員。簡單說角色對應(yīng)頁面
2 對開發(fā)人員：先確認(rèn)導(dǎo)航路由，在劃分菜單
管理后臺角色的劃分
管理后臺角色定制開發(fā)方式可以分為2種
1 在項(xiàng)目構(gòu)建時(shí)直接定義：這種方式需要在產(chǎn)品已經(jīng)很明確的時(shí)候適合這樣來干。
優(yōu)點(diǎn)：角色明確可以很容易劃分功能模塊，后續(xù)的開發(fā)配置環(huán)節(jié)很簡單實(shí)現(xiàn)，測試功能明確
缺點(diǎn)：在開發(fā)新頁面的時(shí)候必須先配置后開發(fā)，頁面的權(quán)限更改比較麻煩，要不停的給測試配置新的權(quán)限。
2 在項(xiàng)目結(jié)束前定義：廣大項(xiàng)目最好的選擇。
優(yōu)點(diǎn)：頁面開發(fā)無需考慮權(quán)限，測試人員無需變更，簡單就是先開發(fā)一個(gè)超級管理員的賬號。
缺點(diǎn)：在最后定制考慮較大，較廣，需要多次確認(rèn)。
我的項(xiàng)目角色分為 超管，客服經(jīng)理，客服，運(yùn)營經(jīng)理，運(yùn)營人員，項(xiàng)目角色明確，每個(gè)頁面的角色權(quán)限也很明確，就采用的方式一，當(dāng)二者不滿足其中任意一項(xiàng)的時(shí)候，一定要選擇方式2 ！?。?！切記，下面的都以方式2講
提供可配置角色（案例沒有）
在配置角色的時(shí)候要先確定頁面對應(yīng)的角色即現(xiàn)有頁面再有角色
在頁面開發(fā)完成之后，我們需要先創(chuàng)建一個(gè)角色，然后在給它配
置頁面，
就像上面展示的那樣，先添加角色，在給角色劃分頁面權(quán)限；
在給每個(gè)頁面劃分權(quán)限的時(shí)候，我們只需要分為2種，get change（add,del,update），都會以一種權(quán)重的方式傳給后臺，通過和后臺配合就能達(dá)到精確到每一個(gè)按鈕。
這里有幾種配置方式，我采用的是先獲取,在修改，分類添加，即根據(jù)一級菜單來劃分，一個(gè)欄目來劃分
管理員添加
頁面類似這樣
我們首先要選擇角色在來添加用戶，以一定的規(guī)則來生成用戶的密碼。
管理員的添加依賴角色
前端導(dǎo)航路由的配置
在用戶登錄后，我們可以獲取到用戶的角色，通過角色獲取到角色對應(yīng)的頁面。
具體做法：在我們前臺保存一份完整的路由，每個(gè)頁面我們都會添加一個(gè)權(quán)重，也就是在配置角色的時(shí)候，傳給后臺的權(quán)重，通過這個(gè)就可以拿到自己需要有那些頁面，以及每個(gè)頁面需要的功能（get和change）。最后在拼接出我們需要的頁面的路由。
前端菜單欄的生成
菜單欄的生成和路由的生成很類似，拿到的路由表里面應(yīng)該包含的有我們所需要的菜單表，
通過路由表來生成我們的菜單表。
類似這樣的路由表
[
{
index: '100',
path: '/home/index', //生成路由
name: '首頁', //生成菜單
haschild: false, //生成菜單
children: [],
meta: {
name: '首頁',
check: false, // 權(quán)重
change: false, // 權(quán)重
page_id: 100 // 區(qū)分頁面
}
},
// 下面類似
{
index: '100',
path: '/home/index',
name: '測試',
haschild:true,
meta: {
name: '測試',
check: false,
change: false,
page_id: 100
}
children: [
index: '100',
path: '/home/index',
name: '測試1子菜單',
haschild: false,
children: [],
meta: {
name: '測試1子菜單',
check: false,
change: false,
page_id: 100
}
],
},
]
