react admin template pro

React-Admin-Template-Pro

• Online-Vorschau
• Bitte stellen Sie hier Fragen und Anregungen

Vorwort

Bevor ich dieses System erstellt habe, habe ich einige Nachforschungen angestellt und festgestellt, dass Projekte im Zusammenhang mit React-Backend-Vorlagen die folgenden Merkmale aufweisen: alte Technologie-Stacks, unvollständige Projekte, fehlende Dokumente und unflexible Komponenten (die meisten davon sind fest codiert). Gleichzeitig wurde dieses System geschrieben, um jungen Programmierern die Suche nach einem geeigneten Übungsprojekt zu erleichtern, Full-Stack-Ingenieuren die Verwendung des Systems zum schnellen Erstellen von Projekten zu erleichtern und Front-End-Mitarbeitern das direkte Schreiben von Geschäftscode zu erleichtern, um dies zu vermeiden repetitive Arbeit.

Einführung

Bei diesem System handelt es sich um eine Backend-Management-Systemvorlage, die auf React Hooks und React-Router V6 basiert. Der im gesamten System verwendete Technologie-Stack ist relativ neu und komponentenorientiert aufgebaut und umfasst登录注销,主题切换und动态路由侧边栏,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由und andere Funktionen. Klicken Sie hier für detaillierte Funktionen. Jede Komponente verfügt über durchschnittlich 60 Codezeilen, was für den Verbrauch praktisch ist.

Wenn Sie auf eine Funktion stoßen, die Sie nicht verwenden möchten, können Sie sie einfach entfernen. Der Kopplungsgrad jedes Moduls ist sehr gering und es ist steckbar .

Die Open-Source-Wartung ist nicht einfach. Wenn es Ihnen wirklich hilft, freue ich mich sehr. Klicken Sie auf den Stern in der oberen rechten Ecke, um den Autor zu ermutigen~

Funktion

• Anmelden/Abmelden
• Themenwechsel
• Dynamische Seitenleiste
  • Wird automatisch basierend auf der Routing-Tabellenkonfiguration generiert
  • Unterstützt mehrstufiges verschachteltes Routing
  • Adaptiv schrumpfende Seitenleiste
  • Dynamisch basierend auf Berechtigungen angezeigt
• dynamische Semmelbrösel
• Axios wird neu verpackt
  • Instanzkonfiguration
  • Abfangen von Anfragen und Antworten
  • Handhabung globaler Netzwerkstatuscodes
• Authentifizierungskomponente: Nicht angemeldete Benutzer können diese Komponente nicht betreten
• Berechtigungskomponente: Rollen ohne Berechtigung können diese Komponente nicht betreten
• Verzögertes Laden von Komponenten
• Less&Sass-Anpassung
• 404 Seite
• Die Proxy-Proxy-Konfiguration löst domänenübergreifende Probleme
• Funktionen, die in Zukunft hinzugefügt werden sollen
  • ziehen
  • Rich-Text
  • Benutzeroberfläche der nächsten Generation
  • globale Belastung
  • Excel importieren und exportieren

Technologie-Stack

• React@18 Hooks basiert auf der neuesten Version von React und umfasst Hooks vollständig
• [email protected] muss nur die Routing-Tabelle konfigurieren, um sie automatisch zu generieren
• [email protected] Die beliebteste React-CSS-Bibliothek in China
• [email protected] globale Statusverwaltung, einfache Syntax, leistungsstarke Funktionen, vollständige DVA, einfacher Einstieg in 5 Minuten
• [email protected] Front-End-Bibliothek zur Visualisierung wichtiger Daten
• [email protected] ist eine Netzwerkanforderungsbibliothek, die auf der Promise-Kapselung basiert. 99 % der Frontends haben der Verwendung zugestimmt.
• Less&Sass bietet eine leistungsfähigere Syntax

Verzeichnisstruktur

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

Teilfunktionsanzeige

Themenwechsel

Adaptiv schrumpfende Seitenleiste

Seitenleiste basierend auf Berechtigungen dynamisch anzeigen

Wenn Sie sich als Administrator anmelden, wird die „Analyseseite“ unter dem Dashboard angezeigt. Wenn Sie sich als normaler Benutzer anmelden, wird sie jedoch nicht angezeigt.

Selbst wenn Sie den Pfad der Route kennen, werden Sie blockiert, wenn Sie die Eingabe durch Ändern der Browser-URL erzwingen möchten. Der Effekt ist wie in der folgenden Abbildung dargestellt:

Installation und Inbetriebnahme

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