揭秘云帆培训考试系统前端：Vue+Element UI实现答题卡、倒计时与交卷的完整代码走读

揭秘云帆培训考试系统前端VueElement UI实现答题卡、倒计时与交卷的完整代码走读【免费下载链接】yftrain学习系统-在线考试系统 企业培训内训系统-企教培系统平台软件项目地址: https://gitcode.com/gh_mirrors/yf/yftrain本文带你走读yftrain 在线考试系统学习系统 / 企业培训内训平台的前端核心代码聚焦考试页面三大关键功能动态答题卡、倒计时组件与交卷流程。系统前端基于 Vue 2 Element UI 开发源码位于exam-vue目录整套考试体验的实现逻辑清晰、代码量小非常适合作为 Vue 项目学习的参考案例。从上面的功能结构图可以看到yftrain 围绕在线考试系统展开四大板块系统功能用户/角色/日志、教员功能题库/试题/考试管理、学员功能在线考试/错题训练/考试记录与手机端考试。本文聚焦学员端在线考试环节的前端实现。一、技术栈与目录结构速览 前端工程使用 Vue 2 Element UI Axios封装在 request.js考试相关页面集中在三个目录目录职责views/paper/exam/考试列表、考前预览、考试主界面、结果页components/ExamTimer倒计时独立组件api/paper/exam.js考试接口封装详情/答题/交卷路由定义在 router/index.js考试流程由 4 个关键页面串成闭环ExamOnline—— 在线考试列表list.vuePreExam—— 考前预览输入口令、点击开始考试生成个人试卷preview.vueStartExam—— 考试主界面路径/exam/start/:idexam.vueShowExam—— 考试结果与逐题解析result.vue二、答题卡实现el-tag 三色状态管理答题卡位于 exam.vue 的左侧栏el-col :span5核心思路只有一条每道题渲染成一个el-tag用:type动态绑定颜色。el-tag v-foritem in paperData.radioList :typecardItemClass(item.answered, item.quId) clickhandSave(item){{ item.sort1 }}/el-tag样式切换逻辑在cardItemClass方法里优先级非常直观当前题 →warning黄色高亮已作答 →success绿色未作答 →info灰色题目按题型拆成radioList单选、multiList多选、judgeList判断三个数组分组展示组间用v-if判空空题型自动隐藏。页面加载时fetchData把三组数组合并进allItem顺序数组因此上一题/下一题只需对sort做 ±1 取索引即可见 exam.vue。三、倒计时组件60 行代码搞定 ExamTimer倒计时被抽成独立组件 ExamTimer/index.vue仅 60 行值得完整品读countdown() { if (this.leftSeconds 0) { this.$emit(timeout) return } this.min parseInt(this.leftSeconds / 60) this.sec parseInt(this.leftSeconds % 60) this.leftSeconds - 1 setTimeout(() this.countdown(), 1000) }三个设计点valueprop watch父组件通过v-modelpaperData.leftSeconds传入剩余秒数接口刷新剩余时间时倒计时自动同步递归 setTimeout而非setInterval每次基于真实减一计算显示稳定timeout事件时间归零时$emit(timeout)通知父级父级直接调用交卷方法doHandler()—— 也就是说超时会自动交卷与后端定时任务BreakExamJob.java双保险。父组件的绑定就一行exam.vueexam-timer v-modelpaperData.leftSeconds timeoutdoHandler() /四、交卷流程先存答案、再确认、后跳转交卷入口是页面右上角按钮核心方法handHandExamexam.vue分四步保存当前题答案调用handSave把正在作答的题目先落库统计未答题数countNotAnswered遍历三个题型数组统计!item.answered的题量二次确认用 Element UI 的$confirm弹窗若有未答题会提示您还有 N 题未作答确认要交卷吗提交并跳转确认后调用 api/paper/exam.js 中的handExam请求后端/hand-exam接口对应 PaperController.java成功后$router.push跳到ShowExam结果页展示得分与逐题解析。值得注意的是切题/答题统一走handSave方法每次切题都把当前选项POST到/fill-answer实时保存考生中途刷新页面也不会丢答案——这也是考试列表页顶部出现您有正在进行的考试点击此处可继续考试提醒list.vue的原因。五、小结这套考试前端有哪些可借鉴之处 组件化拆得干净倒计时、答题卡、题目区各自独立exam.vue主文件只做数据编排状态映射用样式类名而非 v-if答题卡三色状态用:type绑定避免大量条件模板实时保存 定时任务双保险前端逐题落库防丢答后端 Job 兜底强制交卷流程闭环完整列表 → 预览口令/限时校验→ 作答 → 结果解析四个路由页面即可支撑一场完整在线考试。想继续深入可阅读后端判卷逻辑 PaperServiceImpl.handExam或参考 docs/部署手册.pdf 将整套系统本地跑起来动手调试。【免费下载链接】yftrain学习系统-在线考试系统 企业培训内训系统-企教培系统平台软件项目地址: https://gitcode.com/gh_mirrors/yf/yftrain创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考