react admin template pro

React-Admin-Plantilla-Pro

• Vista previa en línea
• Por favor envíe preguntas y sugerencias aquí

Prefacio

Antes de construir este sistema, investigué un poco y descubrí que los proyectos relacionados con las plantillas de backend de React tienen las siguientes características: pilas de tecnología antiguas, proyectos incompletos, documentos faltantes y componentes inflexibles (la mayoría de ellos están codificados). Al mismo tiempo, este sistema se escribió para facilitar que los programadores junior encuentren un proyecto de práctica adecuado, que los ingenieros completos utilicen el sistema para crear proyectos rápidamente y que el personal de front-end escriba directamente código comercial para evitar trabajo repetitivo.

Introducción

Este sistema es una plantilla de sistema de administración de backend desarrollada en base a React Hooks y React-Router V6 . La pila de tecnología utilizada en todo el sistema es relativamente nueva y está construida en forma de componentes, que cubre登录注销,主题切换y动态路由侧边栏,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由y otras funciones. Haga clic aquí para obtener funciones detalladas. Cada componente tiene un promedio de 60 líneas de código, lo cual es conveniente para comer.

Si encuentra una función que no desea utilizar, simplemente puede eliminarla. El grado de acoplamiento de cada módulo es muy bajo y es conectable .

El mantenimiento de código abierto no es fácil. Si realmente te ayuda, estaré muy feliz. Haga clic en la estrella en la esquina superior derecha para animar al autor ~

Función

• Iniciar sesión/Cerrar sesión
• cambio de tema
• Barra lateral dinámica
  • Generado automáticamente según la configuración de la tabla de enrutamiento
  • Admite enrutamiento anidado de varios niveles
  • Barra lateral de reducción adaptativa
  • Se muestra dinámicamente según los permisos.
• migas de pan dinámicas
• Reempaquetado de Axios
  • Configuración de instancia
  • Interceptación de solicitudes y respuestas
  • Manejo de códigos de estado de red global
• Componente de autenticación: los usuarios que no han iniciado sesión no pueden ingresar a este componente
• Componente de permiso: los roles sin permiso no pueden ingresar a este componente
• Carga diferida de componentes
• adaptación menos y atrevida
• 404 página
• La configuración del proxy proxy resuelve el problema entre dominios
• Funciones que se agregarán en el futuro
  • arrastrar
  • texto enriquecido
  • interfaz de usuario de próxima generación
  • carga global
  • Importar y exportar Excel

pila de tecnología

• React@18 Hooks se basa en la última versión de React y abarca completamente Hooks
• [email protected] solo necesita configurar la tabla de enrutamiento para generarla automáticamente
• [email protected] La biblioteca React-CSS más popular en China
• [email protected] gestión de estado global, sintaxis simple, funciones potentes, dva perfecto, fácil de comenzar en 5 minutos
• Biblioteca de visualización de datos esenciales de front-end [email protected]
• [email protected] es una biblioteca de solicitudes de red basada en la encapsulación Promise. El 99% de los front-end han aceptado utilizarla.
• Less&Sass proporciona una sintaxis más potente

Estructura del directorio

 ├─ public                     # 静态资源
│   ├─ favicon.ico            # favicon图标
│   └─ index.html             # html模板
├─ src                        # 项目源代码
│   ├─ assets                 # 图片 字体等静态资源
│   ├─ components             # 全局公用组件
│   ├─ pages                  # 路由组件
│   ├─ service                # 所有网络请求
│   ├─ store                  # 全局状态管理
│   ├─ utils                  # 全局公用方法
|   ├─ App.css                # 入口页面样式
│   ├─ App.jsx                # 入口页面
|   ├─ index.css              # 全局样式文件
|   ├─ index.js               # 源码入口
|   ├─ route.js               # 路由表配置文件
|   └─ setupProxy.js          # 代理配置
└── package.json              # package.json

Visualización de funciones parciales

cambio de tema

Barra lateral de reducción adaptativa

Mostrar dinámicamente la barra lateral según los permisos

Cuando inicia sesión como administrador, se mostrará la "Página de análisis" en el Panel de control, pero no se mostrará cuando inicie sesión como usuario normal.

Incluso si conoce la ruta de la ruta, si desea forzar la entrada cambiando la URL del navegador, será bloqueado porque no tiene permiso. El efecto es el que se muestra en la siguiente figura:

Instalación y puesta en marcha

  克隆项目
  1. git clone https://github.com/MelodyFish/react-admin-template-pro.git
  进入目录
  2. cd react-admin-template-pro
  安装依赖
  3. npm install    ||   yarn install
  启动
  4. npm run start  ||   yarn start