react admin template pro

React-Admin-Template-Pro

• Online preview
• Please submit questions and suggestions here

Preface

Before building this system, I did some research and found that projects related to React backend templates have the following characteristics: old technology stacks, incomplete projects, missing documents, and inflexible components (most of them are hard-coded). At the same time, this system was written to make it easier for junior programmers to find a suitable practice project, for full-stack engineers to use the system to quickly build projects, and for front-end staff to directly write business code to avoid repetitive work.

Introduction

This system is a backend management system template developed based on React Hooks and React-Router V6 . The technology stack used in the entire system is relatively new and is built in a componentized manner, covering登录注销,主题切换,动态路由侧边栏,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由and other functions. Please click here for detailed functions. Each component has an average of 60 lines of code, which is convenient for consumption.

If you encounter a function you don't want to use, you can just remove it. The coupling degree of each module is very low and it is pluggable .

Open source maintenance is not easy. If it really helps you, I will be really happy. Click the Star in the upper right corner to encourage the author~

Function

• Login/Logout
• theme switching
• Dynamic sidebar
  • Automatically generated based on routing table configuration
  • Support multi-level nested routing
  • Adaptive shrinking sidebar
  • Dynamically displayed based on permissions
• dynamic breadcrumbs
• Axios repackaging
  • Instance configuration
  • Request & response interception
  • Global network status code handling
• Authentication component: Users who are not logged in cannot enter this component
• Permission component: Roles without permission cannot enter this component
• Lazy loading of components
• less&sass adaptation
• 404 page
• Proxy proxy configuration solves cross-domain problem
• Features to be added in the future
  • drag
  • rich text
  • next generation UI
  • global loading
  • Import and export Excel

technology stack

• React@18 Hooks is based on the latest version of React, fully embracing Hooks
• [email protected] only needs to configure the routing table to automatically generate it
• [email protected] The most popular React-CSS library in China
• [email protected] global state management, simple syntax, powerful functions, complete DVA, easy to get started in 5 minutes
• [email protected] front-end essential data visualization library
• [email protected] is a network request library based on Promise encapsulation. 99% of front-ends have agreed to use it.
• Less&Sass provides more powerful syntax

Directory structure

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

Partial function display

theme switching

Adaptive shrinking sidebar

Dynamically display sidebar based on permissions

When you log in as an administrator, the "Analysis Page" under the Dashboard will be displayed, but it will not be displayed when you log in as an ordinary user.

Even if you know the path of the route, if you want to force entry by changing the browser URL, you will be blocked because you do not have permission. The effect is as shown in the figure below:

Installation & Startup

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