react admin template pro

React-Admin-Template-Pro

• 線上預覽
• 疑問和建議請在這提交

前言

在做這個系統前，我調查了一番，發現和React後台模板相關的項目有以下特點：技術棧老舊、項目不完整、文檔缺失、組件不靈活(寫死的居多)。同時也為了方便初級程式設計師找到一個合適的練手項目，方便全端工程師能夠利用該系統快速搭建項目，方便前端工作人員直接寫業務代碼避免重複性工作，出於這個目的寫了這個系統。

簡介

該系統是基於React Hooks和React-Router V6開發的後台管理系統模板，整個系統採用的技術棧都比較新並且以組件化的方式搭建而成，涵蓋了登录注销,主题切换,动态路由侧边栏,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由等功能，詳細功能請移步至此, 平均每個組件60行代碼量，方便食用。

如果遇到不想用的功能，可直接移除掉即可，各模組耦合度非常低是可插拔式的。

開源維護不易，如果真的幫助到你，真的很開心。點擊右上角的Star鼓勵一下作者吧~

功能

• 登入/登出
• 主題切換
• 動態側邊欄
  • 根據路由表配置自動生成
  • 支援多層嵌套路由
  • 自適應收縮側邊欄
  • 根據權限動態顯示
• 動態麵包屑
• Axios再封裝
  • 實例配置
  • 請求&回應攔截
  • 全域網路狀態碼處理
• 鑑權組件：未登入的使用者無法進入該元件
• 權限元件：沒有權限的角色無法進入該元件
• 懶加載組件
• less&sass適配
• 404頁面
• Proxy代理程式設定解決跨域
• 未來會增加的功能
  • 拖曳
  • 富文本
  • 次世代UI
  • 全域載入
  • 導入匯出Excel

技術堆疊

• React@18 Hooks基於React 最新版本，全面擁抱Hooks
• [email protected]只需設定路由表即可自動生成
• [email protected]國內最熱門的React-CSS庫
• [email protected]全域狀態管理，文法簡單，功能強大，完虐dva, 5分鐘輕鬆入手
• [email protected]前端必備的資料視覺化庫
• [email protected]基於Promise封裝的網路請求庫，99%的前端用了都說好
• Less&Sass提供更強大的文法

目錄結構

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

部分功能展示

主題切換

自適應收縮側邊欄

根據權限動態顯示側邊欄

當你以管理員的身份進入時，會顯示Dashboard下“分析頁”，但以普通用戶的身份時則不會顯示。

即使你知道該路由的路徑，想透過改變瀏覽器URL強行進入時，也會因為沒有權限而被阻擋,效果如下圖所示：

安裝&啟動

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