1. 项目概述：Spring Boot+Vue3在线考试系统技术栈解析
这套基于SpringBoot2+Vue3+MyBatis-Plus的在线考试系统，是当前企业级Java Web开发的典型技术组合。我在实际教育信息化项目实施中发现，这种架构能很好地平衡开发效率与系统性能。系统采用前后端分离设计，后端使用Spring Boot 2.x提供RESTful API，前端通过Vue3构建响应式管理界面，配合MyBatis-Plus简化数据层操作，MySQL 8.0则提供了可靠的数据存储方案。
整套源码包含完整的在线考试全流程功能模块：
- 多角色权限体系（考生、教师、管理员）
- 题库管理与智能组卷
- 在线监考与防作弊机制
- 自动批改与成绩分析
- 考试过程异常处理
提示：该技术栈特别适合需要快速迭代的教育类项目，MyBatis-Plus的Active Record模式相比传统MyBatis能减少约40%的样板代码。
2. 环境搭建与项目初始化
2.1 后端工程配置要点
使用Spring Initializr创建项目时，这几个依赖项需要特别注意：
xml复制<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.3.1</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.5.3.1</version>
<scope>provided</scope>
</dependency>
MySQL 8.0连接配置示例（注意时区设置）：
yaml复制spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/exam_system?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
2.2 前端工程关键配置
Vue3项目创建后需要额外安装这些核心依赖：
bash复制npm install axios@1.3.4
npm install pinia@2.0.33
npm install element-plus@2.3.3
npm install vue-router@4.2.2
在main.js中需要初始化Element Plus：
javascript复制import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
3. 核心功能模块实现
3.1 考试业务领域建模
系统主要实体关系如下：
| 实体 | 关联关系 | MyBatis-Plus映射策略 |
|---|---|---|
| Exam | 一对多(Question) | @TableField(exist=false) |
| Question | 多对一(Exam) | 自动填充exam_id |
| User | 多对多(Exam) | 中间表user_exam |
| AnswerRecord | 多对一(User, Question) | 自动填充create_time |
3.2 智能组卷算法实现
采用权重随机算法实现题目抽取：
java复制public List<Question> generatePaper(ExamRule rule) {
// 按题型和难度分类题目
Map<String, List<Question>> questionMap = questionService
.lambdaQuery()
.eq(Question::getSubjectId, rule.getSubjectId())
.list()
.stream()
.collect(Collectors.groupingBy(q ->
q.getType() + "_" + q.getDifficulty()));
// 按规则抽取题目
List<Question> result = new ArrayList<>();
rule.getRuleItems().forEach(item -> {
String key = item.getType() + "_" + item.getDifficulty();
List<Question> candidates = questionMap.getOrDefault(key,
Collections.emptyList());
Collections.shuffle(candidates);
result.addAll(candidates.stream()
.limit(item.getCount())
.collect(Collectors.toList()));
});
return result;
}
3.3 实时监考技术方案
通过WebSocket实现前后端实时通信：
java复制@ServerEndpoint("/monitor/{examId}")
@Component
public class ExamMonitorEndpoint {
private static final ConcurrentHashMap<String, Set<Session>> sessions =
new ConcurrentHashMap<>();
@OnOpen
public void onOpen(Session session, @PathParam("examId") String examId) {
sessions.computeIfAbsent(examId, k -> ConcurrentHashMap.newKeySet())
.add(session);
}
@OnMessage
public void onMessage(String message, @PathParam("examId") String examId) {
// 处理异常行为报警
ExamEvent event = JSON.parseObject(message, ExamEvent.class);
alertService.processEvent(event);
}
}
前端对应实现：
javascript复制const socket = new WebSocket(`ws://${location.host}/monitor/${examId}`);
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'WARNING') {
ElNotification.warning({
title: '异常行为警告',
message: data.message
});
}
};
4. 系统安全与性能优化
4.1 防作弊关键技术点
- 界面锁定：通过Fullscreen API实现全屏考试
javascript复制document.documentElement.requestFullscreen()
.catch(err => {
console.error(`全屏错误: ${err.message}`);
});
- 行为监控：定时截屏+鼠标轨迹分析
java复制public class BehaviorAnalyzer {
private static final Deque<MouseTrack> tracks = new ArrayDeque<>(50);
public synchronized void addTrack(MouseTrack track) {
if (tracks.size() >= 50) {
tracks.pollFirst();
}
tracks.offerLast(track);
analyzeAbnormalPattern();
}
}
- 题目乱序：每个考生获取不同的题目顺序
sql复制SELECT * FROM question
WHERE exam_id = #{examId}
ORDER BY RAND()
LIMIT #{count}
4.2 高并发场景应对策略
采用Redis缓存热点数据：
java复制@Cacheable(value = "exam", key = "#examId")
public Exam getExamWithCache(String examId) {
return getById(examId);
}
@CacheEvict(value = "exam", key = "#examId")
public void updateExam(Exam exam) {
updateById(exam);
}
使用HikariCP连接池优化配置：
yaml复制spring:
datasource:
hikari:
maximum-pool-size: 20
minimum-idle: 5
idle-timeout: 30000
max-lifetime: 1800000
connection-timeout: 30000
5. 典型问题排查与解决方案
5.1 MyBatis-Plus常见问题
问题现象：新增记录时主键冲突
java复制// 错误示例
User user = new User();
user.setId(1L); // 手动设置ID
userService.save(user); // 报主键冲突
解决方案：
java复制// 正确做法1：使用MP的ID生成策略
@TableId(type = IdType.ASSIGN_ID)
private Long id;
// 正确做法2：不设置ID让MP自动生成
User user = new User();
user.setName("test");
userService.save(user);
5.2 Vue3组件通信问题
场景：跨多级组件传递监考事件
传统方案问题：
- Props逐层传递繁琐
- Event bus难以维护
推荐方案：使用Pinia状态管理
javascript复制// stores/monitor.js
export const useMonitorStore = defineStore('monitor', {
state: () => ({
warnings: []
}),
actions: {
addWarning(warning) {
this.warnings.push(warning)
}
}
})
// 组件中使用
const monitor = useMonitorStore()
monitor.addWarning('疑似切屏行为')
6. 项目部署与运维实践
6.1 生产环境打包优化
前端构建配置：
javascript复制// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor'
}
}
}
}
}
})
后端JVM参数建议：
bash复制java -jar -Xms512m -Xmx1024m -XX:MaxMetaspaceSize=256m \
-Dspring.profiles.active=prod \
exam-system.jar
6.2 监控指标配置
Prometheus监控关键指标：
yaml复制# application.yml
management:
endpoints:
web:
exposure:
include: health,info,metrics,prometheus
metrics:
tags:
application: exam-system
Grafana监控面板建议指标：
- 平均响应时间(<500ms)
- 错误率(<0.5%)
- 活跃会话数
- SQL查询耗时
- JVM内存使用率
我在实际部署中发现，当并发考生超过500人时，需要特别注意MySQL的max_connections参数调整，建议设置为：
sql复制SET GLOBAL max_connections = 800;
对于考试开始时的瞬时高峰，可以采用Nginx限流策略：
nginx复制limit_req_zone $binary_remote_addr zone=exam:10m rate=50r/s;
location /api/exam/start {
limit_req zone=exam burst=100;
proxy_pass http://exam-server;
}