Vue+Spring Cloud构建高并发在线考试系统架构实践-北京尧图网络

简介这是一套基于Vue与Spring Cloud微服务架构开发的完整在线考试系统源码面向Java全栈开发者、微服务学习者及高校课程设计实践者解决传统单体考试系统扩展性差、前后端耦合高、权限控制粗粒度等典型问题。资源包共200个文件含115个核心Java后端服务类微服务模块划分清晰、18个Vue管理界面组件、18个JS业务逻辑脚本、16个MyBatis映射XML及6个YML配置文件涵盖从Eureka注册中心、Zuul网关到JWTRSA无状态认证的完整微服务链路压缩包仅535KB轻量易部署。已有972人学习下载适合深入理解Spring Cloud生态集成、VueElementUI后台开发、Nuxt考试前端实现及AOP日志埋点等实战场景。读者可直接运行学习班级/科目管理、Excel批量导入题库、智能组卷、三级权限控制与操作日志审计等全部功能模块。1. 为什么一个在线考试系统非得拆成 Vue Spring Cloud——不是为了炫技而是监考、并发、题库隔离三座大山压过来时的唯一解法你见过凌晨两点还在重启考试服务的运维吗我见过。去年某省教师资格证统考单场 8 万人同时作答前端卡死在交卷按钮上后端线程池爆满日志里全是Connection reset和TimeoutException。问题不在代码写得烂而在架构没拆开单体 Spring Boot 打包一个 WAR前端 Vue 静态资源全塞进去题库、考生、监考、阅卷、防作弊模块全挤在同一个 JVM 里——就像把考场、监控室、试卷印刷厂、阅卷办公室全塞进一间教室人一多谁也动不了。Vue 负责渲染题干、控制倒计时、拦截切屏、本地缓存草稿Spring Cloud 则把「考生身份核验」「实时监考流分发」「题库动态加载」「客观题秒级批改」「主观题分片阅卷」拆成独立服务用 Nacos 做注册发现OpenFeign 调用Sentinel 限流Gateway 统一路由。这不是“微服务教科书式应用”而是当真实业务要求「3000 人/秒并发入场」「单题 200ms 内返回批改结果」「考中突发断网可续考」时Vue 和 Spring Cloud 各司其职、互不拖累的硬性分工。适合正在做教育 SaaS、企业内训平台、或高校教务系统升级的后端/全栈工程师——尤其当你已经踩过单体架构在考试场景下的所有坑。2. 前端 Vue 层不止是页面渲染更是考试状态的“黑匣子”与第一道防线在线考试系统的前端远不止展示 HTML。它要实时感知用户行为切屏、缩放、多窗口、本地缓存未提交答案、离线续考、音视频监考流接入、防截屏WebRTC Canvas 混淆、倒计时精准同步非单纯setInterval。Vue 3 的 Composition API Pinia 是当前最稳的选择状态管理不再靠 Vuex 的嵌套 mutation而是用useExamStore()封装考试生命周期每个考点如useTimer()、useMonitor()独立响应式避免全局 store 被监考逻辑污染。2.1 用 Vue Router 实现考试全流程路由守卫从登录到交卷的 7 个关键状态考试不是单页跳转而是严格的状态机。我们定义 7 个路由路径全部通过router.beforeEach全局守卫控制流转// router/index.js const routes [ { path: /login, name: Login, component: () import(/views/Login.vue) }, { path: /exam/start/:examId, name: ExamStart, component: () import(/views/ExamStart.vue), meta: { requiresAuth: true } }, { path: /exam/ready/:examId, name: ExamReady, component: () import(/views/ExamReady.vue), meta: { requiresAuth: true, requiresExamStatus: READY } }, { path: /exam/doing/:examId, name: ExamDoing, component: () import(/views/ExamDoing.vue), meta: { requiresAuth: true, requiresExamStatus: DOING } }, { path: /exam/pause/:examId, name: ExamPause, component: () import(/views/ExamPause.vue), meta: { requiresAuth: true, requiresExamStatus: PAUSED } }, { path: /exam/submit/:examId, name: ExamSubmit, component: () import(/views/ExamSubmit.vue), meta: { requiresAuth: true, requiresExamStatus: SUBMITTING } }, { path: /exam/result/:examId, name: ExamResult, component: () import(/views/ExamResult.vue), meta: { requiresAuth: true } } ]关键不在路径本身而在守卫逻辑——它必须和后端考试状态服务exam-status-service实时校验// router/index.js router.beforeEach(async (to, from, next) { const token localStorage.getItem(exam_token) if (!token to.meta.requiresAuth) return next(/login) // 仅对考试中路由校验状态一致性 if (to.meta.requiresExamStatus) { try { const examId to.params.examId const res await api.get(/exam/status/${examId}) // 调用 exam-status-service if (res.data.status ! to.meta.requiresExamStatus) { // 状态不一致比如用户手动输入 /exam/doing 但实际已被强制暂停 ElMessage.warning(考试状态异常请刷新页面或联系监考员) return next({ name: ExamReady, params: { examId } }) } next() } catch (e) { ElMessage.error(无法获取考试状态请检查网络) next(/login) } } else { next() } })提示exam-status-service是 Spring Cloud 中独立部署的服务不依赖考试主服务exam-core-service专管状态变更事件如监考员后台强制暂停、考生异常退出触发重置。Vue 前端只读不写所有状态变更必须经由后端服务广播避免前端伪造状态。2.2 防切屏与本地草稿用 Visibility API IndexedDB 实现“断网不丢题”考试中最常被忽略的体验是用户切出浏览器、手机弹出微信、甚至误点桌面图标——这些行为必须被捕捉并上报。Vue 组件内监听visibilitychange事件配合navigator.permissions.query({ name: display-capture })Chrome 91检测屏幕共享状态但更通用的是用document.hidden!-- ExamDoing.vue -- script setup import { onMounted, onUnmounted, ref } from vue import { useExamStore } from /stores/exam const examStore useExamStore() const isHidden ref(false) const handleVisibilityChange () { isHidden.value document.hidden if (isHidden.value) { // 记录切出时间戳用于监考后台标记异常 examStore.recordSwitchEvent(HIDE, Date.now()) // 自动保存当前答题草稿到 IndexedDB examStore.saveDraftToIDB() } else { // 切回时校验是否超时防止用户挂机 examStore.checkResumeTime() } } onMounted(() { document.addEventListener(visibilitychange, handleVisibilityChange) }) onUnmounted(() { document.removeEventListener(visibilitychange, handleVisibilityChange) }) /scriptsaveDraftToIDB()方法使用idb库封装 IndexedDB 操作结构如下keyvaluedraft_${examId}_${userId}{ questions: [{ id: q1, answer: A, timestamp: 1717023456 }], lastSave: 1717023456 }IndexedDB 不是“临时缓存”而是考试数据的第二副本。当网络中断时用户仍可继续答题恢复连接后自动比对服务端最新题干版本version字段若题干未变则合并提交若题干已更新如监考员临时修改题目则弹窗提示“题目已更新请重新加载”。2.3 音视频监考流接入不用安装插件用 WebRTC Vue 的video原生支持“vue播放m3u8免安装”这类热词背后是考试系统对低延迟、高兼容音视频流的刚需。M3U8 是 HLS 协议延迟高通常 10s不适合实时监考。我们采用 WebRTC over WebSocket 方案monitor-gateway-serviceSpring Cloud Gateway将/webrtc/{examId}/{userId}路径代理至monitor-webrtc-service后者用Kurento或Mediasoup提供 SFUSelective Forwarding Unit能力。Vue 前端只需标准 WebRTC 流程template video refvideoRef autoplay muted classmonitor-video/video /template script setup import { ref, onMounted } from vue const videoRef ref(null) let pc null onMounted(async () { try { const response await fetch(/api/webrtc/offer?examId${examId}userId${userId}) const offer await response.json() pc new RTCPeerConnection({ iceServers: [{ urls: stun:stun.l.google.com:19302 }] }) pc.ontrack (event) { if (videoRef.value event.track.kind video) { videoRef.value.srcObject event.streams[0] } } await pc.setRemoteDescription(offer) const answer await pc.createAnswer() await pc.setLocalDescription(answer) // 发送 answer 回后端 await fetch(/api/webrtc/answer, { method: POST, body: JSON.stringify({ sdp: answer.sdp, type: answer.type }) }) } catch (e) { console.error(WebRTC 初始化失败, e) } }) /script注意WebRTC 必须走 HTTPS本地开发可用localhost且需后端monitor-webrtc-service提供 STUN/TURN 服务器配置。纯前端无法直连摄像头——必须经由信令服务中转 SDP这是安全边界也是热词“vue播放欢乐谷m.3u8”无法复用于监考的根本原因M3U8 是单向流WebRTC 是双向信令媒体流。3. 后端 Spring Cloud 层把“考试”这个业务域切成 5 个可独立伸缩、故障隔离的服务Spring Cloud 不是 Spring Boot 的升级版而是分布式协作框架。在线考试系统里我们按业务域而非技术层拆分服务每个服务有自己数据库、独立部署、独立扩缩容策略。核心服务拓扑如下服务名技术栈关键职责扩容策略数据库gateway-serviceSpring Cloud Gateway Redis统一路由、JWT 校验、限流Sentinel、跨域CPU 密集型横向扩容Redis令牌黑名单auth-serviceSpring Security OAuth2 JWT登录鉴权、Token 签发、权限校验RBAC读多写少读写分离MySQLuser/role/permexam-core-serviceSpring Boot MyBatis Plus题库管理、试卷生成、考试创建、成绩计算高 IOSSD 存储MySQLquestion/paper/examexam-status-serviceSpring Boot RocketMQ实时状态广播开始/暂停/结束、事件驱动消息吞吐型多消费者组RocketMQtopic: exam-statusmonitor-webrtc-serviceSpring Boot Kurento Java ClientWebRTC 信令交换、SFU 流转发、监考流录制GPU 加速可选专用节点MongoDB录制元数据3.1 用 Nacos 实现服务注册与配置中心一份配置多环境灰度发布Nacos 替代了 Eureka Config Server 的组合。所有服务启动时向 Nacos 注册gateway-service通过LoadBalancerClient动态发现下游服务地址。更重要的是配置管理——考试系统对配置极其敏感exam-core-service的题库加载策略、monitor-webrtc-service的最大并发流数、gateway-service的 Sentinel 限流阈值都必须能热更新。application.yml中启用 Nacos 配置spring: cloud: nacos: discovery: server-addr: 192.168.1.100:8848 namespace: ${nacos.namespace:public} # 不同环境用不同 namespace config: server-addr: 192.168.1.100:8848 file-extension: yaml group: EXAM_GROUP prefix: ${spring.application.name}在 Nacos 控制台创建配置exam-core-service.yamlexam: question: cache-ttl: 300 # 题目缓存 5 分钟 load-strategy: RANDOM # RANDOM / SEQUENCE / WEIGHTED paper: max-attempt: 3 # 同一试卷最多尝试 3 次 time-limit: 3600 # 试卷总时长秒 sentinel: flow: qps-threshold: 500 # 每秒最大请求量提示namespace是 Nacos 的环境隔离单位public为默认命名空间生产环境应建prod、test、gray三个 namespace通过-Dnacos.namespaceprod启动参数指定。配置变更后Value(${exam.question.cache-ttl})会自动刷新无需重启服务。3.2 OpenFeign 远程调用用接口契约代替 HTTP URL 拼接exam-core-service需要调用auth-service校验考生身份调用exam-status-service广播考试开始事件。传统 RestTemplate 易出错、难维护。OpenFeign 通过接口定义实现声明式调用// 在 exam-core-service 中定义 FeignClient(name auth-service, path /api/auth) public interface AuthServiceClient { GetMapping(/user/{userId}) ResultUserDTO getUserById(PathVariable(userId) Long userId); PostMapping(/token/validate) ResultBoolean validateToken(RequestBody TokenValidateRequest request); } FeignClient(name exam-status-service, path /api/status) public interface ExamStatusClient { PostMapping(/start) ResultVoid startExam(RequestBody StartExamRequest request); PostMapping(/pause) ResultVoid pauseExam(RequestBody PauseExamRequest request); }Feign 自动注入 Ribbon 负载均衡Nacos 已注册实例列表并集成 Sentinel 熔断。当auth-service不可用时getUserById()直接返回 fallbackComponent public class AuthServiceClientFallback implements AuthServiceClient { Override public ResultUserDTO getUserById(Long userId) { return Result.fail(用户服务暂时不可用请稍后再试); } // ... 其他方法 }注意Feign 接口必须与auth-service的 Controller 方法签名完全一致包括RequestMapping路径、RequestBody注解否则 404。建议将 Feign 接口定义抽到exam-api公共 module由所有服务依赖保证契约一致性。3.3 Sentinel 流控与熔断给每个服务接口装上“压力阀”考试高峰时exam-core-service的/paper/generate接口可能被恶意刷题请求打垮。Sentinel 不是简单限流而是按 QPS、线程数、异常比例多维度保护// exam-core-service 中 RestController public class PaperController { PostMapping(/generate) SentinelResource(value paper-generate, blockHandler handleBlock, fallback handleFallback) public ResultPaperDTO generatePaper(RequestBody PaperGenerateRequest request) { // 业务逻辑 } public ResultPaperDTO handleBlock(PaperGenerateRequest request, BlockException ex) { return Result.fail(试卷生成繁忙请稍后再试); } public ResultPaperDTO handleFallback(PaperGenerateRequest request) { return Result.fail(内部错误请重试); } }在 Sentinel 控制台http://localhost:8080为paper-generate设置规则规则类型阈值降级策略效果QPS 流控200快速失败超过 200 QPS 直接返回handleBlock线程数流控50快速失败同时处理请求不超过 50 个线程异常比例0.5RT 1000ms连续 5 次调用超时触发熔断 10 秒血泪经验不要只设 QPS 限流考试系统中数据库慢查询导致线程阻塞才是常态。必须配线程数限流否则一个慢 SQL 就拖垮整个服务。我们线上曾因 MySQL 主从延迟paper-generate查询题库耗时 3s线程池占满其他接口全挂——加了线程数限流后慢请求被快速拒绝保障了/exam/status等核心接口可用。4. 前后端联调与部署Vue 打包放进 Spring Boot 中不用反向代理才是生产级正解热词“vue打包放进springboot中”是新手常见误区。把dist/文件夹复制进src/main/resources/static/看似简单实则埋下三大雷① 静态资源无法 CDN 加速所有 JS/CSS 都走后端 Tomcat② Vue Router 的history模式 404Spring Boot 默认不处理前端路由③ 无法独立灰度前端改个按钮颜色也要发整包后端。正确做法Vue 独立构建Nginx 反向代理前后端彻底解耦。4.1 Vue 构建配置输出静态资源适配 Spring Cloud Gateway 路由前缀vue.config.js必须设置publicPath与网关路径一致// vue.config.js module.exports { // 假设网关路由为 /exam-ui/ publicPath: process.env.NODE_ENV production ? /exam-ui/ : /, outputDir: dist, assetsDir: static, devServer: { proxy: { /api: { target: http://localhost:8080, // 指向 gateway-service changeOrigin: true, pathRewrite: { ^/api: } } } } }构建后dist/目录结构为dist/ ├── index.html ├── static/ │ ├── js/ │ └── css/ └── favicon.ico注意publicPath: /exam-ui/决定了所有资源引用路径如script src/exam-ui/static/js/app.js。这要求 Nginx 将/exam-ui/路径映射到该目录且index.html中的base href/exam-ui/会被自动注入。4.2 Nginx 配置解决 history 模式 404 静态资源缓存Nginx 不只是反向代理更是前端网关# /etc/nginx/conf.d/exam.conf upstream gateway { server 192.168.1.101:8080; # gateway-service 地址 } server { listen 80; server_name exam.yourdomain.com; # 前端静态资源 location /exam-ui/ { alias /opt/exam-frontend/dist/; try_files $uri $uri/ /exam-ui/index.html; # history 模式兜底 expires 1y; add_header Cache-Control public, immutable; } # API 请求代理到 Spring Cloud Gateway location /api/ { proxy_pass http://gateway/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # WebRTC 信令WebSocket location /webrtc/ { proxy_pass http://gateway/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; } }关键点try_files $uri $uri/ /exam-ui/index.html解决 Vue Routerhistory模式刷新 404proxy_http_version 1.1Upgrade头支持 WebSocket保障 WebRTC 信令通道expires 1y让 JS/CSS 永久缓存配合文件哈希名Vue CLI 默认开启实现无感更新。4.3 Spring Cloud Gateway 路由配置统一鉴权服务发现gateway-service的application.yml定义路由规则不再硬编码服务地址spring: cloud: gateway: routes: - id: exam-core uri: lb://exam-core-service predicates: - Path/api/core/** filters: - StripPrefix2 # 去掉 /api/core 前缀 - TokenRelay # 透传 JWT Token 给下游 - id: auth uri: lb://auth-service predicates: - Path/api/auth/** filters: - StripPrefix2 - id: monitor-webrtc uri: lb://monitor-webrtc-service predicates: - Path/webrtc/** filters: - StripPrefix1lb://表示从 Nacos 获取服务实例列表自动负载均衡。TokenRelay过滤器将 Gateway 解析的 JWT Token 透传给下游服务下游用PreAuthorize注解即可校验权限无需重复解析。避坑 / 常见问题 / 排查现象 1Vue 页面空白控制台报Failed to load resource: the server responded with a status of 404 ()路径为/exam-ui/static/js/app.xxxx.js原因Nginxalias路径末尾多了/如alias /opt/exam-frontend/dist/;应为alias /opt/exam-frontend/dist;无尾斜杠或publicPath与 Nginx location 路径不匹配。解决检查 Nginx error.log确认alias路径是否真实存在且权限为nginx用户可读用curl -I http://localhost/exam-ui/static/js/app.xxx.js验证静态资源可访问。现象 2登录后跳转/exam/doing/123页面显示 404但 Network 中GET /api/core/exam/status/123返回 200原因Vue Routerhistory模式下直接访问/exam/doing/123是前端路由Nginx 未配置try_files直接返回 404。解决确认 Nginxlocation /exam-ui/块中try_files指令存在且index.html路径正确检查publicPath是否为/exam-ui/。现象 3WebRTC 连接失败Chrome 控制台报WebSocket connection to wss://exam.yourdomain.com/webrtc/... failed原因Nginx 未配置 WebSocket 升级头或proxy_pass地址协议错误应为http://非https://。解决确认location /webrtc/块中包含proxy_http_version 1.1和Upgrade头检查proxy_pass是否指向 HTTP 地址Gateway 默认 HTTP。现象 4考试中考生频繁收到“网络异常”但实际网络正常原因gateway-service的spring.cloud.gateway.httpclient.connect-timeout默认 45s而某些云厂商 LB 会 30s 断连导致长连接被中间设备切断。解决在gateway-service的application.yml中显式配置超时spring: cloud: gateway: httpclient: connect-timeout: 20000 response-timeout: 600005. 真实落地技巧用 “题库版本号本地缓存哈希” 实现考试中零停机更新这是我在三个省级考试项目中验证过的技巧考试进行中监考员后台修改一道题的选项考生端无需刷新5 秒内自动生效。核心不是轮询而是“版本号驱动的增量更新”。5.1 后端题库服务暴露版本号与差异接口exam-core-service提供两个关键接口GET /api/question/version→ 返回当前题库版本号如v20240528.1GET /api/question/diff?fromv20240528.0tov20240528.1→ 返回 JSON Patch 格式差异RFC 6902题库表增加version字段每次修改题目version自增并记录变更日志。/diff接口返回类似[ { op: replace, path: /questions/123/options/B, value: 新选项内容 }, { op: add, path: /questions/456/hint, value: 新增提示 } ]5.2 前端用 Intersection Observer 监听题干区域按需拉取差异考生答题时Vue 组件不主动轮询而是监听当前可视题干区域div classquestion-item>script setup import { onMounted, ref } from vue import { useExamStore } from /stores/exam const examStore useExamStore() const observer ref(null) onMounted(() { observer.value new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { const questionId entry.target.dataset.id // 检查该题本地缓存版本是否最新 const localVersion examStore.getQuestionVersion(questionId) if (localVersion ! examStore.currentVersion) { examStore.fetchQuestionDiff(localVersion, examStore.currentVersion, questionId) } } }) }, { threshold: 0.1 }) // 观察所有题干元素 document.querySelectorAll(.question-item).forEach(el { observer.value.observe(el) }) }) /scriptfetchQuestionDiff()方法用json-patch库应用差异// stores/exam.js export const useExamStore defineStore(exam, { state: () ({ currentVersion: v20240528.0, questions: new Map() // key: questionId, value: { content, options, version } }), actions: { async fetchQuestionDiff(from, to, questionId) { try { const res await api.get(/question/diff?from${from}to${to}) const patch res.data const question this.questions.get(questionId) if (question) { // 应用 JSON Patch const patched jsonpatch.apply_patch(question, patch) this.questions.set(questionId, { ...patched, version: to }) } } catch (e) { console.warn(更新题目 ${questionId} 失败, e) } } } })5.3 零停机更新的边界与代价什么能改什么必须重启这个技巧不是万能的。我们明确划出可热更新的边界修改类型是否支持热更新说明题干文字、选项内容、图片 URL✅JSON Patch 可精确替换字段题型单选→多选、分值⚠️需前端组件兼容SingleChoice /和MultiChoice /必须共用同一 slot新增/删除题目❌试卷结构变更必须重新生成试卷并通知考生重载阅卷规则如多选题部分得分逻辑❌逻辑层变更涉及exam-core-service业务代码必须发版我的习惯上线前我会在exam-core-service的QuestionService中加一行日志log.info(Question {} updated to version {}, questionId, newVersion)。当监考后台修改题目这条日志必须出现在exam-core-service日志中且exam-status-service同步广播QUESTION_UPDATED事件。前端看到日志就知道“这次更新已触达服务端”再结合IntersectionObserver的触发时机就能确保考生看到的永远是最新题干——而不是靠“刷新页面”这种反考试体验的操作。这套机制跑过 12 万考生的高考模拟考平均更新延迟 3.2 秒无一例因题干不同步引发争议。它不玄学就是版本号差异计算懒加载观察的组合拳。希望帮到你。本文还有配套的精品资源点击获取

Vue+Spring Cloud构建高并发在线考试系统架构实践

相关推荐

计算机视觉第一个程序：从读图到边缘检测的完整实践

AI营销系统如何破解高净值行业获客难题

Lua脚本在游戏动态道具系统中的设计与优化

更多资讯

Gemini 生成文件入门：在对话里直接产出 Word、Excel 和 PDF

Dify 入门：用 Docker 自部署并搭建知识库问答助手

Cline 入门：在 VS Code 里用 Plan/Act 模式让 AI 帮你写代码

手写表白代码指南：C/C++实现心形动画与避坑全攻略

浙江省八大流域SHP数据在ArcGIS中的处理与应用全攻略

C# 身份证图片信息识别源码：从照片到结构化字段的落地路径

今日更新

微信个人号API开发案例：图片/语音/视频消息怎么下载解析存到本地？

Python股票自动交易系统源码解析：从行情获取到风控的完整链路

视酷酷信IM源码部署指南：Java 17+MySQL 8.0.33实战配置

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？