Spring Boot + Vue 个人理财记账系统 | 运行截图+源码下载

Java 原创记录

Yuan 2026-06-23 1001 字 约 3 分钟 0 评论

#ElementUI #MyBatis #MySQL #SpringBoot

这次运行的是一个前后端分离的个人理财记账系统。系统主要用于记录日常消费账单，支持消费列表、添加记录、筛选查询、导入导出、分类统计、消费对比和平账计算等功能。

项目信息

• 后端：Spring Boot、Spring MVC、MyBatis、MySQL、Flyway
• 前端：Vue2、Element UI、ECharts、Axios
• 后端端口：8088
• 前端端口：8080
• 测试账号：admin / 123456

原仓库 README 写了“源码+数据库”，但实际仓库没有提供 SQL 文件。本次运行时根据 MyBatis Mapper 和实体字段补了一个 Flyway 初始化脚本，启动后会自动创建 user、home 两张表，并写入测试账号和演示账单数据。

登录页

主界面与统计图

主界面包含消费饼状图、消费柱状图、消费对比图和平账结果，同时下方展示账单列表。演示数据包含餐饮、交通、饮品、学习、娱乐、购物、运动等分类。

添加消费记录

添加弹窗可以录入消费名称、金额、类别、消费者、日期、是否已消费和消费说明。

筛选查询

系统支持按关键词筛选账单，并联动统计图和列表数据。

运行记录

后端配置数据库后，先创建数据库 mycount，再启动 Spring Boot。Flyway 会自动执行 server/src/main/resources/db/V1__init.sql。

mysql -uroot -p -e "CREATE DATABASE IF NOT EXISTS mycount DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"

cd server
mvn spring-boot:run

前端是比较老的 Vue2 + webpack3 项目，当前高版本 Node 会遇到旧依赖兼容问题。本次使用 Node 20 并设置 OpenSSL 兼容参数启动。

cd webapp
npm install --legacy-peer-deps --package-lock=false --registry=https://registry.npmjs.org
export NODE_OPTIONS=--openssl-legacy-provider
npm run dev

源码下载

点击下载 Spring Boot + Vue 个人理财记账系统源码

压缩包已排除 node_modules、target、.git 等运行生成目录，保留源码、补充的初始化 SQL、前端页面修复文件和运行说明。