杪橙a1. 项目背景与技术选型
在线教育行业近年来呈现爆发式增长，特别是在后疫情时代，网络课程平台已成为教育领域的基础设施。我们团队基于SpringBoot+Node.js+Vue技术栈开发的这套系统，正是为了满足高校和培训机构对线上教学、考试一体化的需求。
技术架构上采用前后端分离设计：
- 后端服务：SpringBoot 2.7 + MyBatis-Plus
- 中间层：Node.js 16.x（处理实时通信和文件转换）
- 前端框架：Vue 3 + Element Plus
- 数据库：MySQL 8.0 + Redis 6.2
关键决策：选择Node.js作为中间层而非纯Java方案，主要考虑视频转码、WebSocket消息推送等IO密集型任务的处理效率。实测表明，在千人同时在线的考试场景下，Node.js比纯Java方案减少约40%的服务器资源占用。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心功能模块实现
2.1 课程管理与视频处理
采用FFmpeg进行视频转码，关键配置如下：
java复制// SpringBoot中调用FFmpeg的示例
@Value("${ffmpeg.path}")
private String ffmpegPath;
public void convertVideo(File source) {
String cmd = String.format("%s -i %s -c:v libx264 -crf 22 -preset fast %s_output.mp4",
ffmpegPath,
source.getAbsolutePath(),
FilenameUtils.removeExtension(source.getName()));
Runtime.getRuntime().exec(cmd);
}
视频分片播放采用HLS协议，前端Vue组件关键逻辑：
javascript复制// Vue中使用hls.js播放m3u8
import Hls from 'hls.js'
export default {
mounted() {
if (Hls.isSupported()) {
const hls = new Hls()
hls.loadSource('https://example.com/stream.m3u8')
hls.attachMedia(this.$refs.videoPlayer)
}
}
}
2.2 在线考试系统设计
2.2.1 防作弊机制
- 浏览器锁定：通过Fullscreen API和Pointer Lock API限制窗口切换
- 题目乱序：服务端使用Fisher-Yates洗牌算法
- 行为监控：Node.js每秒采集一次客户端行为数据
javascript复制// Node.js端的行为监控片段
const monitor = (socket) => {
setInterval(() => {
const data = {
mouseMove: socket.mouseMoveCount,
tabChange: socket.tabChangeCount,
timestamp: Date.now()
}
redisClient.lpush(`exam:${examId}:${userId}`, JSON.stringify(data))
}, 1000)
}
2.2.2 实时保存答案
采用双写策略：
- 本地IndexedDB存储
- WebSocket实时同步到服务端
- 断网恢复后自动同步差异
3. 关键技术难点解决方案
3.1 高并发考试提交
使用Redis + Kafka应对峰值流量：
- 答案提交先写入Redis队列
- 后台Worker批量消费入库
- 采用布隆过滤器去重
SpringBoot配置示例：
yaml复制spring:
redis:
host: redis-cluster
port: 6379
kafka:
bootstrap-servers: kafka1:9092,kafka2:9092
producer:
acks: all
3.2 试卷自动批改
对于客观题使用规则引擎，主观题采用HanLP分词+相似度算法：
java复制// HanLP文本相似度计算
public double calculateSimilarity(String answer, String standard) {
List<String> answerWords = HanLP.segment(answer)
.stream().map(term -> term.word).collect(Collectors.toList());
List<String> standardWords = HanLP.segment(standard)
.stream().map(term -> term.word).collect(Collectors.toList());
return TextSimilarity.cosine(answerWords, standardWords);
}
4. 部署与性能优化
4.1 容器化部署方案
dockerfile复制# Node.js服务Dockerfile示例
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
4.2 Nginx配置调优
nginx复制# 视频分片缓存配置
server {
location ~ \.(m3u8|ts)$ {
expires 7d;
add_header Cache-Control "public";
access_log off;
}
}
4.3 压力测试数据
使用JMeter模拟1000并发：
- 平均响应时间：238ms
- 错误率：0.12%
- 服务器负载：CPU 65%/内存 70%
5. 踩坑实录与解决方案
-
Vue路由缓存问题：
在考试页面需要禁用keep-alive：javascript复制{ path: '/exam/:id', component: () => import('@/views/Exam.vue'), meta: { noCache: true } } -
Node.js内存泄漏：
使用--inspect参数分析后，发现是未清除的定时器导致：javascript复制// 错误示例 setInterval(() => { // 业务逻辑 }, 1000) // 正确做法 const timer = setInterval(() => { // 业务逻辑 }, 1000) process.on('SIGTERM', () => clearInterval(timer)) -
SpringBoot PDF XSS防护：
使用PDFBox时需过滤特殊字符：java复制String safeContent = HtmlUtils.htmlEscape(rawContent);
6. 扩展功能实现
6.1 腾讯地图集成
用于线下考点定位：
javascript复制// Vue组件中使用腾讯地图
export default {
mounted() {
const map = new TMap.Map(document.getElementById('map'), {
center: new TMap.LatLng(39.984104, 116.307503),
zoom: 12
});
}
}
6.2 即时通讯模块
使用WebSocket实现师生答疑：
javascript复制// Node.js端
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
broadcast(message); // 实现消息广播
});
});
7. 安全防护措施
-
接口防刷：
java复制@RateLimiter(value = 10, key = "#userId") @PostMapping("/submit") public Result submitAnswer(@RequestBody AnswerDTO dto) { // 业务逻辑 } -
JWT增强方案：
- 使用双Token机制（access_token + refresh_token）
- 每次请求指纹校验
- 关键操作需要二次验证
-
数据库审计：
xml复制<!-- MyBatis-Plus配置 --> <bean id="mybatisPlusInterceptor" class="com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor"> <property name="interceptors"> <list> <ref bean="dataChangeAuditInterceptor"/> </list> </property> </bean>
8. 监控与运维
-
SpringBoot Actuator配置：
yaml复制management: endpoints: web: exposure: include: health,metrics,prometheus metrics: export: prometheus: enabled: true -
ELK日志收集：
javascript复制// Node.js日志配置 const { createLogger, transports } = require('winston'); const { LogstashTransport } = require('winston-logstash-transport'); const logger = createLogger({ transports: [ new LogstashTransport({ host: 'logstash-server', port: 5044 }) ] });
9. 移动端适配方案
-
响应式布局：
css复制/* Vue组件中的媒体查询 */ @media (max-width: 768px) { .exam-container { grid-template-columns: 1fr; } } -
手势操作优化：
javascript复制// 禁止移动端缩放 document.addEventListener('touchmove', (e) => { if (e.scale !== 1) e.preventDefault(); }, { passive: false });
10. 项目演进方向
-
智能推荐算法：
- 基于用户学习行为的协同过滤
- 使用Spring ML实现简单推荐
-
虚拟实验室：
- WebGL集成Three.js
- 物理引擎使用Cannon.js
-
微服务改造：
java复制// Spring Cloud Alibaba示例 @SpringBootApplication @EnableDiscoveryClient public class ExamServiceApplication { public static void main(String[] args) { SpringApplication.run(ExamServiceApplication.class, args); } }
在实际开发中，我们发现SpringBoot与Node.js的进程间通信是个关键点。最终采用gRPC方案，性能比RESTful API提升3倍以上。具体实现中，需要特别注意proto文件的版本管理，我们通过在Git子模块中维护proto仓库解决了多项目同步问题。