多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

基于SpringBoot+Vue+MySQL的大学生智能消费记账系统毕设源码实战指南

基于SpringBoot+Vue+MySQL的大学生智能消费记账系统毕设源码实战指南 简介这份资源是面向高校学生与Java Web开发初学者的完整毕业设计项目包主题为大学生智能消费记账系统采用SpringBoot后端、Vue前端与MySQL数据库构建可用于毕设、课程设计或期末大作业下载后无需修改即可运行。压缩包共374个文件约15.51MB其中85个java文件承载后端业务逻辑46个vue与17个js文件构成前端页面与交互另有161个svg、15个png等静态资源用于界面美化并附sql数据库脚本、doc论文文档及bat启动脚本方便快速部署与查阅。项目涵盖消费记账、账户管理、统计分析等模块配合Navicat与Maven即可完成数据库维护和依赖构建能帮助读者理解前后端分离开发全流程。目前已有72人学习关注适合需要完整参考实现与论文素材的开发者。1. 从一份毕设源码说起这套记账系统到底能跑出什么效果很多同学做毕设时最头疼的不是写不出代码而是拼不出一套能演示、能答辩、能写进论文的完整系统。这份「基于 JAVASpringBootVueMySQL 的大学生智能消费记账系统」源码包恰好卡在这个痛点上——它不是零散的功能片段而是一套前后端分离、带数据库脚本和配套论文的完整工程。后端用 SpringBoot 做 REST 接口前端用 Vue 搭单页应用数据落在 MySQL 里覆盖了记账、分类统计、预算提醒、消费分析这些大学生日常场景。适合谁正在找毕设选题的计算机专业学生、想练手前后端分离的 Java 初学者、以及需要一套可二次开发的记账类项目模板的开发者。下面我按「能跑起来 → 能看懂 → 能改 → 不踩坑」的顺序拆一遍。2. 环境搭建与工程结构把 SpringBoot Vue MySQL 三件套跑通2.1 先看清工程目录再动手拿到压缩包解压后别急着打开 IDE。先花两分钟把目录结构扫一遍能省掉后面一半的报错排查时间。典型的目录长这样smart-accounting/ ├── backend/ # SpringBoot 后端 │ ├── src/main/java/com/xxx/ │ │ ├── controller/ # 接口层 │ │ ├── service/ # 业务逻辑 │ │ ├── mapper/ # MyBatis 数据访问 │ │ ├── entity/ # 实体类 │ │ └── config/ # 跨域、拦截器等配置 │ ├── src/main/resources/ │ │ ├── application.yml # 数据库、端口配置 │ │ └── mapper/ # XML 映射文件 │ └── pom.xml ├── frontend/ # Vue 前端 │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── api/ # 接口封装 │ │ ├── router/ # 路由配置 │ │ └── store/ # 状态管理 │ ├── package.json │ └── vue.config.js ├── sql/ │ └── accounting.sql # 数据库脚本 └── 论文.docx后端和前端是两个独立工程分开启动。数据库脚本单独放在 sql 目录导入前先确认 MySQL 版本5.7 和 8.0 在驱动类和连接串上有差异这个后面避坑章节会细说。2.2 数据库导入与 application.yml 配置第一步永远是先把数据库跑起来。用 Navicat 或者命令行都行命令行更干净# 登录 MySQL8.0 版本 mysql -u root -p # 创建数据库并指定字符集避免中文乱码 CREATE DATABASE smart_accounting DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 切换到该库 USE smart_accounting; # 导入脚本 source /你的路径/sql/accounting.sql;导入完成后执行SHOW TABLES;确认表都建好了。一般会有用户表、账单表、分类表、预算表这几张核心表。接着改后端配置。打开backend/src/main/resources/application.ymlserver: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_accounting?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 你的密码 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.xxx.entity这里几个参数值得说清楚。serverTimezoneAsia/Shanghai不加的话MySQL 8.0 会报时区错误这是最高频的翻车点。useSSLfalse在本地开发关掉省去证书配置的麻烦。driver-class-name用com.mysql.cj.jdbc.Driver这是 8.0 的写法5.7 用com.mysql.jdbc.Driver写错直接启动失败。2.3 后端启动与前端依赖安装后端用 IDEA 打开 backend 目录等 Maven 依赖拉完找到主启动类带SpringBootApplication注解那个右键 Run。控制台出现 Tomcat started on port 8080 就说明后端起来了。前端进 frontend 目录先装依赖再启动# 进入前端目录 cd frontend # 安装依赖国内建议先配淘宝镜像 npm install --registryhttps://registry.npmmirror.com # 启动开发服务器 npm run serve启动成功后浏览器访问http://localhost:8081端口看 vue.config.js 里的配置。如果页面能打开但接口报错八成是跨域问题检查后端 config 目录下有没有跨域配置类或者前端 vue.config.js 里的 proxy 有没有配对。提示前后端要同时启动只开一个另一个必然报错。建议开两个终端窗口一个跑后端一个跑前端日志分开看更清楚。3. 核心功能拆解记账、统计、预算三个模块怎么实现的3.1 记账模块的增删改查链路记账是整个系统的入口功能一条账单从表单提交到落库走的是标准的 Controller → Service → Mapper 三层链路。先看 Controller 层RestController RequestMapping(/api/bill) public class BillController { Autowired private BillService billService; // 新增账单 PostMapping(/add) public Result add(RequestBody Bill bill) { // 从 token 或 session 拿当前用户 id bill.setUserId(CurrentUser.getId()); billService.save(bill); return Result.success(); } // 分页查询账单 GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size, String category) { PageBill result billService.pageQuery(page, size, category); return Result.success(result); } }RequestBody把前端传来的 JSON 自动映射成 Bill 对象RequestParam接收 URL 上的查询参数。分页查询这里用了 MyBatis 的分页插件常见做法是在配置类里注册PageInterceptor然后在 Service 里调PageHelper.startPage(page, size)后面紧跟的查询就会自动带上 limit。Service 层做业务校验比如金额不能为负、分类必须存在。Mapper 层对应 XML 文件里的 SQL账单表的查询通常要关联分类表拿分类名称用 left join 处理。3.2 统计分析的 SQL 聚合与前端图表统计模块是这个系统的亮点也是论文里最能写出东西的部分。核心是按月、按分类聚合消费金额。后端 SQL 大致长这样-- 按月统计总支出 SELECT DATE_FORMAT(bill_time, %Y-%m) AS month, SUM(amount) AS total FROM bill WHERE user_id #{userId} AND type 支出 GROUP BY month ORDER BY month DESC; -- 按分类统计占比 SELECT c.name AS category, SUM(b.amount) AS total FROM bill b LEFT JOIN category c ON b.category_id c.id WHERE b.user_id #{userId} AND b.type 支出 GROUP BY c.name;DATE_FORMAT把时间戳格式化成月份字符串GROUP BY配合SUM做聚合。前端拿到数据后用 ECharts 渲染饼图和折线图饼图看分类占比折线图看月度趋势。这里有个细节如果某个月没有消费记录SQL 不会返回那一行折线图会断掉。稳妥做法是在 Service 层补全月份序列缺失的月份补 0。3.3 预算提醒的判断逻辑预算模块的逻辑不复杂但容易写漏。用户给每个分类设一个月度预算每次新增账单时触发检查public void checkBudget(Bill bill) { // 查该分类本月已消费总额 BigDecimal used billMapper.sumByCategoryAndMonth( bill.getUserId(), bill.getCategoryId(), bill.getBillTime()); // 查预算额度 Budget budget budgetMapper.getByCategory( bill.getUserId(), bill.getCategoryId()); if (budget ! null used.compareTo(budget.getAmount()) 0) { // 超支写入提醒表或推送消息 reminderService.create(bill.getUserId(), budget.getCategoryId(), used); } }BigDecimal的compareTo不能用equals替代因为equals会比较精度1.0和1.00不相等这是金额计算里的经典坑。预算判断放在新增账单之后触发而不是定时任务这样提醒更及时。4. 避坑与常见问题排查那些让我熬夜的报错4.1 启动报时区错误或驱动类找不到现象后端启动直接抛The server time zone value xxx is unrecognized或者Cannot load driver class: com.mysql.jdbc.Driver。原因MySQL 8.0 默认时区不是东八区且驱动类路径变了。很多人从网上抄的配置还是 5.7 的老写法。解决连接串加serverTimezoneAsia/Shanghai驱动类改成com.mysql.cj.jdbc.Driver同时确认 pom.xml 里 mysql-connector 的版本是 8.x。4.2 前端 npm install 卡住或报错现象npm install跑几分钟不动或者报ERR! network相关错误。原因默认源在国外网络不稳定。另外 node 版本过高也会导致某些老依赖编译失败。解决换国内镜像--registryhttps://registry.npmmirror.com。如果还报错检查 node 版本Vue2 项目建议用 node 14 或 16Vue3 项目用 16 以上。版本不对就用 nvm 切一下。4.3 接口 404 或跨域被拦截现象前端页面能打开但登录、查询接口全部 404或者浏览器控制台报 CORS 错误。原因前后端端口不同浏览器同源策略拦截或者后端接口路径和前端请求路径对不上。解决后端加跨域配置类实现WebMvcConfigurer重写addCorsMappings。前端在 vue.config.js 里配 proxy 代理把/api转发到后端端口。两边配一个就行建议配后端更彻底。4.4 中文乱码现象数据库里存进去的中文变成问号或者页面显示乱码。原因数据库字符集不是 utf8mb4或者连接串没指定编码。解决建库时用utf8mb4连接串加characterEncodingutf8前端请求头设置Content-Type: application/json;charsetutf-8。三处都对齐才不会乱。4.5 分页查询总数不对现象分页列表数据对但总条数始终是当前页的条数。原因PageHelper 只对紧跟其后的第一条查询生效如果后面又查了一次总数插件已经失效了。解决把PageHelper.startPage放在真正要分页的那条查询前面用PageInfo包装结果拿 total。不要手动再写一条 count 查询。5. 二次开发与论文写作把这套源码用出最大价值5.1 改造成自己的选题方向这套系统的骨架是通用的改个方向就能变成新选题。比如把「消费记账」改成「学习时间管理」账单表换成时间记录表分类换成科目统计逻辑几乎不用动。具体操作先改数据库表名和字段再改实体类和 Mapper XML最后调前端页面文案和图表标题。改动量集中在数据层Controller 和 Service 的结构可以保留。如果想让论文更有技术含量可以加两个扩展点。一是引入 Redis 缓存统计结果避免每次刷新都跑聚合 SQL二是用定时任务做月度账单邮件推送SpringBoot 里加Scheduled注解就能实现。这两个点写进论文的「系统优化」章节比单纯描述 CRUD 有说服力得多。5.2 论文里该重点写什么配套论文别照抄要挑技术深度够的部分展开。数据库设计章节把 E-R 图和表结构写清楚特别是账单表和分类表的关联关系。核心功能章节重点写统计算法的 SQL 实现和预算判断的逻辑配上流程图。测试章节别只写「功能正常」列几个边界用例金额为 0、跨月查询、预算刚好等于消费额这些才是答辩老师会问的点。5.3 答辩前必须自测的清单检查项预期结果常见失败原因注册新用户能登录并跳转首页密码加密方式不一致新增一笔账单列表实时刷新前端未重新请求接口删除账单列表和统计同步更新只删了列表没刷新图表设置预算并超支弹出提醒判断逻辑用了 equals切换月份查统计数据随月份变化SQL 月份格式不匹配答辩前把这张表跑一遍基本能覆盖老师会现场操作的功能点。我自己的习惯是每次改完代码先清浏览器缓存再测避免旧数据干扰判断。从那以后我每次拿到一套毕设源码都强制先跑通数据库导入和配置文件这两步再去看业务代码——因为百分之八十的启动失败都出在这两个环节跟代码逻辑本身没关系。希望这套拆解能帮你少走几个弯路顺利把项目跑起来、改下去、写进论文里。本文还有配套的精品资源点击获取
返回列表