毕业设计遇到“SSM Vue”这个组合很多同学第一反应是去搜模板觉得这套技术栈太成熟了随便改改就能交差。不过等你真正面对“教学互动跟踪系统”这个题目时会发现事情没那么简单签到要防重复课堂提问要实时更新作业和视频进度要持续记录教师端还要从一堆数据里看出学习趋势。任何一个点的设计与数据库表、接口、页面都强相关牵一发动全身。这篇博文我会把一个可运行版本的完整思路拆开讲后端用SSMSpring SpringMVC MyBatis前端用VueVite或Vue CLI都适用数据库用MySQL。内容包含项目结构、系统设计、关键代码、数据库建表、前后端联调、把Vue打包放进Spring Boot的部署方式以及写毕业论文时的对应思路。如果你是2026届毕业生正在为这套系统发愁这篇可以按顺序读完以后直接照着推。1. 项目全貌这个系统到底在解决什么问题1.1 为什么这个题目值得花时间做教学互动跟踪系统这个名字听起来就是标准Web业务系统但它的价值在于把教学活动里的“互动过程”和“学习结果”沉淀成数据。传统课堂里教师提问只能靠点名学生有没有听懂只能看期末考试课堂参与度全部依赖主观印象。这个系统把签到、提问、讨论、作业、视频观看进度放在一个平台里教师按课程查看数据能明显看到哪些学生持续参与、哪些知识点预习阶段就卡住。拿毕业设计答辩的评分点来说选题是否实在、功能是否有闭环、技术实现是否规范这个题目全部踩在点子上。它不像库存管理系统那样业务单一也不像大型电商系统那样难以驾驭。它有一个清晰的用户角色体系管理员、教师、学生各司其职数据从产生到流向统计图表有一条完整链路。论文里可以写需求分析、业务流程、数据库设计、系统测试每一章都不缺素材。1.2 核心角色与功能矩阵系统需要支撑三类角色我在设计原型时先整理出一张功能矩阵用来快速对齐需求角色核心操作数据产出对应页面管理员用户管理、课程管理账号、课程基础数据用户管理页、课程管理页教师创建课程、发起签到、发布提问、布置作业、查看统计互动记录、作业信息、成绩教师工作台、统计图表页学生选课、签到、参与问答、看视频、交作业签到记录、回复、学习进度我的课程页、学习页从功能矩阵就能看出系统至少需要提供几类后台接口用户认证接口、课程关联接口、签到接口、提问回复接口、作业上传接口、学习进度上报接口、统计分析接口。这些接口的数量不算夸张但每一个都要和前端商量好请求方式、参数命名和返回结构。1.3 技术选型SSM Vue为什么不落伍很多同学会纠结2026年了还写SSM会不会显得技术陈旧。我反而觉得SSM在本科毕设里有独特的教学意义。Spring负责对象管理和事务SpringMVC负责把HTTP请求路由到方法MyBatis负责SQL和Java对象映射三层职责非常清楚。你用Spring Boot也能实现同样效果但在论文里展开讲IoC、AOP、MVC流程时SSM的设计更能体现你理解底层原理。前端选Vue的原因就更直接组件化开发、响应式数据绑定、生态齐全Element UI、Vue Router、ECharts都是现成轮子学习曲线相对平缓。这种组合还有一个好处渐进式开发。系统可以先把后端接口按模块写出来前端一个页面一个页面去对接每一步都能看到进度这对毕设节奏很重要。加上Element UI这类组件库页面的美观程度并不输给企业项目答辩演示时观感很好。1.4 论文与程序的对应关系标题里的“论文程序”提醒我们程序不是全部论文和代码需要互相支撑。我的建议是论文按照“绪论—需求分析—系统设计—系统实现—系统测试”来写其中系统设计章节里的每个模块都要能映射到代码目录里。比如说数据库设计章节放ER图和数据库表对应MySQL里的实际脚本系统实现章节放类图和核心代码对应Spring的Controller和Vue组件。答辩时老师会问“这个功能在哪里实现”你能直接跳到代码位置现场说明比背稿强得多。2. SSM后端工程搭建、注解体系与数据库设计2.1 工程初始化与依赖引入如果用传统SSM先建Maven的war工程目录要规整。src/main/java下按controller、service、mapper、entity分包resources下放Spring配置和MyBatis映射文件webapp放静态资源。我遇到过不少学生把Java类和配置文件乱放最后Spring扫描不到bean报出一堆找不到类的异常定位问题要花很久。核心依赖如下最关键的几组dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.2.25.RELEASE/version /dependency dependency groupIdorg.mybatis/groupId artifactIdmybatis-spring/artifactId version2.0.7/version /dependency dependency groupIdcom.alibaba/groupId artifactIddruid/artifactId version1.2.20/version /dependency数据源配置要单独放。要注意MySQL驱动版本和数据库版本的匹配比如MySQL 8以上一般用com.mysql.cj.jdbc.DriverURL里加服务器时区和编码参数。资源目录下建议拆两个配置文件applicationContext.xml负责扫描service和dao、配置数据源和事务管理spring-mvc.xml负责扫描controller、开启注解驱动、配置静态资源放行。web.xml中注册DispatcherServlet时初始化参数指向spring-mvc.xml监听器加载applicationContext.xml。这一步漏配的后果就是所有接口404排查半天找不到原因。2.2 SpringMVC与MyBatis的注解使用Controller层的注解是前端最常接触的部分。以签到为例后端提供这样一个接口RestController RequestMapping(/api/sign) public class SignController { Autowired private SignService signService; PostMapping(/{courseId}) public ResultSignResult sign(PathVariable Integer courseId, RequestBody SignRequest request) { return Result.success(signService.sign(courseId, request.getStudentId())); } GetMapping(/record/{courseId}/{studentId}) public ResultListSignRecord record(PathVariable Integer courseId, PathVariable Integer studentId) { return Result.success(signService.getRecords(courseId, studentId)); } }这里RequestBody比较关键前端通过axios提交JSON时请求体里的字段会自动映射到SignRequest对象。字段名默认按属性名匹配如果不一致可以加JsonProperty注解但最好一开始就统一命名规则。Service层标注Service事务方法加Transactional。DAO接口用Mapper声明后MyBatis会在启动时扫描并生成代理对象。对比写XML映射时的经验我发现最简单的做法是接口方法名和XML中id保持一致parameterType也别省略否则某些类型注入时容易出错。2.3 数据库表设计围绕两类数据落表建表要站在业务角度拆成两个维度。第一维是“互动数据”签到、提问、回复。第二维是“跟踪数据”作业提交、学习进度、成绩。核心用户表设计示例CREATE TABLE t_user ( id INT PRIMARY KEY AUTO_INCREMENT, account VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, real_name VARCHAR(50) NOT NULL, role VARCHAR(20) NOT NULL COMMENT admin/teacher/student, avatar VARCHAR(255), create_time DATETIME DEFAULT CURRENT_TIMESTAMP );课程表和选课表用关联模型保持低冗余。课程表存教师ID选课表存课程ID和学生ID。签到表要特别注意唯一约束防止同一学生在同一天重复签到CREATE TABLE t_signin ( id INT PRIMARY KEY AUTO_INCREMENT, course_id INT NOT NULL, student_id INT NOT NULL, sign_time DATETIME NOT NULL, status VARCHAR(20) DEFAULT normal, UNIQUE KEY uk_course_student (course_id, student_id, sign_date) );实际签到规则可以简化用sign_date记录哪天签到业务层再判断是否在有效时间窗口内。如果你做了课堂签到码还可以加上sign_code字段。学习进度表建议存percent和last_position两个字段前者用于展示后者用于二次观看定位。这样即使页面被关闭学生回来还能接着上次位置看。2.4 统一返回体、异常和分页规范前后端分离项目里接口返回体一定要稳定。我在系统中定义Result类code200表示成功code500表示异常token失效时code401前端可以按code统一跳转。再配合ControllerAdvice实现全局异常处理代码里只处理业务异常底层异常交给全局处理器兜底。这样一来前后端沟通时只需要掌握一套返回模板前端判断逻辑也会简洁很多。分页使用PageHelper的思路是在查询方法前调用PageHelper.startPage(pageNum, pageSize)后面第一条查询自动拼limit再通过PageInfo拿到总记录数。对前端来说列表接口统一返回分页结构包含list、total、pageNum、pageSize四要素。这样学生端“我的签到记录”和教师端“班级学生列表”可以复用同一套前端分页组件逻辑。2.5 MyBatis映射和事务进度更新里的细节学习进度更新最容易出并发问题。学生在同一时间可能开着两个页面看不同视频后端的更新逻辑就要谨慎。我的方案是保存时先查存在性存在则更新最后观看时间并取较大的进度值不存在则插入。虽然看起来多了一次查询但避免了把最新进度覆盖掉。对应Service逻辑可以这样写Transactional public void reportProgress(Integer studentId, Integer resourceId, Integer currentTime) { LearningProgress p progressMapper.selectByStudentAndResource(studentId, resourceId); if (p null) { progressMapper.insert(studentId, resourceId, currentTime); } else { progressMapper.updateProgress(studentId, resourceId, currentTime); } }如果未来班级规模变大这里还可以换成幂等更新但毕设这样已经足够清晰。MyBatis的resultMap里要注意Java属性是驼峰命名、数据库字段是下划线命名的映射问题打开mapUnderscoreToCamelCase配置后绝大多数字段就能自动对应。3. Vue前端从环境配置到核心页面实现3.1 环境准备与脚手架安装Vue环境配置是很多人的第一道坎。我建议你先检查Node版本和npm镜像很多同学安装依赖特别慢多半是没有切换镜像源node -v npm config set registry https://registry.npmmirror.com创建项目时用Vite比较顺手npm create vuelatest teaching-frontend cd teaching-frontend npm install npm run devVite默认生成的项目结构里已经包含Vue Router和Pinia按需引入。如果你更习惯Vue CLIvue create teaching-frontend也没问题。接下来安装UI组件库和图表库组件库我推荐Element Plus因为它和Vue 3配合好表单、表格、弹窗这些毕设常用组件都有现成实现。如果遇到安装后启动报错很多情况是node_modules损坏或者版本不匹配可以删除node_modules和package-lock.json重新安装这个操作我百试不爽。3.2 路由、登录守卫和请求封装毕业设计里的路由除了基础页面跳转还要做好权限控制。常见实现方式是登录成功后在本地保存token和用户角色在路由配置里标记meta.requiresRole通过全局beforeEach守卫拦截。router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.path ! /login !token) { next(/login); } else { next(); } });axios请求封装方面我习惯创建request.js统一导出实例const service axios.create({ baseURL: /api, timeout: 10000 }); service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization token; } return config; }); service.interceptors.response.use(res { if (res.data.code 401) { router.push(/login); } return res.data; }, error { return Promise.reject(error); });为什么把baseURL设为相对路径因为开发环境有Vite转发配置生产环境直接部署在Spring Boot同一端口相对路径才不会写死成某个本地地址。3.3 核心页面签到、课堂提问、进度跟踪的落地以签到页面为例界面不要做成简单的“打钩”建议在页面上显示课程名称、签到开始时间和倒计时。学生点击签到前端调用后端接口返回成功后在按钮上显示“已签到”并禁用。教师端提供“发起签到”按钮设定N分钟后截止学生端通过接口实时刷新倒计时。课堂提问页面类似一个小型讨论区。用列表展示问题最新发布排在最前学生可以回复和点赞。这里有个实时更新问题如何让教师端立刻看到新问题最简单是轮询每3秒请求一次新问题接口如果想在论文里写“实时交互”可以用SSE后端按课程维度推送通知前端这样订阅const source new EventSource(/api/notify/subscribe?courseId courseId); source.onmessage e { loadQuestions(); };注意EventSource只能处理服务端推送文本适合这种单向通知场景。如果是双向聊天才需要WebSocket。学习进度页对应学生进入课程资源后的视频播放。前端通过video元素的timeupdate事件上报播放时间同时用sessionStorage记录本次会话看过的资源ID避免同一个页面重复上报。m3u8播放的问题在引入hls.js之后可以参考这种写法import Hls from hls.js; if (Hls.isSupported()) { const hls new Hls(); hls.loadSource(videoUrl); hls.attachMedia(videoElement); }写完这段你就能在Vue页面里直接播放hls格式的视频流不需要额外安装播放器壳子。3.4 数据可视化与文件预览教师端统计页面用ECharts展示两个柱状图是常见需求比如“班级签到次数Top 10”和“各章节作业完成率”。ECharts说到底就是喂数据给optionconst chart echarts.init(document.getElementById(chartBox)); chart.setOption({ xAxis: { type: category, data: names }, yAxis: { type: value }, series: [{ data: counts, type: bar }] });接口返回的数据结构如果和后端不一致最好在请求层做一次转换别在组件里堆一堆for循环。文件预览方面学生提交的PDF教师希望直接在线看用iframe嵌一个地址就能实现前提是后端把文件上传目录映射成了可访问的静态资源地址。3.5 组件的可复用性很多毕设项目页面一多代码就混乱问题出在没有抽离组件。像课程卡片、学生列表、状态标签、分页条这些重复出现的区域应该对外提供props自己只负责渲染和事件通知。Vue插槽可以把通用弹窗组件的标题区、内容区、按钮区分开比如作业详情弹窗标题是作业名内容是描述和附件底部是关闭和提交按钮。这样统一一个任务弹窗组件就能覆盖不同场景。复用的价值不只是少写代码而是答辩时老师看到你的代码结构有章法会给出更好的印象分。4. 前后端联动、打包部署与常见问题4.1 开发环境联调跨域与前端转发二选一前后端分离开发最常见的尴尬是前端页面能打开接口却全部跨域。原因很简单Vite开发服务器跑在5173端口Tomcat跑在8080端口浏览器认为这是两个源。开发阶段最省事的解法是在vite.config.js里配置devServer的转发功能server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }配置后前端请求/api/xxx时开发服务器会把请求转发到后端浏览器看到的是同源请求自然没有跨域报错。如果项目用了其他调试方式后端也需要在响应头里加Access-Control-Allow-Origin但我建议生产和展示环境尽量走同源部署放宽跨域只作为兜底方案。4.2 把Vue打包放进Spring Boot等到要部署联调或给答辩老师演示时把前端和后端分开跑两个服务也算能用但总显得不够完整。更好的做法是把Vue打包后的dist目录直接放进Spring Boot项目。流程是固定的以后做其他项目也能直接复用。第一步执行npm run buildVue项目会在dist目录生成index.html和静态资源。第二步把dist目录里的内容复制到Spring Boot项目的src/main/resources/static目录。第三步确保Spring Boot提供/api/开头的接口页面的其余静态资源请求都落在static目录上。第四步重新打包运行mvn clean package java -jar target/teaching-system.jar启动后访问http://localhost:8080默认就是Vue首页。这种部署方式可以让一个jar包同时承载后端和前端演示时不需要额外启动Vite也避免了Node环境依赖问题。4.3 传统SSM的war包部署方式如果后端还是典型SSM工程那部署依赖外部Tomcat。需要把前端dist目录内容和后端webapp目录合并index.html直接放在webapp根目录接口依旧走Controller。注意SpringMVC的DispatcherServlet默认会拦截很多请求如果它对静态资源也做强拦截页面资源就会出现404。最稳妥的做法是配置mvc:resources mapping/static/** location/static//或者把静态资源放在webapp/static目录下再用mvc:default-servlet-handler/把漏掉的交给Tomcat默认Servlet处理。这一步配置正确后接口和页面才能和谐共存。4.4 部署中的常见坑我实际操作中遇到过三类典型问题。第一用history路由时用户进入教学系统首页后点击刷新直接404。原因是浏览器把地址栏的路径交给后端后端没有对应路由。解决方法是把Vue Router改成hash模式否则要在后端加fallback规则。第二学生上传头像或者作业文件后浏览器预览地址指向后台磁盘路径天然访问不到。解决方法是单独增加文件映射接口把磁盘目录映射成/web/upload/**这样的URL。第三打包时接口请求的baseURL写成http://localhost:8080部署到服务器后还是请求本机导致页面白屏。所以我才坚持baseURL用相对路径。这三个问题能避开部署环节就不会太折磨人。5. 常见问题排查与实操心得5.1 高频问题速查表整理一下开发周期里最容易遇到的问题做成一张速查表问题现象可能原因处理方法前端请求全部404接口前缀不一致或Controller未扫描统一约定 /api 前缀检查DispatcherServlet路径映射后端500并提示日期序列化异常实体类有Date字段Jackson默认格式不能满足使用JsonFormat指定日期格式或配置全局JacksonMyBatis报Invalid bound statementMapper接口和XML的namespace或id对不上逐项核对namespace、id、resultType登录后页面还是跳回登录页token未写入localStorage或路由守卫逻辑写反检查登录成功的setItem和beforeEach判断Vite启动报tsconfig not found创建模板时选了TS但类型依赖没装全删除node_modules重装或创建时选择JavaScript模板m3u8视频无法播放源站不支持跨域或hls.js未正确挂载后端允许跨域前端判断Hls.isSupported后创建实例上传文件后预览失败磁盘路径未被映射为可访问URL配置静态资源映射或文件访问接口build后包体积偏大ECharts全量引入按需引入图表组件或开启gzip5.2 开发流程的实操心得真正把这个项目从头写完最耗时间的往往不是代码本身而是反复调接口。所以我强烈建议后端先出一份接口文档哪怕只是手写表格都行字段名从数据库表里抄出来前端开发时照着字段名写模拟数据等后端接口就绪后再切换成真实请求。这个习惯能让联调时间缩短一大半。另一个经验是按模块做提交和演示节点。第一个节点先完成登录和课程列表第二个节点做签到第三个节点做提问和学习进度最后再来统计图。每个节点都能独立跑通的话后面集成就是拼接不会出一锅乱粥。别高估自己一天能写完一个模块每周留出一天处理环境异常节奏会从容很多。5.3 论文与答辩的贴合点最后说一点写论文的事。答辩时老师最喜欢问“为什么用SSM”和“这个功能具体是怎么实现的”。建议你在论文实现章节给每个核心模块配一张时序图或者类图。程序代码是论证论文是解释两者对应越紧密答辩越占优。我在演示时习惯准备两个窗口一个展示Vue页面一个展示IDEA终端日志。老师问到某个数据库操作我就切到控制台让真实的SQL日志说话。看得见的数据变化比空口描述有说服力。写到这里系统已经从一个模糊的题目变成可运行的工程。它对你的价值不在于多炫而在于每个模块你都能讲明白为什么这样设计。我在指导毕业设计时经常说技术本身是工具业务理解才是主线。把教学互动跟踪系统作为你第一个完整全栈项目走完数据建模、前后端开发、部署答辩这一段你获得的绝对不止是一个分数。
