SpringBoot Vue MySQL 这套组合在 Java Web 方向的毕业设计里几乎快要成为“标配三件套”了。最近不少同学都在找一个能真正跑起来、能写进论文、逻辑还说得过去的完整项目语言考试信息报名系统就是一个非常典型的场景它既有用户端的信息浏览与在线报名又有管理端的考试维护、报名审核、公告发布业务流完整展示效果好技术栈又刚好覆盖前后端分离开发的主流实践。这篇文章就围绕这样一个项目把从需求拆解、数据库设计、后端接口实现、前端页面开发到本地部署上线的完整链路整理一遍顺手把我实际开发中踩过的坑也一并写出来给正在做毕设或者准备做类似管理系统的读者做一个参考。如果你手头已经有一套源码但不知道从哪开始看起或者你打算自己动手写但数据库表不知道建几张、接口不知道写几个这篇文章都能帮你把思路顺清楚。语言考试报名系统说起来不大但“考试管理 用户报名 审核流程 公告通知”这套东西一旦拆开就涉及角色划分、状态流转、接口权限、字段校验等一系列问题正是毕业设计论文里最好写的部分也是一个真正完整的全栈项目该有的样子。1. 项目概述与建设意义1.1 这个系统到底要解决什么问题语言类考试在高校和培训机构里太常见了英语四六级、日语等级考试、普通话水平测试、小语种能力认证等等。传统的线下报名流程往往是这样的考试主办方发通知考生去指定地点填纸质表格工作人员手动录入信息再人工核对照片和证件最后还要手动编排考场、生成准考证。这个过程的问题很明显效率低、易出错、统计难尤其是报名截止前几天数据量一大录入很容易乱。线上报名系统要解决的就是把“考试信息发布 → 考生报名 → 管理员审核 → 准考证生成 → 考试公告通知”这条链路全部搬到网页上。考生不再需要跑线下管理员不再需要面对一摞纸所有报名数据落到数据库里查询、统计、导出都方便。更关键的是报名规则可以通过代码强制校验比如报名时间范围、每个考生同一场考试只能报一次、未登录不能报名等这些规则靠人在线下执行很容易出纰漏但系统来做就是几行判断的事。从毕业设计的角度讲这类系统的价值在于它“麻雀虽小五脏俱全”。它不是简单的增删改查而是涉及到不同角色的权限边界、业务流程的先后顺序、数据的有效性和一致性问题。这些点既是论文里可以展开分析的核心内容也是面试时能拿出来讲的真实项目经验。1.2 技术选型为什么是 SpringBoot Vue MySQL先说后端。SpringBoot 几乎是当前 Java 后端开发的事实标准它对 Spring 全家桶做了大量自动配置让我们不用再写一堆 XML 配置文件。在毕设这个场景下选 SpringBoot最大优势是资料多、坑少。随便搜一个报错信息基本都能找到解决方案。而且 SpringBoot 内嵌了 Tomcat 容器本地开发时直接启动 main 方法就能跑起来不需要单独安装配置服务器这对很多还没系统接触过部署流程的同学来说减少了一个很大的障碍。再说前端。Vue 是目前国内使用率最高的前端框架之一它的上手曲线相对平缓没有 React 那么强的函数式编程思维要求模板语法直观配合 Element UI 或 Element Plus 组件库能够很快搭建出界面整齐的管理后台。Vue 的双向绑定让表单处理变得非常简单v-model 一行指令就能完成数据绑定再配合 axios 做接口请求前后端联调时效率很高。数据库选 MySQL 也不需要太多解释免费、开源、跨平台、性能稳定几乎所有云服务器都支持一键安装。加上 MySQL Workbench 或 Navicat 这类可视化工具建表、查数据都直观。对于用户量不会很大的毕设项目来说MySQL 的配置和管理成本是最低的。还有个不能忽略的原因这套技术栈对后续扩展友好。如果将来想加 Redis 做缓存、加 RabbitMQ 做消息通知、加 Nginx 做负载均衡都是在现有架构上的自然延伸而不是推翻重来。毕业论文里写“系统具有良好的扩展性”这句话是有实际支撑的。1.3 源码、数据库、论文、部署文档的配套价值一个完整的毕设项目交付物通常不是代码这一样。源码解决的是“功能怎么实现”的问题数据库脚本解决的是“数据怎么存”的问题论文解决的是“设计思路怎么写”的问题部署文档解决的是“怎么在我电脑上跑起来”的问题。源码自不用多说一套结构清晰、注释到位的源码能让读代码的人省下大量时间。数据库脚本则是很多同学一开始忽略、后面被卡住的东西拿到项目的第一件事是先导入 database.sql 文件把表建好没有这一步后端启动的时候一定会报数据库连接或表不存在的错误。部署文档更是救命稻草因为很多人第一次接触 Maven、Node.js、NPM 这些工具看一遍文档照着做比自己在网上零散搜索高效得多。所以这套交付物组合的真正价值在于代码帮你理解逻辑脚本帮你搭好数据基础论文帮你梳理表达部署文档帮你解决环境问题。四者配合起来拿到手的是一个“能跑、能看、能讲、能答辩”的完整项目。2. 系统整体设计与功能拆解2.1 角色划分与功能模块全景语言考试信息报名系统的用户角色通常划分为三种管理员、教师、考生。当然根据项目的具体定位也可以简化为管理员和用户两个角色但为了论文更有层次感建议保留三端设计。管理员是整个系统的核心控制方负责维护用户信息、创建和管理考试场次、审核报名数据、发布公告、查看统计报表。教师角色一般负责与考试相关的基础数据维护比如设置考试科目、录入成绩、查看本场考试报名人员名单。考生是系统使用频率最高的角色通过前端页面完成注册登录、浏览考试动态、在线报名、查看报名审核状态、下载或打印准考证信息。角色核心功能典型使用场景管理员用户管理、考试管理、报名审核、公告发布、数据统计创建一场三个月后的考试并设置报考条件教师考试信息维护、成绩录入、报名名单查询设置本场考试允许报考的语种和等级考生注册登录、浏览考试公告、在线报名、查看进度选择最近一场考试填写个人信息提交报名这套功能拆解的意义在于各角色看到的是同一套底层数据但被分配了不同的功能入口和权限边界正好体现“不同角色、不同视图”的设计思想。2.2 核心业务流程解析业务流是这个系统的心脏。理解业务流你才能理解代码里那些 if 判断为什么存在。整个系统最核心的一条流程是“考试发布与报名审核”。管理员登录后进入后台创建一场考试需要填写考试名称、考试语种、报名开始时间、报名结束时间、考试时间、考试地点、最大报名人数、报考条件说明还可以上传相关附件。发布后这条考试记录的状态从“草稿”变为“报名中”。考生在首页能看到所有状态为“报名中”的考试点击进入详情页如果当前时间在报名时间范围内就可以提交报名。考生报名时填写的信息大致包括姓名、身份证号、联系方式、所在院校或单位、报考等级、上传证件照。这里有一个很容易踩的坑同一个考生对同一场考试只能报名一次。这个规则一定要在数据库层面做唯一约束不能只靠代码判断否则高并发场景下可能出现重复报名。管理员收到报名申请后进入审核页面查看报名材料选择通过或驳回。驳回时需要填写驳回原因。报名状态从“待审核”变为“已通过”或“已驳回”。对于已经通过的报名系统可以自动生成一个准考证号规则一般是“考试年份考试ID四位序号”比如 2024 001 0001。这个准考证号可以打印在报名确认单上便于后续查询成绩和入场核验。整个流程中的状态变化前后端都要有清晰的标识推荐用数字枚举表示0 为草稿1 为报名中2 为已截止3 为已结束。审核状态用 0 为待审核1 为已通过2 为已驳回。用枚举数字存数据库前端再映射成中文字段展示这样既规范又灵活。2.3 非功能性需求与设计约束除了功能上的完整这类系统还需要考虑一些非功能性需求。首先是数据校验身份证号码必须符合 18 位格式手机号必须合法邮箱格式要校验照片大小和类型要限制其次是并发与一致性当报名人数接近上限时要保证不会超报。办法有两个层面一是在代码里通过事务控制在插入报名记录前先做一次 count 查询二是数据库的乐观锁机制。另一个容易被忽视的点是时间边界。报名截止时间是 2024-06-01 23:59:59那么考生在 23:59:58 提交的报名到底算不算数我个人处理的原则是以前端提交请求的服务器时间为准只要落在报名时间范围内就算有效然后在代码和数据库两个层面都严格按服务器时间比较而不是依赖用户本地的系统时间。否则不同考生设备时间不一样会产生大量边界投诉。3. 数据库设计与核心表结构3.1 实体关系梳理数据库设计是这套系统的地基。地基没打好后面写接口、写页面都会很别扭。语言考试报名系统至少需要这几张核心表系统用户表sys_user、考试信息表exam_info、报名记录表enrollment_record、公告信息表notice_info、成绩表exam_score还可以根据需求增加考试场次表或证件类型字典表。实体关系并不复杂一个用户可以有多条报名记录一场考试可以被多个用户报名报名记录是用户与考试之间的关联表同时携带审核状态、准考证号、报名时间等属性。公告表面向所有用户不区分角色。成绩表则是一对一关联到报名记录的或者直接挂在报名记录下面用考试分数、证书编号等字段来描述。这里要强调一个理念不要一上来就急着写代码先在纸上把实体关系画清楚用思维导图或者传统的手绘矩形框都行。表之间的关系理清了后端 Service 层怎么写、接口要提供哪些方法心里就有数了。3.2 关键表结构与字段设计说明以最核心的三张表为例给出参考设计。用户表 sys_user字段包括 id、username、password、real_name、id_card、phone、email、user_type1 管理员2 教师3 考生、status0 禁用1 正常、create_time、update_time。注意密码必须加密存储推荐使用 BCrypt 或 MD5 加盐绝对不可以用明文。考试信息表 exam_info字段包括 id、exam_name、exam_type语种或类别、exam_level、报名开始时间 sign_start_time、报名结束时间 sign_end_time、考试时间 exam_time、考试地点 address、报名上限 max_enrollment、已报名人数 enrolled_count、考试须知 description、状态 status、create_time、update_time。其中 enrolled_count 是一个冗余字段用来提高页面上报名进度的展示速度省去每次前端请求都 count 一次报名表。报名记录表 enrollment_record 是整张表的重点字段建议这样设计CREATE TABLE enrollment_record ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键ID, user_id BIGINT NOT NULL COMMENT 报名用户ID, user_name VARCHAR(50) NOT NULL COMMENT 报名时用户姓名冗余字段, id_card VARCHAR(30) NOT NULL COMMENT 身份证号, phone VARCHAR(20) NOT NULL COMMENT 联系电话, email VARCHAR(100) DEFAULT NULL COMMENT 邮箱, exam_id BIGINT NOT NULL COMMENT 考试ID, exam_name VARCHAR(100) NOT NULL COMMENT 考试名称冗余字段, enrollment_no VARCHAR(30) DEFAULT NULL COMMENT 准考证号, status TINYINT NOT NULL DEFAULT 0 COMMENT 审核状态0待审核 1已通过 2已驳回, reject_reason VARCHAR(255) DEFAULT NULL COMMENT 驳回原因, create_time DATETIME NOT NULL COMMENT 报名时间, update_time DATETIME NOT NULL COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY uk_user_exam (user_id, exam_id), KEY idx_exam_id (exam_id), KEY idx_user_id (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT考试报名记录表;注意看这段 SQL 里几个关键设计。uk_user_exam 唯一索引这是防止同一考生重复报名同一场考试的数据库层保险。user_name 和 exam_name 都做了冗余这样在查询报名记录列表时不用每次都 join 用户表和考试表性能更好代码也更简单。enrollment_no 允许为空因为只有报名通过审核后才生成准考证号。3.3 数据库设计的常见陷阱与规避第一个常见陷阱是乱用外键。很多教科书里强调外键约束但在真实项目中尤其是高并发场景下外键会影响写入性能且让数据迁移变得很麻烦。推荐的做法是保留逻辑关联不建物理外键通过索引和代码逻辑来保证一致性。第二个陷阱是时间字段类型选择。MySQL 8.0 之前timestamp 类型有 2038 年问题datetime 没有timestamp 还会随数据库时区变化如果服务器设置了不同时区展示出来可能与本地时间不一致。所以我更推荐使用 datetime 类型在 Java 后端实体类中对应 LocalDateTime配合 Jackson 的序列化配置前端展示和 JSON 传输都比较顺手。第三个陷阱是字符集和排序规则。MySQL 创建表时务必使用 utf8mb4 而不是 utf8。utf8 在 MySQL 里最多只支持 3 个字节存不了生僻字和 emoji 表情而真实姓名和备注信息里完全可能出现这类字符。如果建表后已经插入了数据再修改字符集操作麻烦且容易产生乱码所以最好在建表语句里就写清楚 DEFAULT CHARSETutf8mb4。4. 后端核心实现细节4.1 项目结构规划拿到源码之后第一步先看整体工程结构。这类项目通常采用标准的 Maven 多模块或单模块分层结构。我比较推荐单模块下的包分层简单直接适合毕设体量com.example.exam ├── config # 配置类跨域、拦截器注册等 ├── controller # 接口层接受前端请求 ├── service # 业务层核心业务逻辑 │ └── impl ├── mapper # MyBatis 数据访问层对应 XML 或注解 ├── entity # 实体类对应数据库表 ├── dto # 数据传输对象接收请求参数 ├── vo # 视图对象返回给前端的数据 ├── common # 通用类统一返回结果、异常处理、工具类 └── ExamApplication.java # 启动类controller 层只做参数接收和结果封装不写业务逻辑service 层处理业务规则比如报名时的校验流程mapper 层负责与数据库交互。这个区分非常重要。很多同学在答辩时被问“你的三层架构是什么意思”其实就是指 controller、service、mapper 的分层协作。controller 像餐厅门口的迎宾service 是后厨掌勺的mapper 是采购食材的各司其职。4.2 权限控制与安全拦截因为系统包含管理员、教师、考生三种角色所以接口必须做权限控制。最常使用的方案是 SpringBoot 拦截器 JWT Token。登录成功以后后端生成一个 JWT Token 返回给前端前端把 Token 存到 localStorage 或 Vuex 里之后每次请求都在请求头中携带 Authorization 字段。后端写一个拦截器对所有 /api/** 路径的请求进行 Token 校验解析出用户 ID 和角色放到 ThreadLocal 或 Request 上下文中供后续逻辑使用。核心拦截器逻辑大致如下public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equals(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token null || token.isEmpty()) { throw new BusinessException(401, 未登录或登录已过期); } // 解析token校验签名 LoginUser user JwtUtil.parseToken(token); if (user null) { throw new BusinessException(401, 未登录或登录已过期); } // 将用户信息存入Request域后续业务代码可获取 request.setAttribute(loginUser, user); return true; } }权限细节上有个容易踩坑的地方拦截器只是完成了“有没有登录”的身份校验但管理员接口和考生接口的区分还需要角色判断。可以在拦截器里通过 RequireRole 注解或直接判断请求路径前缀来处理。更简单粗暴的方式是在 Controller 方法开头通过工具类获取当前登录用户角色然后判断是否有权限。对毕设来说后者的可读性和可解释性更好导师提问时也更容易说清楚。4.3 报名接口的业务逻辑与实现报名是整个系统里最核心的接口没有之一。这个接口的逻辑必须严谨因为它是状态的交汇点。来看看报名接口应该做什么。前端提交报名信息时携带参数包括考试 ID、姓名、身份证号、手机号、邮箱、报考等级、照片地址等。后端接收这些参数后按照下面的顺序处理public void enroll(EnrollRequest request) { // 1. 校验当前登录用户 LoginUser user getLoginUser(); // 2. 查询考试信息 ExamInfo exam examMapper.selectById(request.getExamId()); if (exam null) { throw new BusinessException(考试不存在); } // 3. 判断报名时间窗口 LocalDateTime now LocalDateTime.now(); if (now.isBefore(exam.getSignStartTime()) || now.isAfter(exam.getSignEndTime())) { throw new BusinessException(不在报名时间范围内); } // 4. 校验是否重复报名 int count enrollmentMapper.countByUserIdAndExamId(user.getId(), exam.getId()); if (count 0) { throw new BusinessException(您已报名该考试请勿重复报名); } // 5. 校验报名人数是否已满 if (exam.getEnrolledCount() exam.getMaxEnrollment()) { throw new BusinessException(报名人数已满); } // 6. 保存报名记录并更新已报名人数 EnrollmentRecord record new EnrollmentRecord(); record.setUserId(user.getId()); record.setExamId(exam.getId()); record.setStatus(0); enrollmentMapper.insert(record); // 7. 考试表的已报名人数1 examMapper.increaseEnrolledCount(exam.getId()); }这里要注意两点。第一上面的代码只是逻辑示意实际生产还要处理事务。报名记录插入和报名人数更新是两步操作必须加 Transactional 保证原子性否则可能出现报名记录插进去了但人数没更新或者相反的情况。第二第 5 步和第 6、7 步之间并不是绝对的并发安全。如果两个用户在同一时刻提交报名可能都发现剩余名额还大于 0然后都插入成功导致超报。这在单机部署、并发量很低的毕设项目中出现的概率很小但论文里可以提一句“系统通过数据库唯一索引和事务控制基本避免重复若要支撑高并发可引入分布式锁”这个点写在论文里是加分项。4.4 后端开发中的真实问题记录后端开发过程中有几个问题是我自己实际遇到并且觉得非常典型的这里一并分享。第一个是 LocalDateTime 序列化问题。SpringBoot 默认使用 Jackson 序列化 JSON如果实体类中有 LocalDateTime 字段并且没有配置前端拿到的可能是一长串数组格式的时间而不是预期的“2024-06-01 12:00:00”。解决方式是在配置类中定义一个 Jackson 的 ObjectMapper Bean设置 JavaTimeModule 和日期格式Bean public Jackson2ObjectMapperBuilderCustomizer jsonCustomizer() { return builder - { builder.simpleDateFormat(yyyy-MM-dd HH:mm:ss); builder.serializers(new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(yyyy-MM-dd HH:mm:ss))); builder.deserializers(new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(yyyy-MM-dd HH:mm:ss))); }; }第二个是 MyBatis 的返回值问题。当接口返回 List 且没有查询到数据时Mapper 层返回的不应该是 null而是一个空集合。但有时因为 XML 写得不严谨导致返回了 null前端遍历时就会报错。所以代码里尽量使用 List.isEmpty() 判断而不是 list null。第三个是事务失效问题。Transactional 这个注解默认只在抛出 RuntimeException运行时异常时回滚如果你在业务代码中捕获了异常并吞掉事务就不会回滚。一个典型的错误写法是Transactional public void enroll() { try { enrollmentMapper.insert(record); examMapper.increaseEnrolledCount(examId); } catch (Exception e) { log.error(报名失败, e); } }这里如果把异常吞了事务感知不到失败不会回滚。正确做法是将异常抛出或使用 rollbackFor Exception.class 并重新抛出。5. 前端实现与交互细节5.1 Vue 工程结构与组件规划前端项目通常用 Vue CLI 或 Vite 初始化。拿 Vue 3 Vite 项目来说目录结构大致是src ├── api # 所有接口请求封装 ├── assets # 静态资源 ├── components # 通用组件 ├── router # 路由配置 ├── store # 状态管理 Pinia 或 Vuex ├── views # 页面视图 │ ├── admin # 管理员后台 │ ├── teacher # 教师端 │ └── student # 考生端 ├── utils # 工具函数 ├── App.vue └── main.jsapi 目录按模块拆文件例如 user.js、exam.js、enrollment.js、notice.js内部统一使用封装的 axios 实例。这样做的直接好处是页面组件里不散落一堆请求代码接口路径集中管理后面前端部署时如果要切换环境只需要改一个 baseURL 配置。5.2 路由分配与页面权限控制前端路由规划上建议把考生端和管理员后台的布局分开。例如/layout 作为整体布局组件内部通过 router-view 渲染子组件。管理员后台路由以 /admin 为前缀配置一个 meta.role 字段标记访问所需角色。在全局路由守卫中检查当前用户角色是否满足要求不满足就重定向到首页。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (!token to.path ! /login) { next(/login) return } if (token to.meta.role) { const userInfo JSON.parse(localStorage.getItem(userInfo) || {}) if (userInfo.userType ! to.meta.role) { next(/) return } } next() })这里有一个非常实际的问题当用户刷新页面时前端会重新加载路由和菜单此时如果只依赖 localStorage 里的用户信息可能在页面刷新后暂时显示空白或跳转到错误位置。稳妥的做法是在路由守卫里如果当前没有用户信息就调用一次后端接口 getInfo 获取当前用户详情然后继续放行。当然这也会增加一次网络请求但在毕设项目里完全没问题。5.3 axios 封装与前后端数据交互axios 封装是前端里值得认真处理的部分。统一封装后的请求实例要处理三件事自动在请求头携带 Token、统一处理 Http 状态码错误、解包后端返回的统一数据结构。后端统一返回的 JSON 结构一般长这样{ code: 200, message: 操作成功, data: { } }那么前端 axios 的 response 拦截器里就可以这样处理service.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { const status error.response?.status if (status 401) { localStorage.removeItem(token) router.push(/login) } else { ElMessage.error(error.response?.data?.message || 网络异常) } return Promise.reject(error) } )这个封装一旦写好后续每个页面请求时只需要关心业务数据不需要重复处理错误提示和登录过期跳转。5.4 Vue 里处理语言考试相关的音视频播放语言考试场景里经常涉及听力材料或口试示范视频这时候“在 Vue 中播放 m3u8 格式视频”就会成为一个很常见的技术点。m3u8 是 HLS 流媒体协议使用的索引文件格式原生 video 标签直接播放 m3u8 会有兼容性问题尤其在 Chrome 上。解决办法是引入 hls.js 这个库在一个自定义组件中动态创建 Hls 实例import Hls from hls.js if (Hls.isSupported()) { const hls new Hls() hls.loadSource(videoUrl) hls.attachMedia(videoElement) hls.on(Hls.Events.MANIFEST_PARSED, () { videoElement.play() }) }如果只是一个简单的考试宣传视频或听力音频不涉及流媒体分发其实也可以用普通的 MP4 文件直接播放减少服务器压力。这里提到这个细节是因为不少考生会把考试系统做成带听力演示或视频说明的版本提前知道播放方案能省下不少切换方案的尴尬时间。6. 本地环境搭建与部署完整流程6.1 必要环境准备一个能跑起来的项目环境必须一致。很多同学拿到源码后跑不起来不是代码问题而是本地环境版本不匹配。建议按下面的表格准备环境软件建议版本说明JDK1.8 或 11SpringBoot 2.x 用 JDK8 就好3.x 需要 JDK17Maven3.6用来拉取后端依赖MySQL5.7 或 8.08.0 需要注意驱动和时区配置Node.js14Vue2 建议 14~16Vue3 建议 16IDEIDEA 或 VSCode后端用 IDEA前端用 VSCode 都行这里重点提醒 MySQL 8.0 的一个变化JDBC 驱动类名从 com.mysql.jdbc.Driver 变成了 com.mysql.cj.jdbc.Driver连接 URL 也需要加上 serverTimezoneAsia/Shanghai 和 useSSLfalse 参数否则启动时会报时区错误或 SSL 连接错误。6.2 后端启动步骤后端启动并不复杂按顺序来就行。第一步导入数据库。打开 MySQL 客户端执行项目里提供的 database.sql 脚本自动创建数据库和表结构并插入初始管理员账号。第二步修改配置文件。打开 src/main/resources/application.yml把数据库地址、账号、密码改成你自己的spring: datasource: url: jdbc:mysql://localhost:3306/exam_system?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver第三步启动项目。IDEA 里打开项目等待 Maven 自动下载依赖然后运行 ExamApplication 的 main 方法。看到控制台输出 “Started ExamApplication” 就表示启动成功。默认端口如果没改一般是 8080浏览器访问 http://localhost:8080 如果返回 404 或统一响应都没关系因为后端接口通常有 /api 前缀直接用接口测试工具验证更准确。6.3 前端运行与打包部署前端项目下载依赖时npm install 经常遇到网络问题。解决方法很简单切换到国内镜像源npm config set registry https://registry.npmmirror.com然后执行npm install npm run devVite 启动后控制台会显示本地访问地址通常是 http://localhost:5173。打开这个地址看到页面后先用管理员账号登录然后创建一场考试再用考生账号完成一次报名流程这样前后端联调就通了。开发联调完成之后如果要部署到服务器前端需要构建静态文件。执行 npm run build会生成一个 dist 目录里面是纯静态的 HTML、JS、CSS 文件。通常用 Nginx 托管这些文件并把 /api 请求反向代理到后端的 8080 端口server { listen 80; server_name yourdomain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }这里 try_files $uri $uri/ /index.html 非常重要。如果不加这一行用户访问某个二级路由后刷新页面Nginx 会返回 404因为前端是 history 模式路由服务器上并没有对应的物理路径文件。加上 try_files 之后所有匹配不到静态文件的请求都会回到 index.html交给前端路由处理。7. 高频问题排查与避坑指南7.1 环境问题数据库连接失败与端口冲突后端启动时报 Communications link failure99% 是数据库没启动、账号密码错误、或者 URL 里端口不对。先排查 MySQL 服务有没有启动再用命令行或者可视化工具用同样的账号密码尝试连接缩小问题范围。还有一种常见情况是端口被占用。Tomcat 默认 8080 端口如果已被其他程序占用启动会直接失败并提示 Port already in use。解决方式有两条一是找出占用进程并结束二是修改 application.yml 里的 server.port 配置换一个端口。7.2 前端联调问题跨域与 404前后端分离开发时前端跑在 5173 端口后端跑在 8080 端口浏览器直接发请求必然触发跨域。这需要后端开启跨域支持。SpringBoot 中可以使用 CorsFilter 或 CrossOrigin 注解。更推荐在配置类中注册一个全局的 CorsFilter写一次全部生效。Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }如果配置了拦截器还要注意拦截器是否会先于跨域过滤器执行导致 OPTIONS 预检请求被拦截。最简单的办法是在拦截器 preHandle 方法里加一个 OPTIONS 请求直接放行的判断前面代码示例里已经包含了这一行。前端页面打开是空白或者刷新后 404基本就是路由模式的问题。开发环境用 history 模式时需要 devServer 配置 historyApiFallback: true生产环境需要 Nginx 的 try_files 配置。如果不想处理这些细节可以在 Vue Router 里改用 hash 模式URL 里会出现 # 符号但对毕设来说完全够用且更省心。7.3 论文中关于项目核心内容的写法建议拿到一个完整项目后毕业论文怎么写其实有清晰的套路。论文中最重要的部分是第三章“系统设计”和第四章“系统实现”。系统设计部分要画出系统架构图、功能模块图、数据库 E-R 图、核心业务流程图。系统实现部分需要粘贴核心代码片段并对关键逻辑给出说明代码不要贴大段选择报名接口、审核接口、JWT 拦截器、考试信息发布等有代表性的片段即可。论文的创新点怎么提炼不要写“提高了管理效率”这种空话。可以从这几个角度入手一是引入 JWT 无状态认证提升了接口安全性二是采用前后端分离架构提升了开发效率与可维护性三是通过唯一索引与事务控制保证了报名数据的准确性与一致性。每个点都是在真实代码中落地了的答辩时被追问也能讲出具体实现。7.4 快速验证项目是否可用的自检清单拿到项目并成功启动后不要急着改代码先做一轮功能自检。用管理员账号登录创建一场考试注意把报名时间范围设置为包含当前时间然后把考试状态改为报名中。退出管理员账号注册或登录一个考生账号在首页看到刚才创建的考试提交报名。再切回管理员账号在报名审核列表里看到这条报名记录选择通过确认考生账号下能看到审核通过状态和准考证号。这个闭环走通了系统核心功能就没问题了。这套流程走下来你会发现整个项目的核心逻辑其实围绕“状态”二字展开考试有状态、报名有状态、用户有状态。理解了状态流转你就理解了这套系统的骨架也就能在论文里把系统设计讲得清晰有条理。我个人的体会是这类项目最花时间的往往不是写代码而是把业务逻辑想清楚。很多同学拿到源码后喜欢从 controller 一层一层往下看看半天还是晕。我的建议是先看数据库表再看 service 里的几个核心方法最后回到 controller 验证入口和出参。数据库表是静态的结构service 是动态的逻辑两者一对照整个项目的脉络就出来了。后面写论文、准备答辩都是在这个脉络上做文章。