以下实践，需要一定的 $\color{red}{ES6基础，React和antd等的使用经验}$

一、需求背景

1.期望实现一套通用的后台管理系统

2.开发维护和学习成本低，且后期容易扩展其他模块

二、技术调研

1.next.js:简介如下，但参考资料较少，且前期需大量的时间学习

2.umi.js:简介如下，但是版本变动较快，且前期需要大量的时间学习，很多更新官网上参考资料较少

3.Ant Design Pro:在antd上的高度封装，高度封装意味着灵活度较低，且不同版本兼容性不好，版本升级等问题较多

总结：

想要快速的搭建，从目前来看，antd pro是较为合适的选择，但antd pro不同版本的升级，从源码可以看出，配置等的改动较大，很多时间，都是疲于奔命于版本的改动中，且每次都得脱层皮(也许是我技术能力太差)。

从业务和开发者的角度，怎样确保每次迭代升级时问题收敛，而且更重要的是，只会使用框架，不深入学习技术，那么最终会被淘汰(前期一时爽，后期框架一变就完全傻眼)。

基于此，故选择以React为中心，借鉴优秀开源框架，实现一套自己的后台框架，以此加深对技术的理解，而不是做一个肤浅的coder。

三、实践

1.安装node：请选择最新的LTS(long terms support,长期支持版本)

注意：

1）此次示例是在windows环境下安装node，只需选择自己要安装的路基，选择下一步即可

2）需要把node添加到系统环境中(不再赘述，前人之述备矣)

2.安装yarn或者npx等

安装好node后，默认已经安装了npm，当然可根据自己的选择，再安装yarn或者npx等(不再赘述，前人之述备矣)

3.安装和初始化react工程

yarn create react-app antd-demo //使用yarn创建一个antd-demo的工程

npx create-react-app antd-demo//使用npx创建一个antd-demo的工程

上述命令在你本地选择的目录下，创建了一个名为antd-demo的react工程，切换至工程目录下，yarn start即可启动前端工程。此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

注意：

1）在安装的过程中，可能会出现失败，一般来说，react和node的版本不匹配，则会安装失败；如下情况需升级node版本，或者降低react版本（我选择升级mode版本）。

yarn start //启动react工程

4.引入antd库

有很多开源和好用的react UI界面库，但考虑到后期维护和开发成本，故选用阿里的antd(当然也可以选择material UI等)。

yarn add antd@4.24.10 //本教程选用的是react18+antd4.x版本，antd5.x版本有问题，antd样式无法生效

5.安装TypeScript

antd的官网样例代码上，大多都使用TypeScript实现，当然也有用JavaScript实现的。作为一个合格的前端开发者，掌握TypeScript是必须的，原生的react工程虽然在VS code中可以支持TypeScript高亮，但是若无安装和配置TypeScript，使用yarn start启动项目时，会报错"Module not found: Error: Can't resolve './routes/root' in '*\src'"（此次文件为root.tsx）

yarn add typescript

注意：

1）安装后，重启项目，或者关闭VS CODE，重启后可以识别.tsx文件，并使用文件中定义的组件
2）但又会引入新的问题，就是无法使用.js或者.jsx文件，故需进行tsconfig.json的配置

yarn tsc --init //生成和package.json同级目录的tsconfig.json文件

"jsx":"preserve",
"allowJS":true,
"noImplicitAny":false,

6.添加Layout和实现前端路由

pytest逻辑.png

成熟的框架(umi、antd pro、next等)已经解决了如上通用的问题，但如果我们自己来实现，要如何解决如下问题：

登录/注册和Layout的分级和嵌套路由如何实现
权限认证流程如何实现
Layout下路由的样式和页面挂载渲染如何实现

6.1测试antd样式是否正确

在src/App.css里面，最上面的添加@import '~antd/dist/antd.css'，然后在App.js中加入如下

6.2react-router-dom实现前端路由

react本身不支持路由，需借助react-router-dom来实现前端界面的路由；yarn add react-router-dom安装路由模块；参考react-router-dom官网教程，我们做如下调整： pytest逻辑.png

6.3问题处理记录：

1.已安装antd，但使用antd中的图标时报错MenuUnfoldOutlined' is not defined，应该是缓存导致，重启即可解决(yarn start)
2.由于我们使用的是react18+antd4.x的版本，所以在开发时，请参考react18官网和antd4.x的官网，否则会导致样式或者其他一些异常

$\color{red}{src/routers/index.tsx}$ 中实现如下路由
注意：
1.上述routes的配置，是参考react-router-dom官网进行配置，官网上给出了前端开发中所需的路由配置实现，强烈建议参考，真的很贴心
2.从上述数据结构，可以清晰的看出，所有根目录下的路由都通用使用一个Layout，而login登录界面使用自定义的样式（当然，可以根据自己的业务需求实现不同的路由对应不同的界面）

$\color{red}{src/App.js}$ 中实现如下

注意：
1.使用RouterProvider包裹前端所有的page，则所有page的切换，都会遵循上述routes中的规则进行路由
2.分别在浏览器中输入上面的路由，则可以看到/home、/performance和/testcase路由的页面共享一个Layout，而登录则是自己的页面，不共享Layout；这样未授权的用户则返回登录页面，登录认证后的用户则返回到/home目录

$\color{red}{src/config/layout.tsx}$ 中实现Layout

$\color{red}{src/config/menu.js}$ 中实现Layout左侧中menu的点击和前端Page路由

yarn start启动工程，前端界面如下

注意：
1.可以看出，假设权限认证后，则默认跳转至home路由，该路由对应着开发者实现的家目录页面
2.点击左侧不同的菜单，浏览器相关的路由和主页面中的内容也在动态变更
3.6.11.2版本的react-router-dom中，实现的Outlet组件（参考react-route-dom官网中的教程），可以帮我们轻松实现，当路由变化时，路由对应的页面自动挂载到Layout的Content元素下（PS:当时还曾想过自己实现一个钩子函数，判定当前路由，然后动态地把Page渲染到Content组件中，感谢开源）

6.4权限认证业务流实现

实际业务场景中，我们期望不同的用户进行不同路由或者组件权限的管控；此次我们来讨论一个常见的权限认证路由问题，即向后端请求该登录用户的路由列表，拿到路由列表后，再进行前端界面路由的渲染。
实现以上的需求，我们需要回答，权限认证触发的时机是什么？拿到后端返回的路由列表后，如何反应到前端路由上，以及如何动态的调整Layout中菜单的列表？
查询了一圈的文档，最终还是在react-router-dom官网中找到了答案，route对象本身提供了一个loader的属性，供用户在路由渲染前实现自己的认证等动作。具体可结合一位前辈的博文。

React+Antd搭建xx后台管理系统（一）