react admin template pro

React-Admin-Template-Pro

• Aperçu en ligne
• Veuillez soumettre vos questions et suggestions ici

Préface

Avant de construire ce système, j'ai fait quelques recherches et découvert que les projets liés aux modèles backend React présentent les caractéristiques suivantes : anciennes piles technologiques, projets incomplets, documents manquants et composants rigides (la plupart d'entre eux sont codés en dur). Dans le même temps, ce système a été écrit pour permettre aux programmeurs débutants de trouver plus facilement un projet pratique approprié, aux ingénieurs full-stack d'utiliser le système pour créer rapidement des projets et au personnel front-end d'écrire directement du code métier pour éviter travail répétitif.

Introduction

Ce système est un modèle de système de gestion backend développé sur la base de React Hooks et React-Router V6 . La pile technologique utilisée dans l'ensemble du système est relativement nouvelle et est construite de manière modulaire, couvrant登录注销,主题切换et动态路由侧边栏,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由et autres fonctions. Veuillez cliquer ici pour les fonctions détaillées. Chaque composant a en moyenne 60 lignes de code, ce qui est pratique pour la consommation.

Si vous rencontrez une fonction que vous ne souhaitez pas utiliser, vous pouvez simplement la supprimer. Le degré de couplage de chaque module est très faible et il est enfichable .

La maintenance open source n'est pas facile. Si cela vous aide vraiment, j'en serai vraiment heureux. Cliquez sur l'étoile dans le coin supérieur droit pour encourager l'auteur~

Fonction

• Connexion/Déconnexion
• changement de thème
• Barre latérale dynamique
  • Généré automatiquement en fonction de la configuration de la table de routage
  • Prise en charge du routage imbriqué à plusieurs niveaux
  • Barre latérale de réduction adaptative
  • Affiché dynamiquement en fonction des autorisations
• fil d'Ariane dynamique
• Reconditionnement Axios
  • Configuration des instances
  • Interception des demandes et des réponses
  • Gestion du code d'état du réseau mondial
• Composant d'authentification : les utilisateurs qui ne sont pas connectés ne peuvent pas accéder à ce composant
• Composant d'autorisation : les rôles sans autorisation ne peuvent pas accéder à ce composant
• Chargement paresseux des composants
• adaptation moins&sass
• 404 pages
• La configuration du proxy proxy résout le problème inter-domaines
• Fonctionnalités à ajouter à l'avenir
  • traîner
  • texte enrichi
  • interface utilisateur nouvelle génération
  • chargement global
  • Importer et exporter Excel

pile technologique

• React@18 Hooks est basé sur la dernière version de React, intégrant pleinement Hooks
• [email protected] n'a besoin que de configurer la table de routage pour la générer automatiquement
• [email protected] La bibliothèque React-CSS la plus populaire en Chine
• Gestion globale de l'état [email protected] , syntaxe simple, fonctions puissantes, DVA complète, démarrage facile en 5 minutes
• Bibliothèque de visualisation de données essentielles frontales [email protected]
• [email protected] est une bibliothèque de requêtes réseau basée sur l'encapsulation Promise. 99 % des frontaux ont accepté de l'utiliser.
• Less&Sass fournit une syntaxe plus puissante

Structure du répertoire

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

Affichage partiel des fonctions

changement de thème

Barre latérale de réduction adaptative

Afficher dynamiquement la barre latérale en fonction des autorisations

Lorsque vous vous connectez en tant qu'administrateur, la « Page d'analyse » sous le tableau de bord s'affichera, mais elle ne s'affichera pas lorsque vous vous connecterez en tant qu'utilisateur ordinaire.

Même si vous connaissez le chemin de l'itinéraire, si vous souhaitez forcer l'entrée en modifiant l'URL du navigateur, vous serez bloqué car vous n'avez pas l'autorisation. L'effet est comme le montre la figure ci-dessous :

Installation et démarrage

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