看过我上一篇文章的应该知道最近在写一个后台管理系统,大概的技术栈是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 数据就不会丢失了。
觉得不错的话,帮忙给项目点个star!万分感谢!