您现在的位置是:网站首页> 内容页

3YAdmin-专注通用权限控制与表单的后台管理系统模板

  • u优乐娱乐官方网站
  • 2019-03-25
  • 149人已阅读
简介3YAdmin基于React+Antd构建。GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢?一个后台管理系统的核心我认为应该是权限

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 123test 123456website_admin 123456

功能与特点

真实后端数据支持登录/登出收缩左侧菜单栏响应式布局按需加载Tag标签导航面包屑全屏/退出全屏动态菜单与静态菜单菜单按模块划分通用权限控制菜单级权限控制接口级权限控制元素级权限控制全局可配置loading效果网络异常处理模块系统模块系统设置菜单管理权限管理功能管理角色管理角色权限管理角色用户管理用户角色管理组织架构部门管理职位管理用户管理审计日志数据初始化例子权限测试页错误页JSON表单(通过解析JSON数据,动态生成表单)Search Form(查询表单)Common Form(静态表单,解析第一次后,JSON数据改变后表单不会跟着变)Dynamic Form(动态表单,JSON数据改变后表单重新生成)

安装使用

Install

git clone https://github.com/wjkang/3YAdmin.gitnpm install

安装后台mock服务

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生成的配置复制出来进行修改,都在react-scripts文件夹下,当前配置了antd按需引入,分chunk打包以及使用了AutoDllPlugin。可以按照自己的需要进行修改。

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

使用教程

后面会出详细使用教程以及前后端分离的后台管理系统前端架构设计思路(包含vue和react),喜欢的话可以给个star。

效果展示

文章评论

Top