从 2021 年开始每年带毕设那几个月我都会接触大量“校园视频平台”这类的题目点名率和“校园二手交易平台”几乎不相上下。SpringBoot Vue 是当前计算机毕业设计里最稳的一对搭档上手难度适中、资料多、答辩也不容易被问住。这篇就围绕“基于 SpringBoot Vue 的校园视频平台系统”这个题目把手写代码、数据库设计、部署打包全流程拆开讲清楚顺便把我自己踩过的坑和给学生指导时反复强调的细节都写出来。无论你是正准备开题、代码写到一半卡住还是答辩前想补亮点这篇都能给你一个能照着落地的完整参考。校园视频平台看着简单但它其实覆盖了用户登录认证、视频文件上传、流媒体播放、评论互动、后台管理这些“标准毕设必考”模块非常适合用来展示一个计算机专业毕业生对前后端分离、Maven 构建、数据库设计、接口文档这几块硬功夫的掌握程度。1. 项目整体设计与核心需求拆解1.1 校园视频平台到底要做什么先把这个题目拆清楚。“校园”两个字意味着用户体系是学校场景说白了就是有学生、老师/管理员两类角色。“视频平台”则是核心业务要能上传视频、管理视频、播放视频最好再来点评论、分类、搜索这类增强功能。一个能让答辩老师点头的校园视频平台功能上至少得有这几块用户模块注册、登录、退出密码加密存储管理员和普通用户区分权限。视频模块视频列表分页展示上传视频编辑视频信息标题、简介、封面、分类删除/下架视频。播放模块视频在线播放支持点播记录播放量。分类模块按分类筛选视频比如“课程学习”“校园活动”“社团风采”。评论模块登录用户对视频发表评论管理员可删除违规评论。后台管理管理员可管理所有用户和视频查看统计数据。这是最典型的主流程。有的同学还想加弹幕、收藏、点赞、推荐这些都属于加分项但核心的“用户 视频 评论 管理”四件套你得先跑通。1.2 为什么选 SpringBoot Vue 这对组合SpringBoot 和 Vue 之所以成为毕设标配不是因为它们“最新”而是因为它们恰好把毕设的两大难点都压下去了后端配置复杂前端页面繁琐。先说 SpringBoot。它的自动配置特性让开发者不用再手动维护一堆 XML 配置一个spring-boot-starter-web就把 Web 容器、Jackson 序列化、错误处理全都带上了。配合 Spring Data JPA 或者 MyBatis-Plus 操作数据库CRUD 代码量直接砍掉一大半。这对毕设来说太重要了因为你的核心精力应该放在业务逻辑和系统设计上而不是耗费在“为什么 session 又失效了”这种环境问题上。再说 Vue。Vue 2 的 Options API 和 Vue 3 的组合式 API 都很成熟组件化开发让页面结构非常清晰。拿视频播放页来说你可以把播放器封装成一个独立组件列表页和详情页直接复用。Vue Router 管理页面跳转Axios 统一发请求非常符合前后端分离的思想。注意我建议能上 Vue 3 就上 Vue 3Element Plus 比 Element UI 维护更活跃SpringBoot 用 2.7.x 就行这个版本稳定、资料特别多。别一上来搞 Java 17 SpringBoot 3虽然新但网上能找到的报错解决方案远少于旧版本对毕设来说稳定大于一切。1.3 功能模块规划与数据库关系梳理数据库设计是答辩老师最爱问的部分必须提前想明白。我一般建议就建这几张表用户表、视频表、视频分类表、评论表如果加弹幕或者收藏就再建弹幕表和收藏表。表与表之间的关系也不复杂用户和视频是一对多一个用户上传多个视频视频和分类多对一视频和评论一对多用户和评论一对多。可以用思维导图的方式先画出来再转成建表语句。这能帮你和老师都一眼看清整个系统的数据流向。一张表对应一个实体类在代码里就是 Entity 层配合 MyBatis-Plus 或 JPA 的注解映射到数据库整个数据层就活了。2. 环境准备与项目初始化2.1 JDK、Maven 和 Node 的版本搭配这三个环境的版本如果配不好后面每一步都在踩坑。我给出一个实测稳定的组合抄作业就行工具推荐版本备注JDK1.8 或 11优先 JDK 8兼容性最好Maven3.6.3 或 3.8.x3.9 以上有时会强制 HTTPS 仓库反而麻烦Node.js16.x 或 18.xVue 3 Vite 建议 16.14MySQL5.7 或 8.08.0 需要修改加密方式容易踩坑IDEIntelliJ IDEA VSCode后端前端分开体验最好JDK 安装完在命令行输入java -version确认版本。Maven 配置国内镜像源很重要否则下载依赖能卡到你怀疑人生。打开 Maven 安装目录的 conf/settings.xml找到 mirrors 节点加一段阿里云镜像mirror idaliyunmaven/id mirrorOf*/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirrorNode 装好后npm 同样建议设置淘宝镜像源npm config set registry https://registry.npmmirror.com2.2 SpringBoot 项目初始化要点初始化 SpringBoot 项目最快的办法是在 IDEA 里选择 Spring Initializr。注意 Group 和 Artifact 命名比如com.example.campusvideo这会影响包的层级结构。依赖选择上必选 Spring Web、MySQL Driver、MyBatis Framework如果懒得手写 SQL 映射直接多加一个 MyBatis-Plus。创建完项目之后检查生成的 pom.xml 里有没有这些核心依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency然后在 application.yml 里配好数据源。这一步我强调几个细节时区必须写成Asia/ShanghaiMySQL 8.0 的驱动类要写com.mysql.cj.jdbc.DriverURL 后面最好追加useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai否则中文乱码和 SSL 警告接踵而来。2.3 Vue 前端项目初始化前端我建议直接用 Vite 创建 Vue 3 项目npm create vitelatest campus-video-front -- --template vue装完基础依赖后再安装 Vue Router、Pinia 和 Axiosnpm install vue-router4 pinia axiosUI 组件库首选 Element Plusnpm install element-plus element-plus/icons-vue项目结构上我习惯把 src 下面拆成这样src/ api/ # 接口请求统一封装 assets/ # 静态资源如封面图、logo components/ # 公共组件如视频卡片、播放器 router/ # 路由配置 store/ # Pinia 状态管理 views/ # 页面如 Home.vue, Player.vue, Admin.vue默认的 Vite 模板有一堆无用代码先删掉。App.vue只保留router-view/然后手写几个页面组件骨架就算搭起来了。3. 后端核心功能实现3.1 用户登录认证与权限控制用户这块是答辩高频问点。很多同学会直接不做区分所有登录用户都能访问后台页面这是被老师打脸的重灾区。我可以给你一个成熟且简单实用的方案用 JWT 拦截器。JWT 的好处是无状态、前端好处理。用户在登录接口传用户名和密码后端校验成功后签发一个 token前端每次请求在请求头里带Authorization: Bearer token。后端写一个拦截器校验 token 是否有效顺便判断角色是不是管理员。核心代码逻辑大致是这个样子Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (StringUtils.hasText(token)) { // 解析 token从 Redis 或 JWT 中取出用户信息 Long userId JwtUtils.getUserId(token.replace(Bearer , )); if (userId ! null) { // 放入 ThreadLocal 供后续使用 UserContext.set(userId); return true; } } response.setStatus(401); return false; } }注册登录的密码存储千万不要明文存数据库。用 BCrypt 加密Spring Security Crypto 里直接提供不需要引入整个 Spring Security避免复杂度过高BCryptPasswordEncoder encoder new BCryptPasswordEncoder(); String encodedPwd encoder.encode(password);登录时再encoder.matches(rawPassword, encodedPwd)校验即可。3.2 视频上传与文件存储方案视频上传是系统里最头疼的模块原因在于视频文件大、传输不稳定、存储位置难定。我建议毕业设计用最简单的方案前端multipart/form-data传文件后端接收后把文件保存在本机磁盘路径数据库里存文件的相对路径。后端控制器大致长这样PostMapping(/api/video/upload) public RVideoInfo upload(RequestParam(file) MultipartFile file, RequestParam(title) String title) { String originalFilename file.getOriginalFilename(); String suffix originalFilename.substring(originalFilename.lastIndexOf(.)); String newFilename UUID.randomUUID() suffix; // 保存到 /data/campus-video/uploads String uploadPath D:/campus-video/uploads/ newFilename; file.transferTo(new File(uploadPath)); // 存入数据库保存路径为 uploadPath return R.ok(videoService.saveVideo(title, uploadPath)); }很多同学会在这里纠结“要不要断点续传”“要不要分片”。说实话毕设项目没必要除非你想拿它当亮点去冲击优秀。本地保存方案虽然简单但你必须想清楚两个问题一是静态资源映射。SpringBoot 默认不暴露本地磁盘路径你要写一个 WebMvcConfigurer 把 /upload/** 映射到你的物理路径Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocator(file:D:/campus-video/uploads/); }二是文件大小限制。SpringBoot 默认最大上传 1MB视频肯定不够。要在 application.yml 里调大spring: servlet: multipart: max-file-size: 500MB max-request-size: 500MB3.3 数据库设计与 MyBatis-Plus 增删改查数据库这一步做得规范后面的代码非常舒服。以视频表为例字段我是这么设计的字段名类型说明idbigint主键自增titlevarchar(200)视频标题descriptiontext简介video_urlvarchar(255)视频文件相对路径cover_urlvarchar(255)封面图路径category_idbigint分类IDuser_idbigint上传者IDplay_countint播放量statustinyint0正常 1下架create_timedatetime创建时间用 MyBatis-Plus 后基础 CRUD 直接继承 BaseMapper 就能用public interface VideoMapper extends BaseMapperVideoInfo { }ServiceImpl 里调用videoMapper.insert(video)、videoMapper.selectPage(pageParam, wrapper)就完成写入和分页查询了。提到“数据库增删改查”不少学生以为必须每个表手写 SQL其实用框架是为了提高效率你只要在复杂查询比如多表联查上手动写 SQL 就够展示实力了。分页配置记得加一个 MybatisPlusInterceptor 插件Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; }如果不加这个分页查询不会真正执行 LIMIT数据量一多就会掩盖 bug。4. 前端页面与播放逻辑实现4.1 视频列表页和详情页搭建页面我建议先做基础版再做加分项。基础版就是首页展示视频卡片列表按分类筛选点卡片进入详情页。视频列表页用 Element Plus 的 Card 布局循环渲染就可以。每一张视频卡片显示封面、标题和播放量。涉及到一个关键点Vite 接口代理。开发环境下前端访问http://localhost:5173后端是http://localhost:8080直接请求必然跨域。解决跨域有后端配置 CORS 和前端代理两种方案我建议两处都配。前端在 vite.config.js 里加export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })这样前端请求写/api/xxx的时候实际会被代理到 8080 端口浏览器的同源策略就不会拦截了。4.2 视频播放器接入与 m3u8 和 mp4 的取舍播放器是视频平台的核心体验。很多同学会直接放一个video标签然后发现浏览器不播某些格式尤其是 m3u8 这种 HLS 流媒体格式。如果后端就是传 mp4那你用原生video配几个 type 属性就够了video controls :srcvideoUrl stylewidth: 100%;/video但如果你要展示“效果好的在线播放体验”建议引入 xgplayer 或者 video.js它们对 M3U8 格式有专门解析能力无需安装额外插件配合后端存 HLS 分片反而能让答辩老师眼前一亮。这里提一下 Vue 里播放 M3U8 免安装的方法xigplayer 的play配置支持 m3u8 协议原理是内部封装了 hls.js。4.3 前端路由设计和动态权限菜单Vue Router 在这一步派上用场。你需要区分“前台”和“后台”两类路由。前台包括首页、视频详情、登录注册后台包括视频管理、用户管理、评论管理。路由守卫是权限控制的关键。写一个全局前置守卫router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })后台管理页面统一挂在/admin下面加 meta 标记role: admin拦截时再判断当前用户角色是否为管理员。这样你在答辩时可以理直气壮地说“我做了同权鉴定与路由守卫”。5. 常见问题与排查技巧实录5.1 SpringBoot 版本太高导致的依赖兼容问题标题里提到“springboot版本太高”这个热搜词确实戳中很多人的痛点。用 SpringBoot 3.x 时javax.servlet改成了jakarta.servlet很多老教程的导入类直接报红MyBatis-Plus 低版本也不兼容 SpringBoot 3。你说你能启动起来吗能但到处是坑百度资料又少。所以我的建议始终是场景推荐 SpringBoot 版本毕设主项目2.7.x新学的同学2.7.x有实习经验想挑战3.x mybatis-plus-spring-boot3-starter5.2 视频上传失败的几种常见原因403 或 404前端请求路径没走代理实际敲到了 5173 端口的/api/upload而后端在 8080。先看 Network 面板里请求的完整 URL。413 Payload Too Largemax-file-size没配或者改错位置确认改的是spring.servlet.multipart而不是别的。后端提示FileNotFoundException物理路径不存在在代码里先new File(path).mkdirs()再保存文件。视频能存但页面打不开静态资源映射没写好先访问http://localhost:8080/upload/xxx.mp4看能否直接打开。这里要提醒一个容易疏忽的点把视频保存到本地磁碟答辩时建议固定到项目相对路径而不是 D 盘绝对路径。因为老师可能拷贝你的项目到别的机器跑绝对路径一换环境就废。可以改成campus-video: upload-dir: ./uploads代码里用配置项拼路径迁移环境时只需改配置文件。5.3 Vue 打包后放进 SpringBoot 的坑这是论文里常提的“前后端分离部署”。“vue打包放进springboot中”热搜词说明很多人想知道这个。其实操作路线很清晰先在 vite.config.js 里把 base 设置成./避免打包后资源路径变成绝对路径然后npm run build打包产物在 dist 目录下把 dist 里的文件复制到 SpringBoot 的src/main/resources/static目录下重新打包后端启动后访问http://localhost:8080就能看到前端页面了。但有一个坑如果你已经写了/api前缀请求前端打包后资源的请求路径和后端接口路径会混在一起。推荐方案是在前后端联调时 URL 就写成相对路径/api/xxx这样不管在开发环境还是生产环境后端都能统一处理。最后再把后端接口访问地址也放到前端环境变量里区分生产与开发构建提高可维护性。5.4 数据库与数据管理工具数据库结构的修改是特别频繁的一件事。停止使用 Navicat 的同学我推荐一下 DBeaver社区版免费跨平台功能也不弱。“设计好数据库并生成初始数据”对毕设来说很重要建议给几张表都灌入演示数据让答辩演示页面不空。比如视频表至少插 8 到 10 条不同分类的视频记录封面图要有play_count 尽量随机页面展示效果才有说服力。6. 文档、论文与答辩加分的实操建议6.1 系统亮点怎么提炼你做了校园视频平台不能答辩时只会说“我用了 SpringBoot 和 Vue”。建议从这几个维度提炼亮点前后端分离架构Vue 负责渲染SpringBoot 负责 API职责清晰。统一的 API 返回类 R统一返回状态码、消息、数据前端一处封装处处复用。JWT 拦截器实现登录认证和权限控制后端无状态接口设计保护管理端资源。视频统一资源访问路径合理配置静态资源映射分离业务与文件存储。数据统计后台页面对用户数、视频数、播放量做可视化展示用 echarts 几分钟就能出图。6.2 文档结构编排经验计算机毕业设计论文一般包含这几章绪论背景、意义、国内外现状、需求分析、系统设计总体设计、数据库设计、系统实现、系统测试、总结与展望。写文档最容易犯的错把代码大段贴上去。老师要看到的是你是怎么分析需求和设计系统的不是代码复制粘贴。比如数据库部分别贴整份建表语句而是用表格列出关键字段、类型、约束和字段含义辅以 E-R 图描述表关系。测试章节也不能随便糊。至少要罗列功能测试用例比如“用户输入正确密码登录成功”“上传超过限制大小的视频会报错”这类有具体输入输出结果的用例。6.3 答辩演示路径怎么设计答辩现场网络和机器都是不可控的通常建议提前录好视频备用但现场演示还是主要操作。推荐演示路径切分三步走前台展示核心流程注册登录 → 浏览视频 → 播放视频 → 发表评论。管理员演示登录管理后台 → 查看和管理全部视频 → 下架违规视频 → 查看统计数据。技术细节演示Postman 展示登录接口返回的 token利用这个 token 请求一个需要权限的接口展示 401 与 200 的差别证明权限控制真实生效。最后可以留一个小技巧作为加餐写一个banner.txt。因为 SpringBoot 启动时会在控制台打印字符图形你可以引一个 ASCII 艺术图写上有自己名字的定制版 banner启动截图放进论文里。这不仅给答辩老师留下好印象也说明你注意到了一些细节。这个操作在网上搜“springboot banner 在线”就能找到生成器复制文本放进src/main/resources/banner.txt即可。这个项目的名字其实很不起眼但能把“校园视频平台”这六个字背后牵扯的登录认证、文件存储、播放器接入、后台管理、前后端联调、打包部署全链路做通你的毕业设计就算真的立住了。我见过很多学生一开始雄心壮志要加弹幕、加后台推荐算法最后连视频都播不出来。毕业设计的第一目标永远是“跑通完整主流程”第二目标才是锦上添花。如果你正在为这个题目头大先把用户 视频 评论 管理这条主线走通再往上面加花活儿路就会好走很多。