前言
看过我上一篇文章的应该知道最近在写一个后台管理系统，大概的技术栈是react18+ts+v6+antd。
运用到的更多技术的看我下面的详细介绍，此项目是由B站千锋教育kerwin老师的产品，接口用的也是他们的。
但是本项目与kerwin老师写的版本和技术都不同，只是基于接口与功能来实现。
大家看看项目源码就一目了然了，如果完全不知道该如何下手建议可以去B站看看原版视频哦。
项目展示
码云项目地址：码云项目地址
觉得不错的话，帮忙点个star!万分感谢！
具体效果下载项目后浏览
技术分布
- react18
- typescript
- react-router-dom v6 --路由
- react-particles – 粒子效果
- react-redux redux --状态管理
- redux-persist --redux状态持久化
- redux-thunk --处理redux异步
- antd – 组件库
- axios --网络请求封装
- draft-js – 富文本编辑器
- echarts --可视化图表
- immutable – 状态储存优化
- nprogress – 页头加载进度效果
- styled-components – css in js
- moment --时间处理工具库
项目运行
项目需要配合本地服务器json-server来使用
db.json 在项目的public文件夹内！
下载json-server
npm install -g json-serve
注意下面指令运行的路径！当前db.json目录下运行！
json-server --watch .\db.json --port 5000
下载运行项目
git clone 项目地址
yarn
yarn start
学习收获
学习此项目你将收获
- react 熟练使用hook useImperativeHandle，useMemo等使用场景
- react-router v6 动态生成路由 路由懒加载
- redux 状态持久化与状态储存优化结合使用
- 辅助库的使用 粒子效果，可视化图表，富文本编辑器，页头动态加载等
- 了解并掌握后台管理开发流程及权限管理设置与实现
- react和ts 的项目综合使用等…
注意事项
当我们需要通过接口执行删除操作来调试的时候，会删除本地的json数据，这时候的正确做法是: 先打开db.json然后再通过接口发送，确认删除成功后回到db.json 执行撤销操作ctrl+z 数据就不会丢失了。
另外需要注意的是把db.json移出来，不要和项目放一起，因为更新或者删除操作改变了文件内容会引起webpack重新打包导致项目重新运行！！！
End
觉得不错的话，帮忙给项目点个star!万分感谢！
扫描二维码关注公众号，回复：
14728286 查看本文章
