黄朗文1. 项目背景与技术选型
这个《计算机基础》网上考试系统是我去年为某高校计算机学院开发的一个实战项目。当时学院急需一个能够支持千人同时在线的考试平台，要求具备题库管理、智能组卷、在线监考、自动阅卷等功能。经过技术调研，我们最终选择了SpringBoot+Vue3的全栈方案。
选择SpringBoot作为后端框架主要基于以下几点考虑：
- 自动化配置特性大幅减少了XML配置，快速构建RESTful API
- 内嵌Tomcat服务器，部署简单，适合高校IT部门有限的技术能力
- 丰富的Starter依赖，轻松整合MyBatis、Redis等中间件
- Actuator端点提供完善的系统监控能力
前端选用Vue3则是因为：
- Composition API更适合复杂考试业务逻辑的组织
- 更好的TypeScript支持，减少运行时错误
- 更小的打包体积，提升考试页面的加载速度
- 响应式性能优化，适合高频操作的考试界面
实际开发中发现，Vue3的setup语法确实比Options API更灵活，特别是在处理考试计时器、答题卡状态同步这些需要跨组件共享的状态时。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计
2.1 整体架构图
code复制前端层(Vue3) ←HTTP→ 后端层(SpringBoot) ←JDBC→ 数据库(MySQL)
↑
WebSocket
↓
监考客户端(WebRTC)
2.2 核心模块划分
-
考生模块
- 登录认证(JWT)
- 考试列表展示
- 在线答题界面
- 交卷处理
-
题库模块
- 试题CRUD
- 试题分类管理
- 试题导入导出(支持Word/Excel)
-
组卷模块
- 智能组卷算法
- 试卷模板管理
- 难度系数控制
-
阅卷模块
- 客观题自动批改
- 主观题人工批改界面
- 分数统计与分析
-
监考模块
- 人脸识别验证
- 屏幕活动监控
- 异常行为检测
3. 关键技术实现
3.1 前后端分离架构
前端采用Vue3+TypeScript+Pinia技术栈：
typescript复制// 考试状态管理示例
export const useExamStore = defineStore('exam', () => {
const currentQuestion = ref<Question>()
const answers = reactive(new Map<number, string>())
const submitAnswer = (qid: number, answer: string) => {
answers.set(qid, answer)
}
return { currentQuestion, answers, submitAnswer }
})
后端SpringBoot主要配置：
java复制@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(examWebSocketHandler(), "/ws/exam")
.setAllowedOrigins("*");
}
}
3.2 高并发考试场景优化
- Redis缓存策略
- 试题信息缓存
- 考试结果暂存
- 分布式锁控制交卷
java复制public void submitExam(ExamSubmission submission) {
String lockKey = "exam:submit:" + submission.getExamId();
try {
boolean locked = redisTemplate.opsForValue()
.setIfAbsent(lockKey, "1", 30, TimeUnit.SECONDS);
if (locked) {
// 处理交卷逻辑
}
} finally {
redisTemplate.delete(lockKey);
}
}
- 数据库分表设计
- 考生表按学院分片
- 考试记录表按时间分表
- 答题详情表使用JSON字段存储
3.3 防作弊方案
- 考前人脸比对(OpenCV集成)
- 考试中定时抓拍(WebRTC API)
- 离开页面检测
javascript复制window.addEventListener('blur', () => {
examStore.logWarning('考生离开考试页面');
});
- 答案相似度分析(HanLP分词)
4. 典型问题与解决方案
4.1 考试倒计时同步问题
初期使用前端本地计时器，发现不同客户端时间不同步。最终方案：
- 服务端维护考试开始时间
- 前端定时(每30秒)同步服务器时间
- 使用WebSocket推送时间校准指令
4.2 大题量试卷加载慢
优化方案：
- 试题分页加载(懒加载)
- 图片类试题使用CDN加速
- 启用HTTP/2服务器推送
4.3 Vue3与Edge浏览器兼容性问题
遇到浏览器右上角控制按钮异常的问题，通过以下方式解决：
- 检查是否是CSS的transform影响
- 添加Edge专属样式覆盖
css复制@media all and (-ms-high-contrast: none) {
.exam-container {
overflow: hidden !important;
}
}
5. 部署实践
5.1 容器化部署
使用Docker Compose编排：
yaml复制version: '3'
services:
backend:
image: exam-system:1.0
ports:
- "8080:8080"
depends_on:
- redis
- mysql
frontend:
image: nginx:alpine
ports:
- "80:80"
volumes:
- ./dist:/usr/share/nginx/html
5.2 性能监控配置
SpringBoot Actuator端点配置：
properties复制management.endpoints.web.exposure.include=health,info,metrics
management.metrics.tags.application=${spring.application.name}
配合Prometheus+Grafana实现可视化监控。
6. 项目演进方向
- 增加AI监考功能(行为分析)
- 支持编程题自动评测(集成Judge0)
- 移动端适配(Uniapp方案)
- 接入学校统一身份认证
这个项目让我深刻体会到，教育类系统开发不仅要考虑技术实现，更要理解教学场景的特殊需求。比如考试过程中的网络抖动处理、突发断电的答案恢复机制等，都需要从实际使用场景出发进行设计。