简介基于JavaSpringBootVueMySQL的财务管理系统是一个面向计算机科学与技术、软件工程专业学生的毕业设计/课程设计项目。项目前后端代码完整包含MySQL数据库脚本、论文文档和答辩PPT解压后配置好环境即可运行系统覆盖账务处理、报表生成、资产管理和预算控制等财务管理核心模块界面简洁、功能明确适合直接作为课设或毕设交付。压缩包共450个文件大小约17.66MB主要文件类型包括123个Java后端类、47个Vue前端组件、161个SVG图标以及SQL脚本、XML配置文件、docx论文、bat运行脚本和jar依赖等目录按工程结构组织便于查阅和二次开发。项目经过严格调试运行稳定性有保障目前已有44人学习使用。对希望快速搭建Web管理系统并理解前后端分离开发流程的学习者这套项目能提供清晰的实现示范和可直接复用的模板。1. 财务管理系统一份能直接跑的 SpringBoot Vue MySQL 毕设源码做毕设最怕的不是写代码而是拿到一份源码发现跑不起来。这份基于 SpringBoot Vue MySQL 的财务管理系统是我拆过为数不多结构完整、能从头跑到尾的毕设项目后端是 SpringBoot 2.x 的单体应用前端是 Vue2 ElementUI数据库脚本、论文、开题报告都齐全。它涵盖用户登录、部门管理、员工管理、收入与支出流水记账、报表统计等财务系统的核心闭环适合做课程设计、毕业设计参考也适合想快速上手前后端分离项目的人对照着改。我按部署顺序从环境搭建到代码拆解完整走了一遍把关键参数、启动顺序和坑都记录在这篇笔记里照着做基本能在一小时内把项目跑起来。2. 本地部署全流程JDK、Maven 与 MySQL 环境对齐的三个关键点拿到 zip 解压后第一步不是急着看代码而是把环境先对齐。这套项目基于 Java 8 和 Node 14 左右开发SpringBoot 版本在 2.3.x 附近MySQL 用的是 5.7 或 8.0 都行但驱动配置略有差异。我建议先检查本地 JDK 和 Maven 的版本避免因为环境不一致导致编译报错。2.1 后端启动application.yml 里的数据库参数怎么改后端代码用 IDEA 打开后先找到src/main/resources/application.yml数据库连接串、账号、密码都在这个文件里。常见默认配置大概是server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/finance?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.jdbc.Driver jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.finance.entity注意driver-class-name这里有个非常典型的坑如果你是 MySQL 8.x驱动类要改成com.mysql.cj.jdbc.Driver否则启动直接报ClassNotFoundException。我一般建议直接统一用com.mysql.cj.jdbc.Driver它在 MySQL 5.7 和 8.0 下都能正常工作。serverTimezoneAsia/Shanghai和GMT8这两处是为了解决数据库时间与本地时间相差 8 小时的问题。如果部署后日期对不上多半是这两处的时区没对齐。2.2 数据库初始化sql 脚本导入顺序与编码问题大部分毕设项目会附带一个db或sql目录里面放着数据库脚本。这份资源里是finance.sql导入前建议先手动创建数据库再导入脚本mysql -u root -p123456 create database finance default character set utf8mb4; use finance; source /your/path/finance.sql;用命令行导入时source后面最好用绝对路径否则容易找不到文件。导入完成后重点检查三张核心表sys_user登录用户、busi_income收入流水、busi_expenditure支出流水。如果这三张表存在且数据量不为空说明脚本没问题。如果导入报错大概率是 SQL 文件的编码和字符集问题用 Notepad 或 VS Code 把文件转成 UTF-8 再导入一次。2.3 前端启动与登录验证npm install 的版本陷阱和跨域处理前端目录是front或vue-finance这类名字用 VSCode 打开先执行依赖安装。这里最容易遇到的是版本冲突常见场景是项目里用了node-sass而你本地 Node 版本太高编译直接报错。npm install npm run serve如果node-sass报错最省事的方式是把它卸载换成sass然后重新安装。也可以直接安装项目锁定的版本npm install node-sass4.14.1这种版本对应 Node 14 比较稳。启动成功后浏览器访问http://localhost:8081端口取决于vue.config.js里的配置能看到登录页。如果页面能打开但登录接口报 404 或 504大概率是跨域代理没生效检查vue.config.jsmodule.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这里target必须和application.yml里的server.port一致。后端接口前缀如果是/api代理规则就不需要额外修改如果后端没加前缀需要调整proxy的 key 和后端接口路径保持一致。这套项目里的请求路径写法比较统一前端封装的 axios 实例把baseURL设置为/api后端 Controller 的 RequestMapping 里通常也带api所以代理一般不需要大改。3. 后端代码拆解SpringBoot 分层、登录鉴权与财务核心业务逻辑这一章讲后端实现。虽然看的是别人的项目但把它的分层结构、表设计和业务闭环理清楚直接决定你答辩时能不能讲明白以及二次开发时改哪里、不动哪里。3.1 Controller、Service、Mapper 三层架构与调用链路项目包结构是标准的 SpringBoot 三层架构com.example.finance ├── controller # 接收前端请求 ├── service # 业务逻辑 ├── mapper # MyBatis 数据访问接口 ├── entity # 实体类对应数据库表 ├── config # 配置类比如 CORS、拦截器 └── common # 通用返回结果、工具类以登录接口为例调用链路是LoginController - UserService - UserMapper - MySQL。Controller 层只做参数接收和结果封装Service 层处理密码校验和 token 生成Mapper 层对接数据库。这种分层方式最适合毕设答辩——老师问“业务逻辑写在哪”答案就很清晰。财务系统的核心业务是记账所以重点看收入和支出模块。收入表busi_income字段一般包含id, user_id, amount, income_type, remark, create_time支出表结构类似。查询模块通常会按时间范围和类型做筛选对应 Service 层里的 query 方法入参是一个封装好的查询对象。如果你打算扩展成带分类统计的版本要改动的地方就在 Service 层加聚合逻辑。3.2 登录鉴权实现基于拦截器的 Token 校验机制这套项目没有用 Spring Security 那种重量级框架而是用拦截器 Token 的方式实现登录控制。登录成功后后端会生成一个带用户信息的 Token 返回给前端前端存在 localStorage 里后续每个请求都在 Header 里带上这个 Token后端拦截器统一校验。public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(token); if (token null || .equals(token)) { response.setStatus(401); return false; } // 验证 token 有效期和用户信息 return true; } }Token 的生成逻辑一般在LoginService里用 UUID 加上用户 ID 拼接存入 Redis 或数据库但这份项目为了简化直接校验了 Token 是否存在和过期时间。改造成 JWT 是很好的二次开发方向但毕设答辩时这套自写拦截器反而更好解释因为每一步都是自己可控的。3.3 财务核心表设计流水、用户与报表统计的关系数据库表关联关系是财务系统的核心我把重点表的字段和用途整理成了一张表表名核心字段作用sys_userid, username, password, role, dept_id用户登录与角色控制busi_incomeid, user_id, amount, income_type, remark, create_time收入流水记录busi_expenditureid, user_id, amount, expend_type, remark, create_time支出流水记录sys_deptid, name, parent_id部门管理这三张业务表通过user_id关联报表页面统计的是busi_income和busi_expenditure按月份分组的金额汇总。理解了这张关联关系遇到“为什么某个用户登录看不到数据”这类问题查一下user_id是否匹配就能定位。4. 前端页面实现Vue2 组件通信、路由权限与报表渲染前端用的 Vue2 ElementUI整体交互属于传统的后台管理界面风格。对用 Vue3 习惯的开发者来说这套代码最大的价值在于路由拦截和 axios 封装这些思路在 Vue3 里同样适用。4.1 路由配置与登录拦截逻辑前端路由放在src/router/index.js里采用典型的静态路由 守卫控制。未登录时访问任何页面都会跳转到登录页核心代码如下router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else { if (!token) { next(/login) } else { next() } } })路由表里的菜单分为首页、财务管理、系统管理等模块每个模块对应一个 Vue 组件。如果你想加新页面只需在路由表里加一个对象同时创建对应的.vue文件菜单渲染是异步的把新路由加进去后侧边栏会自动生成。这种“静态路由 本地 token 判断”的模式虽然简单但对毕设项目来说足够可靠。4.2 axios 封装与请求拦截统一加 Token 和错误处理前端src/utils/request.js里封装了 axios 实例所有请求统一走这里核心逻辑是请求拦截器自动从 localStorage 取 Token 并加到 Headerimport axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[token] token } return config }) service.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) window.location.href /login } return res }, error { return Promise.reject(error) } ) export default service这里的code 401对应后端拦截器的未认证状态前后端约定是一致的。前端所有业务请求如login、getIncomeList都写在src/api/目录下每个文件对应一个业务模块调用方式统一为request.get(/income/list, { params })。4.3 报表统计与 ECharts 图表渲染首页和报表页用了 ECharts 做图表展示收入支出统计图的数据来源是后端聚合好的接口。前端在mounted钩子里发请求拿数据然后setOption渲染图表mounted() { this.fetchChartData() }, methods: { async fetchChartData() { const res await getFinanceReport() this.chart.setOption({ xAxis: { data: res.data.months }, series: [{ data: res.data.amounts }] }) } }需要注意的是 ECharts 实例要挂在ref上不要在methods里重复初始化否则切换路由再回来时图表容易空白。项目里已经处理好了二次开发时如果新增图表记得在beforeDestroy里调用dispose销毁实例否则控制台会报警告。5. 避坑记录毕设源码最常见的五个坑拆毕设源码最花时间的永远是排错。我把自己在部署这套财务管理系统时踩过的坑和对应的排查思路整理成清单每一条都是先看到现象、再定位原因、最后解决问题。5.1 启动报错 ClassNotFoundException现象后端启动时直接报java.lang.ClassNotFoundException: com.mysql.jdbc.Driver。原因项目当初写在 MySQL 5.7 时代驱动类路径是com.mysql.jdbc.Driver但本地装的是 MySQL 8.x对应的驱动包已经把类移到com.mysql.cj.jdbc.Driver。解决把application.yml里的驱动类改为com.mysql.cj.jdbc.Driver并在 pom.xml 里确认 mysql-connector-java 的版本不低于 8.0.11。改完重启项目问题消失。5.2 npm install 报错 node-sass 与 Node 版本不兼容现象前端执行npm install时报gyp ERR! build errornode-sass 编译失败。原因项目里锁定的是 node-sass 4.x而本地 Node 版本是 16 或更高node-sass 4.x 不支持高版本 Node。解决在package.json里把node-sass删掉换成sass然后删除node_modules和package-lock.json重新执行npm install。注意sass的 API 与node-sass基本兼容样式代码不需要改。5.3 登录接口 404前端页面白屏现象前端启动正常但登录按钮点击后控制台报 404接口路径找不到。原因vue.config.js里的代理规则是/api但后端的context-path配置不是空导致接口实际路径变成/finance/api/user/login代理没命中。解决先确认后端启动日志里的接口路径再调整代理的target和路径规则。如果后端没设 context-path直接让代理的 key 为/api即可如果设了代理规则也要把路径前缀带上。5.4 数据库导入报错 Unknown collation现象导入 sql 脚本时提示Unknown collation: utf8mb4_0900_ai_ci。原因脚本是在 MySQL 8.0 下导出的默认字符集排序规则是utf8mb4_0900_ai_ci而本地 MySQL 是 5.7不支持这个排序规则。解决用文本编辑器打开 sql 文件把所有utf8mb4_0900_ai_ci替换成utf8mb4_general_ci再重新导入脚本可以正常执行。5.5 页面能启动但登录报密码错误现象用项目文档里的默认账号admin/123456登录提示密码错误。原因数据库脚本里预置的密码可能不是明文而是经过 MD5 加密后的密文或者导入脚本时用户表数据没有完整写入。解决直接查数据库确认sys_user表里有没有数据。如果用户名存在但密码不确定可以在UserServiceImpl的登录逻辑里临时输出加密后的密码做比对或者执行一条 SQL 手动把密码改成已知的加密值。6. 二次开发与验证从单角色登录到多角色权限的后端改造思路项目跑通之后最值得做的操作不是换皮肤而是把原本简单的登录鉴权升级成多角色权限控制。原版sys_user表里就带role字段但代码里没有做角色差异化的拦截所有登录用户看到的是同一套菜单。趁着改动量不大我建议按下面的顺序做改造改造完顺便把整套项目重新验证一遍答辩时这就是一个很完整的亮点。6.1 角色与菜单控制根据 role 字段动态渲染路由先在sys_user表里确认角色字段的值比如1是管理员2是普通财务人员。后端登录接口在返回用户信息时把role带上{ code: 200, data: { token: xxxx, userInfo: { id: 1, username: admin, role: 1 } } }前端拿到role后存进 Vuex 或 localStorage在路由守卫里做动态过滤const adminRoutes [/dashboard, /finance/income, /finance/expenditure, /system/user] const userRoutes [/dashboard, /finance/income] router.beforeEach((to, from, next) { const token localStorage.getItem(token) const role Number(localStorage.getItem(role)) if (!token) { next(/login) } else { const routes role 1 ? adminRoutes : userRoutes if (!routes.includes(to.path)) { next(/dashboard) } else { next() } } })这套改法的思路是路由表里完整保留所有页面但通过角色判断哪些路径可访问不匹配就重定向回首页。比动态添加路由简单而且对后端代码改动为零适合快速交付。6.2 数据范围验证检查登录用户只能看到自己提交的流水多角色权限改造完成后要验证的不只是菜单红绿灯更重要的是数据隔离。原版的查询接口是查全量数据的如果财务人员 A 登录能看到 B 提交的流水那数据权限就名存实亡了。改造逻辑不复杂在 Service 层加一个数据过滤即可Override public ListIncome queryIncome(QueryParam param) { // 管理员查全量普通用户只查自己的数据 if (param.getRole() 1) { return incomeMapper.selectAll(param); } param.setUserId(param.getCurrentUserId()); return incomeMapper.selectByUserId(param); }对应的selectByUserIdSQL 里加一个where user_id #{userId}的条件。改完后用两个账号分别登录确认普通账号看不到管理员账号录入的数据这一步能在答辩时证明你理解数据权限的含义。6.3 完整验证清单按这个顺序走一遍防止翻车项目改完后我通常会强制自己按固定顺序重新跑一遍冒烟测试避免只顾着改代码忽略了基础功能。清单如下步骤操作预期结果启动后端执行mvn spring-boot:run端口 8080 启动成功无红色报错初始化数据库导入最新finance.sql无异常三张核心表有数据启动前端npm run serve端口 8081 启动成功管理员登录admin / 123456进入首页侧边栏显示全部菜单新增收入流水填写金额与类型保存列表出现新数据金额汇总正确报表查询切换月份查看统计图图表数据跟随筛选条件变化普通用户登录使用 role2 的账号看不到管理菜单收入数据仅自己可见打包验证前端npm run build后端口放入 static单端口可访问登录与查询正常最后一步打包验证值得单独提醒如果后续要把项目部署到服务器最省事的方式不是搭 Nginx而是把前端dist目录里的静态文件直接放到后端src/main/resources/static下启动后端就能通过http://localhost:8080访问全部功能。需要注意前端的baseURL如果是/api打包后不需要改如果vue.config.js里的代理只在开发环境生效后端处理好了统一前缀生产环境就不会有跨域问题。从那次以后我每次拿到新的毕设项目都会先把部署地址和账号密码记在项目根目录的README.md里再开始改代码免得改到一半忘了最初的启动配置。希望这篇拆解笔记能帮你在自己的机器上顺利跑起这套 SpringBoot Vue 财务管理系统少走几个我走过的弯路。本文还有配套的精品资源点击获取