从零实现一个React+Antd5.0后台管理系统-系统简介及设计

前言

前段时间学习了React【构建用户界面的库】以及redux【可预测的状态管理容器】，并且结合UI框架Antd5实践练习了一个后台管理系统的项目。期间踩了一些坑，也有一些感悟收获，故写文章记录下构建此系统的过程，也希望能给想用React实战的人带来一些帮助。

目录

本系列文章前后大致分为六个模块

1.项目初始化

2.路由配置

3.redux配置及axios封装

4.登录模块

5.个人中心模块

6.系统管理模块

项目设计

这次做的是一个通用的后台管理系统项目，主要实现的就是RBAC模型（role-based-access-control）的权限管理及通用的后台管理配置⌈用户管理、角色管理、用户管理⌋。

流程设计

首先。后台管理系统必不可少的是登录页。只有用户登录获取到用户的角色才能得到用户所拥有的权限，然后根据权限展示出对应的菜单和按钮。项目的流程图如下：

上面系统流程图中的用户与角色、角色与权限都是多对多的关系

依照如上的关系，初步设计出的系统功能结构如下所示（各位可以依次拓展更多模块）

技术栈

• 编程语言：javascript
• 前端框架：React 18
• 脚手架：官方脚手架create-react-app，@craco/craco（Create-React- App-Configuration-Override））：覆盖脚手架默认配置
• 路由管理：react-router-dom v6
• 状态管理：@reduxjs/toolkit：官方推荐redux开发工具集，react-redux：react官方推出的redux绑定库
• CSS扩展语言：sass
• Http请求工具：axios
• UI框架：Antd5
• 图表库：chart.js，react-chartjs-2：chart.js的react安装器

项目展示

项目UI框架使用Antd最新的5.0版本。通过此框架的组件，构建了登录页、后台管理页的界面。首页采用的图表库是chart.js及该库的React包装器react-chartjs-2

登录页面

首页

用户管理

角色管理

权限管理

项目所需准备

• node.js>=16
• 准备好后端node项目，并装好依赖 项目地址：后端node项目

写在最后

那么对项目设计及介绍就到这了，下篇我们将会开始进行项目的构建及初始化。