基于SpringBoot+Vue的个人账单财务管理系统的设计与实现

摘要

随着移动互联网的普及和人们消费习惯的改变，个人财务管理逐渐成为日常生活中的重要需求。传统的记账方式效率低下且难以统计分析。本文设计并实现了一款基于SpringBoot和Vue的个人账单收入支出管理系统。系统采用前后端分离架构，后端使用SpringBoot提供RESTful API，前端使用Vue.js构建用户界面，数据库采用MySQL。系统实现了用户管理、账单分类、收入支出记账、数据统计与可视化等功能，帮助用户便捷地管理个人财务，养成良好的理财习惯。

1. 引言

1.1 背景与意义

在当今社会，个人财务管理对于实现财务自由、提高生活质量具有重要意义。很多人仍然使用纸质记账或Excel表格，存在记录不便、统计困难、无法随时随地查看等问题。因此，开发一款轻量级、易用的个人账单管理App十分必要。

1.2 技术选型

后端采用SpringBoot框架，它简化了Spring应用的配置与部署，能快速构建独立的、生产级的应用；前端采用Vue.js，其响应式数据绑定和组件化开发模式，能提供流畅的用户体验；数据库使用MySQL，存储账单、用户等信息；前后端通过JSON进行数据交互。

2. 系统需求分析

2.1 功能需求

系统主要面向个人用户，需提供以下功能：

用户注册与登录
账单分类管理（如餐饮、交通、购物等）
收入与支出记录的添加、编辑、删除和查询
按时间、分类等维度统计收支
收支趋势图表展示
个人中心信息修改

2.2 非功能需求

界面友好，操作简便
数据安全，用户密码加密存储
响应快速，支持多端适应（PC/移动浏览器）
系统稳定，易于扩展

3. 系统设计

3.1 总体架构

系统采用前后端分离架构，分为表现层、业务逻辑层和数据持久层。前端Vue负责页面渲染和用户交互，通过Axios调用后端API；后端SpringBoot处理业务逻辑并访问数据库。

3.2 功能模块设计

用户模块：注册、登录、个人信息管理
账单模块：收入/支出记录的增删改查
分类模块：自定义收支分类
统计模块：按月/年统计收支，生成图表

3.3 数据库设计

主要数据表包括：

- 用户表（user）：存储用户基本信息
- 分类表（category）：存储账单分类
- 账单表（bill）：存储收支记录，关联用户和分类
字段设计略。

3.4 接口设计

遵循RESTful风格，如：

POST /api/user/register
POST /api/user/login
GET /api/bill/list
POST /api/bill/add
GET /api/stats/monthly

4. 系统实现

4.1 后端实现

基于SpringBoot搭建项目，集成MyBatis-Plus操作数据库，使用JWT进行身份认证。核心代码示例：
`java
@RestController
@RequestMapping("/api/bill")
public class BillController {
@Autowired
private BillService billService;

@PostMapping("/add")
public Result add(@RequestBody Bill bill, HttpServletRequest request) {
// 从token中获取用户id
Long userId = JwtUtil.getUserId(request);
bill.setUserId(userId);
billService.save(bill);
return Result.success();
}
}
`

4.2 前端实现

使用Vue CLI创建项目，结合Element UI组件库和ECharts图表库。关键代码：
`javascript
// 调用API获取账单列表
axios.get('/api/bill/list', { params: { userId: this.userId } })
.then(response => {
this.billList = response.data;
});
`
通过折线图、饼图展示收支统计，直观反映财务情况。