尧图网页设计 
简介面向企业人事培训与考核场景的员工知识培训考试系统源码是一套基于SSMSpringSpringMVCMyBatisPlus与Vue的前后端分离实现。项目涵盖题库管理、在线考试、自动评分、成绩统计、员工信息管理等核心功能同时区分学员端与管理端适合需要快速搭建内部培训平台的开发人员也适合作为计算机相关毕业设计、课程设计的参考模板。资源包共846个文件以Java后台源码、Vue组件、JS脚本、CSS样式、HTML页面为主另含SQL数据库脚本、Maven配置、设计文档以及图片/视频素材整体仅16.12MB目录结构清晰便于按模块查找和部署。目前已有194人学习浏览使用者可从中获取完整项目代码、数据库初始化脚本、接口与页面实现思路既能作为SSMVue整合开发的学习样本也可直接运行或二次扩展大幅节省从零搭建和排错的时间成本。1. 从.bak文件和三个 bat 说起这套 SSM 员工培训考试系统到底缺了什么拿到源码包第一眼你看到的不是整洁的目录index.html.bak、update-password.vue.bak、IndexMain.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak旁边还躺着1-install.bat、2-run.bat、3-build.bat。这不是打包错了而是一个典型的前后端分离 SSM 工程被人为做了“备份标记”——原文件可能是.vue或.java为了在部分老旧 IDE 里避免编译冲突被统一改成了.bak后缀。解压后直接跑是跑不起来的必须先把这些文件还原。这套东西适合两类人一类是做 Java 课程设计或毕业设计、需要快速复现“员工知识培训考试系统”核心流程的在校生另一类是维护过遗留 SSM 项目、想看看别人怎么拆业务边界的在职工程师。它的价值不在 UI 有多炫而在于把员工管理、题库维护、在线考试、自动算分这一整条链路用最传统的 MVC 方式走通你改造成 Spring Boot 或微服务时业务逻辑可以直接平移。2. 实体关系与分层边界SSM MyBatis Plus 下先把数据模型立住2.1 为什么这个场景选 SSM 而不是 Spring Boot员工知识培训考试系统本质上是“后台管理 在线答题”没有高并发、没有分布式事务核心是几十张业务表之间的 CRUD 和一次考试会话的完整性。SSM 里 Spring 管业务对象SpringMVC 管请求路由MyBatis 管持久化这个组合对于中小型企业内部系统足够清晰。而 MyBatis Plus 的引入把最常见的单表操作给压缩了——你不太需要为每张表单独写 BaseMapper 的 SQLQueryWrapper可以直接拼条件。相比 Spring BootSSM 的配置更啰嗦但你反而能看到 Spring 容器是怎么一步一步把DataSource、SqlSessionFactory、MapperScannerConfigurer接起来的这对理解“自动配置”背后发生了什么有直接帮助。如果目标是把这套代码作为课程设计或面试项目SSM 反而比 Spring Boot 更能体现你对 Bean 生命周期和事务边界的掌控。2.2 核心数据表培训考试的五张主表与字段设计员工考试类项目的表结构通常绕着“人、卷、题、成绩”四个概念转。这里给出最小可用的一套设计也是这类源码里最常出现的结构表名关键字段字段说明职责employeeid,username,password,dept_id,role_id,create_time员工账号与角色登录、权限判断examid,title,duration_minutes,start_time,end_time,status考试场次与时间窗创建考试、控制可答时间questionid,type,content,options_json,answer,score,analyze题目内容、选项与答案题库管理exam_questionid,exam_id,question_id,score答卷与题目关联固定试卷、题目分值exam_recordid,employee_id,exam_id,score,submit_time,status员工某次考试的作答结果成绩统计、补考判断这里有个容易忽略的细节选择判断题的选项适合用JSON字符串存储比如[A. 正确, B. 错误]。在 MyBatis Plus 里你可以在实体字段上加TableField(typeHandler JacksonTypeHandler.class)配合TableName(autoResultMap true)让 JSON 字段在查询时自动反序列化为ListString。不要为了“看起来正规”把选项拆成四五个字段后面扩展多选题或增减选项时会非常痛苦。exam_question表决定了是固定试卷还是随机试卷——固定试卷里这套关联关系是预置的随机试卷则在考试生成时动态插入这段关系。2.2.1 MyBatis Plus 实体的注解写法Data TableName(exam) public class Exam { TableId(type IdType.AUTO) private Long id; private String title; private Integer durationMinutes; private LocalDateTime startTime; private LocalDateTime endTime; private Integer status; }代码逻辑TableName指定实体映射到exam表避免类名与表名不一致时还要写 XMLTableId(type IdType.AUTO)表示主键由数据库自增在 MySQL 下就是AUTO_INCREMENT。LocalDateTime映射到数据库的datetime类型MyBatis 3.4 不需要额外类型处理器。注意字段命名建议直接采用驼峰风格或让数据库字段为下划线风格并打开map-underscore-to-camel-case配置否则durationMinutes无法自动映射为duration_minutes。2.3 查询条件的标准写法QueryWrapper 和 LambdaQueryWrapper 的取舍在 Service 层写业务逻辑时MyBatis Plus 提供了两种条件构造器。传统字符串写法的缺点在于字段名无法编译期校验一旦改动实体字段SQL 条件字符串就悄悄失效。更稳妥的是LambdaQueryWrapper它直接引用实体方法引用Exam::getStatus重构时能第一时间发现失效位置。public ListExam listAvailableExams(Long employeeId) { LambdaQueryWrapperExam wrapper new LambdaQueryWrapper(); wrapper.eq(Exam::getStatus, 1) .ge(Exam::getEndTime, LocalDateTime.now()) .orderByAsc(Exam::getStartTime); return examMapper.selectList(wrapper); }这段代码做了三件事从Exam表里筛出状态为上架status1、考试结束时间晚于当前时间的记录并按开考时间升序排列。eq方法对应 SQL 的ge对应orderByAsc就是ORDER BY start_time ASC。如果你是第一次看这个项目记住一个原则单表查询别写 XMLselectList返回的就是实体集合只有当你要联查employeeexam_recordexam三张表统计部门平均分时才需要自定义 SQL否则过度设计只会让代码又长又难调。3. 从登录鉴权到交卷算分SSM 后端业务的关键实现写法3.1 登录状态拦截器做会话校验密码不要用裸 MD5这个系统的员工登录通常不引入 Shiro 那套重武器直接在 SpringMVC 里写一个HandlerInterceptor就够。核心思路是登录成功后把员工对象放进 Session拦截器校验 Session 里是否有loginUser没有就重定向到登录页。注意一个问题如果项目被人为改成前后端分离Session 的跨域会话要保持好通常前端用Axios携带credentials后端设置allowCredentials(true)。密码存储上常见做法是使用 BCrypt 而不是纯 MD5。纯 MD5 的彩虹表破解成本太低在这个源码包里如果你发现数据库里存的是 32 位定长字符串大概率是老式 MD5。正确做法是注册时用BCryptPasswordEncoder生成带盐的哈希登录时把用户输入的密码和哈希做匹配。public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { Object loginUser request.getSession().getAttribute(loginUser); if (loginUser null) { response.sendRedirect(/login.html); return false; } return true; } }这个拦截器的判断很简单从 Session 拿不到用户就跳到登录页false阻止后续 Controller 方法执行。它的主要职责是挡住“未登录直接访问/exam/list”这类请求。使用时需要在 SpringMVC 配置类中注册并指定拦截路径registry.addInterceptor(new LoginInterceptor()) .addPathPatterns(/**) .excludePathPatterns(/login, /logout, /static/**);参数说明addPathPatterns(/**)表示拦截所有路径excludePathPatterns是白名单/static/**放行静态资源否则 CSS/JS 全被拦。这套写法的优点是零额外依赖缺点是对接口型的 URL 不够精确如果某些页面要通过 Ajax 访问但 Session 过期返回的是302而不是401前端 Axios 要根据状态码做特殊处理。3.2 试卷生成随机抽题与固定试卷的边界随机组卷是这个系统比较有辨识度的业务点。考试创建时前端传入“单选题数量、多选题数量、判断题数量、每题分值”后端从题库里随机抽取并写入exam_question关联表。Transactional(rollbackFor Exception.class) public Long generateRandomExam(ExamCreateRequest request) { Exam exam new Exam(); exam.setTitle(request.getTitle()); exam.setDurationMinutes(request.getDuration()); examMapper.insert(exam); ListQuestion singleQuestions questionMapper.selectList( new LambdaQueryWrapperQuestion() .eq(Question::getType, SINGLE) .orderByAsc(RAND()) .last(LIMIT request.getSingleCount())); ListExamQuestion relations new ArrayList(); singleQuestions.forEach(q - { ExamQuestion eq new ExamQuestion(); eq.setExamId(exam.getId()); eq.setQuestionId(q.getId()); eq.setScore(request.getSingleScore()); relations.add(eq); }); examQuestionMapper.insertBatchSomeColumn(relations); return exam.getId(); }这段代码里有几个关键点。.orderByAsc(RAND())是 MySQL 随机排序的惯用写法它的原理是为每行生成一个随机数然后按这个随机数排序取前 N 条。这里没用 Lambda 字段引用是因为RAND()是数据库函数条件构造器会原样拼接所以直接传字符串。.last(LIMIT n)是 MyBatis Plus 预留的原生 SQL 追加入口使用时绝对不能用拼接用户输入——这里的n是后端计算好的整数可以认为是安全的。最后insertBatchSomeColumn是 MP 的批量插入方法能一次性把试卷和题目的关联记录插入避免循环单条插入导致的 N 次网络往返。需要注意Transactional必须放在public方法上而且不能是同类中的互相调用否则事务不生效。这个场景里插入exam和批量插入exam_question必须是一个原子操作一旦第二步失败考试主表已经存在但没有任何题目这个脏数据会让在线考试页面打开白屏。3.3 交卷算分业务事务与 SQL 幂等性交卷接口要做的事不止“算分数”。前端可能因为网络问题重复提交所以后端必须以“员工 考试”为维度做幂等控制。常见做法是在exam_record表上建唯一索引uk_employee_exam(employee_id, exam_id)插入前先尝试插入如果报DuplicateKeyException就直接返回已提交的结果。public SubmitResult submitExam(Long employeeId, Long examId, ListAnswerItem answers) { ExamRecord record new ExamRecord(); record.setEmployeeId(employeeId); record.setExamId(examId); record.setStatus(1); record.setScore(calculateScore(answers)); record.setSubmitTime(LocalDateTime.now()); try { examRecordMapper.insert(record); } catch (DuplicateKeyException e) { return getAlreadySubmitted(examId, employeeId); } return new SubmitResult(record.getScore()); }calculateScore内部会先把答案列表转成MapLong, String题目 ID - 答案再批量查出对应题目逐条比对答案符号累加分值。这里有个常见误写不要把它们一条条selectById200 道题就是 200 次查询用selectBatchIds一次查回 200 条再在内存里比对商学上叫“批量查询替代循环查询”。成绩计算和插入记录都在同一个事务里因为Transactional同时作用于这个submitExam方法。错误场景结果排查方向insert成功但calculateScore抛异常学生交了卷但没有成绩记录确认计算和插入是否在同一个事务方法内同一个考生重复点击交卷产生多条记录统计数据翻倍检查exam_record是否建了唯一索引前端倒计时没到 0 但后端时间已过考生可以继续作答后端要用服务器时间校验endTime不能信任客户端时间4. Vue ElementUI 前端管理端与在线考试的数据链路4.1 目录结构.bak文件对应的组件位置与职责源码里的IndexMain.vue、IndexHeader.vue、IndexAsideStatic.vue、BreadCrumbs.vue拼起来就是后台管理端的整体框架。IndexMain.vue是主布局容器左右结构左侧IndexAsideStatic.vue渲染菜单右侧内容区放子路由视图IndexHeader.vue是顶栏展示当前登录用户和退出按钮BreadCrumbs.vue根据当前路由自动生成面包屑导航。update-password.vue是用户自助改密页面登录后用 Token 换旧密码、提交新密码。index.html.bak不用多猜就是前端入口 HTML经过 Webpack 打包后会生成index.html它承载了 Vue 挂载点。原文件名组件类型核心职责IndexMain.vue布局组件定义aside与main两栏布局挂载子路由router-viewIndexAsideStatic.vue菜单组件渲染员工管理、题库管理、考试管理、成绩统计等路由入口BreadCrumbs.vue功能组件基于$route.matched生成层级导航update-password.vue页面组件调/updatePassword接口包含旧密码校验与二次确认index.html静态入口加载打包后的 JS/CSS定义div idapp4.2 Axios 请求封装与路由守卫这套前端系统的网络层通常单独抽一个request.js作用是统一设置baseURL、请求头携带 Token、拦截响应错误。管理端和考试页所有接口都走这个实例。import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login.html } return Promise.reject(error) } ) export default request逻辑说明请求拦截器在每次发请求前从本地存储取token并拼到Authorization头后端通过 OncePerRequestFilter 解析 Token响应拦截器最核心的逻辑是遇到401强制跳登录页这样 Session 过期后用户不会在考试页里看到一堆接口报错。注意timeout: 10000是 10 秒超时对于交卷这种复杂接口如果题库数量大有联表查询可能需要在单独请求里覆盖超时时间不要全局死板用 10 秒。路由守卫要解决“没登录不能进后台”的问题router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })to.meta.requiresAuth是在路由配置里声明的比如考试页meta: { requiresAuth: true, role: EMPLOYEE }。如果需要按角色区分菜单可以在守卫里加一个role判断但要注意后端每个接口也必须做权限校验前端隐藏菜单只是体验优化不是安全手段。4.3 考试页面的倒计时与自动交卷在线考试页面最大的坑是定时器泄漏。很多人直接在created里setInterval(() { this.countdown-- }, 1000)然后组件销毁时没有清掉导致切出页面再回来倒计时变成两个计时器在跑。data() { return { remainSeconds: 0, timer: null } }, created() { this.remainSeconds this.exam.durationMinutes * 60 this.startTimer() }, methods: { startTimer() { this.timer setInterval(() { if (this.remainSeconds 0) { this.autoSubmit() } else { this.remainSeconds-- } }, 1000) }, autoSubmit() { clearInterval(this.timer) this.submitPaper() } }, beforeDestroy() { clearInterval(this.timer) }timer在data里声明但在created里初始化这样beforeDestroy才能拿到同一个句柄。autoSubmit先清定时器再提交避免再次触发setInterval。注意beforeDestroy里的清理代码永远不会直接调用autoSubmit它的职责就是防止用户快速切换路由时旧页面还在消耗 CPU。后端已经在submitExam里做了幂等所以即使前端意外重复调用也不会产生重复成绩。5. 三个 bat 脚本背后的部署套路与.bak文件恢复技巧5.1 第一步批量还原.bak文件在 Windows 命令行里进入源码根目录执行以下命令把所有.vue.bak还原为.vuefor %f in (*.vue.bak) do ren %f %~nf%~nf表示去掉文件扩展名也就是把update-password.vue.bak变成update-password.vue。如果还有index.html.bak单独执行ren index.html.bak index.html。还原之后前端项目才能被npm install npm run dev正确识别。注意for循环里的变量%f在 bat 脚本中要写成%%f如果你只在命令行试一次则保持单百分号。5.2 读懂三个 batinstall、run、build 分别做什么这套资源里的1-install.bat、2-run.bat、3-build.bat是 Windows 下的一键操作脚本。常见的写法是echo step 1: 安装后端依赖并初始化数据库 mvn clean install2-run.bat一般执行mvn tomcat7:run或启动内嵌容器如果是传统 war 包部署会先构建再丢进 Tomcat。3-build.bat通常执行mvn clean package -DskipTests产出target/*.war用于正式发布。这三个脚本的顺序是先安装依赖下载 jar 包再本地跑起来调试最后打生产包。你在自己的机器上最小复现时只要保证jdk1.8、maven3.6、mysql5.7环境对齐即可。5.3 高频报错与应对现象原因处理Access denied for user rootlocalhostjdbc.properties用户名密码不对检查数据库账号和权限Communications link failureMySQL 没启动或端口不是 3306执行net start mysql或修改连接串/api接口 404前端代理没配好检查 WebpackdevServer.proxy目标地址启动后页面点考试报空指针exam_question没插入题目重新调用组卷接口并确认事务回滚配置部署验证的最后一个技巧不要总是杀进程重启在3-build.bat里加上-DskipTests能省掉测试用例编译时间如果本机端口被占用mvn tomcat7:run -Dport8081指定新端口。这套 SSM 系统的配置全集中在applicationContext.xml和jdbc.properties改完环境变量后优先检查这两处的参数比逐个翻代码快得多。本文还有配套的精品资源点击获取 SSM员工培训考试系统实战：MyBatis Plus与Vue全栈解析
简介面向企业人事培训与考核场景的员工知识培训考试系统源码是一套基于SSMSpringSpringMVCMyBatisPlus与Vue的前后端分离实现。项目涵盖题库管理、在线考试、自动评分、成绩统计、员工信息管理等核心功能同时区分学员端与管理端适合需要快速搭建内部培训平台的开发人员也适合作为计算机相关毕业设计、课程设计的参考模板。资源包共846个文件以Java后台源码、Vue组件、JS脚本、CSS样式、HTML页面为主另含SQL数据库脚本、Maven配置、设计文档以及图片/视频素材整体仅16.12MB目录结构清晰便于按模块查找和部署。目前已有194人学习浏览使用者可从中获取完整项目代码、数据库初始化脚本、接口与页面实现思路既能作为SSMVue整合开发的学习样本也可直接运行或二次扩展大幅节省从零搭建和排错的时间成本。1. 从.bak文件和三个 bat 说起这套 SSM 员工培训考试系统到底缺了什么拿到源码包第一眼你看到的不是整洁的目录index.html.bak、update-password.vue.bak、IndexMain.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak旁边还躺着1-install.bat、2-run.bat、3-build.bat。这不是打包错了而是一个典型的前后端分离 SSM 工程被人为做了“备份标记”——原文件可能是.vue或.java为了在部分老旧 IDE 里避免编译冲突被统一改成了.bak后缀。解压后直接跑是跑不起来的必须先把这些文件还原。这套东西适合两类人一类是做 Java 课程设计或毕业设计、需要快速复现“员工知识培训考试系统”核心流程的在校生另一类是维护过遗留 SSM 项目、想看看别人怎么拆业务边界的在职工程师。它的价值不在 UI 有多炫而在于把员工管理、题库维护、在线考试、自动算分这一整条链路用最传统的 MVC 方式走通你改造成 Spring Boot 或微服务时业务逻辑可以直接平移。2. 实体关系与分层边界SSM MyBatis Plus 下先把数据模型立住2.1 为什么这个场景选 SSM 而不是 Spring Boot员工知识培训考试系统本质上是“后台管理 在线答题”没有高并发、没有分布式事务核心是几十张业务表之间的 CRUD 和一次考试会话的完整性。SSM 里 Spring 管业务对象SpringMVC 管请求路由MyBatis 管持久化这个组合对于中小型企业内部系统足够清晰。而 MyBatis Plus 的引入把最常见的单表操作给压缩了——你不太需要为每张表单独写 BaseMapper 的 SQLQueryWrapper可以直接拼条件。相比 Spring BootSSM 的配置更啰嗦但你反而能看到 Spring 容器是怎么一步一步把DataSource、SqlSessionFactory、MapperScannerConfigurer接起来的这对理解“自动配置”背后发生了什么有直接帮助。如果目标是把这套代码作为课程设计或面试项目SSM 反而比 Spring Boot 更能体现你对 Bean 生命周期和事务边界的掌控。2.2 核心数据表培训考试的五张主表与字段设计员工考试类项目的表结构通常绕着“人、卷、题、成绩”四个概念转。这里给出最小可用的一套设计也是这类源码里最常出现的结构表名关键字段字段说明职责employeeid,username,password,dept_id,role_id,create_time员工账号与角色登录、权限判断examid,title,duration_minutes,start_time,end_time,status考试场次与时间窗创建考试、控制可答时间questionid,type,content,options_json,answer,score,analyze题目内容、选项与答案题库管理exam_questionid,exam_id,question_id,score答卷与题目关联固定试卷、题目分值exam_recordid,employee_id,exam_id,score,submit_time,status员工某次考试的作答结果成绩统计、补考判断这里有个容易忽略的细节选择判断题的选项适合用JSON字符串存储比如[A. 正确, B. 错误]。在 MyBatis Plus 里你可以在实体字段上加TableField(typeHandler JacksonTypeHandler.class)配合TableName(autoResultMap true)让 JSON 字段在查询时自动反序列化为ListString。不要为了“看起来正规”把选项拆成四五个字段后面扩展多选题或增减选项时会非常痛苦。exam_question表决定了是固定试卷还是随机试卷——固定试卷里这套关联关系是预置的随机试卷则在考试生成时动态插入这段关系。2.2.1 MyBatis Plus 实体的注解写法Data TableName(exam) public class Exam { TableId(type IdType.AUTO) private Long id; private String title; private Integer durationMinutes; private LocalDateTime startTime; private LocalDateTime endTime; private Integer status; }代码逻辑TableName指定实体映射到exam表避免类名与表名不一致时还要写 XMLTableId(type IdType.AUTO)表示主键由数据库自增在 MySQL 下就是AUTO_INCREMENT。LocalDateTime映射到数据库的datetime类型MyBatis 3.4 不需要额外类型处理器。注意字段命名建议直接采用驼峰风格或让数据库字段为下划线风格并打开map-underscore-to-camel-case配置否则durationMinutes无法自动映射为duration_minutes。2.3 查询条件的标准写法QueryWrapper 和 LambdaQueryWrapper 的取舍在 Service 层写业务逻辑时MyBatis Plus 提供了两种条件构造器。传统字符串写法的缺点在于字段名无法编译期校验一旦改动实体字段SQL 条件字符串就悄悄失效。更稳妥的是LambdaQueryWrapper它直接引用实体方法引用Exam::getStatus重构时能第一时间发现失效位置。public ListExam listAvailableExams(Long employeeId) { LambdaQueryWrapperExam wrapper new LambdaQueryWrapper(); wrapper.eq(Exam::getStatus, 1) .ge(Exam::getEndTime, LocalDateTime.now()) .orderByAsc(Exam::getStartTime); return examMapper.selectList(wrapper); }这段代码做了三件事从Exam表里筛出状态为上架status1、考试结束时间晚于当前时间的记录并按开考时间升序排列。eq方法对应 SQL 的ge对应orderByAsc就是ORDER BY start_time ASC。如果你是第一次看这个项目记住一个原则单表查询别写 XMLselectList返回的就是实体集合只有当你要联查employeeexam_recordexam三张表统计部门平均分时才需要自定义 SQL否则过度设计只会让代码又长又难调。3. 从登录鉴权到交卷算分SSM 后端业务的关键实现写法3.1 登录状态拦截器做会话校验密码不要用裸 MD5这个系统的员工登录通常不引入 Shiro 那套重武器直接在 SpringMVC 里写一个HandlerInterceptor就够。核心思路是登录成功后把员工对象放进 Session拦截器校验 Session 里是否有loginUser没有就重定向到登录页。注意一个问题如果项目被人为改成前后端分离Session 的跨域会话要保持好通常前端用Axios携带credentials后端设置allowCredentials(true)。密码存储上常见做法是使用 BCrypt 而不是纯 MD5。纯 MD5 的彩虹表破解成本太低在这个源码包里如果你发现数据库里存的是 32 位定长字符串大概率是老式 MD5。正确做法是注册时用BCryptPasswordEncoder生成带盐的哈希登录时把用户输入的密码和哈希做匹配。public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { Object loginUser request.getSession().getAttribute(loginUser); if (loginUser null) { response.sendRedirect(/login.html); return false; } return true; } }这个拦截器的判断很简单从 Session 拿不到用户就跳到登录页false阻止后续 Controller 方法执行。它的主要职责是挡住“未登录直接访问/exam/list”这类请求。使用时需要在 SpringMVC 配置类中注册并指定拦截路径registry.addInterceptor(new LoginInterceptor()) .addPathPatterns(/**) .excludePathPatterns(/login, /logout, /static/**);参数说明addPathPatterns(/**)表示拦截所有路径excludePathPatterns是白名单/static/**放行静态资源否则 CSS/JS 全被拦。这套写法的优点是零额外依赖缺点是对接口型的 URL 不够精确如果某些页面要通过 Ajax 访问但 Session 过期返回的是302而不是401前端 Axios 要根据状态码做特殊处理。3.2 试卷生成随机抽题与固定试卷的边界随机组卷是这个系统比较有辨识度的业务点。考试创建时前端传入“单选题数量、多选题数量、判断题数量、每题分值”后端从题库里随机抽取并写入exam_question关联表。Transactional(rollbackFor Exception.class) public Long generateRandomExam(ExamCreateRequest request) { Exam exam new Exam(); exam.setTitle(request.getTitle()); exam.setDurationMinutes(request.getDuration()); examMapper.insert(exam); ListQuestion singleQuestions questionMapper.selectList( new LambdaQueryWrapperQuestion() .eq(Question::getType, SINGLE) .orderByAsc(RAND()) .last(LIMIT request.getSingleCount())); ListExamQuestion relations new ArrayList(); singleQuestions.forEach(q - { ExamQuestion eq new ExamQuestion(); eq.setExamId(exam.getId()); eq.setQuestionId(q.getId()); eq.setScore(request.getSingleScore()); relations.add(eq); }); examQuestionMapper.insertBatchSomeColumn(relations); return exam.getId(); }这段代码里有几个关键点。.orderByAsc(RAND())是 MySQL 随机排序的惯用写法它的原理是为每行生成一个随机数然后按这个随机数排序取前 N 条。这里没用 Lambda 字段引用是因为RAND()是数据库函数条件构造器会原样拼接所以直接传字符串。.last(LIMIT n)是 MyBatis Plus 预留的原生 SQL 追加入口使用时绝对不能用拼接用户输入——这里的n是后端计算好的整数可以认为是安全的。最后insertBatchSomeColumn是 MP 的批量插入方法能一次性把试卷和题目的关联记录插入避免循环单条插入导致的 N 次网络往返。需要注意Transactional必须放在public方法上而且不能是同类中的互相调用否则事务不生效。这个场景里插入exam和批量插入exam_question必须是一个原子操作一旦第二步失败考试主表已经存在但没有任何题目这个脏数据会让在线考试页面打开白屏。3.3 交卷算分业务事务与 SQL 幂等性交卷接口要做的事不止“算分数”。前端可能因为网络问题重复提交所以后端必须以“员工 考试”为维度做幂等控制。常见做法是在exam_record表上建唯一索引uk_employee_exam(employee_id, exam_id)插入前先尝试插入如果报DuplicateKeyException就直接返回已提交的结果。public SubmitResult submitExam(Long employeeId, Long examId, ListAnswerItem answers) { ExamRecord record new ExamRecord(); record.setEmployeeId(employeeId); record.setExamId(examId); record.setStatus(1); record.setScore(calculateScore(answers)); record.setSubmitTime(LocalDateTime.now()); try { examRecordMapper.insert(record); } catch (DuplicateKeyException e) { return getAlreadySubmitted(examId, employeeId); } return new SubmitResult(record.getScore()); }calculateScore内部会先把答案列表转成MapLong, String题目 ID - 答案再批量查出对应题目逐条比对答案符号累加分值。这里有个常见误写不要把它们一条条selectById200 道题就是 200 次查询用selectBatchIds一次查回 200 条再在内存里比对商学上叫“批量查询替代循环查询”。成绩计算和插入记录都在同一个事务里因为Transactional同时作用于这个submitExam方法。错误场景结果排查方向insert成功但calculateScore抛异常学生交了卷但没有成绩记录确认计算和插入是否在同一个事务方法内同一个考生重复点击交卷产生多条记录统计数据翻倍检查exam_record是否建了唯一索引前端倒计时没到 0 但后端时间已过考生可以继续作答后端要用服务器时间校验endTime不能信任客户端时间4. Vue ElementUI 前端管理端与在线考试的数据链路4.1 目录结构.bak文件对应的组件位置与职责源码里的IndexMain.vue、IndexHeader.vue、IndexAsideStatic.vue、BreadCrumbs.vue拼起来就是后台管理端的整体框架。IndexMain.vue是主布局容器左右结构左侧IndexAsideStatic.vue渲染菜单右侧内容区放子路由视图IndexHeader.vue是顶栏展示当前登录用户和退出按钮BreadCrumbs.vue根据当前路由自动生成面包屑导航。update-password.vue是用户自助改密页面登录后用 Token 换旧密码、提交新密码。index.html.bak不用多猜就是前端入口 HTML经过 Webpack 打包后会生成index.html它承载了 Vue 挂载点。原文件名组件类型核心职责IndexMain.vue布局组件定义aside与main两栏布局挂载子路由router-viewIndexAsideStatic.vue菜单组件渲染员工管理、题库管理、考试管理、成绩统计等路由入口BreadCrumbs.vue功能组件基于$route.matched生成层级导航update-password.vue页面组件调/updatePassword接口包含旧密码校验与二次确认index.html静态入口加载打包后的 JS/CSS定义div idapp4.2 Axios 请求封装与路由守卫这套前端系统的网络层通常单独抽一个request.js作用是统一设置baseURL、请求头携带 Token、拦截响应错误。管理端和考试页所有接口都走这个实例。import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login.html } return Promise.reject(error) } ) export default request逻辑说明请求拦截器在每次发请求前从本地存储取token并拼到Authorization头后端通过 OncePerRequestFilter 解析 Token响应拦截器最核心的逻辑是遇到401强制跳登录页这样 Session 过期后用户不会在考试页里看到一堆接口报错。注意timeout: 10000是 10 秒超时对于交卷这种复杂接口如果题库数量大有联表查询可能需要在单独请求里覆盖超时时间不要全局死板用 10 秒。路由守卫要解决“没登录不能进后台”的问题router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })to.meta.requiresAuth是在路由配置里声明的比如考试页meta: { requiresAuth: true, role: EMPLOYEE }。如果需要按角色区分菜单可以在守卫里加一个role判断但要注意后端每个接口也必须做权限校验前端隐藏菜单只是体验优化不是安全手段。4.3 考试页面的倒计时与自动交卷在线考试页面最大的坑是定时器泄漏。很多人直接在created里setInterval(() { this.countdown-- }, 1000)然后组件销毁时没有清掉导致切出页面再回来倒计时变成两个计时器在跑。data() { return { remainSeconds: 0, timer: null } }, created() { this.remainSeconds this.exam.durationMinutes * 60 this.startTimer() }, methods: { startTimer() { this.timer setInterval(() { if (this.remainSeconds 0) { this.autoSubmit() } else { this.remainSeconds-- } }, 1000) }, autoSubmit() { clearInterval(this.timer) this.submitPaper() } }, beforeDestroy() { clearInterval(this.timer) }timer在data里声明但在created里初始化这样beforeDestroy才能拿到同一个句柄。autoSubmit先清定时器再提交避免再次触发setInterval。注意beforeDestroy里的清理代码永远不会直接调用autoSubmit它的职责就是防止用户快速切换路由时旧页面还在消耗 CPU。后端已经在submitExam里做了幂等所以即使前端意外重复调用也不会产生重复成绩。5. 三个 bat 脚本背后的部署套路与.bak文件恢复技巧5.1 第一步批量还原.bak文件在 Windows 命令行里进入源码根目录执行以下命令把所有.vue.bak还原为.vuefor %f in (*.vue.bak) do ren %f %~nf%~nf表示去掉文件扩展名也就是把update-password.vue.bak变成update-password.vue。如果还有index.html.bak单独执行ren index.html.bak index.html。还原之后前端项目才能被npm install npm run dev正确识别。注意for循环里的变量%f在 bat 脚本中要写成%%f如果你只在命令行试一次则保持单百分号。5.2 读懂三个 batinstall、run、build 分别做什么这套资源里的1-install.bat、2-run.bat、3-build.bat是 Windows 下的一键操作脚本。常见的写法是echo step 1: 安装后端依赖并初始化数据库 mvn clean install2-run.bat一般执行mvn tomcat7:run或启动内嵌容器如果是传统 war 包部署会先构建再丢进 Tomcat。3-build.bat通常执行mvn clean package -DskipTests产出target/*.war用于正式发布。这三个脚本的顺序是先安装依赖下载 jar 包再本地跑起来调试最后打生产包。你在自己的机器上最小复现时只要保证jdk1.8、maven3.6、mysql5.7环境对齐即可。5.3 高频报错与应对现象原因处理Access denied for user rootlocalhostjdbc.properties用户名密码不对检查数据库账号和权限Communications link failureMySQL 没启动或端口不是 3306执行net start mysql或修改连接串/api接口 404前端代理没配好检查 WebpackdevServer.proxy目标地址启动后页面点考试报空指针exam_question没插入题目重新调用组卷接口并确认事务回滚配置部署验证的最后一个技巧不要总是杀进程重启在3-build.bat里加上-DskipTests能省掉测试用例编译时间如果本机端口被占用mvn tomcat7:run -Dport8081指定新端口。这套 SSM 系统的配置全集中在applicationContext.xml和jdbc.properties改完环境变量后优先检查这两处的参数比逐个翻代码快得多。本文还有配套的精品资源点击获取