SpringBoot+Vue多媒体在线学习平台：从视频播放到富媒体互动完整实现

做计算机毕业设计选在线学习平台这个方向，SpringBoot + Vue几乎是绕不开的答案组合，但真正把"在线学习"做成"富媒体互动教学"，而不是一个简单的视频列表网站，里面要填的坑比想象中多。这个项目我断断续续整理了大半个月，前前后后踩了不少雷，这里把完整的思路、核心实现和排查经验都倒出来，给准备做类似题目的朋友一个直接能参考的版本。

1. 项目定位与需求拆解

1.1 这个系统到底要解决什么问题

标题写的是"多媒体在线学习平台"，乍一看好像就是上传视频、播放视频，实际上在线教育平台的痛点完全不止这一层。用户端的核心诉求是：课程怎么呈现、视频怎么流畅播放、课件资料怎么展示、学习过程中怎么和老师或同学互动；管理端的核心诉求则是：课程资源怎么组织、权限怎么控制、学习数据怎么统计。

所以我在设计时把系统拆成了四个核心模块：课程内容管理、富媒体播放与展示、在线互动交流、后台权限管理。这里面"富媒体"三个字是关键，它意味着平台不只是放视频，还要能承载PDF课件、图文笔记、题目测验、直播聊天等不同形态的内容，这也是现在智慧课堂类产品的主流形态。

1.2 目标用户与核心场景

从使用角色来看，系统分三类：学生、教师、管理员。不同角色对应的场景差异很大，做需求分析的时候要把这些场景想透，否则后面做出来四不像。

学生的典型场景是：登录后看到课程列表，进入课程详情页，观看视频章节，中途可以查看配套课件，遇到问题可以在讨论区留言，看完视频可以做章节测验。教师的场景是：创建课程、上传视频和课件、发布测验、回答学生提问、查看选课学生的学习进度。管理员的场景相对简单但更重要：用户管理、课程审核、系统配置、数据看板。

在做需求文档时，我直接按角色画了用例图，把每个角色的操作路径列出来，再对应到菜单栏和页面路由，这样后期开发几乎不会出现"页面做完了不知道放哪个入口"的问题。

2. 技术选型与方案对比

2.1 后端框架版本选择的权衡

SpringBoot版本是我最先纠结的问题，因为它在很大程度上决定了后续的编码习惯和依赖版本。当前主流有两个分支：2.7.x系列和3.x系列，3.x从2022年底开始成为主流，但很多基于2.x的教程和博客依然有极高的参考价值。

这里有一个非常实际的考量：如果你的毕业设计需要用到大量现成的教程、开源代码片段，那么SpringBoot 2.7.x会省去非常多的麻烦，因为网上绝大多数资料都是基于javax命名空间的写法。SpringBoot 3.x则把javax换成了jakarta，Spring Security的配置方式也从WebSecurityConfigurerAdapter改成了基于SecurityFilterChain的Lambda写法，很多旧代码直接粘过来是编译不过的。

我个人最后选了SpringBoot 2.7.18 + JDK 8，理由很简单：稳定、资料多、踩坑成本低。如果选3.x，需要同时配JDK 17，对大部分电脑来说也不是问题，但没必要为了"新"给自己加戏。如果你的题目要求里明确写了"新版"或者你想体现技术前瞻性，那用3.x也完全可以，只是要有心理准备去适配依赖版本。

2.2 前端Vue方案确定

前端同样有两代选择。Vue 2已经进入维护末期，新项目我直接用的Vue 3 + Vite，配合Element Plus组件库。Vite相比Vue CLI最大的好处是启动速度快，开发体验好很多，而且Vite的代理配置比Vue CLI简单直观，跨域问题处理起来很顺手。

组件库选型方面，Element Plus在后台管理系统领域属于事实标准，表单、表格、弹窗、树形控件都齐全，配合在线学习平台这种大量列表和表单的场景非常合适。如果用Vue 2，那对应的是Element UI，也是类似的效果。

前端工程结构我按标准分了几层： views放页面组件，router放路由配置，store用Pinia管理全局状态，api目录统一封装axios请求，utils放公共方法。这个结构对于毕设体量的项目已经足够了，不需要上复杂的DDD分层，否则反而显得臃肿。

2.3 富媒体处理技术栈

在线学习平台区别于普通CRUD项目的地方就在这里。视频播放涉及流媒体协议，课件展示涉及文档解析，互动功能涉及实时通信，每一项都有专门的技术方案。

• 视频播放：涉及HLS流媒体协议，采用m3u8切片播放方案，前端集成hls.js实现免插件播放
• PDF课件：前端用pdf.js或者直接通过iframe加载
• 富文本内容：采用Markdown编辑器或富文本编辑器（如wangEditor）
• 实时互动：通过WebSocket实现讨论区和在线人数统计

这些技术的选型我会在后面实操环节详细展开。

3. 系统架构与数据库设计

3.1 前后端分离架构与部署策略

主体架构采用经典的前后端分离模式：SpringBoot提供RESTful API，Vue独立开发构建，后端通过Maven打包成可执行JAR。如果是为了课程设计演示方便，也可以把Vue构建后的静态资源直接放进SpringBoot的static目录里，做到"一个JAR包跑整个系统"，这种方式对答辩演示非常友好，不用同时启动两个服务。

我最终采用的是稍有区别的方式：开发阶段用Vite代理解决跨域，前端独立跑在5173端口，后端跑在8080端口；部署阶段把前端构建产物复制到后端resources/static目录下，打成单一JAR包交付。这样既保留了开发效率，又方便部署演示。

后端按经典三层架构分包：controller层负责HTTP接口，service层处理业务逻辑，mapper层用MyBatis-Plus操作数据库。实体类、DTO、VO分离，避免前端直接面对数据库字段结构。JWT做身份认证，拦截器校验登录状态和角色权限。

3.2 核心数据表设计说明

数据库设计是这类项目最容易被低估的部分，表结构设计不合理，后期写SQL和业务代码都会很痛苦。我设计的核心表如下：

这里有个细节值得说：选课表里我加了progress字段，用于记录学习进度。做在线学习平台不能让学生每次进来都从头看视频，前端每5秒向后端上报一次当前视频播放位置，存到progress里，下次播放时从该位置继续。这个小功能对用户体验的提升非常明显，而且答辩时也很有亮点。

课程、章节、视频三层级关联，对应前端"课程详情-章节列表-视频播放"的页面结构。课件资源表和章节关联，支持一个章节挂多个附件。测验题目表挂在章节下面，做成单选和多选题为主，阅卷逻辑也简单。

4. 关键功能实现与细节解析

4.1 视频播放的核心方案：m3u8 + hls.js

在线学习平台的视频播放是整个系统技术含金量最高的部分，也是我最想展开讲的。我没有采用直接上传MP4文件让浏览器用video标签播放这种简单方式，而是做了流媒体切片处理。原因有两个：一是MP4在浏览器里只能渐进式播放，用户拖动进度条时需要下载到对应位置才开始渲染，长视频体验很差；二是MP4多码率高，对服务器带宽压力大。

流媒体的标准做法是HLS协议，即把视频切成一个个小片段的ts文件，配合一个m3u8索引文件，播放器按需加载。我实践下来最顺手的方案是：服务端用ffmpeg把上传的mp4转码成m3u8格式，前端用hls.js播放。

ffmpeg转码命令如下，可以说是标准操作：

ffmpeg -i input.mp4 -codec copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls output.m3u8

这个命令把input.mp4按每10秒一个切片的方式生成output.m3u8和一系列ts文件，-codec copy表示不重新编码，只做封装格式转换和切片，速度非常快，一个100MB的视频几秒就能转完。如果原始视频编码格式浏览器不支持，比如某些摄像设备录出来的编码，就需要去掉-codec copy参数改为-c:v libx264 -c:a aac进行转码，但耗时会长很多。

前端播放m3u8的时候，最省事的方式是引入hls.js。很多同学第一次遇到m3u8时直接用video标签的src指向m3u8地址，结果发现浏览器不能播放，这就是没搞清楚HLS协议的支持范围。hls.js的原理是把m3u8索引和ts分片通过Media Source Extensions喂给浏览器，实现在非Safari浏览器上的免插件播放。

核心播放代码：

import Hls from 'hls.js' // 假设videoRef是页面上video标签的引用，videoUrl是m3u8的地址 const playM3u8 = (videoUrl) => { if (Hls.isSupported()) { const hls = new Hls() hls.loadSource(videoUrl) hls.attachMedia(videoRef.value) hls.on(Hls.Events.ERROR, (event, data) => { if (data.fatal) { // 网络错误时尝试恢复，其他错误则切换源 if (data.type === Hls.ErrorTypes.NETWORK_ERROR) { hls.startLoad() } } }) player = hls } else if (videoRef.value.canPlayType('application/vnd.apple.mpegurl')) { // Safari原生支持HLS，直接赋值即可 videoRef.value.src = videoUrl } }

注意一个容易踩的坑：m3u8的视频源地址和前端页面必须同域，或者后端接口需要配置跨域允许，否则hls.js请求ts切片会被浏览器拦截，表现为第一帧能加载、后续一直黑屏或卡住。

4.2 PDF课件不是用img标签展示的

这是热搜词里一个很有意思的问题：vue image能显示pdf吗。答案是能，但只在部分浏览器里行得通，而且体验非常糟糕。真正稳定的方案有三种：iframe/embed直接嵌PDF、pdf.js解析渲染、浏览器原生的对象URL方式。

我在系统里用的是最轻量的方案——直接把PDF文件地址赋给iframe的src，浏览器原生就能渲染PDF内容，Chrome、Edge、Firefox都支持，不需要额外引库。这种方式对毕设完全够用：

<iframe :src="pdfUrl" style="width: 100%; height: 700px; border: none;"></iframe>

如果你的场景需要在页面里内嵌PDF的同时做批注、高亮等操作，那就得上pdf.js了，它能把PDF逐页绘制到Canvas上，完全控制展示效果。但付出的代价是集成复杂度变高，加载大PDF时的内存占用也不小。对这份毕设来说，iframe方案是性价比之王。

后端要做的就是把PDF文件存入指定目录，前端通过接口拿到文件访问地址，拼到iframe的src里即可。

4.3 互动功能：讨论区与WebSocket在线状态

讨论区是最能体现"互动教学"二字的模块。我做的讨论区分两级：一级是某个课程下的全局讨论，二级是课程中某章节下的细节讨论。学生可以在视频播放页面侧边直接发起评论，教师后台可以对评论进行回复。

这里有一个业务设计上的思考：讨论区评论的排序策略。我采用的不是简单的时间倒序，而是"精华优先 + 时间倒序"，评论点赞数超过一定阈值会置顶，这样做的好处是学生进入讨论区首先看到的是高质量内容，而不是最最近的水贴。实现上也不难，SQL查询时先按likes倒序，再按create_time倒序。

WebSocket用在两个场景：一是课程详情页的在线人数实时统计，二是教师端收到新评论的实时提醒。SpringBoot集成WebSocket用的是spring-boot-starter-websocket依赖，前端通过原生WebSocket连接。注意WebSocket的握手路径要和后端配置一致，有拦截器时还要放行这一路径。

4.4 权限控制与JWT认证

系统有三种角色，权限设计上采用RBAC模型——用户表关联角色，角色关联菜单权限。后端通过SpringMVC拦截器统一校验JWT令牌，前端通过Vue路由守卫判断页面访问权限。JWT令牌本身是无状态的，服务端不保存登录状态，每次请求在Header里带上Authorization字段即可。

这里有一个很重要的实操细节：JWT的secret密钥一定不要直接写死在代码里，我放在了application.yml配置文件中，通过@Value注解注入。答辩时老师问起安全性问题，你至少能说出这个层面的考虑。另外登录接口要加验证码，防止暴力破解，这个属于成熟系统的标配。

前端路由守卫是另一个关键点。Vue的路由配置分为静态路由和动态路由两部分：静态路由是登录页、首页等所有角色通用的页面；动态路由根据角色权限异步添加，比如管理员菜单在普通学生登录后根本不在路由表里，就算手动输入URL也会被守卫拦截。

5. 环境配置与工程部署实操

5.1 前端环境配置与项目初始化

Vue项目的前置环境主要是Node.js，建议装Node 16或更高版本，npm随Node一起安装。Vite初始化Vue项目就一条命令：

npm create vite@latest cloud-classroom -- --template vue

项目初始化后，需要安装核心依赖：

npm install npm install vue-router@4 pinia element-plus axios hls.js

这里提醒一句：npm安装依赖慢的可以临时切换淘宝镜像源，执行npm install --registry=https://registry.npmmirror.com，省时省力。Vite开发服务器默认端口5173，代理配置在vite.config.js中：

server: { port: 5173, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }

这样前端请求/api/xxx时，会自动转发到后端的8080端口，绕过了开发环境下的跨域限制。

5.2 SpringBoot工程创建与核心配置

后端工程我直接用IDEA的Spring Initializr创建，选Java 8和SpringBoot 2.7.18，依赖选Web、MyBatis-Plus、MySQL Driver、Lombok、JWT相关包手动引入。核心依赖如下：

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3</version> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency>

项目结构上我保持了清晰的分包规范：

com.example.cloudclass ├── config // 配置类 ├── controller // 接口层 ├── service // 业务层 ├── mapper // 数据访问层 ├── entity // 实体类 ├── dto // 入参出参对象 ├── common // 通用工具类、返回结果封装 └── security // JWT认证与拦截器

MyBatis-Plus的配置也非常简单，application.yml里添加数据源和逻辑删除配置即可。一个关键配置是多文件上传限制，在线学习平台上视频和课件文件动不动上百MB，SpringBoot默认的上传限制是1MB，必须改：

spring: servlet: multipart: max-file-size: 2000MB max-request-size: 2000MB

5.3 前后端联调与打包部署

开发模式下前后端分离跑，调试接口比较方便，但最终展示和答辩时不可能一直开着两个终端。打包部署分两步走：

第一步，前端构建：

npm run build

构建完成后，dist目录下就是纯静态文件。第二步，把dist里的所有文件复制到后端项目的src/main/resources/static目录下。然后打包后端：

mvn clean package -DskipTests

最终在target目录下生成一个可执行JAR，运行java -jar后，访问8080端口就能打开整个系统。视频文件、课件文件的存储目录我用application.yml配置了自定义路径，文件不打包进JAR，避免JAR包过大。

这里有一个Vue路由模式相关的坑需要说明：如果把前端打包放进SpringBoot里，Vue Router如果使用history模式，刷新页面时会出现404，因为后端不知道前端路由的映射关系。解决方法是把Vue Router改成hash模式，或者在后端加一个兜底controller把未匹配的路径全部转发到index.html。我更推荐前者，毕设项目用hash模式完全够用且零配置。

6. 常见问题与排查实战

6.1 SpringBoot版本引发的编译异常

做这个项目时我最初尝试过SpringBoot 3.2版本，结果项目里两个老教程的代码翻车了。一个是javax.servlet的引入包名变了，另一个是Spring Security旧版配置类在新版里已经被移除。这给一个强烈的提醒：框架升级带来的成本往往是隐性的，表面看只是版本号变了，实际连带影响的依赖可能有一大串。

排查这种问题有一个通用解法：直接看Maven依赖冲突报告，mvn dependency:tree输出所有依赖的版本关系，找到报错对应的包，再针对性调整版本。毕设场景下，为了降低踩坑概率，建议直接用SpringBoot 2.7.x系列，市面上大部分学习资料、解决方案都能无缝套用。

6.2 Vue打包后刷新404问题

这个问题几乎每个做前后端一体部署的人都会遇到。前面说了改成hash模式能解决，但还有另一种情况：如果你用history模式的同时把静态资源放在了后端，刷新404是因为后端没有对应的接口路径。我在排查时是先确认了后端是否把请求转发到了index.html，确认后再检查前端路由配置的base路径是否正确。

一个更底层的原因是：SpringBoot默认把静态资源映射在classpath:/static/下，而我的前端dist目录复制时把index.html放在了static根目录，理论上没问题。可问题出在SpringMVC的DispatcherServlet拦截了所有请求，对于不存在的资源路径直接返回404，根本没有降级到index.html。用hash模式后URL带#号，所有页面跳转都在前端完成，后端只负责接口和静态资源，这个问题就彻底不存在了。

6.3 m3u8视频播放黑屏但音频正常

这个现象是经典问题。视频黑屏有两个常见原因：一是视频编码格式问题，二是Video标签的type属性没设置。我在处理一个录屏视频时发现的，转成m3u8后能听到声音但画面全黑，ffmpeg日志显示原始视频编码是h265，而大多数浏览器不支持h265硬解，需要软解降级。

重新转码命令：

ffmpeg -i input.mp4 -c:v libx264 -c:a aac -start_number 0 -hls_time 10 -hls_list_size 0 -f hls output.m3u8

注意这里明确指定了-c:v libx264 -c:a aac做真正的转码，虽然耗时更长，但兼容性最好。如果你希望转码速度更快且接受较大的文件体积，也可以保留原来的copy方案，前提是确认源视频编码是h264+aac。

6.4 其他几个高频问题的快速速查

7. 从做毕设到做产品的一些体会

做这个项目的过程中，我最大的体会是：技术栈本身不是难点，难点在于把每一个看似简单的小功能做到"真正能用"。比如视频播放，很多毕设的在线教育平台只是放一个video标签就结束了，但实际你只要做了m3u8切片和hls.js播放，整个系统的技术层次就完全不一样了。

另外一个很实用的建议是：答辩时不要讲"我用了SpringBoot"这种空话，而是准备三五个"为什么"的答案——为什么用m3u8而不用MP4，为什么用JWT而不用Session，为什么用hash模式而不用history模式。这些问题看似简单，但能说清楚就代表你真的理解了系统，不是照着教程敲了一遍代码。

最后再分享一个我自己开发过程中的效率技巧：把公共模块先做出来，包括统一返回结果类、异常处理器、分页工具、文件上传组件，然后再去写具体的业务模块。这个顺序一旦反了，写每个模块时都要回头补公共代码，开发体验会差很多。如果你也在做类似的选题，按我这个思路走一遍，应该能少走不少弯路。