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-专注通用权限控制与表单的后台管理系统模板的更多相关文章

  1. vue-quasar-admin 一个包含通用权限控制的后台管理系统

    vue-quasar-admin   Quasar-Framework 是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站:响应式网站,渐进式应用,手机应用(通过Cor ...

  2. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Confluence 6 管理员联系表单的后台配置界面

    管理员联系表单的后台配置界面截图和配置. 对输入的数据进行编辑和选择是否启用发送电子邮件给管理员 https://www.cwiki.us/display/CONFLUENCEWIKI/Configu ...

  4. 在IOS设备上POST提交form表单,后台接收不到值怎么办?

    原文:https://blog.csdn.net/xhaimail/article/details/90440029 最近在工作上遇到一个奇葩问题,在Android和Windows平台上做请求时参数都 ...

  5. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑

    (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...

  6. python 全栈开发,Day111(客户管理之 编辑权限(二),Django表单集合Formset,ORM之limit_choices_to,构造家族结构)

    昨日内容回顾 1. 权限系统的流程? 2. 权限的表有几个? 3. 技术点 中间件 session orm - 去重 - 去空 inclusion_tag filter 有序字典 settings配置 ...

  7. django web 自定义通用权限控制

    需求:web系统有包含以下5个url,分别对于不同资源: 1.stu/add_stu/ 2.stu/upload_homework/ 3.stu/query_homework/ 4.stu/add_r ...

  8. JavaScript控制阻止表单提交

    1.在表单上使用onSubmit方法 <?php $form = ActiveForm::begin([ 'options'=>[ 'class' => 'form-horizont ...

  9. django通用权限控制框架

    在web项目中根据不同的用户肯定会限制其不同的权限,利用以下模块可以满足日常几乎所有的权限控制 permission_hook.py  # 自定义权限控制,必须返回True/false  ,True表 ...

随机推荐

  1. 显式等待-----Selenium快速入门(十)

    上一篇说了元素定位过程中的隐式等待,今天我们来探讨一下显示等待.显式等待,其实就是在使用WebDriverWait这个对象,进行等待.显式等待对比隐式等待,多了一些人性化的设置,可以说是更细化的隐式等 ...

  2. ipad协议7.0,与大佬们分享几套新老版本的协议源码及算法,交流心得。

  3. 浅析C# Dictionary实现原理

    目录 一.前言 二.理论知识 1.Hash算法 2.Hash桶算法 3.解决冲突算法 三.Dictionary实现 1. Entry结构体 2. 其它关键私有变量 3. Dictionary - Ad ...

  4. C#跨线程操作UI

    WPF启动调度器 : Dispatcher.Invoke(new Action(() => { //你的代码 }));

  5. Code Chef JUMP(递推+树状数组+李超线段树)

    \(JUMP\) 很容易写出转移柿子 \[f_i=\min_{p_j<p_i}\{(h_i-h_j)^2+f_j\}+w_i\] 把\(\min\)里面的东西展开一下 \[f_j=\min_{p ...

  6. 深入理解java内存模型

    深入理解Java内存模型(一)——基础 深入理解Java内存模型(二)——重排序 深入理解Java内存模型(三)——顺序一致性 深入理解Java内存模型(四)——volatile 深入理解Java内存 ...

  7. leetcode 73 矩阵置零 Python

    矩阵置零     给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [   [1,1,1],   [1,0,1],   [1 ...

  8. 2014年10月Android面试总结

    最近打算跳槽,所以到外面逛了一圈,发现外面的世界还是比较精彩的,同时也认识了自己的一些不足,以及作为一个Android开发者,自己后面需要掌握的东西做一下列举. 先介绍下本人的工作经历吧,本人11年7 ...

  9. Python小白学习之路(二)—【Pycharm安装与配置】【创建项目】【运算符】【数据类型】

    写在前面: 第二天的学习,感觉比昨天学习相对轻松一些,但是对于我这个编程语言功底很弱的人来说,还是稍稍微有些.....哈尔滨的天气一天天冷了下来,还飘着小雨,不过还是挺有意境的.充实而又忙碌的生活,让 ...

  10. 【GDOI2015】 水题 tarjan缩点

    这一题,我当年只会$60$分做法..... 我们考虑对原图跑一波边双,然后缩成一个森林. 对于森林中的每一棵树,我们钦定一个根. 令$siz[x]$表示以$x$为根的子树中,在原图中点的个数. 令当前 ...