The code is too ugly, so it is not recommended to copy it. You can take a look at the implementation idea of RBAC, which is universal.
3YAdmin is a background management system template focusing on general permission control and forms.
3YAdmin supports two layout modes, Tab mode and normal mode. The two modes are determined when webpack is packaged and compiled. When packaging a certain mode, redundant code in the other mode will not be introduced (it is quite painful to implement the Tab mode in React).
3YAdmin implements the core functional pages and operations of the RBAC permission control model.
3YAdmin can generate query forms, static forms, and dynamic forms by parsing the defined JSON data.
Paired with lazy-mock, you can quickly generate front-end and back-end addition, deletion, modification and query functions with mock data (simple code generator).
online demo:
Tab Mode
Common Mode
Login account:
admin 123 test 123456 website_admin 123456
Real backend data support
Login/Logout
Shrink the left menu bar
Responsive layout
Load on demand
Tag navigation
bread crumbs
Full screen/exit full screen
Dynamic menu vs static menu
Menus divided by modules
Universal permission control
Menu level permission control
Interface level permission control
Element-level permission control
Globally configurable loading effects
Network exception handling
module
System settings
Permission management
Organizational structure
User management
Menu management
Function management
role management
Role permission management
Role user management
User role management
Department management
Position management
system module
Audit log
Data initialization
example
Search Form
Common Form (static form, after parsing for the first time, the form will not change after the JSON data changes)
Dynamic Form (dynamic form, the form is regenerated after the JSON data changes)
Permission test page
error page
JSON form (dynamically generate a form by parsing JSON data)
git clone https://github.com/wjkang/3YAdmin.git
npm install
Install background mock service
git clone -b 3YAdmin https://github.com/wjkang/quasar-admin-server.git
npm install
npm start
npm start
npm run build
Directly copy and modify the configuration generated by react-react-app. They are all in the react-scripts folder. Currently, antd is imported on demand, packaged in chunks, and AutoDllPlugin is used. You can modify it according to your own needs.
The configuration of packaging mode requires modifying process.env.REACT_APP_LAYOUT_MODE in the builds.js and start.js files.
Later, there will be detailed usage tutorials and front-end architecture design ideas for the back-end management system with front-end and back-end separation (including vue and react). If you like it, you can give it a star.