3YAdmin基于React+Antd構(gòu)建。GitHub搜索React+Antd+Admin出來的結(jié)果沒有上百也有幾十個，為什么還要寫這個東西呢？

一個后臺管理系統(tǒng)的核心我認(rèn)為應(yīng)該是權(quán)限控制，表單以及錯誤信息收集這三大塊，前兩個最為重要。而GitHub上的大多數(shù)項目關(guān)注點都不在這里，各種第三方組件堆砌在一起，看起來很炫酷，但是實用性沒多大，改起來也麻煩(如果是vue,可以看我的另一個項目vue-quasar-admin)。

有人可能會有疑問：權(quán)限控制，不同系統(tǒng)實現(xiàn)不一樣，根本沒法做到通用。權(quán)限控制的模型就那幾種，而且大部分都是RBAC，可能做不到完全通用，但是至少改動不會太大。

3YAdmin

??3YAdmin是一個專注通用權(quán)限控制與表單的后臺管理系統(tǒng)模板。

??3YAdmin支持兩種布局模式，Tab模式和正常模式。兩種模式是webpack打包編譯時確定的，打包某個模式時不會引入另外一種模式下的多余代碼(React 實現(xiàn)Tab模式比較蛋疼)。

??3YAdmin實現(xiàn)了RBAC權(quán)限控制模型的核心功能頁面和操作。

??3YAdmin通過解析定義好的JSON數(shù)據(jù)，可以生成查詢表單，靜態(tài)表單，動態(tài)表單。

??搭配lazy-mock 可以快速生成前后端帶mock數(shù)據(jù)的增刪改查功能(簡單的代碼生成器)。

online demo:

Tab Mode

Common Mode

登錄賬號:

admin 123test 123456website_admin 123456

功能與特點

• 真實后端數(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)

      • 部門管理
      • 職位管理
    • 用戶管理
  • 審計日志
  • 數(shù)據(jù)初始化

• 例子

  • 權(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.gitnpm install

安裝后臺mock服務(wù)

git clone -b 3YAdmin https://github.com/wjkang/quasar-admin-server.gitnpm installnpm start

Run

Development

npm start

Production(Build)

npm run build

配置

直接將react-react-app生成的配置復(fù)制出來進行修改，都在react-scripts文件夾下，當(dāng)前配置了antd按需引入，分chunk打包以及使用了AutoDllPlugin。可以按照自己的需要進行修改。

打包模式的配置需修改buils.js與start.js文件中的process.env.REACT_APP_LAYOUT_MODE

使用教程

后面會出詳細(xì)使用教程以及前后端分離的后臺管理系統(tǒng)前端架構(gòu)設(shè)計思路(包含vue和react)，喜歡的話可以給個star。

效果展示

總結(jié)

以上是生活随笔為你收集整理的3YAdmin-专注通用权限控制与表单的后台管理系统模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。