做计算机毕业设计选在线学习平台这个方向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换成了jakartaSpring 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 APIVue独立开发构建后端通过Maven打包成可执行JAR。如果是为了课程设计演示方便也可以把Vue构建后的静态资源直接放进SpringBoot的static目录里做到一个JAR包跑整个系统这种方式对答辩演示非常友好不用同时启动两个服务。我最终采用的是稍有区别的方式开发阶段用Vite代理解决跨域前端独立跑在5173端口后端跑在8080端口部署阶段把前端构建产物复制到后端resources/static目录下打成单一JAR包交付。这样既保留了开发效率又方便部署演示。后端按经典三层架构分包controller层负责HTTP接口service层处理业务逻辑mapper层用MyBatis-Plus操作数据库。实体类、DTO、VO分离避免前端直接面对数据库字段结构。JWT做身份认证拦截器校验登录状态和角色权限。3.2 核心数据表设计说明数据库设计是这类项目最容易被低估的部分表结构设计不合理后期写SQL和业务代码都会很痛苦。我设计的核心表如下表名用途关键字段sys_user用户表username, password, role_idsys_role角色表role_name, role_keycourse课程表title, cover_url, teacher_id, statuscourse_chapter章节表course_id, title, sort_ordercourse_video视频资源表chapter_id, video_url, durationcourse_resource课件资料表chapter_id, file_name, file_url, file_typecourse_selection选课表user_id, course_id, progressdiscussion讨论区表course_id, user_id, content, parent_idquiz_question测验题目表chapter_id, question_type, content, answer这里有个细节值得说选课表里我加了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 :srcpdfUrl stylewidth: 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 vitelatest cloud-classroom -- --template vue项目初始化后需要安装核心依赖npm install npm install vue-router4 pinia element-plus axios hls.js这里提醒一句npm安装依赖慢的可以临时切换淘宝镜像源执行npm install --registryhttps://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 groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency项目结构上我保持了清晰的分包规范com.example.cloudclass ├── config // 配置类 ├── controller // 接口层 ├── service // 业务层 ├── mapper // 数据访问层 ├── entity // 实体类 ├── dto // 入参出参对象 ├── common // 通用工具类、返回结果封装 └── security // JWT认证与拦截器MyBatis-Plus的配置也非常简单application.yml里添加数据源和逻辑删除配置即可。一个关键配置是多文件上传限制在线学习平台上视频和课件文件动不动上百MBSpringBoot默认的上传限制是1MB必须改spring: servlet: multipart: max-file-size: 2000MB max-request-size: 2000MB5.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方案前提是确认源视频编码是h264aac。6.4 其他几个高频问题的快速速查问题现象可能原因解决方案axios请求401JWT过期或未带token前端请求拦截器统一加Authorization头上传视频一直提示失败multipart配置未生效检查application.yml中max-file-size配置Vue组件间通信混乱过度使用props层层传递改用Pinia全局状态管理接口返回数据字段为null实体类驼峰与数据库下划线不匹配开启MyBatis-Plus驼峰命名自动映射数据库连接超时并发连接数打满配置连接池最大连接数7. 从做毕设到做产品的一些体会做这个项目的过程中我最大的体会是技术栈本身不是难点难点在于把每一个看似简单的小功能做到真正能用。比如视频播放很多毕设的在线教育平台只是放一个video标签就结束了但实际你只要做了m3u8切片和hls.js播放整个系统的技术层次就完全不一样了。另外一个很实用的建议是答辩时不要讲我用了SpringBoot这种空话而是准备三五个为什么的答案——为什么用m3u8而不用MP4为什么用JWT而不用Session为什么用hash模式而不用history模式。这些问题看似简单但能说清楚就代表你真的理解了系统不是照着教程敲了一遍代码。最后再分享一个我自己开发过程中的效率技巧把公共模块先做出来包括统一返回结果类、异常处理器、分页工具、文件上传组件然后再去写具体的业务模块。这个顺序一旦反了写每个模块时都要回头补公共代码开发体验会差很多。如果你也在做类似的选题按我这个思路走一遍应该能少走不少弯路。