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。

效果展现