Spring Boot 3 + Vue 3 个人理财系统源码前后端分离实战

2026/7/27 10:07:02

一、项目简介

这是一套基于 Spring Boot 3 + Vue 3 + MySQL 技术栈开发的个人理财管理平台，采用前后端分离架构。系统支持普通用户与系统管理员双角色登录，提供收支记录管理、预算规划与预警、个人资产管理、多维度统计图表、系统配置与数据备份等完整功能，帮助用户全面掌握个人财务状况。

二、技术栈

技术	说明
后端框架	Spring Boot 3
ORM	MyBatis-Plus
权限认证	Spring Security + JWT
前端框架	Vue 3
路由管理	Vue Router
构建工具	Vite
UI 组件库	Element Plus
数据库	MySQL

三、功能模块

普通用户端

登录与注册：通过用户名密码登录系统，支持新用户注册，注册时填写用户名、密码、昵称、邮箱。
个人总览：查看当月收入总额、当月支出总额、当月结余、总资产金额，支持切换月份查看。
收支记录管理：新增、编辑、删除收支记录，每条记录包含类型（收入/支出）、金额、分类、日期、备注。
记录列表与筛选：分页查看收支记录列表，支持按类型（收入/支出）、分类、开始日期、结束日期筛选。
预算管理：按月为指定分类（或总预算）设置预算金额与预警百分比，查看已花费金额与花费占比。
预算预警提醒：自动检测超出预警百分比的预算项，高亮显示超支风险。
资产管理：添加、编辑、删除个人资产（如银行卡、现金、基金等），查看资产名称、类型、金额、备注。
资产总览：自动汇总所有资产的总金额，在总览页面实时展示。
分类统计：按月份查看支出/收入在各分类下的占比与金额，支持柱状图或饼图可视化。
月度趋势：查看近 12 个月每月收入与支出的趋势折线图，直观对比收支变化。
个人信息编辑：修改昵称、邮箱、手机号、性别、头像等个人资料。
修改密码：输入原密码与新密码，完成密码修改。

管理员端

系统总览：查看平台总用户数、总记录数、总收入、总支出、系统运行状态、数据库连接状态。
用户管理：分页查看所有普通用户列表，支持按用户名/昵称/手机号关键字搜索。
用户状态控制：一键启用或禁用用户账户，被禁用账户无法登录。
用户详情查看：查看单个用户的详细信息（不包含密码）。
分类管理：新增、编辑、删除收支分类，设置分类名称、类型（收入/支出）、图标、排序、启用状态。
分类列表：按类型排序展示所有分类，支持修改排序与启用/停用。
系统配置管理：新增、编辑系统配置项，配置项包含键、值、描述。
配置按 Key 更新：通过配置键直接更新配置值，用于动态调整系统参数。
数据备份：手动创建数据库备份，备份文件以 SQL 格式保存到服务器目录。
备份列表：分页查看历史备份记录，包括备份名称、大小、路径、操作人、创建时间。
个人信息编辑：管理员可修改自己的昵称、邮箱、手机号、性别、头像。
修改密码：管理员输入原密码与新密码完成密码修改。

四、项目总结

本项目技术亮点在于采用 Spring Boot 3 + Vue 3 最新稳定版本组合，结合 Spring Security + JWT 实现无状态权限认证，前后端完全分离便于独立部署与扩展。适用于个人理财场景的学习、课程设计或二次开发，代码结构清晰，文档完整，可直接在此基础上增加理财目标、账单导入、多币种支持等进阶功能。