react admin template pro

React-Admin-Template-Pro

• Visualização on-line
• Envie perguntas e sugestões aqui

Prefácio

Antes de construir este sistema, fiz algumas pesquisas e descobri que os projetos relacionados aos modelos de backend React têm as seguintes características: pilhas de tecnologia antigas, projetos incompletos, documentos ausentes e componentes inflexíveis (a maioria deles são codificados). Ao mesmo tempo, este sistema foi escrito para tornar mais fácil para os programadores juniores encontrarem um projeto prático adequado, para os engenheiros full-stack usarem o sistema para construir projetos rapidamente e para a equipe front-end escrever diretamente o código de negócios para evitar trabalho repetitivo.

Introdução

Este sistema é um modelo de sistema de gerenciamento de back-end desenvolvido com base em React Hooks e React-Router V6 . A pilha de tecnologia usada em todo o sistema é relativamente nova e é construída de forma componenteizada, cobrindo登录注销,主题切换,动态路由侧边栏. ,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由e outras funções. Cada componente tem uma média de 60 linhas de código, o que é conveniente para consumo.

Se você encontrar uma função que não deseja usar, basta removê-la. O grau de acoplamento de cada módulo é muito baixo e pode ser conectado .

A manutenção de código aberto não é fácil. Se realmente te ajudar, ficarei muito feliz. Clique na estrela no canto superior direito para incentivar o autor ~

Função

• Login/Logout
• mudança de tema
• Barra lateral dinâmica
  • Gerado automaticamente com base na configuração da tabela de roteamento
  • Suporta roteamento aninhado multinível
  • Barra lateral de redução adaptativa
  • Exibido dinamicamente com base em permissões
• migalhas de pão dinâmicas
• Reembalagem do Axios
  • Configuração da instância
  • Interceptação de solicitação e resposta
  • Manipulação de código de status de rede global
• Componente de autenticação: usuários que não estão logados não podem entrar neste componente
• Componente de permissão: funções sem permissão não podem entrar neste componente
• Carregamento lento de componentes
• adaptação menos e atrevida
• página 404
• A configuração do proxy proxy resolve o problema de vários domínios
• Recursos a serem adicionados no futuro
  • arrastar
  • texto rico
  • UI de próxima geração
  • carregamento global
  • Importar e exportar Excel

pilha de tecnologia

• React@18 Hooks é baseado na versão mais recente do React, abraçando totalmente Hooks
• [email protected] só precisa configurar a tabela de roteamento para gerá-la automaticamente
• [email protected] A biblioteca React-CSS mais popular na China
• Gerenciamento de estado global [email protected] , sintaxe simples, funções poderosas, DVA completo, fácil de começar em 5 minutos
• Biblioteca de visualização de dados essencial de front-end [email protected]
• [email protected] é uma biblioteca de solicitação de rede baseada no encapsulamento Promise, 99% dos front-ends concordaram em usá-la.
• Less&Sass fornece sintaxe mais poderosa

Estrutura de diretório

 ├─ 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

Exibição de função parcial

mudança de tema

Barra lateral de redução adaptativa

Exibir barra lateral dinamicamente com base nas permissões

Ao fazer login como administrador, a "Página de análise" no Painel será exibida, mas não será exibida quando você fizer login como usuário comum.

Mesmo que você saiba o caminho da rota, se quiser forçar a entrada alterando a URL do navegador, você será bloqueado porque não tem permissão. O efeito é mostrado na figura abaixo:

Instalação e inicialização

  克隆项目
  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