3YAdmin基于React+Antd構(gòu)建拆座。GitHub搜索React+Antd+Admin出來的結(jié)果沒有上百也有幾十個(gè)垦细，為什么還要寫這個(gè)東西呢？
一個(gè)后臺管理系統(tǒng)的核心我認(rèn)為應(yīng)該是權(quán)限控制干旁，表單以及錯誤信息收集這三大塊盖喷，前兩個(gè)最為重要。而GitHub上的大多數(shù)項(xiàng)目關(guān)注點(diǎn)都不在這里雷绢，各種第三方組件堆砌在一起泛烙，看起來很炫酷，但是實(shí)用性沒多大翘紊，改起來也麻煩(如果是vue,可以看我的另一個(gè)項(xiàng)目vue-quasar-admin)蔽氨。
有人可能會有疑問：權(quán)限控制，不同系統(tǒng)實(shí)現(xiàn)不一樣帆疟，根本沒法做到通用鹉究。權(quán)限控制的模型就那幾種，而且大部分都是RBAC踪宠，可能做不到完全通用自赔，但是至少改動不會太大。
3YAdmin
??3YAdmin是一個(gè)專注通用權(quán)限控制與表單的后臺管理系統(tǒng)模板柳琢。
??3YAdmin支持兩種布局模式绍妨，Tab模式和正常模式润脸。兩種模式是webpack打包編譯時(shí)確定的，打包某個(gè)模式時(shí)不會引入另外一種模式下的多余代碼(React 實(shí)現(xiàn)Tab模式比較蛋疼)他去。
??3YAdmin實(shí)現(xiàn)了RBAC權(quán)限控制模型的核心功能頁面和操作津函。
??3YAdmin通過解析定義好的JSON數(shù)據(jù)，可以生成查詢表單孤页，靜態(tài)表單尔苦，動態(tài)表單。
??搭配lazy-mock 可以快速生成前后端帶mock數(shù)據(jù)的增刪改查功能(簡單的代碼生成器)行施。
online demo:
登錄賬號:
admin 123
test 123456
website_admin 123456
功能與特點(diǎn)
- 真實(shí)后端數(shù)據(jù)支持
- 登錄/登出
- 收縮左側(cè)菜單欄
- 響應(yīng)式布局
- 按需加載
- Tag標(biāo)簽導(dǎo)航
- 面包屑
- 全屏/退出全屏
- 動態(tài)菜單與靜態(tài)菜單
- 菜單按模塊劃分
- 通用權(quán)限控制
- 菜單級權(quán)限控制
- 接口級權(quán)限控制
- 元素級權(quán)限控制
- 全局可配置loading效果
- 網(wǎng)絡(luò)異常處理
- 模塊
- 系統(tǒng)模塊
- 系統(tǒng)設(shè)置
- 菜單管理
- 權(quán)限管理
- 功能管理
- 角色管理
- 角色權(quán)限管理
- 角色用戶管理
- 用戶角色管理
- 組織架構(gòu)
- 部門管理
- 職位管理
- 用戶管理
- 系統(tǒng)設(shè)置
- 審計(jì)日志
- 數(shù)據(jù)初始化
- 系統(tǒng)模塊
- 例子
- 權(quán)限測試頁
- 錯誤頁
- JSON表單(通過解析JSON數(shù)據(jù),動態(tài)生成表單)
- Search Form(查詢表單)
- Common Form(靜態(tài)表單,解析第一次后,JSON數(shù)據(jù)改變后表單不會跟著變)
- Dynamic Form(動態(tài)表單,JSON數(shù)據(jù)改變后表單重新生成)
安裝使用
Install
git clone https://github.com/wjkang/3YAdmin.git
npm install
安裝后臺mock服務(wù)
git clone -b 3YAdmin https://github.com/wjkang/quasar-admin-server.git
npm install
npm start
Run
Development
npm start
Production(Build)
npm run build
配置
直接將react-react-app生成的配置復(fù)制出來進(jìn)行修改允坚，都在react-scripts文件夾下，當(dāng)前配置了antd按需引入蛾号，分chunk打包以及使用了AutoDllPlugin稠项。可以按照自己的需要進(jìn)行修改鲜结。
打包模式的配置需修改buils.js與start.js文件中的process.env.REACT_APP_LAYOUT_MODE
使用教程
后面會出詳細(xì)使用教程以及前后端分離的后臺管理系統(tǒng)前端架構(gòu)設(shè)計(jì)思路(包含vue和react)展运，喜歡的話可以給個(gè)star。
