这次我们来看一个非常典型的“前后端分离”毕设/课设项目Spring Boot 3 Vue 3 理财记账系统。这类项目的价值在于技术栈足够新Spring Boot 3 和 Vue 3 都是目前工作和面试中高频出现的技术功能模块又很完整涵盖家庭理财、日常记账、财务统计和 ECharts 可视化非常适合用来做毕业设计、课程设计或前后端联调练习。先把结论放在前面这个系统能跑通一条完整的业务链路从用户注册登录到新增收支分类、录入账单再到首页 ECharts 图表统计每一步都有明确的页面和接口对应。对毕设答辩来说它具备“能演示、能讲解、能扩展”三个基本条件对学习来说它把 Spring Boot 3 的后端接口设计、Vue 3 的组合式 API、Axios 请求封装和 ECharts 图表渲染都串在了一起。本文会从项目能力、环境准备、数据库设计、后端接口、前端页面、ECharts 可视化、功能测试和问题排查这 8 个方面展开代码给出通用模板路径、端口和实体字段按你自己的项目结构调整即可。1. 核心能力速览先给一张速览表看看这套系统到底包含哪些能力。能力项说明项目类型前后端分离 Web 应用适合毕设、课设、前后端练习项目后端技术栈Spring Boot 3、Spring MVC、Spring Data JPA / MyBatis-Plus前端技术栈Vue 3、Vite、Element Plus、Axios、ECharts核心功能用户登录注册、收支分类管理、账单录入、账单流水、月度统计、预算提示数据可视化ECharts 饼图、柱状图、折线图也可扩展树图、中国地图等接口能力RESTful API前后端通过 JSON 交互支持 Axios 统一封装批量能力基础版逐个记账可扩展 Excel 批量导入历史账单运行环境JDK 17、Maven、Node.js 18、MySQL 8.0启动方式后端 Maven 启动前端 npm run dev前后端分离访问适合场景毕设演示、课设作业、家庭日常记账、Spring Boot 3 Vue 3 学习Spring Boot 3 和 Vue 3 的搭配在毕设项目里属于比较新的组合。Spring Boot 3 强制要求 JDK 17 及以上包名从javax改成了jakarta这一点在写实体和依赖的时候要特别注意。Vue 3 配合 Vite 启动速度很快组合式 API 写起来比 Vue 2 的 Options API 更清爽ECharts 做统计图表也不需要额外安装复杂插件一个echarts依赖就够。2. 适用场景与使用边界这类记账系统最适合做两类事情一类是完成毕设/课设的交付要求另一类是把前后端分离开发流程完整练一遍。如果你是毕业生系统里的功能点足够支撑论文和答辩。论文部分可以写“基于 Spring Boot 3 与 Vue 3 的家庭理财系统的设计与实现”从需求分析、数据库设计、接口设计、前端实现、ECharts 可视化这几个维度展开内容非常充足。答辩时老师常问的问题也基本覆盖为什么用 Spring Boot 3、Vue 3 和 Vue 2 的区别、ECharts 图表数据是怎么来的、分类和账单表怎么设计的。如果你是在校学生做课设这套系统能在 1 到 2 个星期内完成一版可演示的成品。后端建表、写接口前端建页面、接数据最后用 ECharts 出图整条链路没有特别大的难点。但也要说清楚边界这种系统更适合“演示和教学”不建议直接拿来做生产级财务软件。真实记账软件需要处理多端同步、数据加密、审计日志、复杂权限、自动对账、支付渠道对接等能力这些不是基础毕设项目需要覆盖的范围。如果你要长期使用建议至少加上数据导出和定期备份。合规上还要注意如果系统要给别人用用户密码不能明文存储必须做加密处理账单数据属于个人敏感信息演示和部署时要避免使用真实的身份证号、银行卡号等隐私数据如果是多人共用的部署环境接口要加登录校验和访问限制不能把管理接口直接暴露到公网。3. 环境准备与前置条件开发这套系统建议先准备好以下环境。依赖版本建议说明JDK17Spring Boot 3 的硬性要求不能用 JDK 8Maven3.6后端依赖管理和打包Node.js18Vite 和前端依赖构建需要npm / pnpmnpm 9 或 pnpm 8推荐 pnpm安装速度更快MySQL8.0数据库也可以换 PostgreSQLIDEIntelliJ IDEA / VS Code后端推荐 IDEA前端 VS Code 即可浏览器Chrome / Edge调试前端页面和 ECharts 图表环境检查这一步很容易翻车尤其是 JDK 版本。如果你的电脑之前装过 JDK 8终端里执行java -version必须确认是 17 或更高版本。Spring Boot 3 项目一启动就会因为 JDK 版本过低直接报错错误信息通常是UnsupportedClassVersionError或Java 8 is not supported。安装完 Node.js 后可以在终端确认版本node -v npm -v数据库方面如果本机没有 MySQL可以用 Docker 快速启动一个 MySQL 8 实例docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDroot123 \ -e MYSQL_DATABASEfamily_finance \ mysql:8.0注意端口冲突。后端默认端口如果是8080本地又有其他 Java 应用在跑启动时就会提示端口被占用。前端 Vite 默认端口是5173如果被占用Vite 会自动往后找5174、5175这一点比后端要省心。4. 数据库设计与初始化记账系统的核心表不复杂重点是把“用户、分类、账单、预算”这四个实体关系理清楚。先建数据库再建表。CREATE DATABASE IF NOT EXISTS family_finance DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE family_finance; -- 用户表 CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL COMMENT 建议存储 BCrypt 加密后的密码, nickname VARCHAR(50), created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 收支分类表 CREATE TABLE category ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, name VARCHAR(50) NOT NULL COMMENT 分类名称如餐饮、交通、工资, type TINYINT NOT NULL COMMENT 0支出 1收入, icon VARCHAR(100), created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 账单记录表 CREATE TABLE bill_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, category_id BIGINT NOT NULL, amount DECIMAL(12,2) NOT NULL, type TINYINT NOT NULL COMMENT 0支出 1收入, remark VARCHAR(255) COMMENT 备注, record_date DATE NOT NULL COMMENT 记账日期, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 月度预算表 CREATE TABLE budget ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, month VARCHAR(7) NOT NULL COMMENT 格式 YYYY-MM, budget_amount DECIMAL(12,2) NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP );几点设计说明bill_record表里同时保留category_id和type是为了统计时减少一次 JOIN 判断。分类属于支出还是收入直接查类型字段就行。amount必须用DECIMAL(12,2)不要用FLOAT或DOUBLE否则金额会出现精度丢失统计汇总的时候可能会有小数点差异。record_date存的是“业务日期”created_at存的是“创建时间”。用户在月初补录上月末的账单时这两者不能混用。如果你的项目需要单人使用user_id可以固定为 1但既然是毕设项目建议保留用户体系权限控制的代码在答辩时是加分项。后端application.yml配置server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/family_finance?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: root123 driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update show-sql: true mybatis-plus: mapper-locations: classpath:/mapper/**/*.xml configuration: map-underscore-to-camel-case: true如果持久层用 MyBatis-Plus上面配置里的mybatis-plus段就能生效如果用 Spring Data JPA就把jpa段配置好实体类里加对应注解。两种方式都可以不要同时混用两套。5. 后端接口实现Spring Boot 3 项目结构与接口设计新建 Spring Boot 3 项目时推荐按以下结构组织代码com.example.familyfinance ├── FamilyFinanceApplication.java ├── config │ └── CorsConfig.java ├── controller │ ├── AuthController.java │ ├── CategoryController.java │ ├── BillController.java │ └── StatisticsController.java ├── entity │ ├── SysUser.java │ ├── Category.java │ ├── BillRecord.java │ └── Budget.java ├── service │ ├── BillService.java │ └── StatisticsService.java └── repository ├── SysUserRepository.java ├── CategoryRepository.java ├── BillRecordRepository.java └── BudgetRepository.javaSpring Boot 3 的启动类SpringBootApplication public class FamilyFinanceApplication { public static void main(String[] args) { SpringApplication.run(FamilyFinanceApplication.class, args); } }后端接口不需要设计得特别多核心是下面这些模块接口功能认证POST /api/auth/register用户注册认证POST /api/auth/login用户登录分类GET/POST /api/categories查询/新增分类账单GET /api/bills分页查询账单账单POST /api/bills新增账单账单PUT /api/bills/{id}修改账单账单DELETE /api/bills/{id}删除账单统计GET /api/statistics/monthly?month2025-01月度收支统计统计GET /api/statistics/category?month2025-01分类占比统计统计接口是 ECharts 图表的数据来源这一步实现思路要理清楚。月度统计按record_date分组public interface BillRecordRepository extends JpaRepositoryBillRecord, Long { Query(SELECT b FROM BillRecord b WHERE b.userId :userId AND DATE_FORMAT(b.recordDate, %Y-%m) :month) ListBillRecord findMonthlyRecords(Param(userId) Long userId, Param(month) String month); }统计 Service 里把月度记录取出来在内存中按类型和分类聚合Service public class StatisticsService { private final BillRecordRepository billRecordRepository; public StatisticsService(BillRecordRepository billRecordRepository) { this.billRecordRepository billRecordRepository; } public MapString, Object getMonthlyStatistics(Long userId, String month) { ListBillRecord records billRecordRepository.findMonthlyRecords(userId, month); BigDecimal totalIncome BigDecimal.ZERO; BigDecimal totalExpense BigDecimal.ZERO; for (BillRecord record : records) { if (record.getType() 1) { totalIncome totalIncome.add(record.getAmount()); } else { totalExpense totalExpense.add(record.getAmount()); } } MapString, Object result new HashMap(); result.put(month, month); result.put(totalIncome, totalIncome); result.put(totalExpense, totalExpense); result.put(balance, totalIncome.subtract(totalExpense)); return result; } }分类占比统计也是一样循环累加每个分类的支出金额最后返回给前端一个数组。前端 ECharts 饼图的data格式大概是[ { name: 餐饮, value: 1280.50 }, { name: 交通, value: 320.00 }, { name: 购物, value: 880.00 } ]后端返回数据时可以直接返回ListMapString, Object避免前端再做二次转换。跨域配置是前后端分离项目必写的内容。Vue 开发服务器默认端口是5173后端是8080不配置跨域的话浏览器会直接拦截请求。三种解决方式选一种即可Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:5173) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true); } }如果已经在 Vite 里配置了server.proxy代理到http://localhost:8080那后端可以不用CorsConfig两种方案避免重复。开发阶段建议优先用 Vite 代理因为代理还能隐藏后端真实地址线上部署也更干净。6. 前端页面实现Vue 3 Vite Element Plus ECharts前端用 Vite 创建 Vue 3 项目npm create vitelatest family-finance-frontend -- --template vue cd family-finance-frontend npm install安装核心依赖npm install element-plus axios vue-router pinia echarts推荐做下面这些目录划分src ├── api │ ├── request.js │ ├── bill.js │ ├── category.js │ └── statistics.js ├── components │ ├── BillForm.vue │ ├── BillTable.vue │ └── ChartCard.vue ├── views │ ├── Login.vue │ ├── Dashboard.vue │ ├── BillList.vue │ └── CategoryManage.vue ├── router │ └── index.js └── App.vueAxios 请求封装放在api/request.js统一配置baseURL和请求拦截器import axios from axios; const request axios.create({ baseURL: /api, timeout: 10000 }); // 请求拦截器带上 token request.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer ${token}; } return config; }); // 响应拦截器统一处理错误码 request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { window.location.href /login; } return Promise.reject(error); } ); export default request;Vite 代理配置放在vite.config.jsimport { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } });记账表单页面用 Element Plus 的el-formel-date-pickerel-input-numbertemplate el-card classbill-form el-form :modelform label-width80px el-form-item label类型 el-radio-group v-modelform.type el-radio :value0支出/el-radio el-radio :value1收入/el-radio /el-radio-group /el-form-item el-form-item label分类 el-select v-modelform.categoryId placeholder请选择分类 el-option v-foritem in categories :keyitem.id :labelitem.name :valueitem.id / /el-select /el-form-item el-form-item label金额 el-input-number v-modelform.amount :min0.01 :precision2 / /el-form-item el-form-item label日期 el-date-picker v-modelform.recordDate typedate value-formatYYYY-MM-DD / /el-form-item el-form-item label备注 el-input v-modelform.remark / /el-form-item el-form-item el-button typeprimary clicksubmit保存/el-button /el-form-item /el-form /el-card /template script setup import { reactive, ref } from vue; import { ElMessage } from element-plus; import { saveBill } from ../api/bill; const form reactive({ type: 0, categoryId: null, amount: 0, recordDate: , remark: }); const categories ref([]); async function submit() { if (!form.categoryId) { ElMessage.warning(请选择分类); return; } await saveBill(form); ElMessage.success(记账成功); } /scriptVue 3 组合式 API 要注意一点script setup里直接用ref和reactive定义响应式数据不需要再写return比 Vue 2 的data()写法更简洁。el-radio的:value是新版 Element Plus 的写法旧版本可能用的是label字段Element Plus 2.6 之后推荐使用value如果版本不同要对应调整。7. ECharts 可视化饼图、柱状图与折线图实现ECharts 在 Vue 3 项目里最常见的问题不是写不出图表而是图表容器初始化时没有拿到宽高导致渲染空白。推荐封装一个通用的ChartCard组件通过watch监听数据变化拿到数据后再初始化图表。template el-card classchart-card template #header{{ title }}/template div refchartRef classchart-container/div /el-card /template script setup import { onMounted, onBeforeUnmount, watch, ref } from vue; import * as echarts from echarts; const props defineProps({ title: { type: String, default: }, chartType: { type: String, default: pie }, data: { type: Object, default: () ({}) } }); const chartRef ref(null); let chartInstance null; function renderChart() { if (!chartRef.value) { return; } if (!chartInstance) { chartInstance echarts.init(chartRef.value); } let option {}; if (props.chartType pie) { option { tooltip: { trigger: item }, series: [ { name: 支出占比, type: pie, radius: 65%, data: props.data.list || [] } ] }; } else if (props.chartType bar) { option { tooltip: { trigger: axis }, xAxis: { type: category, data: props.data.months || [] }, yAxis: { type: value }, series: [ { name: 收入, type: bar, data: props.data.incomeList || [] }, { name: 支出, type: bar, data: props.data.expenseList || [] } ] }; } else if (props.chartType line) { option { tooltip: { trigger: axis }, xAxis: { type: category, data: props.data.days || [] }, yAxis: { type: value }, series: [ { name: 每日支出, type: line, smooth: true, data: props.data.dailyList || [] } ] }; } chartInstance.setOption(option); } watch( () props.data, () { renderChart(); }, { deep: true } ); onMounted(() { renderChart(); }); window.addEventListener(resize, handleResize); function handleResize() { chartInstance chartInstance.resize(); } onBeforeUnmount(() { window.removeEventListener(resize, handleResize); chartInstance chartInstance.dispose(); }); /script style scoped .chart-container { width: 100%; height: 360px; } /styleECharts 图表不显示的排查顺序很固定容器高度是否为 0检查.chart-container的 CSS高度必须写死或由 flex 撑开。数据是否为空数组ECharts 对空数据不会报错但也不会渲染图形。初始化时机是否在 DOM 挂载完成后onMounted之前调用init肯定拿不到容器。组件是否在v-if条件渲染中如果父组件控制图表组件显隐需要确保组件挂载后再传入数据。统计页面的 ECharts 布局通常是首页上方放三个指标卡片中间放月度收支柱状图和分类占比饼图下面放每日支出折线图。这个布局用 Element Plus 的el-rowel-card就能实现不需要引入额外布局库。8. 记账功能测试与效果验证系统跑起来之后不要只看“页面能打开就完事”要按照真实业务流走一遍确认数据链路是通的。推荐按下面的验收清单逐项测试。测试项操作预期结果页面访问浏览器打开前端 5173 端口登录页面正常显示用户注册填写用户名和密码后端返回成功数据库新增用户用户登录使用已注册账号登录跳转到首页本地保存 token分类新增新增“餐饮”“交通”“工资”分类下拉框能看到新分类收入记账选择“工资”填 5000 元月度总收入更新为 5000支出记账选择“餐饮”填 35.50 元月度总支出更新为 35.50账单列表切换月份查询账单列表只显示对应月份的数据ECharts 饼图首页查看分类占比餐饮、交通等分类按金额占比显示ECharts 柱状图切换近 6 个月柱状图显示每月收支对比删除账单删除某条测试记录图表和统计数字同步更新测试时最容易发现的问题集中在数据同步上。比如记了一笔账ECharts 图表没有更新这时候要看前端是否统计接口返回了新数据。如果统计接口没有重新请求可以给图表组件加一个key属性强制在记账成功后重新渲染ChartCard :keyrefreshKey title支出分类占比 chart-typepie :datacategoryPieData /记账成功后递增refreshKey组件就会重新挂载并重新请求数据。这种做法虽然不算最优解但对毕设项目来说非常直观答辩时也容易讲清楚。批量任务在记账系统里主要是“批量导入历史账单”。如果时间充裕可以在账单页面加一个 Excel 导入按钮用el-upload上传文件后端用 EasyExcel 或 Apache POI 解析后批量写入数据库。这个功能能体现你对真实业务场景的理解是答辩的加分项。导入时要注意字段校验金额、日期、分类必须检查否则会写入脏数据。9. 接口 API 调用与调试示例后端启动后接口可以直接用浏览器工具或命令行验证。这里给两个最常用的测试方法。查询月度统计接口curl http://localhost:8080/api/statistics/monthly?userId1month2025-01如果返回类似下面的 JSON说明统计接口正常。{ code: 200, data: { month: 2025-01, totalIncome: 8000.00, totalExpense: 2450.60, balance: 5549.40 }, message: success }新增账单接口curl -X POST http://localhost:8080/api/bills \ -H Content-Type: application/json \ -d { userId: 1, categoryId: 2, amount: 128.00, type: 0, remark: 晚饭, recordDate: 2025-01-15 }前端页面调试时要打开浏览器开发者工具里的 Network 面板重点看两点请求状态码是否 200响应 JSON 里的code是否为 200。很多同学遇到“页面没数据”第一反应是找前端代码的问题其实先看 Network 面板能省下大量时间。如果状态码是 404检查前端请求路径和后端 Controller 路径是否完全一致如果是 500去后端控制台看异常堆栈。如果接口涉及到时间段筛选注意日期参数格式。前后端约定统一使用YYYY-MM-DD避免因为recordDate传成了带时间的格式导致数据库查询不到数据。10. 常见问题与排查方法把毕设和课设项目里最常遇到的问题整理成一张排查表。问题现象可能原因排查方式解决方案Spring Boot 启动报错JDK 版本低于 17执行java -version升级到 JDK 17前端请求接口状态码 404接口路径不对或未配置代理看 Network 面板对比请求路径和 Controller 路径统一接口前缀配置 Vite 代理请求被浏览器拦截跨域未配置看 Console 里的 CORS 错误配置 CorsConfig 或 Vite proxy端口被占用8080 或 5173 被其他进程占用netstat -ano查看端口修改配置文件端口或杀掉占用进程ECharts 图表空白容器高度为 0 或初始化时机不对检查 DOM 和 CSS固定容器高度在 onMounted 中初始化ECharts 显示 undefined后端数据字段名不匹配打印接口返回数据对齐字段名如totalIncome和income数据库连接失败MySQL 未启动或密码错误mysql -u root -p测试连接检查 application.yml 配置中文乱码数据库字符集不对SHOW CREATE TABLE 查看表结构建库建表使用 utf8mb4保存账单时报空指针categoryId 不存在检查分类表和下拉框数据前端先加载分类再允许提交图表数据不更新统计接口未重新请求看 Network 面板请求时间组件加 key 强制刷新或手动重查端口检查的命令Windows 和 Mac/Linux 略有不同# Windows netstat -ano | findstr 8080 # Mac / Linux lsof -i :8080如果 Vite 启动时提示Digest method not supported通常是 Node.js 版本和 Vite 版本不匹配优先把 Node.js 升级到 18 或 20 的稳定版本再重新npm install。11. 最佳实践与使用建议最后给一套项目管理和代码组织的建议能让你的毕设或课设更经得起检查。一、先做最小闭环不要一上来把登录、菜单、权限、角色、图表全部做完。先把“登录 - 记账 - 查列表 - 出统计”这条最小闭环跑通业务链路通了再逐步加功能。这样即使中途遇到问题交付兜底版本也有完整故事线。二、表和目录结构保持清晰数据库表字段用下划线命名Java 实体用驼峰命名前端页面目录按模块划分。答辩时老师打开项目看到结构清晰、命名规范的代码第一印象会好很多。后端 Controller 只接收参数和返回结果业务逻辑放在 Service 层不要所有代码堆在一个类里。三、接口设计要符合 REST 风格URL 用名词复数比如/api/bills、/api/categories操作通过 HTTP 方法区分。新增用 POST修改用 PUT删除用 DELETE。不要出现getBillList、addBill这种动词式路径REST 风格本身就是答辩时可以讲解的点。四、前端做 axios 统一封装每个页面都直接import axios会导致拿 token、处理错误、改 baseURL 时改一堆地方。统一封装到request.js后后续加请求拦截、响应拦截、错误提示都非常方便。这一点在面试中也经常被问到。五、注意敏感数据和部署边界系统需要在本地或者云服务器上部署演示时对外的端口尽量不开放数据库的 3306 端口。密码必须加密存储推荐 Spring Security 的 BCryptPasswordEncoder。账单数据是隐私数据演示时不要导入真实家庭的完整账单可以用一批随机的演示数据。六、批量记账脚本如果自己使用推荐保留一张 Excel 记账模板每次批量录入只需要把系统导出的模板填好再导入。不需要做太复杂能用el-upload上传后端解析 Excel 后逐条校验、批量插入即可。批量导入配合 ECharts 统计会让系统有很强的“真实工具感”。12. 总结与下一步这个项目最值得尝试的点是它用一套完整的前后端分离方案把 Spring Boot 3、Vue 3、Element Plus 和 ECharts 这四样技术串成了一条可演示的业务链路。你从数据库建表开始一路写完后端接口、前端页面和统计图表后对整个 Web 项目的开发流程会有一个比看教程更完整的认识。建议先验证“记账后图表能同步更新”这条路它把后端接口、前端状态和 ECharts 渲染三者打通是这套系统的核心闭环。最容易踩的坑是跨域和 ECharts 图表空白记住检查 Network 面板和容器高度基本能解决 80% 的问题。扩展方向可以从这几个里选一个往下做接入 Spring Security 做登录鉴权增加月度预算和超预算提醒加入 echarts 树图展示账户层级用 EasyExcel 做账单批量导入导出再加一个家庭成员多用户协作用记账功能项目深度在答辩时就会拉开差距。建议先按本文的清单把最小闭环跑通再逐步扩展收藏备用即可。