El código es demasiado feo, por lo que no se recomienda copiarlo. Puede echar un vistazo a la idea de implementación de RBAC, que es universal.
3YAdmin es una plantilla de sistema de gestión en segundo plano que se centra en formularios y control de permisos generales.
3YAdmin admite dos modos de diseño, modo Tab y modo normal. Los dos modos se determinan cuando se empaqueta y compila el paquete web. Al empaquetar un modo determinado, no se introducirá código redundante en el otro modo (es bastante complicado implementar el modo Tab en React).
3YAdmin implementa las páginas funcionales y operaciones principales del modelo de control de permisos RBAC.
3YAdmin puede generar formularios de consulta, formularios estáticos y formularios dinámicos analizando los datos JSON definidos.
Junto con lazy-mock, puede generar rápidamente funciones de adición, eliminación, modificación y consulta de front-end y back-end con datos simulados (generador de código simple).
demostración en línea:
Modo pestaña
Modo común
Cuenta de inicio de sesión:
admin 123 test 123456 website_admin 123456
Soporte real de datos backend
Iniciar sesión/Cerrar sesión
Reducir la barra de menú izquierda
Diseño responsivo
Carga bajo demanda
Navegación de etiquetas
pan rallado
Pantalla completa/salir de pantalla completa
Menú dinámico vs menú estático
Menús divididos por módulos
Control de permisos universales
Control de permisos a nivel de menú
Control de permisos a nivel de interfaz
Control de permisos a nivel de elemento
Efectos de carga configurables globalmente
Manejo de excepciones de red
módulo
Configuración del sistema
Gestión de permisos
Estructura organizacional
Gestión de usuarios
Gestión de menús
Gestión de funciones
gestión de roles
Gestión de permisos de roles
Gestión de usuarios de roles
Gestión de roles de usuario
Gestión del departamento
Gestión de posiciones
módulo del sistema
Registro de auditoría
Inicialización de datos
ejemplo
Formulario de búsqueda
Formulario común (formulario estático, después del primer análisis, el formulario no cambiará después de que cambien los datos JSON)
Formulario dinámico (formulario dinámico, el formulario se regenera después de que cambian los datos JSON)
Página de prueba de permiso
página de errores
Formulario JSON (generar dinámicamente un formulario analizando datos JSON)
git clone https://github.com/wjkang/3YAdmin.git
npm install
Instalar servicio simulado en segundo plano
git clone -b 3YAdmin https://github.com/wjkang/quasar-admin-server.git
npm install
npm start
npm start
npm run build
Copie y modifique directamente la configuración generada por reaccionar-react-app. Todos están en la carpeta reaccionar-scripts. Actualmente, antd está configurado para importarse bajo demanda, empaquetado en fragmentos y se utiliza AutoDllPlugin. Puedes modificarlo según tus propias necesidades.
La configuración del modo de empaquetado requiere modificar Process.env.REACT_APP_LAYOUT_MODE en los archivos builds.js y start.js.
Más adelante, habrá tutoriales de uso detallados e ideas de diseño de arquitectura front-end para el sistema de administración de back-end con separación de front-end y back-end (incluidos vue y reaccionar). Si te gusta, puedes darle una estrella.