简介这是一套基于Vue框架的工人考试系统一体化答题设计源码面向企业培训、职业技能鉴定以及需要搭建在线答题场景的前端开发者可在WiFi手机或一体机上运行用于完成工人岗前考核、安全知识竞赛等日常技能测评。整套资源共58个文件压缩包仅1.35MB以17个TypeScript、11个Vue组件和16个PNG图片为主另含3个JSON配置、2个LESS样式及JavaScript、HTML、CSS等文件覆盖组件化页面、接口与工具封装、样式定制、构建配置与静态资源管理。当前已有90人学习下载。通过学习这套源码可以快速搭建包含答题、计时、结果反馈、异常选项提示等功能的考试系统原型理解Vue单页应用与TypeScript类型系统在实际项目中的协作方式同时其按组件、页面、接口、配置分层的目录结构便于后续替换题库、调整移动端样式和二次扩展。对希望掌握工程化前端项目组织方式的中高级开发者而言这套源码既是可运行的实战模板也是研究组件拆分与类型约束的参考案例。1. 从工人考试系统到Vue一体化答题设计为什么这类项目被反复重写工人考试系统和普通在线考试系统最大的区别不在于题目多难而在于使用场景和用户画像非常特殊大部分考场在车间旁、项目部或培训教室里网络时好时坏考试终端可能是老旧电脑、平板甚至触屏一体机考生年龄跨度大、对键盘操作不熟练。如果你只是在网上找一个开源的考试系统改改多半会在真实考场上翻车——网络一抖答题卡全丢考生误触刷新整卷作废管理员导出成绩还要手动对Excel。一体化答题设计的核心是把“发卷、答题、倒计时、交卷、评阅、留痕”这六件事在同一个前端流程里闭环处理。基于Vue框架来做是因为Vue的双向绑定和组件化特别适合这类“状态多、交互密、校验杂”的表单密集型场景一道题是一个组件一组题是一个状态切片倒计时的时钟和自动交卷可以完全解耦到独立模块。这套设计跑通之后源码里真正值钱的不是界面长什么样而是答题状态的管理方式、异常恢复策略和评阅数据的组织方式。适合谁看适合要用Vue从零搭一个考试前端、或者在现成脚手架里塞入答题模块的开发者也适合需要把离线答题、断点续答、自动评分做成标准方案的技术负责人。2. 答题系统的Vue选型与项目架构设计2.1 渐进式框架的边界什么场景用Vue而不是React或原生选Vue框架做考试系统不是因为Vue比React好而是因为考试系统对“渐进式嵌入”有天然需求。很多工人考试项目不是绿地开发而是要在已有的培训管理系统里插入一个考试模块。Vue渐进式框架的定位允许你只在考页面引入Vue构建答题器也可以直接用Vite搭建完整工程然后在老系统里通过iframe或微前端挂载这种平滑接入的体验是React和Angular做不到的。不过要注意Vue 2到Vue 3的选型在2025年已经不是选择题了。新开发的考试系统建议直接上Vue 3 Composition API Vite原因有两点一是组合式函数composables对答题倒计时、题目状态恢复这类有副作用且需要复用的逻辑非常友好二是Vue 3的Proxy响应式系统在处理深层嵌套的答题数据结构时性能更好。你的工人考试系统如果还在用Vue 2的Options API写大对象加watch到后期改交卷逻辑和异常恢复时光是找出哪个watcher在改form数据就够你查一天。// Vue 3 中把一道题的处理抽成组合式函数 export function useQuestionOption(questionId, questionType) { const selected ref([]) // 单选存字符串多选存数组 const answered computed(() selected.value.length 0) function toggleOption(optionValue) { if (questionType single) { selected.value [optionValue] // 单选覆盖 } else { // 多选时先判断是否存在再决定推入或剔除 const index selected.value.indexOf(optionValue) index -1 ? selected.value.splice(index, 1) : selected.value.push(optionValue) } persistAnswer(questionId, selected.value) } return { selected, answered, toggleOption } }这段代码解决的问题是答题这个动作和具体组件解耦。useQuestionOption被单选题组件调用时它的questionType传single被多选题组件调用时传multiple。难点在persistAnswer这个持久化函数它决定了答题记录是存内存、本地存储还是后端接口这直接关系到一体化答题系统的“不断线”能力。参数上要注意splice和push涉及Vue 3的响应式追踪数组索引变化能被响应式系统监听到但如果你是Vue 2用户这里就必须要Vue.set来触发更新。2.2 一体化答题设计的目录结构与路由规划一体化设计首先要解决的是路由散乱导致的“答着答着找不到北”。很多初学者把考试系统做成single-choice、multiple-choice、judge三个独立路由同一份试卷答单选题时跳到/exam/single答多选时又跳到/exam/multiple一次考试用户要在路由间跳五六次。这是典型的把系统按题型组织而不是按考试流程组织。一体化的思路是一次考试就一个路由题型通过组件内部按questionType分发渲染。路由路径页面职责关键参数/exam/:examId答题主页面承载题目渲染、倒计时、答题卡examId考试实例ID/exam/:examId/record交卷后的成绩单与答题解析recordId答卷记录ID/manage/exam后台试卷配置页面无这样一个路由的设计让整个答题过程都集中在exam/:examId这一棵组件树里。考试倒计时、答题进度、题目跳转这些全局状态放在父级页面每道题只负责自己的渲染切题时只切题目组件不切路由这样做的最大好处是刷新页面时Vue Router不会把你踢到第一题而是能从答题记录中恢复到当前答题位置。const router createRouter({ history: createWebHistory(), routes: [ { path: /exam/:examId, name: ExamRunner, component: () import(/views/exam/ExamRunner.vue), props: true } ], scrollBehavior(to, from, savedPosition) { // 切换到下一题时保持顶部定位避免视觉跳动 return savedPosition || { top: 0 } } })这个路由设计里的关键参数是examId它不只是考试ID还关联着当前考生的唯一考试记录。ExamRunner.vue挂载时会调用startExam(examId)这个action如果该考生已有未提交的答题记录就恢复到记录中的题目索引和已答数据。你在实际项目中还要给这个路由加上beforeEach守卫检查考生是否已经交卷如果已交卷则直接重定向到成绩单路由防止考生通过浏览器的后退按钮重返考场。2.3 数据模型先行题库、试卷、答题记录的字段设计一体化答题设计最容易被忽略但坑最多的部分是数据结构。我见过太多项目先写组件后建表结果到交卷评阅的时候发现单选题存string、多选题存数组、判断题存boolean三种题型三种存储格式评阅时要把三种格式各自写一遍解析逻辑。正确做法是统一答题存储格式——不管什么题型都存一个数组。// 统一的答题记录结构 const answerRecord { examId: 20240601, userId: 3456, startTime: 2025-06-01 09:00:00, submitTime: , questionCount: 80, answerSheet: [ { questionId: single_001, questionType: single, userAnswer: [A], // 统一为数组单选也存数组 isCorrect: true, // 是否需要前端预判后端评阅更可靠 score: 1, duration: 38 // 单题用时计入防作弊参考 } ] }这里的userAnswer统一为数组带来一个直接的开发效率提升单选题组件出答案时userAnswer [A]多选题userAnswer [A, C, E]判断题userAnswer [true]。评阅服务收到数据后只需要写一套比较逻辑数组长度一致、元素逐个匹配即得分。而不需要针对每种题型写单独的评分分支。还有一个实际问题是isCorrect字段——前端预判对与错可以让考生交卷后立即看到解析但正式考试的标准做法是后端重新评阅后再返回成绩前端预判的isCorrect只作为UI上的临时提示不能被信任。3. 用Vue实现一体化答题器的核心代码3.1 题目渲染组件单选题、多选题、判断题的通用schema题目渲染是考试系统最核心的展示逻辑。使用Vue框架的好处是可以用一个QuestionCard组件通过动态组件或v-if分支来渲染三种题型而不需要为单选题、多选题、判断题分别维护三个几乎一模一样的页面。用一个schema描述题目题目文本、选项列表、正确选项、解析前端根据questionType决定用户交互方式。template div classquestion-card div classquestion-stem{{ currentIndex 1 }}. {{ question.stem }}/div div v-ifquestion.type single classoption-list div v-for(opt, idx) in question.options :keyopt.key classoption-item :class{ active: selectedAnswer.includes(opt.key) } clickonSingleSelect(opt.key) span classoption-label{{ String.fromCharCode(65 idx) }}/span span classoption-text{{ opt.text }}/span /div /div div v-else-ifquestion.type multiple classoption-list div v-for(opt, idx) in question.options :keyopt.key classoption-item :class{ active: selectedAnswer.includes(opt.key) } clickonMultipleToggle(opt.key) span classoption-label{{ String.fromCharCode(65 idx) }}/span span classoption-text{{ opt.text }}/span /div /div div v-else classjudge-options button :class{ active: selectedAnswer.includes(true) } clickonJudgeSelect(true)正确/button button :class{ active: selectedAnswer.includes(false) } clickonJudgeSelect(false)错误/button /div /div /template这段模板逻辑并不复杂关键在于事件处理器里的状态管理onSingleSelect覆盖答案onMultipleToggle推入或剔除答案onJudgeSelect同样以数组形式存储。三套交互逻辑共享同一个selectedAnswer数组这个数组是经由props从ExamRunner页面传入的配合前面提到的useQuestionOption组合式函数组件的渲染和状态就完全隔离了。至于为什么不用v-model直接绑数据——因为考试场景里题目切换后的状态回退、交卷锁定、查看解析时的只读态都需要对变量做额外的控制逻辑直接v-model会让这些控制变得很难加。3.2 答题状态管理pinia store中的实时保存当你在考场上遇到考生答了70道题然后突然断电重启后打开系统发现答题记录一条没丢时你会感谢当初在pinia里做了实时保存。一体化答题设计的“一体化”重点就是答题状态要被统一管理、随时可持久化、刷新可恢复。Pinia是Vue生态里目前最合理的答案它比Vuex更轻而且对TypeScript的支持更好——工人考试系统如果涉及多套试卷、不同题型数量配置TypeScript能帮你提前发现字段类型不匹配的问题。export const useExamStore defineStore(exam, { state: () ({ currentExam: null, currentIndex: 0, answerSheet: [], timeRemaining: 3600, examStatus: in_progress // in_progress | submitted | expired }), actions: { async initExam(examId) { // 从接口或本地缓存获取考试数据 this.currentExam await examApi.fetchExamDetail(examId) await this.loadLocalRecord(examId) }, setAnswer(questionId, answerArray) { const found this.answerSheet.find(item item.questionId questionId) if (found) { found.userAnswer answerArray } else { this.answerSheet.push({ questionId, userAnswer: answerArray }) } // 每次同步到localStorage防宕机丢数据 this.persistLocalRecord() }, async submitExam() { this.examStatus submitted await examApi.submitAnswer(this.currentExam.id, this.answerSheet) this.clearLocalRecord() } } })persistLocalRecord是这个store的命脉。它把当前的答题记录、题目索引剩余时间序列化为JSON存入localStoragekey设计为exam_{examId}_user_{userId}这样即使用户参加多次考试不同考试间的缓存也不会互相覆盖。这里有一个关键细节答题记录存入localStorage时要同时把currentIndex存进去这样断电重启后考生能回到断电前正在看的那道题。而examStatus字段也很关键——如果submitted状态被写入了localStorage说明这场考试已经交卷即便用户刷新页面也应看到成绩单而不是答题页。3.3 倒计时与交卷逻辑避免常见的定时器泄漏考试系统的倒计时是个看似简单实则翻车率最高的功能。很多Vue开发者喜欢在setInterval中每秒修改剩余时间结果组件销毁时忘记清理定时器导致同一个页面打开了两次两个定时器同时跑倒计时的速度变成双倍。更糟的情况是在路由跳转后定时器没有销毁页面已经离开考场倒计时还在后台跑到点后自动触发了交卷接口。let countdownTimer null function startCountdown(duration) { store.timeRemaining duration countdownTimer setInterval(() { if (store.timeRemaining 0) { clearInterval(countdownTimer) store.submitExam() // 时间到自动交卷 return } store.timeRemaining-- }, 1000) } onMounted(() { startCountdown(store.timeRemaining) }) onUnmounted(() { if (countdownTimer) { clearInterval(countdownTimer) countdownTimer null } })该做的是在onUnmounted中清理定时器。另外建议启动倒计时时先读取localStorage中存储的timeRemaining和lastHeartbeat时间戳用公式timeRemaining storedTime - (Date.now() - lastHeartbeat) / 1000来计算剩余时间。为什么因为setInterval在浏览器标签页被切到后台时会自动节流最小间隔可能从1秒变成1分钟定时器回调次数骤降倒计时就会有误差。用绝对时间戳计算不管定时器被节流到什么程度剩余时间都能算准。最后再把lastHeartbeat更新为当前时间戳写入localStorage——这样即使浏览器崩溃重新打开后也能继续从正确的剩余时间恢复。4. 一体化设计落地接口约定与本地持久化4.1 API封装与axios拦截器把token和错误码兜住前端框架只负责界面和交互真正的一体化还需要和后端接口约定一个稳定的契约。在工人考试系统里最常见的接口场景是登录拿token、拉取试卷、提交答卷、获取成绩。用axios封装统一请求模块在拦截器里做两件事自动携带token、统一处理HTTP错误码和业务错误码。const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 15000 }) service.interceptors.request.use(config { const token localStorage.getItem(exam_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) service.interceptors.response.use( response { const res response.data // 业务码约定code0成功code4011表示token过期 if (res.code ! 0) { if (res.code 4011) { localStorage.removeItem(exam_token) router.push(/login) } return Promise.reject(new Error(res.message || 请求失败)) } return res }, error { // 网络错误时返回可识别的错误标记给调用方做离线处理 return Promise.reject({ isNetworkError: true }) } )成功拦截器的两个参数要注意一是res.code这是后端约定的业务状态码和HTTP状态码无关即使HTTP状态是200业务code也可能表示业务失败二是超时时间设为15秒因为考场网络不稳定时间太短会频繁失败太长又会拖垮整个交卷操作。网络错误的处理逻辑返回了isNetworkError标记这样在答题页里捕获到错误后可以提示考生“当前网络不可用答题进度已保存”而不是弹出一个让人摸不着头脑的“系统异常”。4.2 断网与断点续答localStorage indexedDB的双层策略一体化答题设计最硬的骨头是离线答题。工人考试系统使用的场景中二三十人同时在一个车间改造后的临时考场里用手机或平板考试4G信号可能不稳定。此时不能让考生因为断网而中断考试更不能丢答题记录。常见的做法是localStorage与indexedDB双管齐下localStorage存小数据题目索引、剩余时间、状态标记indexedDB存大数据答题明细、题目快照。存储载体用途容量限制异步特性localStorage考试状态、当前索引、最近填写的一条答案约5MB同步indexedDB完整答题记录、试卷快照数百MB异步Vuex/pinia内存态数据供组件实时绑定无同步答题时优先写入内存store同时在watch到答题变化后防抖2秒写入localStorage每完成5道题将整个answerSheet以事务方式写入indexedDB。断网时axios请求直接抛出自定义的网络错误调用方捕获后不弹错误框只把同步队列里的API请求缓存起来。联网后通过navigator.onLine事件触发一个flush操作把缓存的答卷提交到服务器。这里最容易踩的坑是断网后修改了localStorage的答案但indexedDB里的旧数据还保留着等交卷时直接读了indexedDB的旧快照导致部分答案丢失。解决方案是先读localStorage判断有没有更新的状态标记如果有则用localStorage的数据覆盖快照再提交。4.3 解析对照与成绩单生成交卷后的最后一步交卷后的一体化流程要能立即展示客观题得分、答案解析和合格判定。这一步如果做得好考务人员当场就能给出成绩单工人也能马上看到错题解析对安全意识培训的效果直接体现在流程里。通常的做法是提交后先读本地答案同时向服务端请求标准答案如接口允许一步取回总分和每一题的判分结果。async function generateResultSheet(recordId) { const detail await examApi.fetchResult(recordId) // 解析一个标准的结果结构 const sheet { totalScore: detail.totalScore, passMark: detail.passMark, passed: detail.totalScore detail.passMark, questionResults: detail.questionResults.map(q ({ questionId: q.questionId, userAnswer: q.userAnswer, correctAnswer: q.correctAnswer, isCorrect: q.isCorrect, analysis: q.analysis })) } return sheet }这里的passMark要从服务端下发而不是前端写死60分因为不同工种的合格线可能不一样比如特种作业操作证考试通常是80分合格。通过generateResultSheet返回的结构前端在一个只读的ResultSheet组件中渲染上部显示总分和大大的“合格/不合格”印章下方是逐题的对错列表点击展开可查看解析。注意不要在交卷后就把localStorage中的考试数据清空——至少保留一份本次考试的答题记录用于本地留痕直到成绩单成功获取后再执行清理。5. 考场实战中的5个小技巧从调试到打包5.1 用Vue DevTools快速定位答题状态异常答题器在考场上出问题时通常是状态错乱考生选了B但界面上高亮的是A或者交卷后score字段变成0。这时先打开Vue DevTools插件在Components面板中选中出错的题目组件检查它的props传入的selectedAnswer和组件的data是否一致。如果props中有两个不同来源的状态比如一个来自pinia一个来自组件的本地data那八成是你在交卷时读了组件本地状态而不是store中的全局状态。记住一个原则题目渲染组件的内部永远不要维护一个独立副本所有数据都从store的answerSheet读取组件里只允许$emit事件不允许直接改数据。5.2 打包后布局异常的排查路径考场的终端分辨率千奇百怪有1024x768的旧电脑也有1920x1080的宽屏一体机。一体化答题器的布局在开发环境下正常npm run build后部署到nginx出现布局错乱最常见的原因是CSS中使用了相对单位的组件库没有按比例压缩。遇到这种情况不要一上来就改代码先用chrome的device toolbar模拟800x600、1024x768、1366x768几种分辨率逐个对比画面。考试系统的布局通常分为左侧题目区、右侧答题卡两个区域在打包后如果是左右区域重叠了检查一下是不是某个弹性布局的flex: 1设置被压缩掉了。另外检查打包后的index.html中css和js的引用路径是否绝对路径——base配置错误会导致静态资源加载失败样式文件根本没生效布局自然全乱。5.3 快速验证倒计时时长的两个工具函数验证倒计时的准确性不能真等一小时建议在开发模式下给倒计时加一个系数参数。在store的state中设置一个timeScale默认值为1开发时设为60模拟1分钟当1小时过。const scale import.meta.env.DEV ? 60 : 1 setInterval(() { store.timeRemaining Math.max(0, store.timeRemaining - scale) }, 1000)这样你可以用真实的1分钟模拟1小时的考试验证自动交卷逻辑、时间到时的弹窗、最终的提交动作。这个方法没有什么成本但在考前部署的验收中能帮你省下不少等待时间。另外一个验证点是清除localStorage后重新进入页面看题目序号是否从第1题开始、剩余时间是否被重置为试卷总时长。5.4 考前压力测试的压测脚本要点考试系统上线前最好用脚本模拟并发交卷。不需要真实浏览器用简单的Node脚本直接调用你的后端交卷接口重点关注两个指标交卷接口的响应延迟和服务器内存占用。常见做法是准备一份200人的模拟考试数据在30秒内全部提交观察有没有超时或丢包。前端侧也很简单——打开20个浏览器标签页同时进入同一场考试看localStorage的读写是否产生冲突。5.5 历史考试数据的导出与迁移工人考试系统的数据往往需要保留至少三年备查。交卷之后数据不只存在于后端数据库在前端localStorage和indexedDB中也留有缓存。日常维护时在管理端加一个“本地存档导出”的功能定期把本地缓存打包成JSON或CSV文件跨浏览器迁移时直接导入存档文件就能恢复包括每道题用时、修改痕迹在内的完整考试数据。这样一来即便后端服务意外丢失数据本地留存的一体化答题记录也能作为完整的考务凭证。本文还有配套的精品资源点击获取