All Projects → wjkang → 3yadmin

wjkang / 3yadmin

基于react全家桶+antd构建的专注通用权限控制与表单的后台管理系统模板

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to 3yadmin

Vue Quasar Admin
Vue 2.0 admin-dashboard based on Quasar-Framework
Stars: ✭ 516 (+35.43%)
Mutual labels:  axios, rbac, access-control, admin, admin-dashboard, admin-template
Ant Admin
基于 antd 的后台管理平台, 在 react 中玩转 D3.js
Stars: ✭ 455 (+19.42%)
Mutual labels:  antd, admin, admin-dashboard, react-admin
Ant Back
🚀 react后台,后台管理系统
Stars: ✭ 90 (-76.38%)
Mutual labels:  antd, admin, admin-template, react-admin
react-admin-nest
React和Ant Design和 Nest.js 和 Mysql 构建的后台通用管理系统。持续更新。
Stars: ✭ 123 (-67.72%)
Mutual labels:  admin, axios, antd, react-admin
Vue Admin Beautiful
🚀🚀🚀vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
Stars: ✭ 10,968 (+2778.74%)
Mutual labels:  axios, admin, admin-dashboard, admin-template
Vue Element Admin
🎉 A magical vue admin https://panjiachen.github.io/vue-element-admin
Stars: ✭ 73,044 (+19071.65%)
Mutual labels:  axios, admin, admin-dashboard, admin-template
D2 Admin
An elegant dashboard
Stars: ✭ 11,012 (+2790.29%)
Mutual labels:  axios, admin, admin-dashboard, admin-template
vue-admin-better
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Stars: ✭ 12,962 (+3302.1%)
Mutual labels:  admin, admin-dashboard, axios, admin-template
Ovine
Build entirety admin system ui blazing fast with json. (Looking for a front-end partner~ Please Contact me : )
Stars: ✭ 308 (-19.16%)
Mutual labels:  admin, admin-template, react-admin
Coreui Free Laravel Admin Template
CoreUI Free Laravel Bootstrap Admin Template
Stars: ✭ 353 (-7.35%)
Mutual labels:  admin, admin-dashboard, admin-template
Coreui Free React Admin Template
CoreUI React is a free React admin template based on Bootstrap 5
Stars: ✭ 3,573 (+837.8%)
Mutual labels:  admin, admin-dashboard, admin-template
Umi Admin
基于蚂蚁金服 umi 可插拔的企业级 react 应用框架开发的 Admin。最核心特点:对后端开发人员友好
Stars: ✭ 310 (-18.64%)
Mutual labels:  axios, antd, admin
nextjs-admin-template
Free admin dashboard template based on Next.Js with @paljs/ui component package
Stars: ✭ 266 (-30.18%)
Mutual labels:  admin, admin-dashboard, admin-template
react-admin-template
react + antd + vite/webpack5 后台管理系统模板
Stars: ✭ 73 (-80.84%)
Mutual labels:  admin, admin-dashboard, antd
lightence-admin
Free and easy-to-use admin template based on React 17+
Stars: ✭ 337 (-11.55%)
Mutual labels:  admin, admin-dashboard, admin-template
tntweb-admin
react admin management system template
Stars: ✭ 25 (-93.44%)
Mutual labels:  admin-dashboard, admin-template, react-admin
vue-element-admin-ts
vue-element-admin 的 typescript 版本
Stars: ✭ 101 (-73.49%)
Mutual labels:  admin, admin-dashboard, axios
plain-free-bootstrap-admin-template
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.
Stars: ✭ 141 (-62.99%)
Mutual labels:  admin, admin-dashboard, admin-template
Coreui Free Vue Admin Template
Open source admin template based on Bootstrap 5 and Vue 3
Stars: ✭ 2,951 (+674.54%)
Mutual labels:  admin, admin-dashboard, admin-template
Iview Admin
Vue 2.0 admin management system template based on iView
Stars: ✭ 15,963 (+4089.76%)
Mutual labels:  axios, admin, admin-template

3YAdmin

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

  3YAdmin支持两种布局模式,Tab模式和正常模式。两种模式是webpack打包编译时确定的,打包某个模式时不会引入另外一种模式下的多余代码(React 实现Tab模式比较蛋疼)。

  3YAdmin实现了RBAC权限控制模型的核心功能页面和操作。

  3YAdmin通过解析定义好的JSON数据,可以生成查询表单,静态表单,动态表单。

  搭配lazy-mock 可以快速生成前后端带mock数据的增删改查功能(简单的代码生成器)。

react antd axios redux react-router-dom MIT

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。

效果展示

image

image

image

image

image

image

image

image

image

image

image

image

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].