Daily Cost 介绍

Daily Cost是我为了学习前后端开发的产出成果。从应用名可以看出是一个记账本应用，主要参考了鲨鱼记账，我从中挑选了一部分核心功能来自己开发实现。

1. 功能模块

作为一个正经的记账本应用，肯定要能满足用户的基本记账需求，因此Daily Cost 实现了以下功能：

1. 用户注册和登录
2. 用户可管理自己的记账类别
3. 用户可新增、查看、编辑、删除一笔账单
4. 用户可按月、按年查看总的收支数据

说明：由于我水平和精力有限，部分功能未完全开发完成，具体如下所示。灰掉的部分功能后端接口已开发完成，但前端UI未完全开发完成，后续开发完成后会更新下图，大家也可在记账本-Daily Cost中查看最新进度。

2. 技术栈

2.1 前端主要依赖模块

• react(前端框架，daily cost使用create-react-app创建)
• react-router-dom(路由控制)
• antd(蚂蚁金服开源的 react ui 组件框架)
• antd-mobile(antd的移动端组件框架)
• axios(http请求模块)

2.2 后端

• Spring Boot 2
• Spring Security(身份验证和访问控制)
• maven(项目构建)
• Swagger 3(接口文档)
• Flyway(数据库版本控制工具)
• MySQL(数据库)
• Nginx(解决请求跨域问题)

3. 安装和运行

3.1 前端

1. 下载或克隆项目前端源码

2. npm install 安装依赖

3. npm start 启动项目

3.2 后端

1. 下载并安装Java、MySQL、Intellij IDEA
2. 下载或克隆项目后端源码
3. 在IDEA中打开项目，等待maven下载所有依赖
4. 在application.properties中修改MySQL数据库配置（连接url、用户名、密码）
5. ./mvnw spring-boot:run构建并运行daily cost应用
6. 应用在8081端口运行成功：
   1. 可在浏览器中输入http://localhost:8081/swagger-ui/index.html?configUrl=/v3/api-docs/swagger-config#/查看和调试接口
   2. 检查MySQL数据库，数据表及数据初始化成功

3.3 Nginx

1. 安装Nginx

2. 修改Nginx的配置文件nginx.conf，Mac OS该文件目录为/usr/local/etc/nginx/nginx.conf

   server {
   	listen       8080;
   	server_name  localhost;
   
   	# 以下为需要新增的内容
   	location /api/ {
   		proxy_pass http://127.0.0.1:8081/;
   	}
   
   	location / {
   		proxy_pass http://127.0.0.1:3000/;
   	}
   	# 新增结束
   	
   	# 原本的内容无需更改
   
   }
   

3. nginx -s reload重新启动Nginx

3.4 访问页面

​ 在浏览器中输入http://localhost:8080/，能够看到以下页面则证明运行成功。下图中我打开了移动端模式，并将大小设为375✖️ 812的最佳使用大小。