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

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。

效果展現