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

2018-07-17 23:37:08 +08:00
 ruoxie

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

功能与特点

安装使用

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。

效果展示

3670 次点击
所在节点    JavaScript
3 条回复
OSF2E
2018-07-17 23:56:06 +08:00
已 star
AllOfMe
2018-07-18 00:10:43 +08:00
最近也一直想做类似的东西,因为业务比较固定重复,没想到真的已经有人实现了,表示支持!
CocaColf
2018-07-18 00:33:15 +08:00
好东西,学习一波哈哈哈

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/471798

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX