egg.js + react + zarm ui + vite2.0 全栈项目实战：从 0 到 1 实现记账本小册学习笔记合集（完结）

Posted 2022-08-16 凯小默

说明

说明：这些文章只是笔者学习记录的笔记，仅供参考，切勿商用。请支持正版的小册【Node + React 实战：从 0 到 1 实现记账本】。

该项目对我提升很大，在此非常感谢作者。

该项目涉及的技术栈：React，ZarmUI，Vite2.0，Egg.js，mysql等，想提升自己这方面能力的可以去支持掘金正版的小册。

个人学习笔记的地址：

• 前端包 github 地址：https://github.com/kaimo313/kaimo-cost-h5
• 后端包 github 地址：https://github.com/kaimo313/kaimo-cost-server

文档地址：

• egg.js 官方文档
• react
• ZarmUI
• Vite 官方中文文档

正版的项目地址：

• 「掘掘记账本」在线预览： cost.chennick.wang，（测试账号：admin，测试密码：111111。也可以自行注册使用。）
• 「掘掘记账本」前端代码开源地址：https://github.com/Nick930826/juejue-vite-h5
• 「掘掘记账本」后端代码开源地址：https://github.com/Nick930826/jue-diary-server

笔记目录

下面这些只是我做的笔记，从遇到的问题记录，到其中部分东西的拓展稍有不同，有错误在所难免，欢迎指正批评，仅供参考。

报错篇

1. 执行 mysqld --install 报错：由于找不到VCRUNTIME140 1.dII, 无法继续执行代码
2. 执行 mysqld --install 报错：Install Remove of the Service Denied
3. 执行 mysqld --install 报错：The service already exists
4. egg.js 项目初始化报错 ConnectionTimeoutError: Connect timeout for 5000ms
5. 启动停止mysql时报：服务正在启动或停止中，请稍候片刻后再试一次。
6. ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
7. git push -u origin main 报错 remote: Invalid username or password.
8. git 报错：Support for password authentication was removed. Please use a personal access token instead.
9. Incorrect table definition； there can be only one auto column and it must be defined as a key
10. eggjs 项目报错 Cookie need secret key to sign and encrypt. Please set config.keys first
11. eggjs 里链接 mysql 返回数据有 RowDataPacket 应该怎么处理？
12. 执行 mysqld --install 报错：由于找不到 MSVCP120.dII, 无法继续执行代码?
13. error: Two output files share the same path but have different contents: node_modules.vite…xxx.js

后端篇

1. 怎么在 window 系统里本地安装 mysql
2. Egg.js 项目初始化介绍
3. egg 项目里编写基础的 GET 接口：使用 GET 请求参数获取
4. egg 项目里编写基础的 POST 接口：使用 POST 请求参数获取
5. egg 项目里从 Service 内获取模拟数据
6. Egg.js 项目中怎么使用前端模板
7. 怎么使用可视化数据库工具 DBeaver 连接本地数据库？
8. 怎么使用可视化数据库工具 DBeaver 新建数据库表？
9. Egg 项目怎么连接 MySQL 实现增删改查接口？
10. 设计数据库表：用于 eggjs 实现记账本
11. 用户鉴权、JWT（JSON Web Token）是什么？
12. eggjs 怎么实现用户注册功能？
13. eggjs 怎么使用 egg-jwt 进行用户鉴权实现登录功能？
14. eggjs 怎么使用 egg-jwt 实现 token 解析？
15. eggjs 怎么使用 egg-jwt 实现登录验证中间件？
16. eggjs 怎么实现获取用户信息接口？
17. eggjs 怎么实现更新用户信息接口去更新个性签名？
18. eggjs 怎么实现上传图片（头像）接口功能？
19. eggjs 怎么实现更新用户信息接口去更新上传头像信息？
20. eggjs 怎么实现返回 base64 图片的接口给前端回显头像？
21. eggjs 怎么实现新增账单接口？
22. 怎么使用可视化数据库工具 DBeaver 在账单类型 type 表里添加数据？
23. eggjs 里链接 mysql 返回数据有 RowDataPacket 应该怎么处理？
24. eggjs 查询 mysql 返回年月日里包含YYYY-MM-DDT16:00:00.000Z怎么处理？
25. eggjs 怎么实现获取账单列表接口并且实现列表数据分页查询功能？
26. eggjs 怎么实现账单详情页的获取详情接口？
27. eggjs 怎么实现账单详情页的编辑接口？
28. eggjs 怎么实现账单详情页的删除接口？
29. eggjs 怎么实现月度账单统计接口？
30. eggjs 怎么实现获取账单类型字典接口？
31. eggjs + crypto-js 的 DES 加密实现重置密码接口？
32. eggjs 开发完接口后怎么使用 apifox 生成在线文档？

前端篇

1. 【浅入浅出】现代前端框架单页面
2. 【浅入浅出】前端单页面路由实现原理
3. 【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具
4. React Hooks 快速入门：从一个数据请求开始
5. Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境
6. react + zarm + react-captcha-code + classnames 实现登录注册页面
7. react + zarm 实现底部导航栏
8. react + zarm 实现账单列表展示页
9. react + zarm 实现账单列表类型以及时间条件弹窗封装
10. react + zarm 实现新增账单弹窗封装
11. react + zarm 实现账单详情页以及编辑删除功能
12. react + zarm + antV F2 实现账单数据统计饼图效果
13. react + zarm + rc-form + crypto-js 实现个人中心页面，头像上传，密码重置，登录退出功能

页面效果

大致的页面效果如下：更多请参考「掘掘记账本」在线预览： cost.chennick.wang，（测试账号：admin，测试密码：111111。也可以自行注册使用。）

可以直接复制下面网址，新开浏览器页签打开，然后进入f12，手机模式预览即可

http://cost.chennick.wang

登录注册

账单页面

统计页面

详情页

账户页