从零实现一个React+Antd5.0后台管理系统

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

本文将用react的官方的create-react-app搭建项目基本的脚手架，再通过CSS预编译器sass处理公共的样式，并用craco库来覆盖原有create-react-app的默认配置

上文已经搭建并简化好了脚手架，本文我们用react-router-dom库和它提供的useRoutes hook来进行基本的路由配置。 基本路由配置 安装路由库 配置入口文件 index.js入口文件

完成路由的基础配置后，我们需要存储一些需要全局使用的状态（例如token、用户id等），所用到的状态管理库是redux。 Redux状态管理 安装 1.redux官方开发工具集 2.redux官

之前我们提到了token的全局状态存储，对于后台管理系统而言，业务信息接口带上请求头token是有必要的，故我们在此得对http请求工具库axios做一下封装。当然，首先需要安装。 Http请求工

Redux基本状态管理与Axios接口请求封装完成后，我们就可以进行Redux异步操作然后根据其结果修改全局状态。在本系统的实际应用是通过登录接口缓存token信息到Redux的state中，当

本系统在未存储`token`或`refreshToken`过期时会跳到登录界面，本文就来着手实现登录模块。关键点主要是 1.返回的`svg图形验证码`如何展示 2.记住密码的功能如何实现

一般而言，后台管理系统都会有一个统一的布局，其中可以包含头部、侧边栏和内容区域。在本系统中，头部包含左部操作区和用户信息区域，侧边栏展示菜单和系统标题区域，内容区域就是展示Layout路由的子路由

头部区域完成后，侧边栏区域主要就是展示菜单，之前我们存储了用户动态路由在全局状态中，我们在前面拼接上首页菜单然后还要转化为菜单项的格式。菜单项包含图标和标题，我们需要做对应的处理。内容区域根据当前

完成了Layout模块页面布局后，我们就可以着手内容页面的构建。对于后台管理系统而言，通用的模块可以分为以下几块 1.搜索查询模块 2.功能按钮模块 3.列表模块 我们对以上三个模块分开进行介绍

封装完页面通用模块后，现在我们正式进入页面的构建。搜索栏、按钮栏和表格就不再多做赘述了，都大同小异只是传入参数不同。我们主要来讲按钮的功能。可以分为以下两类 弹窗表单类：通用的新增、编辑，还有特定

页面框架和内容区域都构建完毕，接下来准备实现一些细节的东西。 多页签，在本系统中，当点击导航菜单时会切换路由，一般是在内容区域的Outlet路由视图中直接显示对应路由的页面组件，利用React