SpringBoot+Vue资产管理系统：毕业设计选题与前后端分离实战指南

每学期都有一批学生来问我同一个问题：毕设到底选什么题目，才能既不过分难、又能顺利通过答辩。问得多了，我慢慢养成了一个习惯——先不急着推荐天花乱坠的"创新项目"，而是把"SpringBoot + Vue 公司资产网站管理平台"这类项目摆在他们面前。原因很简单：这套技术栈现在就是 Java Web 方向的主流，前后端分离的成品摆在桌面上，工作量够、难度适中、业务闭环完整，而且是现成的 Java + MySQL 项目，适合毕业设计、课程设计、自学练手三个场景。

先说这套系统到底解决什么问题。公司里日常要管的东西很多——电脑、显示器、打印机、办公桌椅、耗材、服务器，几百上千条记录，靠 Excel 表格根本理不清楚：这台笔记本到底在谁手里？那台打印机是不是该维修了？年初采购的投影仪怎么突然找不到了？资产管理系统就是干这个的，它把资产从"入库、领用、归还、维修、报废"整条链路管起来，管理员可以看全局，普通员工可以申请领用自己需要的设备。这个业务场景不大不小，没有复杂的算法，但该有的软件工程要素全都有，做起来不容易塌方，讲起来也很有内容。

接下来的内容，我会从技术选型的理由、数据库表设计、前后端联调、答辩准备这几个方向展开，把我自己带项目时的实际经验都写出来。如果你正好在纠结毕设题目，或者在啃一套别人写的源代码不知道怎么下手，这篇应该能帮你少走不少弯路。

1. 为什么毕设选"前后端分离 + 资产流转"最稳

1.1 评估一个毕设题目的三个标准

我一般会建议学生用三个标准判断题目值不值得做：工作量和难度是否匹配、有没有完整的业务闭环、答辩时有没有东西可以讲。

有些同学一上来就想着做个"分布式秒杀系统""基于大数据的推荐平台"，想法很好，但结果往往是把大量时间耗在环境搭建和中间件调优上，业务本体反而没做扎实。资产管理系统不一样，它的功能模块是清晰可见的：用户登录、部门管理、资产管理、领用归还流程、维修报废记录。每一个模块单独看都不算难，但合在一起，正好凑成一个需要前后端配合的完整工程。这种"看上去难度中等，实际做下来一周有进展、两周能跑通"的节奏，非常适合作业周期固定的毕设和课设。

业务闭环这件事，是答辩老师非常看重的一点。资产不是孤立地躺在数据库里，它会经历"入库→被领用→归还→维修→报废"这样一条生命周期。只要系统能展示出这条链路，答辩时你就能顺着业务流程一条条讲下来，而不是像某些纯粹的管理系统一样，翻来覆去就是几张表的增删改查。

1.2 为什么是 SpringBoot 而不是 SSM 或 JSP

不少学校的教材还在教 SSM（Spring + SpringMVC + MyBatis），也确实有一些旧项目在用这套组合。但你真拿去当毕设，大概率会被配置文件折磨到崩溃。SSM 需要手动配置 web.xml、Spring 容器、SpringMVC 的 dispatcherServlet、MyBatis 的 sqlSessionFactory，任何一个地方写错，启动就是一串看不懂的报错。而对一个要在毕业季几个月内把项目做完的学生来说，时间最宝贵，不应该花在XML配置上。

SpringBoot 解决的正是这个问题。它把内嵌 Tomcat、自动配置、约定优于配置这些机制都封装好了：你引入 spring-boot-starter-web，写一个带 @SpringBootApplication 注解的 main 类，启动之后就是一个 Web 服务，根本不需要再去部署 war 包。数据源、MyBatis、日志这些常见组件，基本都有现成的 starter 可以引，配置写在 application.yml 里，改起来也直观。用一句话概括：SSM 是"把车拆了再自己装回去"，SpringBoot 是"钥匙插进去就能开"。

也许有人会说，毕设用 SSM 更显得自己懂底层。我的看法恰恰相反——会"正确地偷懒"是一种很重要的工程能力，SpringBoot 让你把精力放在业务逻辑上，而不是框架胶水代码上。更何况现在绝大多数公司招聘后端，用的就是 SpringBoot 或者 SpringCloud 微服务体系，毕设用这套技术栈写出来，简历上也能写一句"熟悉 SpringBoot 项目开发"，真实性经得起问。

1.3 为什么是 Vue 而不是 JSP 模板引擎

前端用 Vue，很多学生第一反应是"又要多学一套东西"。但你要想清楚一件事：JSP 这套技术已经明显在走下坡路了，如果用 JSP 做毕设，页面里混着 Java 代码和 HTML，每改一个样式就要重新编译重启，写起来很痛苦，答辩时也显得技术陈旧。

Vue 的优势是组件化和数据驱动。组件化的意思是，像"表格"“弹窗”“表单”这些反复出现的东西，都可以做成独立组件，哪需要就往哪放；数据驱动的意思是，你只需要维护一个 data 对象，数据变了，页面会自动跟着变，不需要手动去操作 DOM。比如资产列表页，你把请求到的数据扔给一个 table 组件，修改数据后页面自己就刷新了，这种开发体验对后端思维为主的学生来说非常友好。

再加上 Vue 生态里的 Element UI / Element Plus 这种 UI 组件库，表格、分页、日期选择器、弹窗确认框全是现成的，不用自己写 CSS。很多同学并不擅长前端样式，但用了 Element 之后，做出来的界面至少是"干净、专业"的水平，视觉上直接加分。Vue 的另一个好处是它和前后端分离的开发模式天然匹配：前端跑在 localhost:8080，后端跑在 localhost:8081，通过 HTTP 接口通信。这种模式你在学校学到的和以后去公司用到的，是同一个东西。

2. 先把系统拆开看：功能模块、数据库和接口设计

2.1 功能模块怎么划分：双视角设计

拿到一个源码项目，第一步不是打开代码就乱看，而是先看它的功能模块图。公司资产管理系统，核心要服务的角色有两种，管理员和普通用户。

管理员视角负责"管"，包含这些模块：

• 登录与个人信息维护，修改密码
• 资产分类管理，比如"电子设备""办公家具""低值耗材"
• 资产管理核心：新增资产、编辑资产信息、删除资产、按条件查询资产
• 用户与部门管理：创建员工账号、分配部门、停用账号
• 资产领用审批：查看员工发起的领用申请，同意或驳回
• 维修记录、报废记录的登记与查询
• 数据统计：按部门统计资产数量、按分类统计资产占比、按状态统计当前资产分布

普通用户视角负责"用"，包含这些模块：

• 登录进入用户界面
• 浏览可用资产列表，关键词搜索
• 对自己需要的资产发起领用申请
• 查看自己名下正在使用的资产，申请归还
• 查看自己申请过的历史记录和审批状态

这种双视角设计很关键，因为它让系统不再是一堆"管理员操作"的 CRUD，而是带上了基本的业务流程。答辩时讲"我设计了两个端，分别解决管理者和员工的问题"，比只说"实现了增删改查"高一个层次。

2.2 数据库表设计：关键的取舍和状态设计

数据库我用的是 MySQL，这也是这套毕设最常见的组合。表的设计我建议至少包含下面几张：

这里有一个我反复跟学生强调的细节：资产状态字段不要用一堆字符串满天飞。有人喜欢在数据库里直接存"在库""已领用""维修中""已报废"，其实也能跑，但后续代码里到处是字符串比较，写起来啰嗦、容易拼错，也不利于统计。更稳的做法是存数字，比如 0 表示在库，1 表示已领用，2 表示维修中，3 表示已报废。在 Java 代码里用枚举类或者常量类把这些数字解释成含义，MyBatis 查出来之后转成状态名称给前端展示。

状态机的转换关系也值得提前想清楚：只有"在库"的资产可以被领用，"已领用"的资产可以被归还或送去维修，"维修中"的资产修好后回到"在库"，只有"在库"的资产才能申请报废。把这些约束写在代码逻辑里，一方面避免了脏数据，另一方面答辩时能讲出"我设计了一个状态流转模型"，这是加分项。

2.3 资产编号怎么生成更专业

很多学生做资产表，主键就一个自增 id，页面上也直接展示 1、2、3。这倒不会报错，但演示效果实在太业余了。真正的资产系统，每件资产都应该有一个业务上的唯一编号，例如 GD-20240612-001，其中 GD 表示固定资产，20240612 是入库日期，001 是当天入库的序号。

在项目里，这个编号可以不在数据库表里做，而是在后端新增资产的 service 层生成：先查当天的最大序号，加一，然后拼上日期前缀。这样做的好处是，资产编号有业务含义，你列表里一展示，"GD-20240612-001"这种字符串明显比"1""2"更真实，Excel 导出和线下盘点时也更好对应实物。

当然，这不代表数据库主键不重要，主键依然用自增或雪花 id 都行，资产编号作为业务的唯一键加一个唯一索引即可。二者分开，职责更清晰。

2.4 后端接口设计：RESTful 风格和组织方式

后端接口我建议统一走 RESTful 风格，Controller 层不写业务逻辑，只做参数接收和结果封装。统一返回结构很重要，我以前见过一些项目，成功返回一个 Map，失败返回 null，前端拿到之后还得各种判断，联调时苦不堪言。更规范的做法是定义一个 Result 类，里面包含 code、message、data 三个字段，成功 code 是 200，失败 code 是 500 或业务错误码。前端用 axios 的响应拦截器统一判断 code，弹提示、吐数据，一套下来逻辑非常清爽。

接口路径也要有规律，比如：

• GET /api/assets/list 资产分页列表
• POST /api/assets 新增资产
• PUT /api/assets/{id} 修改资产信息
• DELETE /api/assets/{id} 删除资产
• POST /api/use-records 发起领用申请
• PUT /api/use-records/{id}/approve 审批领用申请

接口路径规律了，前端我们去对接的时候，几乎不用看后端代码就能猜到用什么地址，这也是工程化意识的体现。

3. 从零跑通这个项目：环境、配置和联调排雷

3.1 版本搭配是第一位，别盲目追新

收到一套源码，如果你一上来就装最新版 JDK、最新版 Node、最新版 MySQL，那大概率要被各种兼容性问题折磨。对于这套 SpringBoot + Vue 的项目，我建议用一组经过验证的"稳定组合"：

为什么刻意强调版本？我见过太多案例：学生下了最新版 JDK 21，SpringBoot 2.7 直接起不来；Node 20 跑 Vue2 项目，依赖树在编译时直接报错；MySQL 8 忘了配置时区，连接报了 CST 相关异常。毕设不是实验新技术的地方，用一个你验证过的、网上资料最多的组合，是最稳的策略。

3.2 后端导入和启动的常规步骤

拿到 SpringBoot 后端源码，导入 IDEA 之后，操作顺序通常是这样的：

1. 确认 JDK 版本匹配，IDEA 的 Project Structure 里把 SDK 切到对应版本
2. File → Settings → Maven 里，把 Maven home 指向本地安装的 Maven，确认 user settings 里的阿里云镜像
3. 等 Maven 自动加载依赖。如果 pom.xml 一直报红，先点右侧 Maven 面板的 Reload All Projects
4. 找到 resources 下的 application.yml，检查数据源配置。主要看这几项：数据库地址 spring.datasource.url、用户名、密码

下面是一个典型的 application.yml 配置片段：

server: port: 8081 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/asset_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl mapper-locations: classpath*:mapper/*.xml

这里请你特别留意三件事：第一，url 里务必写上 useUnicode=true&characterEncoding=utf8，否则中文很容易变成问号；第二，MySQL 8 一定要有 serverTimezone=Asia/Shanghai，否则报时区错；第三，useSSL=false 可以避免本地环境 SSL 告警。如果你想在控制台看到 SQL 日志，MyBatis-Plus 的 log-impl 写成 StdOutImpl 就行，调试非常有用。

数据库初始化也很简单：在 MySQL 里新建一个空库，比如 asset_db，然后直接用 Navicat 或 DataGrip 导入项目里自带的 .sql 文件。如果源码没带 SQL 文件，你也可以根据实体类反推建表语句，或者让我帮你看表的关联关系之后手动建。导入完成后先跑几条 SELECT 确认表数量和数据没问题，再启动后端。

3.3 前端的安装、启动和代理设置

前端如果是 Vue2 项目，一般是 webpack 工程；Vue3 项目则大概率是 Vite。不管哪种，步骤都差不多：进入前端目录，执行 npm install 安装依赖。

npm install 在国内经常慢到怀疑人生，建议先把 registry 换到淘宝镜像：

npm config set registry https://registry.npmmirror.com npm install

装完依赖后，npm run serve（Vue2）或者 npm run dev（Vue3）启动开发服务器。启动之后浏览器打开页面，如果界面上能看到登录页，说明前端本身没问题。如果控制台报错说 /api 地址访问不到，那多半是联调配置的问题。

前后端联调最常见的三种方式，我直接说结论：

• 方式一，前端直接在 axios 请求里写后端完整地址，比如 http://localhost:8081/api/assets/list。这样最简单，但需要后端开启跨域。
• 方式二，前端把所有请求都写成 /api/xxx，然后在 vue.config.js 里配置 devServer 代理，把 /api 开头的请求转发到 http://localhost:8081。这种方式更接近企业开发习惯，也避免了跨域问题。

我通常推荐第二种。在 vue.config.js 里配置代理的关键片段：

module.exports = { devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true } } } };

配置完之后，前端代码里请求 /api/assets/list，开发服务器会自动转发到 8081 端口的后端接口。前端控制台的 Network 标签页里，能看到请求确实发出去了，状态 200，就说明联调成功。

3.4 我实际踩过的三个坑

第一个坑是 Lombok 没装。很多 SpringBoot 源码都用 @Data、@Slf4j 这类注解，如果你的 IDEA 没装 Lombok 插件，编译会报找不到 getter/setter，一堆红。装好插件之后，记得在 Settings → Build → Compiler → Annotation Processors 里勾上 Enable annotation processing。

第二个坑是前端依赖版本冲突。npm install 的时候经常出现 ERESOLVE 错误，这是依赖树版本冲突导致的，新手最容易慌。你可以在安装时加一个参数：

npm install --legacy-peer-deps

这个命令的作用是让 npm 跳过 peerDependencies 的严格校验。如果还不行，把 node_modules 整个删掉，重新用这个命令装一遍，大部分问题都能解决。

第三个坑是程序能跑但登录一直提示用户名或密码错误。原因通常有两个：一是数据库里的密码不是明文，而是后端登录逻辑里用 MD5 或 BCrypt 加密过的密文，你手动往数据库里插了一条明文记录，自然对不上；二是加密盐值不一致。处理办法是先看后端的密码校验逻辑，再用同样的规则给初始用户生成一条密码，或者直接跑 SQL 文件里自带的初始化用户。

4. 从"能跑"到"能答辩"：那些拉开差距的细节

4.1 演示数据要"像真的一样"

很多人做到最后，数据库里就两条测试数据，一条叫"测试资产1"，一条叫"测试资产2"。答辩演示的时候，屏幕上空荡荡的，观感很差。我的习惯是，在项目交付前认真准备一套有生活质感的演示数据：

• 资产分类：电子设备、办公家具、网络设备、低值耗材、其他
• 资产名称：联想 ThinkPad X1 Carbon、戴尔 U2720QM 显示器、惠普 LaserJet Pro 打印机、A4 复印纸（低值耗材）、人体工学椅
• 状态分布：大部分在库，一部分已领用，一两台维修中，一台已报废
• 部门和用户：技术部、产品部、人事部、财务部，每个部门三到五个员工

演示数据准备充足之后，你做统计图表时才有内容可展示。柱状图能看出哪个部门资产最多，饼图能看出设备分类占比，这些在答辩现场比口头描述有说服力得多。

4.2 代码注释和 README：别写"你好世界"式的废话

评审老师是会翻代码的，所以代码质量也是答辩评分的一部分。我不要求学生写出工业级代码，但至少要做到：类名、方法名、变量名有意义，核心方法上有简短注释，Controller 接口上用 Swagger 注解或注释描述参数。

一个典型的注释示范：

/** * 申请领用资产 * @param record 领用记录，包含资产ID、领用人ID、备注 * @return 审批状态为待审核 * 前置条件：资产状态必须是"在库"(0) */ @PostMapping("/use-records") public Result applyUse(@RequestBody UseRecord record) { // 1. 校验资产存在且状态为在库 // 2. 创建待审核的领用记录，状态设为"待审核"(0) // 3. 将资产状态改为"待出库"，防止其他人重复申请 }

README 也要好好写，内容包含：项目简介、技术栈、环境要求、数据库初始化步骤、启动步骤、默认账号。有了这份文档，不仅答辩老师觉得你做事专业，你以后自己回看代码也能快速恢复上下文。

4.3 答辩演示的顺序：让老师跟着你的剧本走

演示环节切忌上来就登录乱点。我会建议学生按一个"有故事线"的顺序来：

1. 先用管理员账号登录，展示首页资产总览统计，让老师知道系统管了多少东西
2. 进入资产管理页面，演示条件查询和分页，最好演示一次新增资产，当场录一台新电脑
3. 切换到员工账号，演示员工看到这台新电脑并申请领用
4. 切回管理员账号，演示审批通过这笔领用申请
5. 再查这台电脑的状态，已经从"在库"变成了"已领用"，并且记录里能看到当前使用人
6. 最后回到统计页，展示部门资产分布或领用趋势图表

整个演示过程就成了一条完整的业务故事线，老师听下来，会觉得你对系统了如指掌。讲的时候还要注意一个点：演示之前先把数据和页面准备好，不要当场演示"查询失败"或"网络错误"。把最容易出错的环节提前验证三遍，这不是作弊，而是演示的基本素养。

4.4 代码里常见但应该改掉的坏味道

源码看多了之后，我经常在学生的项目里看到这些问题：

• 密码明文存在数据库，没有任何加密。最低限度要加个 MD5 加盐，更稳妥是 Spring Security 里现成的 BCryptPasswordEncoder
• SQL 语句全写在 Controller 里。这种写法虽然能跑，但答辩老师看一眼就会觉得代码分层混乱，正确的做法是 Controller → Service → Mapper 三层分离
• 前端到处用 any 类型，或者 Vue 组件里一个 methods 方法三四百行。该拆的组件拆一拆，该抽的函数抽一抽
• 金额或日期格式混乱，缺乏统一处理。我建议在全局配置 Jackson 的日期格式，并在前端封装一个公共的格式化方法

这些问题的修复成本都不高，但它们往往是答辩评分的"隐形分水岭"。

5. 这套资产平台的进阶方向：学会"二开"才是真本事

5.1 给每件资产挂一个二维码

基础的 CRUD 做完之后，可以加一个非常亮眼的模块：为每件资产生成二维码。思路是：在资产详情里，根据资产编号生成一个二维码图片，后端可以用 ZXing 库生成，图片打印出来贴在设备上。手机扫码之后跳到一个只读的资产详情页，显示这台设备的型号、归属部门、当前使用人、状态。

这个功能的实际价值很强：公司做线下资产盘点时，工作人员拿着手机扫设备上的码，就能立刻知道这个设备登记在谁名下，不用再翻 Excel 表格。从实现上看，无非是前端调用一个生成二维码的接口，后端返回一个 base64 或图片地址，难度不高，但答辩时拿出来讲"我实现了线上和线下联动的扫码盘点"，效果非常出彩。

5.2 Excel 批量导入导出

管理资产最痛苦的事情之一，是公司一次性采购了几百台设备，你不能在网页上一台一台手工录入。Excel 导入导出是高频刚需，也特别适合作为毕设的加分项。

• 导入：前端用 Element Upload 组件上传 Excel，后端用 EasyExcel 或者 Apache POI 解析，校验必填字段、检查资产编号是否重复，逐行写入数据库，最后回传一个"成功导入 N 条，失败 M 条"的结果
• 导出：后端查询当前筛选条件下的资产列表，用 EasyExcel 写出 xlsx 文件流，前端触发浏览器下载

EasyExcel 的 API 比 POI 友好很多，字段上写上 @ExcelProperty("资产名称") 就能导出，对学生来说半天就能上手。

5.3 资产折旧和报表统计

还有一个方向，是加入财务视角的资产折旧。固定资产每月都在贬值，系统的统计模块里可以加一个简单的直线折旧法计算：每月折旧额 = 原值 ×（1 - 残值率）/ 使用年限。资产列表里展示"原值""累计折旧""净值"，统计页按部门汇总一份资产价值和折旧趋势，这会让系统看起来特别完整。

后端计算好折旧字段，前端用 ECharts 画折线图或柱状图，技术难度同样不高，但展示出来的效果就是"这套系统不是简单的进销存，而是带有财务思维的资产管理系统"。

5.4 代码演进时最值得保留的编程习惯

做代码二开的时候，我最想提醒大家的是保持"小步提交、随时备份"。很多学生改代码，一上来就把原来的逻辑推倒重写，结果写了两天发现 bug 一堆，想回退又回不去。正确的做法是：每完成一个功能点，就用 Git 打一个 commit，确保任何时候都能回到上一个稳定版本。这在毕设阶段可能觉得多余，但你毕业后进入团队协作，没有人会不用 Git 协作。把答辩项目当成一个小工程去管理，本身就是在积累真正的职业素养。

还有一点：源码项目能跑通只是起点，你要有能力在原有基础上解释每一段关键逻辑。我会让学生试着对源码提三个问题：登录令牌是怎么校验的？资产状态在哪些地方被修改？新增资产时哪些字段是必传的？能把这三个问题答清楚，说明这套代码你是真的"吸收了"，而不只是"能启动"。有了这种理解打底，论文里的技术描述、系统设计、流程图，写起来都会顺畅很多，答辩时也经得起追问。