教学资源库平台开发实战：SpringBoot+Vue+MySQL毕设全流程解析

1. 教学资源库平台到底要做哪些事：一个毕设题目的需求拆解

先说结论：教学资源库平台这种题目，本质上是用一个“资源管理业务”把 SpringBoot、Vue、MySQL 这三样技术栈全部串起来。很多同学一开始会把它当成普通的增删改查系统来做，做到一半才发现真正的难点根本不在 CRUD，而在“文件怎么传”“权限怎么控”“分页搜索怎么不卡”以及最后“怎么把 Vue 打包出来的东西塞进 SpringBoot”。

我这次做的项目，技术栈是 SpringBoot + Vue + MySQL，交付物包含源码、数据库脚本、毕业论文和部署文档。整个平台面向校园场景，核心解决的是“老师上传教学材料、学生按课程或分类检索下载”这一条链路。但你如果只是照着这个思路做，答辩时大概率会被问住，因为老师更关心的是：你怎么处理大文件？你怎么控制不同角色的操作权限？你的数据库表为什么这么设计？

先看需求。平台要服务的角色主要有三类：

• 管理员：负责用户管理、资源审核、分类维护、数据统计。
• 教师：登录后上传课件、视频、文档，可以维护自己上传的资源，查看下载量。
• 学生：浏览资源、按关键词搜索、下载资源、收藏、评论、查看个人下载记录。

这个角色架构看起来稀松平常，但它直接决定了数据库的表结构和后端接口的设计方式。比如“资源审核”这个动作，意味着资源表里必须有状态字段，0 表示待审核、1 表示已通过、2 表示被驳回；而“下载”这个动作，意味着要么建一张下载记录表，要么在资源表里加一个 download_count 字段做累加。

我当时的设计是两者都做：下载记录表用于展示最近下载历史和统计报表，资源表里的 download_count 字段用于列表页直接显示热门程度。这个方案在答辩时很容易讲清楚：记录表解决的是“谁在什么时候下载了什么”，而字段解决的是“列表页展示性能问题，避免每次查列表都去 count 一遍下载记录表”。

前端的功能落位也很有讲究。教学资源库不是一个复杂的管理系统，不需要上特别重的前端框架，Vue 2 + Element UI 就足够。页面按角色拆：

• 普通用户登录后默认进资源大厅，顶部是搜索框，左侧是分类树，中间是资源卡片列表。
• 教师端多一个“我的资源”页面，可以上传新资源、编辑描述、上下架自己的资源。
• 管理员端是独立布局，侧边栏包含用户管理、资源审核、分类管理、数据看板。

模块清单搞清楚以后，我再开始写代码，而不是边写边想。这一点对时间紧张的毕设党特别重要，需求清单就是你的施工图，后面所有开发都只是往这张图上填东西。

2. 为什么非要用 SpringBoot + Vue + MySQL：选型逻辑与版本搭配

这个部分很多同学会忽略，但它恰恰是最容易被问到、也最能体现你“真的懂技术”的地方。先说选型逻辑。

SpringBoot 选它的核心原因是约定优于配置，内置 Tomcat，不用像 SSM 那样写一堆 XML 配置。一个 spring-boot-starter-web 依赖加一个启动类，就能跑起一个 Web 服务。对于毕设这种规模的项目，它的自动配置能力可以省掉大量时间。另外它和众多中间件（MyBatis-Plus、Redis、JWT）的整合成本极低，基本就是加依赖加注解的事。

Vue 选它的理由，一是组件化开发思路适合资源列表、上传弹窗这种复用场景，二是 Element UI 组件库能让后台管理界面在很短时间内变得像模像样，三是 Vue 的生态文档成熟，遇到问题随便一搜就有答案。

MySQL 不多说，开源免费、使用广泛、毕设环境的绝对主流。更重要的是学校机房或老师本机的环境基本都是 MySQL，不会因为数据库选型引入额外风险。

再有一个值得说明的点：版本搭配。这是“springboot 版本太高”这个热搜词背后最常见的痛苦来源。SpringBoot 2.x 和 3.x 的底层差异很大，3.x 要求 JDK 17 起步，并且把 javax.* 家族迁移到了 jakarta.*，这就导致很多旧版依赖如果不兼容，你连启动都过不去。我做项目时用的是 SpringBoot 2.7.x + JDK 8，理由是 MyBatis-Plus 和某些文件处理库在 Java 8 环境下最稳，网上能找到的踩坑案例也最多。

各个环境的具体版本我列一下：

为什么要强调这个表格？因为如果你一上来就装最新的 SpringBoot 3.3、JDK 21、MySQL 8.4，大概率会碰到依赖冲突、数据库驱动认证方式不识别等问题。毕设的时间本来就紧，没必要在环境上给自己上难度。

3. 数据库表设计：我从 12 张表里总结出的核心设计思路

教学资源库的数据库设计是整个项目的地基，表建不好，后面接口写得再顺也会被数据和逻辑问题拖累。我的库一共设计了 12 张表，这里挑核心的说。

3.1 用户与角色设计

用户表 user 的主键用自增 id，字段包括 username、password、nickname、avatar、role、status、create_time。密码用 MD5 加盐或者 BCrypt 加密，我直接用 Spring Security 的 BCryptPasswordEncoder，安全性和答辩的可讲性都高。

角色字段我用的是普通字符串，admin 代表管理员、teacher 代表教师、student 代表学生。为什么不单独建角色表和用户角色关联表？因为毕设规模用不到，三张表的关联反而让查询变慢。但如果你的答辩老师较真，你可以说系统预留了多角色扩展字段，后续改成 RBAC 模型只需补两张表，不影响现有接口。

3.2 资源表的核心设计

资源表 resource 是关键中的关键，字段如下：

• id：主键
• title：资源标题
• category_id：关联分类表
• uploader_id：关联用户表
• file_url：文件的访问路径
• file_name：原始文件名
• file_type：类型，如 pdf、mp4、zip、docx
• file_size：文件大小，单位字节
• cover_url：封面图，可选
• description：资源描述
• status：审核状态，0 待审核、1 已通过、2 已驳回
• download_count：下载次数
• view_count：浏览次数
• create_time、update_time：自动填充

有两个细节值得展开说。

第一个是逻辑删除。资源被用户删除时，不要物理 DELETE，而是设置 deleted 字段为 1。采用逻辑删除，一是避免误删文件记录导致关联数据断裂，二是可以为后续的回收站、数据审计功能留余地。我用 MyBatis-Plus 的 @TableLogic 注解，查询时自动拼接 WHERE deleted = 0，对业务代码完全透明。

第二个是冗余字段 download_count 和 view_count。如果每次在列表页显示下载量时都去下载记录表做 COUNT(*)，并发量稍高就会拖垮页面。冗余计数是一个典型的空间换时间设计，项目完成后可以在论文“系统优化”部分大书特书。

3.3 分类表、下载记录表、反馈表

分类表 category 字段最简单：id、name、parent_id、sort。parent_id 让分类支持两级甚至三级树形结构，前端用 Element UI 的 el-tree 组件可以直接渲染。

下载记录表 download_record 记录 user_id、resource_id、download_time。它的作用不只是历史记录，还可以做“我的下载”功能和简单的行为分析。资源表冗余了 download_count，但记录表依然保留，两者服务不同场景。

反馈表用于学生对资源进行评论或举报。字段包括 resource_id、user_id、content、type、create_time。评论内容要做长度限制和敏感词过滤，过滤逻辑我用了一个简单的关键词表加字符串包含判断，虽然粗糙，但作为毕设足够。

关于字符集，我统一使用 utf8mb4，而不是 utf8。因为 utf8mb4 才能完整存储 emoji 和生僻字，学生评论里发个表情不会变成问号。排序规则用 utf8mb4_general_ci 即可，不需要上到 utf8mb4_unicode_ci，性能上 general_ci 略好。

另一个常见坑是 MySQL 8 的认证插件。默认 caching_sha2_password 驱动在 JDBC 连接时可能报错，可以在创建用户时使用 mysql_native_password，在避免问题初期我们只需确认驱动版本在 8.0.33 以上，问题就能解决。

4. 后端实现细节：把文件上传、搜索分页和权限校验做扎实

后端是整个平台的骨架，接口设计合理与否直接决定前端开发的顺畅程度。这部分我把关键实现和踩坑点展开讲讲。

4.1 统一返回结构和统一异常处理

后端所有的接口我都统一返回一个 Result 对象，包含 code、message、data 三个属性。code 为 200 表示成功，401 未登录，403 无权限，500 系统错误。这样做的好处是前端 axios 拦截器可以统一处理错误码，不需要每个接口单独判断状态。

统一异常处理用 @RestControllerAdvice + @ExceptionHandler。项目里最常遇到的异常是文件超出大小限制、参数校验失败、文件不存在。我在全局异常处理器里分别捕获，返回更友好的提示。

4.2 文件上传：本地存储 + 扩展名校验

教学资源的文件类型集中在 PDF、Word、PPT、视频、图片、压缩包。我在 application.yml 里配置了 spring.servlet.multipart.max-file-size 为 1024MB，max-request-size 为 1100MB。视频文件动辄几百 MB，默认的 1MB 限制必须改，否则 nginx 或 Tomcat 会直接把请求挡掉。

存储策略上，考虑到校园场景并发量低，我没有引入 FastDFS 或 MinIO 这种分布式存储，直接把文件保存到服务器本地目录 uploads/，按照日期分目录存放。例如 2025/06/01/uuid.pdf。文件名一定要做 UUID 重命名，否则用户上传一个 “最终版最终版（2）.pdf”，到了服务器上可能覆盖同名文件，或者因为 URL 空格导致访问 404。

扩展名校验不能只依赖前端 accept 属性，后端必须再校验一次。我用 MultipartFile.getOriginalFilename() 取原始文件名，然后截取后缀，与白名单集合比对。白名单是：pdf、doc、docx、ppt、pptx、xls、xlsx、zip、rar、jpg、png、mp4。遇到不在名单内的直接抛出异常。只做大小校验会存在绕过风险，但这个防范已经足够很多毕设场景使用。

4.3 搜索与分页

资源大厅的搜索是按标题模糊匹配 + 分类过滤 + 时间排序的组合条件查询。如果直接写 SQL，逻辑容易乱，而且可读性差。我是这样处理的：

使用 MyBatis-Plus 的 LambdaQueryWrapper。先判断 keyword 是否为空，不为空就 title LIKE %keyword%；再判断 categoryId 是否为空；最后按 create_time 倒序或按 download_count 倒序。分页用 MyBatis-Plus 内置的 Page 对象，避免自己手写 LIMIT 和 count 语句。这个方案写起来快，答辩也好讲。

有一个细节需要特别注意：搜索时用户如果输入了 % 或 _ 这两个 SQL 通配符，会导致 LIKE 查询结果异常。需要在拼接前对 keyword 做转义，把 % 转成 %，_ 转成 _。我一开始没加这个处理，测试时搜了个 “100%” 把整个表都查出来了，后来加了转义才正常。

4.4 JWT 登录鉴权

登录方案我选的是 JWT，而不是传统的 Session。因为前后端分离部署时，Session 依赖 Cookie 域和跨域设置，容易出问题，JWT 则把用户信息放在 token 里，只需前端请求头携带 Authorization: Bearer xxx。

后端用一个拦截器处理 token 校验。放行白名单包括登录注册接口、资源列表和资源详情，因为这些是游客也能看的。但上传、下载、评论、后台管理接口必须验证 token，并且要从 token 里解析出用户角色，再判断是否有权限操作。

实现时要注意 JWT 的密钥不要写在代码里，放到 application.yml 里配置。过期时间我设为 24 小时，学生用户半天没操作再回来不至于重新登录，同时也不会因为 token 长期有效带来过高的安全风险。

4.5 视频和 PDF 的在线预览

这部分是做好评分的进阶题。让学生下载容易，做在线预览才显功夫。我的实现方式比较朴素但有效：

图片和 PDF 直接通过浏览器地址访问静态资源路径就能预览，后端只需要设置资源映射，把本地 uploads 目录映射到 URL 路径上。视频我用 video 标签的 src 指向 mp4 文件地址，浏览器原生支持 MP4 格式的播放。这里有个大坑：Tomcat 默认不支持 Range 请求时会返回 200 而非 206，导致视频拖动进度条失效。解决方式是自定义 ResourceHttpRequestHandler 实现支持 Range，具体配置写成 WebMvcConfigurer 的 addResourceHandlers 方法。

Word 和 PPT 的在线预览比较麻烦，如果没有 Office 在线预览服务器，最稳妥的方案是引导用户下载后查看。我从未尝试在 Web 端直接渲染 docx，也不建议你在这上面花时间，因为效果差且容易出错。

5. 前端 Vue 实现：登录态、路由守卫和资源页面的那些事

前端页面我用的 Vue 2 + Element UI + Vue Router + Axios，没有上 Vuex，因为跨页面共享的状态只有用户信息，我用 localStorage 缓存一份，再配合路由守卫读取，完全够用。

5.1 登录态维护和路由守卫

登录成功后，后端会返回 token，前端把 token 存到 localStorage，同时用解析出来的用户信息存一份 userInfo。Axios 请求拦截器里读 localStorage 的 token，加到 headers。

路由守卫写在 Vue Router 的 beforeEach 里。判断逻辑分两层：第一层是页面是否需要登录，meta.requiresAuth 为 true 时，如果没 token 就跳登录页；第二层是导航权限，比如教师端的“我的资源”页面需要 role 包含 teacher，管理员页需要 role 包含 admin。没有权限就跳 403 页面并给出提示。

这个守卫逻辑我建议你在论文里单独列一节，它不算复杂，但完整描述了前端安全控制的一条链路，答辩时能体现你的工程意识。

5.2 资源列表页和上传组件的实现重点

资源大厅是本项目最核心的页面，布局是左侧 el-tree 分类树，右侧 el-table 或 el-card 组件展示资源。我在表格里展示了资源标题、分类、大小、上传者、下载次数、上传时间，操作列放“下载”和“详情”按钮。分页用 el-pagination 组件，页码和页大小绑定到查询参数，切换时重新请求接口。

上传组件用的是 el-upload，关键配置是把 action 指向后端上传接口，但这里有个细节：el-upload 默认用自己构造的 XMLHttpRequest 请求，不会自动带上 Axios 的请求拦截器，所以 headers 要从组件属性里显式传进去，否则后端会因为拿不到 token 返回 401。我就在这上面浪费了半天。

另外上传前用 before-upload 钩子做前端校验，限制文件类型和大小，虽然后端也会校验，但前端校验可以先拦截，避免浪费带宽。上传进度条用 el-progress 展示，体验会好很多。

5.3 打包部署时最容易踩的坑

前端开发完要打包放进后端工程里，网上说法不一。我说下最稳妥的流程：

• 先在项目根目录执行 npm run build，生成 dist 目录。
• 把 dist 里的 static 资源复制到 SpringBoot 项目的 src/main/resources/static 下。
• 后端接口的统一前缀是 /api，前端的 axios baseURL 直接写 /api，这样打包后所有请求都是同源，不存在跨域问题。

但这里注意一个坑：Vue Router 如果用的是 history 模式，打包部署后刷新页面会出现 404。因为 SpringBoot 默认无法把路由分发到前端页面，刷新 /resource/detail/1 时会直接匹配不到后端接口。解决方式有两种：一是把 Vue Router 改成 hash 模式，URL 变成 #/resource/detail/1，刷新没有问题，但不够美观；二是在后端写一个转发 Controller，把所有非 /api 开头的请求转发到 classpath:/static/index.html。我采用的是方案二，虽然代码只有几行，但保证了 URL 美观而且功能正常。

5.4 解决跨域问题（开发环境）

开发时前端跑 8080 端口，后端跑 8088 端口，必然存在跨域。需要在后端配置 CorsFilter 或者实现 WebMvcConfigurer 的 addCorsMappings，允许所有源。不过要注意，allowCredentials 为 true 时 allowedOrigins 不能使用 “*”，必须指定具体地址，比如 http://localhost:8080。我用配置文件管理这个地址，部署时改成线上前端地址。

6. 部署文档和论文的整理思路：让交付物真正发挥价值

很多同学的毕设源码做完了，但论文和部署文档一塌糊涂，导致答辩时被老师问得无言以对。交付物里论文和部署文档占有重要分量，这两块做得好，完全可以弥补部分代码实现的瑕疵。

6.1 部署文档怎么写得让别人真能跑通

部署文档的标准不是“你自己看得懂”，而是“一个同样在做毕设的同学，照着文档从头到尾能部署成功”。我建议按这个顺序组织章节：

• 环境要求：列出 JDK、Maven、Node、MySQL 的具体版本。
• 前端构建：说明 npm install、npm run build 的执行步骤，以及 dist 目录的复制位置。
• 数据库初始化：详细说明如何新建数据库、导入 SQL 脚本、修改数据库连接配置。
• 后端启动：说明 application.yml 里的主要配置项，特别是数据库账号密码、文件存储路径、JWT 密钥。
• 访问系统：说明启动成功后浏览器地址、默认管理员账号密码。
• 常见问题：把端口冲突、MySQL 密码认证、文件上传大小受限等问题附上解决方案。

这里有个实操经验：文档里的截图非常关键。我当时把每个步骤都截了图，图片按章节编号命名，放到文档的 img 目录下，最后生成 PDF。答辩老师对带完整截图的部署文档评价很高，因为这说明系统真实可运行。

6.2 论文结构怎么排更合理

毕业论文的结构基本是：绪论（背景、意义、国内外研究现状）→ 相关技术介绍 → 需求分析 → 系统设计 → 系统实现 → 系统测试 → 总结与展望。

可能有同学觉得相关技术介绍是凑字数，其实不然。这部分可以体现你对 SpringBoot 自动配置原理的理解、对 Vue 响应式数据原理的理解、对 MySQL 索引和事务机制的理解。但注意不要长篇照抄概念，要结合项目说，比如“本系统使用 SpringBoot 的自动配置特性简化了数据源配置，通过 starter-web 内置 Tomcat 完成请求响应处理”。

需求分析部分是论文的核心，需要画出用例图和功能模块图，并列出角色权限说明。系统设计部分重点放数据库 E-R 图和数据表结构说明。系统实现部分按功能模块逐一展开，配关键代码片段和截图。测试部分写功能测试用例表格，包含测试编号、测试项、操作步骤、预期结果、实际结果、是否通过。

6.3 答辩时被高频追问的几个问题

这部分是我被问过的，提前准备一下：

• “为什么用 JWT 而不是 Session？”回答要点：前后端分离结构下 JWT 无状态、易扩展、适合接口鉴权。
• “数据库为什么这么设计？”回答要点：从角色需求和查询性能角度分析，能做到自圆其说即可。
• “文件上传之后存储在哪里，如果项目重启文件会丢吗？”直说本地磁盘存储，重启不丢，但迁移需要复制目录，并提出后续可改造成对象存储。
• “如何保证接口安全性？”回答要点：JWT 校验、密码加密存储、文件扩展名白名单、统一的异常处理。

7. 整体复盘：这套平台在真实使用场景下的表现

把整个系统跑通之后，我自己模拟了三类用户的完整操作流，分别测试了教师上传 500MB 视频、学生搜索下载资源、前端打包部署到服务器后连续运行一周的情况。整体表现比较稳定，但也有几个值得后续改进的点：

大视频文件上传时没有任何进度续传能力，在一分钟内压力测试下挺稳定，但断点续传是真没有。如果课程视频比较多，建议后续可以引入分片上传，这部分在论文的创新点里也可以写。

再就是资源审核流程目前是管理员手动处理，没有做自动预检查。例如敏感词检测、重复文件识别，都还没有实现。如果想把项目做得更有亮点，把 RuoYi 或 Spring Batch 融入自动化审核会是一个不错的加分方向。

另外一个容易被忽略的点是数据备份。MySQL 的定时备份没有在项目里做，如果老师问“线上部署后数据库怎么保障”，你需要能答出 mysqldump 命令和定时任务的方案，哪怕是校级的简单应用。

总结一下实战经验：完成毕设项目，真正花费时间最多的不是写代码，而是设计决策和适配环境。技术栈一旦定下来就尽量不换，数据库开展前做 E-R 图建模，前端先写页面再调接口，接口先定格式再逐个实现，这些都是老生常谈，但确实能避免返工。教程和文档遍地都是，但踩坑踩到自己的脑门上，才是印象最深的。