1.使用的技术和工具
vite 4.3.2
react 18
react-router-dom 6.11.1
antd-mobile 5.30.0
less 4.1.3
axios 1.4.0
react-simple-captcha
阿里的iconfont,自己新建项目
vscode、Navicat、postman
2.前端项目
# 使用Vite创建项目,命名为ExpenseTracker
npm create vite@latest
cd ExpenseTracker
npm install
# 安装Ant Design Mobile组件库
npm install --save antd-mobile
# 安装React的路由库、less、axios
npm install react-router-dom less axios
# 安装验证码组件
$ npm install react-simple-captcha
# 安装dayjs
npm install dayjs
# 安装axios, cors
npm install axios cors
在vite.config.js中配置src路径的别名为@
iconfont新建项目,随着icon图片的变化,代码也会变,开发的时候需要注意。
3.后端项目
koa
koa-router
koa-cors
jsonwebtoken 9.0.0 具体用法到github搜jsonwebtoken
koa-jwt
nodemon 2.0.22
koa-parser
# 新建backend目录,初始化项目,添加app.js
npm init
# 安装依赖包
cd backend
npm install koa mysql koa-body
# 安装nodemon用于项目调试
npm install nodemon
npm install jsonwebtoken koa-jwt
# 静态资源管理
npm install koa-static -s
npm init
npm install express mongoose cor nodemon dotenv
安装mongodb,配置环境变量,找不到bin目录可能在C盘。
安装mongosh-MongoDB Shell,用于连接mongoDB,同样,配置环境变量
mongod --dbpath D:\MongoDB\Server\6.0\data\db
mongosh
测试。新建ExpenseTracker数据库。
![](https://i-blog.csdnimg.cn/blog_migrate/f2b3cc08f33c8d38b1f9f1a60d9f1139.png)
create-react-app frontend
把没用的删干净
npm install axios chart.js moment react-chartjs-2 react-datepicker styled-components
axios 基于promise的网络请求库,处理请求的
chart.js 数据可视化JS库,画图表的
moment 处理日期、时间的类库
react-chartjs-2 chartjs的react包装器
react-datepicker 时间日期选择器
styled-components 以组件的形式来声明样式
遇到的难点:
如何动态修改keyframes里面的值,使用styled_components组件。