1. 后臺(tái)管理系統(tǒng)——前端技術(shù)棧

• vue.js2.0中文：優(yōu)秀的JS框架

• vue-router： vue.js 配套路由

• vuex：vue.js 應(yīng)用狀態(tài)管理庫(kù)

• Element：餓了么提供的UI框架

• axios：基于Promise的HTTP客戶端，用于瀏覽器和node.js

• Mock.js：生成隨機(jī)數(shù)據(jù)

• ECharts：百度的圖表生成庫(kù)

• 一個(gè)系列案例：https://www.cnblogs.com/xifengxiaoma/p/9533018.html

1. 后臺(tái)管理系統(tǒng)——后端技術(shù)棧

• Spring Boot

• MySQL

• MyBatisPlus：簡(jiǎn)化Mybatis開(kāi)發(fā)

• redis：緩存的key-value數(shù)據(jù)庫(kù)

• shiro：權(quán)限管理框架

• 定時(shí)任務(wù)：SpringBoot自帶、Quartz框架

• 郵件

• POI：操作excel表格等

• WebSocket

• 代碼生成器

3. 權(quán)限控制方案

后臺(tái)管理系統(tǒng)當(dāng)然少不了權(quán)限控制，至于權(quán)限控制，前端方面當(dāng)然就是對(duì)頁(yè)面資源的訪問(wèn)和操作控制。

前端資源權(quán)限主要又分為兩個(gè)部分，即導(dǎo)航菜單的查看權(quán)限和頁(yè)面增刪改操作按鈕的操作權(quán)限。

我們的設(shè)計(jì)把頁(yè)面導(dǎo)航菜單和頁(yè)面操作按鈕統(tǒng)一存儲(chǔ)在菜單數(shù)據(jù)庫(kù)表中

菜單表中包含以下權(quán)限關(guān)注點(diǎn)：

菜單類型

菜單類型代碼頁(yè)面資源的類型。類型包括，0：目錄 1：菜單 2：按鈕。

權(quán)限標(biāo)識(shí)

權(quán)限標(biāo)識(shí)即是代表此頁(yè)面資源，用來(lái)進(jìn)行權(quán)限控制的唯一標(biāo)識(shí)，主要是進(jìn)行增刪改查的權(quán)限控制。

權(quán)限標(biāo)識(shí)包括，sys:user:add：新增 sys:user:edit：編輯 sys:user:delete：刪除 sys:user:view：查看

4. 菜單實(shí)現(xiàn)思路

• 用戶登錄系統(tǒng)

用戶登錄系統(tǒng)之后，跳轉(zhuǎn)到首頁(yè)。

• 根據(jù)用戶加載導(dǎo)航菜單

在路由導(dǎo)航守衛(wèi)路由時(shí)加載用戶導(dǎo)航菜單并存儲(chǔ)到store。

加載過(guò)程如下，返回結(jié)果排除按鈕類型。

user -> user_role -> role -> role_menu -> menu。

• 導(dǎo)航欄讀取菜單樹(shù)

導(dǎo)航欄到store讀取導(dǎo)航樹(shù)并進(jìn)行展示。

1. 頁(yè)面按鈕實(shí)現(xiàn)思路

• 用戶登錄系統(tǒng)

用戶登錄系統(tǒng)之后，跳轉(zhuǎn)到首頁(yè)。

• 根據(jù)用戶加載權(quán)限標(biāo)識(shí)集合

在路由導(dǎo)航守衛(wèi)路由時(shí)加載用戶權(quán)限標(biāo)識(shí)集合。

加載過(guò)程如下，返回結(jié)果是用戶權(quán)限標(biāo)識(shí)的集合。

user -> user_role -> role -> role_menu -> menu。

5、 頁(yè)面按鈕控制

頁(yè)面操作按鈕提供權(quán)限標(biāo)識(shí)，查詢是否在用戶權(quán)限標(biāo)識(shí)集合中。

在：有權(quán)限，可見(jiàn)或可用，不在：無(wú)權(quán)限，不可見(jiàn)或禁用。