2026 年了如果还要从零手写一套 Spring Boot Vue 的管理系统做毕业设计或者简历项目效率确实有点低。这次我们来看一套能直接运行的在线考试与学习测评系统前后端分离带完整的数据库脚本登录、题库、在线答题、成绩统计这类需求都有对应功能源码拿到手之后按步骤启动本地就能跑通。先说结论这套项目适合用来做毕设、课程设计也适合写进简历当作 Java 全栈项目经历。它不是只有登录注册的空壳而是把在线考试的核心闭环做了出来——管理员维护题库和考试考生参加考试并交卷系统自动判分并生成成绩记录。整个项目最值得关注的点有三个一是前后端分离结构清晰适合讲解项目架构二是增删改查功能完整适合展示后端接口设计和前端页面交互三是启动流程不复杂数据库脚本、后端服务、前端页面三步就能跑起来。这篇文章会完整讲一遍实际操作路径从环境准备、数据库初始化、后端启动、前端联调到功能测试、接口调用和常见问题排查。无论你拿到的源码是 Vue2 还是 Vue3 版本启动思路都一样按下面的流程走基本能在一个晚上把系统跑通并理解核心代码。1. 核心能力速览能力项说明项目类型前后端分离在线考试与学习测评系统后端技术栈Spring Boot、Spring MVC、MyBatis / MyBatis-Plus、MySQL前端技术栈Vue 2 / Vue 3、ElementUI / Element Plus、Axios、Vue Router主要功能用户登录、题库管理、考试管理、在线答题、自动判分、成绩查询与统计数据库MySQL源码附带建库建表脚本启动方式后端 IDEA 运行或命令行启动前端 npm 启动接口风格RESTful API前后端通过 JSON 交互适合场景Java 毕设、课程设计、简历项目、学习测评类业务原型扩展能力基于现有 CRUD 逻辑可扩展随机组卷、倒计时、防切屏、批量导入试题等这套系统的核心价值不在于技术多新而在于业务闭环完整。它把“考试”这件事拆成了几个标准模块用户模块负责身份认证试题模块负责题目维护考试模块负责组卷和考试流程成绩模块负责判分和统计。理解了这条链路后续不管是改造还是写答辩稿思路都会很清楚。2. 适用场景与使用边界先说适合谁。如果你是准备毕业设计的 Java 方向学生这套系统可以直接作为项目基底。Spring Boot 负责后端接口Vue 负责前端页面MySQL 存数据三个技术栈正好覆盖 Java 后端、前端框架和数据库设计三块答辩时每一层都有内容可讲。如果你是正在准备 Java 简历项目的开发者这套系统的亮点在业务闭环不是简单的学生管理系统而是带有考试流程、判分逻辑和成绩统计的测评系统比普通的增删改查项目更有区分度。如果你只是需要一个能在本地演示的教学案例这套项目同样合适。人员角色、题库、考试记录都有明确的数据关系适合用来讲解 REST API 设计、Vue 组件通信和数据库表设计。不过使用边界也要说清楚。在线考试系统是典型的业务原型系统不是高并发生产平台。它适合本地开发、课程演示、中小规模内部测评但不适合直接部署到公网承载大规模考试。原因很直接系统本身通常没有做复杂的防作弊机制、高并发压力处理、分布式部署和细粒度权限控制这些属于生产环境才需要考虑的问题。从安全合规角度也要注意系统会保存用户账号、考试题目、答题记录和成绩数据如果后续要部署到真实环境必须对密码做加密存储、对接口做访问鉴权、对考试数据进行定期备份。涉及真实学生信息或内部测评数据时要严格控制访问范围避免未授权导出和滥用。3. 环境准备与前置条件在启动项目之前先把整条工具链准备好。这套系统依赖以下软件软件作用版本建议JDK运行 Spring Boot 后端JDK 8 或 JDK 17以源码要求为准Maven管理后端依赖与打包Maven 3.6 以上Node.js运行前端 Vue 项目建议 Node.js 16 以上npm 或 yarn安装前端依赖npm 7 以上即可MySQL存储业务数据MySQL 5.7 或 MySQL 8.0IDEA 或 Eclipse导入并运行后端代码IDEA 最佳VSCode 或 WebStorm编辑和启动前端代码可选Navicat 或 MySQL Workbench可视化导入数据库脚本可选版本这一条很重要。如果源码是基于 Spring Boot 2.x 写的JDK 8 就能运行如果是 Spring Boot 3.x 版本JDK 需要 17 以上。拿到源码后先看 pom.xml 里的 spring-boot-starter-parent 版本再决定安装哪个 JDK。前端同理Vue2 项目通常用 Webpack 构建启动命令是 npm run serveVue3 项目很多用 Vite 构建启动命令是 npm run dev。数据库准备步骤相对固定。在 MySQL 中新建一个数据库例如 exam_system字符集选择 utf8mb4然后导入源码提供的 SQL 脚本。常见导入方式有两种。第一种是命令行导入mysql -u root -p CREATE DATABASE exam_system DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; exit; mysql -u root -p exam_system exam_system.sql第二种是用 Navicat 图形化导入新建数据库后右键运行 SQL 文件选择源码里的 sql 脚本并执行。导入完成后建议先查一下核心表结构确认脚本是否完整。USE exam_system; SHOW TABLES;能够看到用户表、试题表、考试表、考试记录表等相关数据表说明数据库准备完成。后面的配置和启动都建立在数据库正常运行的基础上这一步不建议跳过。4. 2小时跑通整体流程标题说 2 小时搭建实际时间主要花在环境初始化和首次启动上。如果本机环境已经齐全整体可以压缩到 1 小时以内。下面是一套时间拆解方案时间任务产出0 - 15 分钟检查 JDK、Node、MySQL导入数据库脚本数据库表结构完整15 - 30 分钟导入后端项目修改数据库连接配置后端配置文件就绪30 - 50 分钟启动后端观察 Maven 依赖下载和启动日志后端接口可访问50 - 80 分钟导入前端项目npm 安装依赖并启动前端首页可访问80 - 110 分钟完成登录、题库 CRUD、在线答题、成绩查询测试核心业务流程跑通110 - 120 分钟梳理项目结构记录接口和功能点理解可复述的项目全貌这个时间表的核心逻辑是先让系统跑起来再回头理解代码。第一次跑项目不建议边看代码边启动因为依赖下载、环境报错会分散注意力。先把运行链路打通数据库、后端、前端三个部分都确认正常再去看代码结构会清晰很多。有一点要提醒Maven 首次下载依赖和 npm 首次安装依赖都比较耗时具体时间取决于网络情况和本机配置。如果下载慢可以提前配置阿里云 Maven 镜像和 npm 国内镜像能节省不少时间。# npm 设置国内镜像源速度更快 npm config set registry https://registry.npmmirror.com!-- Maven 镜像配置参考放在 settings.xml 中 -- mirror idaliyunmaven/id mirrorOfcentral/mirrorOf urlhttps://maven.aliyun.com/repository/public/url /mirror5. 后端项目启动与验证5.1 导入后端项目后端代码通常是一个 Maven 工程目录结构类似exam-server ├── pom.xml ├── src │ ├── main │ │ ├── java │ │ │ └── com/example/exam │ │ │ ├── controller │ │ │ ├── service │ │ │ ├── mapper │ │ │ ├── entity │ │ │ └── config │ │ └── resources │ │ └── application.yml │ └── test在 IDEA 中选择 File - Open定位到后端代码目录等待 Maven 自动导入依赖。如果 pom.xml 中的依赖没有自动下载可以在右侧 Maven 面板点击刷新按钮或者执行命令手动刷新。mvn clean install -DskipTests5.2 修改数据库配置数据库连接信息在 application.yml 或 application.properties 中修改。核心配置有三项数据库地址、用户名、密码。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/exam_system?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这里最容易出现两个问题。第一个问题是数据库连接失败报错信息通常是 Access denied 或 Communications link failure解决方法是检查用户名密码和 MySQL 服务是否启动。第二个问题是 MySQL 8 和 MySQL 5 驱动类不同如果源码使用 MySQL 8 驱动而本机是 MySQL 5需要调整 driver-class-name 和依赖版本。5.3 启动后端服务IDEA 中找到带有 main 方法的启动类右键运行。看到类似下面的日志说明后端启动成功Tomcat started on port(s): 8080 (http) Started ExamApplication in 8.765 seconds在浏览器或 Postman 中请求一个健康检查接口即可验证http://127.0.0.1:8080/api/user/info如果使用命令行启动可以进入后端工程目录执行mvn spring-boot:run后端进程要一直保持运行终端关闭或服务停止后前端将无法获取数据。5.4 后端启动失败的通用排查顺序后端启动失败时按下面顺序排查通常比到处翻日志高效第一确认 MySQL 是否已启动端口 3306 是否可访问。第二确认 application.yml 中的账号密码是否正确。第三看 Maven 依赖是否完整本地仓库是否有报错日志。第四看启动日志中的异常堆栈常见的是端口被占用或表不存在。第五如果是端口冲突修改 server.port 或结束占用 8080 的进程。6. 前端项目启动与前后端联调6.1 安装前端依赖前端代码通常是一个独立的 Vue 工程。打开终端进入前端目录安装依赖npm installVue2 项目安装完成后启动命令是npm run serveVue3 项目如果是 Vite 创建启动命令是npm run dev具体启动命令以 package.json 中的 scripts 字段为准。6.2 配置前端代理前后端分离项目最常遇到的是跨域问题。前端地址是 localhost:5173 或 localhost:8081后端接口是 localhost:8080浏览器会拦截跨域请求。最简单的方式是在前端工程中配置代理。如果是 Vue CLI 项目在 vue.config.js 中增加module.exports { devServer: { port: 8081, proxy: { /api: { target: http://127.0.0.1:8080, changeOrigin: true } } } };如果是 Vite 项目在 vite.config.js 中配置export default { server: { port: 5173, proxy: { /api: { target: http://127.0.0.1:8080, changeOrigin: true } } } };配置完成后前端请求 /api/login 实际上会被转发到后端 8080 端口浏览器端不会存在跨域限制。如果源码在后端已经实现了跨域过滤器前端也可以不配代理直接请求全路径接口。6.3 启动前端并登录前端启动后浏览器访问对应地址通常能看到系统登录页面。使用源码 SQL 脚本里初始化好的管理员账号登录。不同源码初始化账号可能不同建议在 sql 文件中搜索 admin 相关的 INSERT 语句确认账号和密码。如果登录成功并进入首页说明前后端联调已经打通。前端的菜单、用户信息、题目列表都来自后端接口登录成功本身就说明两端的网络链路、Token 或 Session 机制、数据库查询都正常。6.4 联调验证清单联调阶段建议重点验证以下内容登录成功后页面是否能获取当前用户名。退出登录后是否还能访问受保护页面。刷新页面后登录状态是否丢失。前端页面调接口时浏览器 Network 面板是否有红色 4xx、5xx 请求。后端日志中是否能正常打印 SQL 查询语句。前端启动后不要关闭终端。npm run serve 或 npm run dev 进程停止前端页面立即无法访问。7. 核心功能测试与效果验证系统跑通后下面这套测试流程可以把主要功能完整过一遍。建议按顺序操作因为考试流程依赖用户和数据准备。7.1 登录与权限验证使用管理员账号登录系统确认首页展示正常。这个环节主要验证认证逻辑。如果登录失败优先检查账号密码是否正确、用户状态是否为启用、后端数据库中用户表数据是否存在。登录成功的标准是页面跳转到系统首页菜单栏展示完整功能浏览器请求中没有出现 401 或 403 状态码。7.2 题库增删改查验证进入试题管理或题库管理页面依次执行新增、修改、删除、查询操作。新增一条选择题时至少要填写题干、选项 A/B/C/D、正确答案和所属课程或考试类型。保存后刷新页面确认列表能看到新试题。修改操作建议改动题干中的关键字保存后重新查询确认修改生效。删除操作可以新建一条测试数据后删除避免误删初始化数据。这个环节看似简单但它是后端接口设计、前端表单组件、数据库映射三个层面的综合验证。如果新增试题失败要按三层去排查前端是否把参数完整传到了后端、后端参数是否使用 RequestBody 正确接收、SQL 插入语句是否包含了所有非空字段。7.3 考试管理与在线答题考试管理页面中查看已有考试或创建一场新考试。创建考试通常需要设置考试名称、考试时长、考试科目并选择试题。进入考试详情页面点击开始考试系统会按配置展示试题。完成答题后点击交卷系统自动判分并生成成绩。在线答题是整个项目的核心环节验证点包括试题是否按预期加载、选择答案后是否能正常提交、交卷后是否能看到得分。如果交卷失败检查提交接口接收的参数格式以及答案数据在数据库中的存储是否正常。如果源码实现了选择题自动判分考试成绩一般由系统根据正确答案比对生成。要重点确认错题是否记录、得分是否计算正确、考试记录是否新增了一条记录。7.4 成绩查询与统计成绩管理或考试记录页面中查看最近一次交卷的成绩。确认能够看到得分、考试时间、答题明细等信息。如果系统包含统计图表可以验证按课程或考试维度的统计结果是否与数据库数据一致。像平均分、最高分、及格率这类统计指标建议手工核算一遍防止逻辑错误。7.5 功能验证清单功能模块测试操作成功标准登录功能输入账号密码登录跳转到首页用户信息正确题库新增添加选择题并保存列表出现新试题题库修改修改题干后保存列表显示修改后的内容题库删除删除测试试题列表不再显示该试题创建考试设置考试信息并关联试题考试列表出现新考试在线答题进入考试并提交答案正常交卷并生成成绩成绩统计查看考试记录和得分得分与手动计算一致8. 接口 API 调用示例前后端分离项目的优势是接口职责清晰。下面是一套通用接口调用模板实际接口路径以源码 Controller 中的注解为准。8.1 接口设计预览常见接口如下方法路径说明POST/api/user/login用户登录GET/api/user/info获取当前用户信息GET/api/question/list分页查询试题POST/api/question/add新增试题PUT/api/question/update修改试题DELETE/api/question/delete/{id}删除试题GET/api/exam/list查询考试列表POST/api/exam/submit提交试卷GET/api/score/record查询成绩记录8.2 登录接口调用使用 curl 调用登录接口curl -X POST http://127.0.0.1:8080/api/user/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}预期返回结果是一个 JSON 对象包含登录成功标记、用户信息和 Token 或 Session 标识。具体字段以源码返回结构为准。8.3 提交试卷示例提交试卷属于写操作通常需要携带考试 ID 和答案列表。示例请求结构如下curl -X POST http://127.0.0.1:8080/api/exam/submit \ -H Content-Type: application/json \ -d { examId: 1, answers: [ {questionId: 1, answer: A}, {questionId: 2, answer: B} ] }如果系统启用了 Token 鉴权需要在请求头中增加 Authorization 字段。这个设计的核心在于提交接口只负责接收数据判分逻辑在 Service 层完成。8.4 axios 调用示例后端接口写好后前端通过 axios 调用。以登录为例import axios from axios; export function login(username, password) { return axios.post(/api/user/login, { username: username, password: password }); }调用登录接口并处理返回结果login(admin, 123456) .then(res { console.log(登录成功, res.data); // 保存用户信息或跳转首页 }) .catch(err { console.error(登录失败, err); });调通用 axios 实例时可以统一设置 baseURL、超时时间和请求拦截器避免每个页面重复写请求配置。8.5 接口调试建议调试接口时使用 Postman 或 Apifox 这类工具比在浏览器中直接输入地址更好用。调试核心要关注几点请求方法是否与后端一致。请求头 Content-Type 是否为 application/json。JSON 字段名是否与后端实体类字段名对应。返回结果和前端页面期望的数据结构是否匹配。很多页面显示异常的问题根源不是前端样式而是返回 JSON 的字段名和前端取值不一致。例如后端返回 score前端写成 scoreValue控制台就会出现 undefined。9. 资源占用与性能观察本地开发环境下资源占用主要来自四个进程后端 Java 服务、前端 Node 服务、MySQL 服务、IDEA 开发工具。后端 Spring Boot 服务启动后会占据一个端口默认常见是 8080。前端 Vue 开发服务占据一个端口常见是 8081 或 5173。观察资源占用时打开系统任务管理器或使用命令行查看端口和进程netstat -ano | findstr :8080 tasklist | findstr java前端开发服务器启动时会进行实时编译内存占用取决于项目规模和依赖数量。后端服务在启动阶段资源占用较高因为要初始化 Spring 容器、加载 Mapper 映射和建立数据库连接池启动完成后进入稳定状态。在线答题这类业务的数据量通常不大性能瓶颈一般出现在两个位置一个是试题列表和考试列表的数据库查询另一个是大批量提交试卷时的数据写入。如果列表页打开较慢优先检查 Mapper 中是否有明确的 SQL 过滤条件避免一次性查询全表数据。性能优化手段不需要一开始就做但要知道方向列表接口使用分页查询避免查询全部记录。常用条件字段建立普通索引例如 username、exam_id。前端图片和静态资源使用懒加载。开发环境接口响应时间在几百毫秒内都属正常超过两秒就需要关注慢查询。考试记录表数据增长后可以按考试场次归档。注意一点不要在本地开发阶段就引入 Redis 缓存和一整套复杂中间件先把单机 MySQL 下的业务跑正确再谈性能优化。10. 常见问题与排查方法问题现象可能原因排查方式解决方案启动后端报端口被占用8080 被其他进程占用netstat 查看端口占用释放端口或修改 server.port前端登录时接口 404后端服务未启动或代理路径错误查看浏览器 Network 请求地址启动后端检查代理配置前端登录时接口 401账号密码错误或 Token 失效检查数据库用户表数据重置账号或重新登录数据库连接失败MySQL 服务未启动或密码不对使用命令行连接 MySQL启动 MySQL修改连接配置页面显示中文乱码数据库或请求字符集不对查看响应头和数据表编码统一使用 utf8mb4 编码刷新页面后找不到路由前端路由和页面路径不匹配检查 Vue Router 配置确认访问路径正确npm install 卡住网络较慢或依赖缺失查看终端日志配置国内镜像后重新安装交卷后没有成绩记录判分逻辑异常或提交失败查看后端日志和数据库记录检查提交参数和数据表结构实际开发中遇到最多的问题是前端 404 和后端 401。404 意味着请求根本没有到达 Spring Boot 接口排查方向自然是代理配置和后端启动状态401 意味着请求到达了后端但认证没通过重点检查登录 Token 的传递和校验逻辑。这两个方向如果搞混会浪费很多时间。11. 最佳实践与使用建议11.1 第一次先跑通再改代码拿到项目后第一步永远是完整跑通。不要一边读源码一边改代码因为初始状态未知时改代码会增加排查成本。启动成功、登录成功、能创建一个新考试并完成答题后再开始修改。11.2 业务数据分目录管理将数据库脚本、后端代码、前端代码、项目文档放为四个独立目录避免混在一起。数据库脚本统一保存建库建表语句和初始化数据这对答辩演示和代码审查都有帮助。11.3 密码加密与访问控制如果系统当前是明文密码存储建议在简历项目展示前把密码改为 BCrypt 加密。后端做统一鉴权拦截器前端路由添加权限判断。这个改动不大但能明显提升项目完成度。11.4 统一接口返回结构前后端联调时最容易出现的问题就是返回格式不一致。建议后端所有接口统一返回结构例如包含 code、message、data 三个字段。前端 axios 封装响应拦截器统一处理业务错误码。{ code: 200, message: 操作成功, data: {} }11.5 批量导入试题扩展题库管理如果支持单条新增可以再扩展一个 Excel 批量导入接口。前端提供模板下载按钮后端解析 Excel 文件并逐行校验入库。批量导入是考试系统里很实用的功能面试时也能作为性能优化和数据校验的例子来讲。11.6 数据备份与合规提醒考试系统保存的是真实业务数据哪怕本地开发也要养成备份习惯。修改表结构前先导出原表批量导入前先备份数据库。如果系统有真实学生信息务必限制测试数据的人脸、姓名、学号等敏感信息使用范围。11.7 答辩或面试准备建议简历上写这个项目时不要只写“完成登录、增删改查”。建议按三层准备描述业务层面讲考试流程设计技术层面讲 Spring Boot 分层结构和 REST API 设计数据层面讲表关系、索引与状态流转。每一个功能点准备好一个问题例如“交卷时如何保证数据一致性”“如何防止重复提交试卷”这是面试最高频的追问方向。12. 总结与下一步这个项目最值得尝试的地方在于它完整覆盖了在线考试系统的业务闭环。相比单纯的管理系统它有在线答题、自动判分、成绩统计这些有业务逻辑的功能能给简历提供更好的素材。拿到项目后最先要做的事情就是按本文步骤跑通全链路数据库导入、后端启动、前端启动、登录系统。第一次跑通后不要着急改代码先把项目结构和核心接口记录一遍确保自己知道登录请求走的是哪个 Controller、试题列表数据存在哪张表。最容易踩的坑有三个MySQL 连接配置和版本不对导致后端启动失败前端代理没配置导致登录接口 404npm 依赖安装慢导致前端迟迟无法启动。这三个问题提前了解可以少耗很多时间。后续如果要升级这个项目建议优先做三件事第一加入随机组卷和试题批量导入把题库模块做强第二增加考试倒计时和防切屏检测提升考试场景真实感第三将成绩导出 Excel闭环管理更完整。技术方向上补充 Spring Security 做认证鉴权或者引入 MyBatis-Plus 简化数据访问都能作为简历上新增的亮点。先把这套基础版本跑通再去扩展是最稳妥的路线。