程式碼太醜,不建議照搬,可以看RBAC 的實作思路,這是通用的。
3YAdmin是一個專注通用權限控制與表單的後台管理系統範本。
3YAdmin支援兩種佈局模式,Tab模式和正常模式。兩種模式是webpack打包編譯時決定的,打包某個模式時不會引入另一個模式下的多餘程式碼(React 實作Tab模式比較蛋痛)。
3YAdmin實現了RBAC權限控制模型的核心功能頁面和操作。
3YAdmin透過解析定義好的JSON數據,可以產生查詢表單,靜態表單,動態表單。
搭配lazy-mock 可以快速產生前後端帶mock資料的增刪改查功能(簡單的程式碼產生器)。
online demo:
Tab Mode
Common Mode
登入帳號:
admin 123 test 123456 website_admin 123456
真實後端數據支持
登入/登出
收縮左側選單欄
響應式佈局
按需載入
Tag標籤導航
麵包屑
全螢幕/退出全螢幕
動態選單與靜態選單
選單按模組劃分
通用權限控制
選單級權限控制
介面級權限控制
元素級權限控制
全域可設定loading效果
網路異常處理
模組
系統設定
權限管理
組織架構
使用者管理
選單管理
功能管理
角色管理
角色權限管理
角色使用者管理
使用者角色管理
部門管理
職缺管理
系統模組
審計日誌
資料初始化
例子
Search Form(查詢表單)
Common Form(靜態表單,解析第一次後,JSON資料改變後表單不會跟著變)
Dynamic Form(動態表單,JSON資料改變後表單重新產生)
權限測試頁
錯誤頁
JSON表單(透過解析JSON資料,動態產生表單)
git clone https://github.com/wjkang/3YAdmin.git
npm install
安裝後台mock服務
git clone -b 3YAdmin https://github.com/wjkang/quasar-admin-server.git
npm install
npm start
npm start
npm run build
直接將react-react-app產生的配置複製出來進行修改,都在react-scripts資料夾下,目前配置了antd按需引入,分chunk打包以及使用了AutoDllPlugin。可以按照自己的需要進行修改。
打包模式的設定需修改buils.js與start.js檔案中的process.env.REACT_APP_LAYOUT_MODE
後面會出詳細使用教程以及前後端分離的後台管理系統前端架構設計思路(包含vue和react),喜歡的話可以給個star。