SSM员工培训考试系统实战：MyBatis Plus与Vue全栈解析

简介：面向企业人事培训与考核场景的员工知识培训考试系统源码，是一套基于SSM（Spring+SpringMVC+MyBatisPlus）与Vue的前后端分离实现。项目涵盖题库管理、在线考试、自动评分、成绩统计、员工信息管理等核心功能，同时区分学员端与管理端，适合需要快速搭建内部培训平台的开发人员，也适合作为计算机相关毕业设计、课程设计的参考模板。资源包共846个文件，以Java后台源码、Vue组件、JS脚本、CSS样式、HTML页面为主，另含SQL数据库脚本、Maven配置、设计文档以及图片/视频素材，整体仅16.12MB，目录结构清晰，便于按模块查找和部署。目前已有194人学习浏览；使用者可从中获取完整项目代码、数据库初始化脚本、接口与页面实现思路，既能作为SSM+Vue整合开发的学习样本，也可直接运行或二次扩展，大幅节省从零搭建和排错的时间成本。

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 的 SQL，QueryWrapper可以直接拼条件。相比 Spring Boot，SSM 的配置更啰嗦，但你反而能看到 Spring 容器是怎么一步一步把DataSource、SqlSessionFactory、MapperScannerConfigurer接起来的，这对理解“自动配置”背后发生了什么有直接帮助。如果目标是把这套代码作为课程设计或面试项目，SSM 反而比 Spring Boot 更能体现你对 Bean 生命周期和事务边界的掌控。

2.2 核心数据表：培训考试的五张主表与字段设计

员工考试类项目的表结构通常绕着“人、卷、题、成绩”四个概念转。这里给出最小可用的一套设计，也是这类源码里最常出现的结构：

这里有个容易忽略的细节：选择判断题的选项适合用JSON字符串存储，比如["A. 正确", "B. 错误"]。在 MyBatis Plus 里，你可以在实体字段上加@TableField(typeHandler = JacksonTypeHandler.class)，配合@TableName(autoResultMap = true)让 JSON 字段在查询时自动反序列化为List<String>。不要为了“看起来正规”把选项拆成四五个字段，后面扩展多选题或增减选项时会非常痛苦。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表，避免类名与表名不一致时还要写 XML；@TableId(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 List<Exam> listAvailableExams(Long employeeId) { LambdaQueryWrapper<Exam> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(Exam::getStatus, 1) .ge(Exam::getEndTime, LocalDateTime.now()) .orderByAsc(Exam::getStartTime); return examMapper.selectList(wrapper); }

这段代码做了三件事：从Exam表里筛出状态为上架（status=1）、考试结束时间晚于当前时间的记录，并按开考时间升序排列。eq方法对应 SQL 的=，ge对应>=，orderByAsc就是ORDER BY start_time ASC。如果你是第一次看这个项目，记住一个原则：单表查询别写 XML，selectList返回的就是实体集合；只有当你要联查employee+exam_record+exam三张表统计部门平均分时才需要自定义 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); List<Question> singleQuestions = questionMapper.selectList( new LambdaQueryWrapper<Question>() .eq(Question::getType, "SINGLE") .orderByAsc("RAND()") .last("LIMIT " + request.getSingleCount())); List<ExamQuestion> 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, List<AnswerItem> 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内部会先把答案列表转成Map<Long, String>（题目 ID -> 答案），再批量查出对应题目，逐条比对答案符号，累加分值。这里有个常见误写：不要把它们一条条selectById，200 道题就是 200 次查询，用selectBatchIds一次查回 200 条再在内存里比对，商学上叫“批量查询替代循环查询”。成绩计算和插入记录都在同一个事务里，因为@Transactional同时作用于这个submitExam方法。

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 挂载点。

4.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还原为.vue：

for %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 读懂三个 bat：install、run、build 分别做什么

这套资源里的1-install.bat、2-run.bat、3-build.bat是 Windows 下的一键操作脚本。常见的写法是：

echo "step 1: 安装后端依赖并初始化数据库" mvn clean install

2-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 高频报错与应对

部署验证的最后一个技巧：不要总是杀进程重启，在3-build.bat里加上-DskipTests能省掉测试用例编译时间；如果本机端口被占，用mvn tomcat7:run -Dport=8081指定新端口。这套 SSM 系统的配置全集中在applicationContext.xml和jdbc.properties，改完环境变量后优先检查这两处的参数，比逐个翻代码快得多。

本文还有配套的精品资源，点击获取