3YAdmin基於React+Antd構建。GitHub搜索React+Antd+Admin出來的結果沒有上百也有幾十個，為什麽還要寫這個東西呢？

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

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

3YAdmin

??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效果
• 網絡異常處理
• 模塊
  • 系統模塊
    • 系統設置
      • 菜單管理
    • 權限管理
      • 功能管理
      • 角色管理
      • 角色權限管理
      • 角色用戶管理
      • 用戶角色管理
    • 組織架構
      • 部門管理
      • 職位管理
    • 用戶管理
  • 審計日誌
  • 數據初始化
• 例子
  • 權限測試頁
  • 錯誤頁
  • JSON表單(通過解析JSON數據,動態生成表單)
    • Search Form(查詢表單)
    • Common Form(靜態表單,解析第一次後,JSON數據改變後表單不會跟著變)
    • Dynamic Form(動態表單,JSON數據改變後表單重新生成)

安裝使用

Install

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

Run

Development

npm start

Production(Build)

npm run build

配置

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

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

使用教程

後面會出詳細使用教程以及前後端分離的後臺管理系統前端架構設計思路(包含vue和react)，喜歡的話可以給個star。

效果展示

3YAdmin-專註通用權限控制與表單的後臺管理系統模板