Expense Tracker(记账本) - React+Koa

目录

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数据库。

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组件。