SpringBoot+Vue考试报名系统：从环境搭建到二次开发的完整实战指南-平芜编程栈

如果你正在为毕业设计、课程设计或者个人练手项目寻找一个“既有完整功能，又能快速跑通”的Java Web项目，那么一个基于SpringBoot和Vue的考试报名系统，很可能就是你当前最需要的。

这个选题之所以经典，是因为它几乎涵盖了Web应用开发的核心流程：用户管理、权限控制、数据增删改查、表单提交、状态流转以及前后端分离架构。它不像一个简单的“学生管理系统”那样过于基础，也不像“电商秒杀系统”那样复杂到需要处理高并发和分布式事务。它处于一个完美的平衡点——既有足够的业务逻辑来展示你的技术能力，又不会因为过于复杂而让你在项目初期就陷入泥潭。

然而，找到源码只是第一步。更大的挑战在于：如何从零开始，真正理解并运行这个项目？如何将别人的代码变成你自己的知识？如何避免在环境配置、依赖冲突、跨域问题这些“坑”里浪费大量时间？更重要的是，如何基于这个项目进行二次开发，让它真正成为你简历上的亮点？

本文将以一个典型的“基于SpringBoot+Vue的考试报名系统”为例，为你提供一份从环境搭建到功能扩展的完整实战指南。我们不仅会带你跑通项目，更会深入讲解其核心模块的设计思路、前后端交互的关键技术点，以及在实际开发中如何规避常见陷阱。无论你是Java/Web开发新手，还是希望巩固全栈技能的中级开发者，这篇文章都将为你提供清晰的路径和可落地的代码。

1. 为什么选择“考试报名系统”作为练手/毕设项目？

在开始敲代码之前，我们有必要先理解这个项目的价值。它绝不仅仅是一个“交差”的工具，而是一个能让你系统性掌握现代Web开发技术栈的绝佳载体。

1.1 技术栈的黄金组合：SpringBoot + VueSpringBoot以其“约定大于配置”的理念，极大地简化了Spring应用的初始搭建和开发过程。Vue.js则以其渐进式、易上手、组件化的特点，成为前端开发的主流选择之一。这两者的组合，是目前企业级中后台管理系统最流行的技术方案之一。掌握它们，意味着你掌握了当前就业市场上一项非常硬核的技能。

1.2 业务逻辑的典型性与完整性一个考试报名系统，麻雀虽小，五脏俱全。它通常包含以下核心模块，这些模块是绝大多数信息管理系统的通用模型：

用户体系：考生、管理员等不同角色的注册、登录、认证与授权。
权限管理：基于角色的访问控制（RBAC），例如考生只能报名和查看自己的信息，管理员可以管理所有考试和考生。
核心业务：考试的创建、发布、报名、缴费（模拟）、准考证生成、成绩查询与发布。
数据管理：对考生信息、考试信息、报名记录等进行增删改查（CRUD）操作。
状态流转：报名从“待开始” -> “进行中” -> “已截止”，考生状态从“未报名” -> “已报名” -> “已缴费” -> “已考试” -> “成绩已发布”。

通过实现这些功能，你能完整地实践从数据库设计、后端API开发到前端页面交互的全流程。

1.3 极高的可扩展性与二次开发空间基础功能跑通后，你可以根据自己的想法进行无限扩展，这恰恰是毕设或面试中展示你个人能力的绝佳机会。例如：

增加在线支付集成：接入支付宝或微信支付沙箱环境，实现真实的报名缴费流程。
引入消息通知：集成邮件或短信服务，在报名成功、考试提醒、成绩发布时通知考生。
实现数据可视化：使用ECharts等库，为管理员后台增加报名人数统计、成绩分布等图表。
优化用户体验：增加考试场次选择、座位预选、报名表PDF导出等功能。
提升系统性能：为热门考试报名引入Redis缓存、消息队列进行流量削峰。

理解了项目的价值，接下来我们就进入实战环节。我们的目标是：拿到一套标准的SpringBoot+Vue考试报名系统源码，并让它成功运行起来。

2. 项目核心架构与技术栈详解

在动手之前，我们先从宏观上理解这个项目的技术架构。一个典型的前后端分离的考试报名系统，其结构清晰，各司其职。

2.1 系统架构图（逻辑描述）

用户浏览器 (Vue前端应用) | | (HTTP/HTTPS请求， Ajax/Fetch) v Nginx (反向代理/静态资源服务器) | | (代理请求) v SpringBoot后端应用 (运行在Tomcat/Jetty上) | | (JDBC/JPA) v MySQL数据库

前端 (Vue): 负责页面渲染和用户交互。通过Axios库向后端API发送请求，接收JSON格式的数据，动态更新页面。
后端 (SpringBoot): 提供RESTful API接口。处理业务逻辑、数据校验、数据库操作，并返回JSON数据给前端。
数据库 (MySQL): 持久化存储所有业务数据，如用户表、考试表、报名记录表等。

2.2 后端技术栈分解

核心框架: Spring Boot 2.x
持久层: MyBatis-Plus 或 Spring Data JPA (项目常用，极大简化CRUD操作)
数据库连接: Druid 数据库连接池 (提供监控功能)
安全控制: Spring Security 或 Shiro (用于登录认证和权限拦截)
数据校验: Hibernate Validator
API文档: Swagger2 / Knife4j (自动生成接口文档，便于前后端联调)
项目构建: Maven

2.3 前端技术栈分解

核心框架: Vue 2.x (目前多数项目仍用Vue2，生态成熟)
构建工具: Vue CLI
路由管理: Vue Router
状态管理: Vuex (用于管理跨组件的共享状态，如用户登录信息)
HTTP客户端: Axios
UI组件库: Element UI 或 Ant Design Vue (提供丰富的现成组件，加速开发)
CSS预处理: 可能使用Sass/Less

了解了整体架构，我们就可以开始准备开发环境了。这是项目能否成功运行的第一步，也是最容易出错的一步。

3. 环境准备与项目初始化

请严格按照以下步骤操作，确保你的本地环境与项目要求一致。

3.1 基础软件安装与检查

JDK: 版本至少为 JDK 8，推荐 JDK 11 或 17（LTS版本）。在命令行输入java -version验证。
```
java -version # 预期输出类似：openjdk version "11.0.15" ...
```

Maven: 版本 3.6.x 及以上。在命令行输入mvn -v验证。

mvn -v # 预期输出包含 Apache Maven 版本信息

配置阿里云镜像加速依赖下载（修改~/.m2/settings.xml）：

<mirror> <id>alimaven</id> <name>aliyun maven</name> <url>https://maven.aliyun.com/repository/public</url> <mirrorOf>central</mirrorOf> </mirror>

Node.js 与 npm: Vue开发需要。推荐安装 Node.js 14.x 或 16.x LTS版本。在命令行输入node -v和npm -v验证。
```
node -v npm -v
```
MySQL: 版本 5.7 或 8.0。安装后，请确保MySQL服务已启动，并记住root用户的密码。
IDE (集成开发环境):
- 后端: IntelliJ IDEA (社区版或旗舰版) 或 Eclipse。IDEA对Spring Boot支持更好。
- 前端: Visual Studio Code (轻量且插件丰富) 或 WebStorm。

3.2 获取并导入项目源码假设你已经从一个可靠的源码分享平台（如Gitee, GitHub）下载了名为exam-registration-system的项目压缩包。

解压项目：你会看到两个主要文件夹，例如backend(SpringBoot) 和frontend(Vue)。
导入后端项目到 IDEA:
- 打开IDEA，选择File -> Open，找到并选择backend文件夹下的pom.xml文件，以Maven项目形式打开。
- IDEA会自动下载所有Maven依赖，请耐心等待右下角进度条完成。
打开前端项目到 VSCode:
- 用VSCode打开frontend文件夹。
- 在VSCode的终端中，运行npm install或cnpm install来安装项目所需的所有Node模块。这个过程可能会持续几分钟。

3.3 数据库初始化这是关键一步，很多同学在这里卡住。你需要根据项目提供的SQL文件来创建数据库和表结构。

在项目中找到SQL文件，通常位于backend/src/main/resources目录下，名字可能是schema.sql、init.sql或exam_system.sql。
使用MySQL客户端（如命令行、Navicat、MySQL Workbench）连接你的MySQL服务。

创建一个新的数据库，名称通常与项目配置一致，例如exam_system。

CREATE DATABASE IF NOT EXISTS `exam_system` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE `exam_system`;

执行找到的SQL文件。如果文件中有创建数据库的语句，你可能需要先注释掉或删除，以免冲突。

环境准备就绪后，我们需要对项目进行关键配置，让它“认识”你的本地环境。

4. 关键配置详解与修改

项目的配置文件是连接代码与运行环境的桥梁。你必须根据自己电脑的实际情况进行修改。

4.1 后端SpringBoot配置 (application.yml或application.properties)配置文件通常位于backend/src/main/resources。我们以更清晰的application.yml格式为例。

# 后端配置示例 (application.yml) server: port: 8080 # 后端服务启动端口 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 重点修改下面这行！将your_password替换成你MySQL root用户的真实密码 url: jdbc:mysql://localhost:3306/exam_system?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai username: root password: your_password # 务必修改！ type: com.alibaba.druid.pool.DruidDataSource # 连接池类型 # Redis配置（如果项目用到了的话） redis: host: localhost port: 6379 password: # 如果没有密码就留空 database: 0 # 文件上传路径（根据你的操作系统修改） servlet: multipart: max-file-size: 10MB max-request-size: 100MB # MyBatis-Plus配置 mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 开启SQL日志，调试用 global-config: db-config: logic-delete-field: deleted # 全局逻辑删除字段名（如果项目有） logic-delete-value: 1 logic-not-delete-value: 0 # 自定义配置，如JWT密钥（务必修改！） jwt: secret: yourJwtSecretKeyHereChangeThisToSomethingLongAndRandom # 生成一个随机长字符串 expire: 604800 # token过期时间（秒），7天 header: Authorization

关键修改点：

spring.datasource.url: 确认数据库名(exam_system)、端口(3306)是否正确。
spring.datasource.password:必须改为你自己MySQL的密码。
jwt.secret: 这是一个用于生成登录Token的密钥，必须修改为一个复杂的随机字符串，生产环境尤为重要。

4.2 前端Vue配置前端配置主要关注API请求的地址，即你的后端服务在哪里。

找到前端项目的配置文件。在Vue CLI 3+项目中，通常有.env.development(开发环境) 和.env.production(生产环境) 文件，或者直接在src/utils/request.js或vue.config.js中配置。
修改开发环境的API基础地址。例如，在.env.development文件中：
```
# 前端环境变量配置示例 (.env.development) VUE_APP_BASE_API = 'http://localhost:8080'
```
这告诉Axios，在开发时所有API请求都发往http://localhost:8080。
检查前端端口。在package.json或vue.config.js中查看devServer配置，前端开发服务器通常运行在8081或3000端口，确保不与后端端口冲突。

配置完成后，激动人心的时刻到了——启动项目！

5. 项目启动与运行验证

我们遵循“先启动后端，再启动前端”的顺序。

5.1 启动SpringBoot后端服务在IDEA中，找到主启动类（通常名为XxxApplication，例如ExamApplication），右键点击，选择Run ‘ExamApplication’。

观察控制台日志，成功的标志通常包括：

Tomcat started on port(s): 8080 (http)
Started ExamApplication in X.XXX seconds
没有出现ERROR级别的红色错误日志，只有一些WARN可以暂时忽略。

如果启动失败，最常见的原因是：

数据库连接失败：检查application.yml中的数据库配置、密码、以及MySQL服务是否启动。
端口被占用：如果8080端口被占用，可以在application.yml中修改server.port。
依赖下载不全：尝试在IDEA的Maven面板点击刷新按钮，或命令行进入backend目录执行mvn clean install -DskipTests。

5.2 启动Vue前端开发服务器在VSCode中，打开终端（确保路径在前端项目frontend目录下），运行：

npm run serve # 或 yarn serve

成功启动后，终端会显示：

App running at: - Local: http://localhost:8081/ - Network: http://192.168.x.x:8081/

5.3 功能验证与首次访问

打开浏览器，访问前端地址：http://localhost:8081。
你应该能看到系统的登录页面或首页。
尝试使用默认账号登录。常见的默认账号可以在项目的README.md或SQL初始化文件中找到，例如：
- 管理员：admin / 123456
- 普通用户：student1 / 123456
登录成功后，逐一测试核心功能：
- 管理员端：进入考试管理，尝试创建一场新考试；进入用户管理，查看用户列表。
- 考生端：查看可报名的考试列表，尝试报名一场考试，查看个人报名记录。

如果页面能正常加载，数据能正确显示和提交，恭喜你，项目已经成功在本地运行起来了！

6. 核心功能模块代码深度解析

仅仅能运行项目是不够的。我们需要深入代码，理解其实现逻辑。我们以“考生报名考试”这个核心业务流程为例，拆解前后端是如何协作的。

6.1 数据库表结构设计（核心表）理解表结构是理解业务逻辑的基础。

-- 考试表 CREATE TABLE `exam` ( `id` bigint NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL COMMENT '考试名称', `description` text COMMENT '考试描述', `start_time` datetime NOT NULL COMMENT '报名开始时间', `end_time` datetime NOT NULL COMMENT '报名截止时间', `exam_time` datetime NOT NULL COMMENT '考试时间', `max_candidates` int DEFAULT NULL COMMENT '最大报名人数', `current_candidates` int DEFAULT '0' COMMENT '当前报名人数', `status` tinyint DEFAULT '0' COMMENT '状态：0-未开始，1-报名中，2-已截止，3-已结束', `created_by` varchar(255) DEFAULT NULL, `created_time` datetime DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB COMMENT='考试信息表'; -- 报名记录表 (核心关联表) CREATE TABLE `registration` ( `id` bigint NOT NULL AUTO_INCREMENT, `exam_id` bigint NOT NULL COMMENT '考试ID', `user_id` bigint NOT NULL COMMENT '用户ID', `registration_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '报名时间', `status` tinyint DEFAULT '1' COMMENT '状态：1-已报名，2-已取消', `payment_status` tinyint DEFAULT '0' COMMENT '支付状态：0-未支付，1-已支付', PRIMARY KEY (`id`), UNIQUE KEY `uk_exam_user` (`exam_id`,`user_id`), -- 防止重复报名 KEY `idx_user_id` (`user_id`), CONSTRAINT `fk_registration_exam` FOREIGN KEY (`exam_id`) REFERENCES `exam` (`id`), CONSTRAINT `fk_registration_user` FOREIGN KEY (`user_id`) REFERENCES `user` (`id`) ) ENGINE=InnoDB COMMENT='考试报名记录表';

唯一约束uk_exam_user：这是一个非常重要的设计，它保证了同一个用户对同一场考试只能有一条报名记录，在数据库层面避免了重复报名。
状态字段：exam.status和registration.status体现了业务的状态流转，是后端逻辑判断的核心依据。

6.2 后端API实现 (SpringBoot + MyBatis-Plus)我们来看报名接口的后端实现。

实体类 (Entity):Registration.java

// 文件路径：backend/src/main/java/com/exam/entity/Registration.java @Data @TableName("registration") // MyBatis-Plus注解，指定表名 public class Registration { @TableId(type = IdType.AUTO) // 主键自增 private Long id; private Long examId; private Long userId; private LocalDateTime registrationTime; private Integer status; // 1-已报名，2-已取消 private Integer paymentStatus; // 0-未支付，1-已支付 // 省略 getter/setter (由 @Data 注解提供) }

数据访问层 (Mapper):RegistrationMapper.java

// 文件路径：backend/src/main/java/com/exam/mapper/RegistrationMapper.java @Mapper // 或是在启动类上使用 @MapperScan public interface RegistrationMapper extends BaseMapper<Registration> { // MyBatis-Plus 已经提供了基础的CRUD方法，无需编写XML // 如果需要复杂查询，可以在这里定义方法，并在 resources/mapper/ 下编写对应的XML }

服务层 (Service):RegistrationService.java

// 文件路径：backend/src/main/java/com/exam/service/RegistrationService.java public interface RegistrationService extends IService<Registration> { /** * 用户报名考试（核心业务逻辑） * @param examId 考试ID * @param userId 用户ID * @return 报名结果 */ Result registerExam(Long examId, Long userId); }

服务实现层 (ServiceImpl):RegistrationServiceImpl.java

// 文件路径：backend/src/main/java/com/exam/service/impl/RegistrationServiceImpl.java @Service @Slf4j public class RegistrationServiceImpl extends ServiceImpl<RegistrationMapper, Registration> implements RegistrationService { @Autowired private ExamService examService; @Override @Transactional(rollbackFor = Exception.class) // 开启事务，保证数据一致性 public Result registerExam(Long examId, Long userId) { // 1. 校验考试是否存在且状态为“报名中” Exam exam = examService.getById(examId); if (exam == null) { return Result.error("考试不存在"); } if (exam.getStatus() != 1) { // 假设1表示报名中 return Result.error("当前考试不在报名期内"); } // 2. 校验是否已报满 if (exam.getMaxCandidates() != null && exam.getCurrentCandidates() >= exam.getMaxCandidates()) { return Result.error("该考试报名人数已满"); } // 3. 校验是否已报名 (利用数据库唯一约束，这里先查询提高用户体验) LambdaQueryWrapper<Registration> queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.eq(Registration::getExamId, examId).eq(Registration::getUserId, userId); if (this.count(queryWrapper) > 0) { return Result.error("您已报名该考试，请勿重复操作"); } // 4. 创建报名记录 Registration registration = new Registration(); registration.setExamId(examId); registration.setUserId(userId); registration.setRegistrationTime(LocalDateTime.now()); registration.setStatus(1); // 已报名 registration.setPaymentStatus(0); // 未支付 boolean saved = this.save(registration); if (!saved) { throw new RuntimeException("保存报名记录失败"); // 触发事务回滚 } // 5. 更新考试当前报名人数 (需要原子操作，避免并发超卖) boolean updated = examService.lambdaUpdate() .setSql("current_candidates = current_candidates + 1") .eq(Exam::getId, examId) .gt(Exam::getMaxCandidates, Exam::getCurrentCandidates) // 乐观锁，再次检查是否已满 .update(); if (!updated) { throw new RuntimeException("更新考试人数失败，可能已报满"); // 触发事务回滚 } log.info("用户{}成功报名考试{}", userId, examId); return Result.success("报名成功"); } }

代码解析：

@Transactional：这是一个关键注解。它确保了“创建报名记录”和“更新考试人数”这两个数据库操作在一个事务中，要么全部成功，要么全部失败回滚，防止数据不一致（例如，报名记录创建了，但人数没增加）。
乐观锁更新：在更新考试人数时，使用了gt(Exam::getMaxCandidates, Exam::getCurrentCandidates)作为更新条件。这是一个简单的乐观锁，在并发报名时，只有当前人数仍小于最大人数时，更新才会成功。失败的线程会抛出异常并回滚，有效防止超卖。
业务校验前置：在操作数据库前，先进行业务逻辑校验（考试状态、是否报满、是否重复），这能尽早返回错误，减少不必要的数据库压力。

控制层 (Controller):RegistrationController.java

// 文件路径：backend/src/main/java/com/exam/controller/RegistrationController.java @RestController @RequestMapping("/api/registration") public class RegistrationController { @Autowired private RegistrationService registrationService; @PostMapping // 通常需要添加权限注解，如 @PreAuthorize("hasRole('STUDENT')") public Result register(@RequestBody Map<String, Long> params) { Long examId = params.get("examId"); // 从JWT Token中获取当前登录用户的ID，更安全 Long userId = SecurityUtil.getCurrentUserId(); // 假设这是一个工具类方法 if (examId == null) { return Result.error("参数错误"); } return registrationService.registerExam(examId, userId); } }

6.3 前端页面与交互实现 (Vue + Element UI + Axios)现在我们看看前端如何调用这个报名接口。

API请求封装 (src/utils/request.js)

// 文件路径：frontend/src/utils/request.js import axios from 'axios' import { Message } from 'element-ui' import router from '../router' // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取基础URL timeout: 10000 // 请求超时时间 }) // 请求拦截器：在发送请求前统一添加Token service.interceptors.request.use( config => { const token = localStorage.getItem('token') // 从本地存储获取token if (token) { config.headers['Authorization'] = 'Bearer ' + token // JWT标准格式 } return config }, error => { console.log(error) return Promise.reject(error) } ) // 响应拦截器：统一处理错误 service.interceptors.response.use( response => { const res = response.data // 假设后端统一返回格式为 { code: 200, msg: 'success', data: ... } if (res.code !== 200) { Message.error(res.msg || '请求失败') // 如果是未登录或token过期，跳转到登录页 if (res.code === 401) { router.push('/login') } return Promise.reject(new Error(res.msg || 'Error')) } else { return res } }, error => { console.log('err' + error) Message.error('网络错误或服务器异常') return Promise.reject(error) } ) export default service

报名页面组件 (src/views/exam/ExamList.vue)

<!-- 文件路径：frontend/src/views/exam/ExamList.vue --> <template> <div class="exam-list"> <el-table :data="examList" style="width: 100%"> <el-table-column prop="title" label="考试名称"></el-table-column> <el-table-column prop="description" label="描述"></el-table-column> <el-table-column prop="startTime" label="报名开始时间" width="180"> <template slot-scope="scope"> {{ formatDate(scope.row.startTime) }} </template> </el-table-column> <el-table-column prop="endTime" label="报名截止时间" width="180"> <template slot-scope="scope"> {{ formatDate(scope.row.endTime) }} </template> </el-table-column> <el-table-column prop="currentCandidates" label="已报名/最大人数"> <template slot-scope="scope"> {{ scope.row.currentCandidates }} / {{ scope.row.maxCandidates || '不限' }} </template> </el-table-column> <el-table-column prop="status" label="状态" width="100"> <template slot-scope="scope"> <el-tag :type="statusTagType(scope.row.status)"> {{ statusText(scope.row.status) }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="120"> <template slot-scope="scope"> <el-button v-if="scope.row.status === 1 && !hasRegistered(scope.row.id)" type="primary" size="small" @click="handleRegister(scope.row.id)" :disabled="scope.row.maxCandidates && scope.row.currentCandidates >= scope.row.maxCandidates" > 报名 </el-button> <el-tag v-else-if="hasRegistered(scope.row.id)" type="success">已报名</el-tag> <el-tag v-else type="info">不可报名</el-tag> </template> </el-table-column> </el-table> </div> </template> <script> import { getExamList, registerExam } from '@/api/exam' // 导入API模块 import { mapGetters } from 'vuex' export default { name: 'ExamList', data() { return { examList: [] } }, computed: { ...mapGetters(['userId']), // 从Vuex获取当前用户ID // 判断用户是否已报名某场考试（可以从已报名列表里查） hasRegistered() { return (examId) => { // 这里简化处理，实际应从store或接口获取用户的报名列表进行判断 return false } } }, created() { this.fetchExamList() }, methods: { async fetchExamList() { try { const res = await getExamList() this.examList = res.data } catch (error) { console.error('获取考试列表失败:', error) } }, async handleRegister(examId) { // 二次确认 this.$confirm('确定要报名该考试吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { try { // 调用报名API const res = await registerExam({ examId: examId }) this.$message.success(res.msg || '报名成功！') // 报名成功后，刷新列表或更新本地状态 this.fetchExamList() } catch (error) { // 错误信息已在request拦截器中统一提示 console.error('报名失败:', error) } }).catch(() => { // 用户取消 }) }, formatDate(timestamp) { // 日期格式化函数 return new Date(timestamp).toLocaleString() }, statusTagType(status) { const map = { 0: 'info', 1: 'success', 2: 'warning', 3: 'danger' } return map[status] || 'info' }, statusText(status) { const map = { 0: '未开始', 1: '报名中', 2: '已截止', 3: '已结束' } return map[status] || '未知' } } } </script>

API模块 (src/api/exam.js)

// 文件路径：frontend/src/api/exam.js import request from '@/utils/request' // 获取考试列表 export function getExamList(params) { return request({ url: '/api/exam/list', method: 'get', params }) } // 报名考试 export function registerExam(data) { return request({ url: '/api/registration', method: 'post', data // { examId: xxx } }) }

通过以上代码的串联，我们清晰地看到了一个完整的报名流程：前端组件渲染列表 -> 用户点击报名按钮 -> 调用封装好的Axios API -> 请求携带Token到达后端Controller -> Service层执行业务逻辑和事务 -> 操作数据库 -> 返回结果给前端 -> 前端更新UI。

7. 项目运行中的常见问题与排查思路

即使按照步骤操作，你也可能会遇到一些问题。下表列出了最常见的问题及其解决方法。

问题现象	可能原因	排查方式	解决方案
后端启动失败，端口冲突	8080端口被其他程序（如其他SpringBoot应用、Tomcat）占用。	1. 查看启动日志中的错误信息。 2. 命令行运行`netstat -ano \| findstr :8080`(Windows) 或`lsof -i:8080`(Mac/Linux) 查看占用进程。	1. 终止占用端口的进程。 2. 在`application.yml`中修改`server.port`为其他端口（如 8088）。
后端启动失败，数据库连接错误	1. MySQL服务未启动。 2.`application.yml`中数据库配置（URL、用户名、密码）错误。 3. 数据库名不存在或字符集不匹配。	1. 检查MySQL服务状态。 2. 使用数据库客户端（如Navicat）尝试用配置文件中的信息连接。 3. 查看后端启动日志，通常会有明确的连接失败信息。	1. 启动MySQL服务。 2. 仔细核对并修改`application.yml`中的配置。 3. 确认数据库已创建，且字符集为`utf8mb4`。
前端`npm install`失败或很慢	1. 网络问题，连接npm官方仓库慢。 2. Node.js版本与项目不兼容。 3. 项目依赖包有冲突。	1. 观察错误信息，是否超时或404。 2. 检查`package.json`中的`engines`字段对Node版本的要求。 3. 删除`node_modules`文件夹和`package-lock.json`后重试。	1. 使用淘宝镜像：`npm config set registry https://registry.npmmirror.com`，然后重试。 2. 使用`nvm`切换Node.js版本到项目推荐版本。 3. 使用`npm cache clean --force`清理缓存后重试。
前端`npm run serve`失败	1. 依赖未正确安装。 2. 端口被占用（默认8080或8081）。 3. 配置文件（如`vue.config.js`）有语法错误。	1. 查看终端报错信息，通常会有模块找不到的错误。 2. 检查是否有其他Vue项目在运行。 3. 检查配置文件格式。	1. 确保`node_modules`已存在，重新执行`npm install`。 2. 修改`vue.config.js`中的`devServer.port`配置。 3. 修正配置文件错误。
前端页面能打开，但接口请求报404或跨域错误	1. 前端请求的API地址 (`VUE_APP_BASE_API`) 配置错误。 2. 后端服务未启动或端口不对。 3. 后端没有配置跨域（CORS）。	1. 打开浏览器开发者工具（F12）的Network面板，查看请求的URL是否正确。 2. 确认后端服务是否在运行，端口是否匹配。 3. 查看后端控制台是否有请求进来。	1. 检查并修正前端环境变量`.env.development`。 2. 确保后端服务已成功启动。 3. 在后端添加CORS配置类。示例：
登录后，操作接口返回401（未授权）	1. 前端未正确携带Token。 2. Token已过期。 3. 后端Spring Security/Shiro配置的拦截路径有误。	1. 查看浏览器开发者工具中请求的Headers里是否有`Authorization`头。 2. 检查Token的生成和验证逻辑。 3. 查看后端安全配置，是否放行了登录接口。	1. 检查`request.js`中的请求拦截器，确保从`localStorage`正确获取并设置了Token。 2. 重新登录获取新Token。 3. 检查后端安全配置类，确保API路径权限正确。
页面样式错乱，Element UI组件不显示	1. Element UI未正确引入或注册。 2. 前端构建过程出错。	1. 检查浏览器控制台是否有JS或CSS文件加载失败的报错。 2. 检查`main.js`中Element UI的引入和`Vue.use`语句。	1. 确认`package.json`中有`element-ui`依赖，并已安装。 2. 在`main.js`中确保正确引入：`import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);`

跨域问题补充解决方案（后端配置）：在后端创建一个配置类即可解决绝大多数跨域问题。

// 文件路径：backend/src/main/java/com/exam/config/CorsConfig.java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); // 允许所有域名进行跨域调用（生产环境应指定具体前端域名） config.addAllowedOriginPattern("*"); // 允许跨越发送cookie config.setAllowCredentials(true); // 放行全部原始头信息 config.addAllowedHeader("*"); // 允许所有请求方法跨域调用（GET, POST, PUT, DELETE等） config.addAllowedMethod("*"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }

8. 从“跑通”到“精通”：项目优化与二次开发建议

当你成功运行基础项目后，可以尝试以下优化和扩展，这将极大提升项目的深度和你的技术表现力。

8.1 安全性增强

密码加密存储：确保数据库中的用户密码是加密的（如使用BCryptPasswordEncoder），而不是明文。
接口防刷：对登录、注册、报名等关键接口添加限流（如使用Guava RateLimiter或Spring Cloud Gateway）或验证码。
SQL注入防护：坚持使用MyBatis-Plus的Lambda查询或#{}参数绑定，避免手动拼接SQL字符串。
XSS防护：对用户输入的内容进行转义或过滤，或使用安全的模板引擎。

8.2 性能与并发优化

报名并发问题：我们之前的Service层使用了乐观锁，但还可以进一步优化。可以考虑引入Redis分布式锁，或者在数据库层面使用SELECT ... FOR UPDATE悲观锁（需谨慎，影响性能）。
缓存热点数据：使用Redis缓存不常变但频繁访问的数据，如考试列表、用户基本信息。在ExamService中，可以先查缓存，缓存不存在再查数据库并写入缓存。
数据库索引优化：为经常用于查询条件的字段添加索引，如registration表的exam_id和user_id。

8.3 功能扩展（让你的毕设脱颖而出）

集成在线支付：使用支付宝/微信支付的沙箱环境，在报名流程中增加支付环节。修改registration表，增加支付流水号、支付时间等字段。支付成功后，回调你的后端接口更新payment_status。
实现文件上传：允许管理员上传考试相关的PDF通知、准考证模板。考生可以上传报名照片。使用Spring Boot的MultipartFile和配置好的文件存储路径。
增加消息推送：报名成功、考试临近、成绩发布时，通过集成邮件（如Spring Boot Mail）或短信服务（如阿里云短信）通知用户。
开发管理后台仪表盘：使用ECharts为管理员首页增加数据可视化图表，如“近一周报名趋势”、“各考试报名人数占比”等。
实现报名表导出：使用Apache POI或EasyExcel库，提供将报名名单导出为Excel文件的功能。

8.4 代码质量与工程化

统一响应封装：确保所有Controller都返回统一的Result对象，包含code、msg、data。
全局异常处理：使用@ControllerAdvice和@ExceptionHandler创建全局异常处理器，将系统异常转换为友好的错误信息返回给前端，避免暴露堆栈信息。
接口文档化：坚持使用Swagger2或Knife4j注解来描述API，生成在线文档，便于前后端协作和后期维护。
日志规范化：使用SLF4J+Logback，合理设置日志级别，记录关键业务操作和异常信息。

通过以上步骤，你不仅能够顺利运行一个SpringBoot+Vue的考试报名系统，更能深入理解其内在机理，并具备对其进行定制化开发和优化的能力。这个项目完全可以作为一份高质量的个人作品，展示你对全栈开发流程、数据库设计、业务逻辑处理以及常见问题解决的掌握程度。建议你在理解的基础上，动手实现一两个扩展功能，这会让你的学习效果和项目价值成倍提升。