做高校教育资源共享平台这类项目，前几年十个人里有九个都会选Spring Boot + Vue 这套组合。放到现在来看，这个选择依然很合理，尤其在毕业设计、课程设计或者个人项目练手场景里，它几乎是“标准答案”。一方面Spring Boot把后端那些繁琐的配置收敛得比较干净，另一方面Vue + Element UI这类前端方案能让你在两三周内就拼出一个有模有样的管理界面。干这行久了你会发现，真正能跑通、能演示、能写进简历的项目，往往不是那种堆了一堆炫技技术的，而是这种边界清晰、技术栈务实、能完整闭环的东西。
这篇文章我想以实际项目的角度，把“基于Spring Boot + Vue的高校教育资源共享平台”从设计、编码到部署的完整过程拆开讲一遍。文章会重点说清楚几个事：这个项目到底解决了什么问题、前后端各自怎么组织、资源上传和视频预览这些核心功能怎么落地、以及那些实际开发中一定会踩的坑怎么排。不管你是准备拿它当毕设，还是想通过做一个完整项目来补齐全栈能力，这篇文章应该都能给你省下不少瞎折腾的时间。
1. 项目整体设计与思路拆解
1.1 为什么选Spring Boot + Vue这套组合
先说实话，Spring Boot + Vue并不是当下最“新潮”的技术组合，但你得明白项目选型的第一原则从来不是新，而是“可控”。对于高校资源共享平台这种业务，核心诉求无非是：有稳定的用户体系、能上传和下载文件、能检索和分类、最好还能带点互动（评论、收藏、点赞）。这类业务属于典型的CRUD + 文件操作 + 权限控制，Spring Boot的生态里，MyBatis-Plus、Spring Data JPA、Sa-Token、JWT这些都有非常成熟的方案，基本不需要你去造任何轮子。
Vue这边同理。Vue 2时代Element UI几乎成了中后台开发的默认皮肤，Vue 3时代Element Plus也跟上来了。共享平台这类页面并不多，不外乎首页资源展示、资源详情、上传页、个人中心、管理后台，整体复杂度不高，用Vue单一框架足矣，没必要上微前端或者重型状态管理库。选它的另一个现实原因是：资料多、社区活跃、遇到问题搜索引擎能给你答案，这对学生开发者来说太重要了。
1.2 模块划分与角色权限设计
做这个项目时我最先考虑的不是代码，而是“谁会用它”。高校教育资源共享平台通常有三类角色，但很多人容易忽略这个基础设计：
- 学生：可以浏览、搜索、下载资源，也可以上传自己的笔记和资料，能评论和收藏。
- 教师：能上传课件、教学视频、试题库，并能审核自己相关学科分类下的资源。
- 管理员：做全局管理，包括用户管理、资源审核、分类管理、数据统计。
权限这块，我建议直接走RBAC模型（角色-权限-用户），但别把粒度做得太细。实际项目中我用的方案是后端在Controller层加拦截器 + 注解来做权限控制。前端再根据登录用户的角色动态渲染按钮或菜单，比如学生端不显示“审核”入口。
从热词里能看出来很多人关心“为什么一个Spring Boot项目要分那么多module”，这里提一句：如果你只是做单体应用，没必要一上来就拆多模块。共享平台这种体量，一个Spring Boot工程就能全部搞定，分模块反而增加理解成本。多模块是后端逻辑膨胀到一定程度再去考虑的问题，毕设和个人项目干万别为了“看起来专业”而过度设计。
2. 核心功能实现：资源上传、预览与检索
2.1 文件上传：不只是存个文件那么简单
资源上传是整个平台的核心操作之一，也是很多新手第一次被“教育”的地方。因为文件上传牵扯到的不只是把文件从浏览器传到后端，还有大小限制、类型校验、进度展示、重名处理、存储路径规划等多个环节。
先说存储路径规划，我踩过不少坑。如果你直接在配置文件里写死本机路径，项目换台电脑就废了。我的做法是在 application.yml 中配置一个自定义的 upload.path 和访问前缀，上传时用LocalDateTime或UUID拼出二级目录，比如：
upload: path: /data/edu-resource/files url-prefix: /files后端保存文件时，按“分类ID/年月”这样的结构组织目录。这样做的目的是：第一，避免所有文件堆在一个目录下导致文件数过多；第二，方便后续按时间做清理。文件落盘后，数据库里存的是相对路径，而不是绝对路径，这样将来换服务器或者做迁移都轻松。
大小和类型校验这里有个经典大坑。很多人的第一版代码只在前端限制文件大小，结果后端一上传就报错。Tomcat默认对POST请求的大小限制是2MB，Spring Boot的默认上传限制更是只有1MB，你不用@ConfigurationProperties显式配置的话，传大文件非常容易莫名其妙失败。我一般在项目里会这样配：
spring: servlet: multipart: max-file-size: 1024MB max-request-size: 1024MB注意我放大了是因为教育资源共享场景经常有视频、PPT、课程录屏这些大文件，按“高校资源共享”这个定位，容量限制太小根本没法用。当然，你正式部署到服务器时还得考虑Nginx层的client_max_body_size，这个放到后面部署章节再展开。
类型校验这块，记住一个原则：后端校验永远不能省。前端可以限制，但恶意请求完全可以绕过前端。我后端会维护一个允许上传的扩展名集合（视频、音频、文档、图片），用MultipartFile.getOriginalFilename()取扩展名校验，而不是只看Content-Type，因为Content-Type是可以被伪造的。
进度条的话，如果是Element UI的el-upload组件，它内置了on-progress回调和进度百分比。后端不需要做特别的联动，只要接口是常规POST，组件就能拿到上传进度。这里不推荐用WebSocket去做进度推送，因为单个上传请求的场景下杀鸡用牛刀了。
2.2 视频预览与播放：m3u8这种格式怎么处理
教育资源里最多的是教学视频。老实说，“在线播放视频”这个功能如果在早期没规划好，后面能把你折腾得够呛。这里必须把“格式”单独拿出来讲清楚，因为很多人在这里踩了大坑。
如果你上传的是mp4文件，浏览器端直接一个
在Vue项目里用hls.js的步骤很少：
npm install hls.js组件里比较稳妥的写法是，判断浏览器原生是否支持HLS（比如Safari通常原生支持），不支持才动态加载hls.js：
import Hls from 'hls.js' if (Hls.isSupported()) { const hls = new Hls() hls.loadSource(videoUrl) hls.attachMedia(videoEl) }这里有个关键经验：m3u8文件本身可能还会涉及跨域问题，你的Nginx或后端接口必须给.ts分片响应正确的CORS头，否则播放到一半会黑屏报错。这个坑找起来特别费时间，因为前十几秒可能播放正常，突然就停了。
我不会把“视频转码”放到毕设项目里去实现，因为FFmpeg的转码任务队列复杂度太高，不是单机项目该做的事。如果只是演示，上传mp4或m3u8原样播放就够了。真正要“转码”的商用系统，那是另一个量级的项目。
2.3 资源检索与标签分类
资源上来了，怎么让人找到它？检索和分类是最基础的能力，也是最容易被忽略的。我见过不少共享平台项目把搜索做成一个简单的SQL模糊查询，然后被答辩老师问“数据量大了怎么办”就卡住了。
我的建议是分两层来做。第一层，用MySQL自带的全文本索引或者LIKE查询先撑住规模不大的场景；第二层，如果在简历里想写一个亮点，可以在资源表里增加一个keywords字段，存的是从标题和描述里提取的标签，搜索时优先匹配标签，其次匹配标题。这样可以避免一上来就引入Elasticsearch或者Solr这种重组件。
标签这块要讲究“来源”，我实际项目中允许用户上传资源时自行添加标签，同时系统管理员可以在后台维护热门的标签库。开发者容易忽略的是标签去重和大小写归一化，同一门课程，有人写“JavaWeb”，有人写“java web”，两边对不上，检索效果就很差。我会在后端做一个简单处理：入库前trim，转小写，再统一空格为下划线，简单粗暴但有效。
分类建议做成两级：一级学科分类（Java、算法、英语、考研、艺术设计等），二级资源类型（视频、课件、文档、真题）。前端通过级联选择器实现，后端在Resource实体里存categoryId和resourceType两个字段即可，不需要搞复杂树形表结构。当然如果你想在管理员后台动态维护分类树，那就需要一张category表配parent_id，也不复杂。
2.4 用户互动：收藏、评论、下载记录
资源共享平台跟网盘最大的区别在于它有社区属性。我在做功能规划时把互动拆成了三个简单但必须的功能：收藏、评论、下载记录。
收藏功能最简单，一张favorite表，userId + resourceId唯一约束就够。评论功能需要做两件事：一是富文本要过滤脚本（防止XSS，服务端入库前用工具类转义HTML），二是列表查询时要联表把用户头像和昵称带上。下载记录这个功能经常被忽视，但它其实是整个平台里最能体现“数据价值”的功能——管理员后台能直观看到哪个资源下载量最高、哪个分类最受欢迎，所有这些都可以做成简单的统计报表。
下载次数不用每次请求都COUNT一下，直接在resource表里维护一个download_count字段，下载成功后+1。有人说这样会有并发问题，对这个项目体量来说，UPDATE语句本身就是行级锁，完全够用，别自己吓自己。
3. 实操过程：从数据库到前后端落地的完整链路
3.1 数据库设计：几张核心表一次说清楚
做这个项目之前我习惯先把表设计出来，因为表结构一旦定下来，后端代码基本就是照着翻译。下面几张表是这个项目至少要有的核心表：
| 表名 | 核心字段 | 用途说明 |
|---|---|---|
| user | id, username, password, nickname, avatar, role | 用户表，存登录信息和角色，密码必须加密存储 |
| category | id, parent_id, name, sort | 学科分类表，支持两级分类 |
| resource | id, user_id, category_id, title, description, file_path, file_size, file_type, cover_url, download_count, status | 资源主表，status区分待审核/已发布/已下架 |
| resource_tag | id, resource_id, tag_id | 资源与标签的关联表 |
| favorite | id, user_id, resource_id, create_time | 收藏表 |
| comment | id, resource_id, user_id, content, create_time | 评论表 |
| download_record | id, resource_id, user_id, create_time | 下载记录表 |
在写SQL建表时我强烈建议把字符集统一成utf8mb4，不要用utf8，因为utf8在MySQL里存不了生僻字和部分emoji。另外，所有表都要带create_time和update_time这两个通用字段，一方面是业务上需要，另一方面也是为MyBatis-Plus的自动填充功能做准备。
关于用户密码，再次强调：别存明文。Spring Boot里用BCryptPasswordEncoder做加密，这个是Spring Security自带的能力，即使你不打算引入完整的安全框架，也可以单独引入spring-security-crypto这个包来用它。
3.2 后端项目结构：分层清晰才能睡得安稳
后端我用的结构是现在最主流的“Controller - Service - Mapper”三层，加一个entity包放数据库实体类，一个dto包放接口出入参对象，一个config包放各种配置类。一个典型的Spring Boot项目结构长这样：
com.example.edushare ├── controller # 接口层，只做参数接收和结果封装 ├── service # 业务层，核心逻辑都在这 ├── mapper # MyBatis-Plus的Mapper接口 ├── entity # 数据库实体类 ├── dto # 入参出参对象，避免直接暴露实体 ├── config # 跨域、拦截器、上传配置 ├── common # 统一返回体、异常处理、工具类统一返回体是我特别想强调的一个点。很多新手喜欢在Controller里直接返回一个Map或者直接把实体类扔给前端，这样做的坏处是前端无法统一处理错误码和错误信息。我一般在项目里写一个Result类，结构大概是：
public class Result<T> { private Integer code; private String message; private T data; }接口返回时，成功就Result.success(data)，失败就Result.error(500, "服务器开小差了")。前端Axios拦截器里只处理code为200的情况，其他情况统一弹错误提示。这么一套东西写下来只需要十几分钟，但能让整个项目前后端联调时爽非常多。
异常处理也是必须做的。Spring Boot里有@RestControllerAdvice注解，配合@ExceptionHandler可以捕获全局异常，这样Controller里就不用每个方法都包一层try-catch了。业务异常、参数校验异常、文件过大异常分别处理，返回给前端对应的错误信息。很多同学到了答辩前还在为“前端一直报500”这种问题焦头烂额，说明项目从一开始就没做好这层基础建设。
3.3 登录鉴权：JWT还是Session
共享平台的登录状态管理，我推荐用JWT而不是Session。原因很简单：前后端分离部署时，Session的跨域处理比较麻烦，而JWT天然无状态，前端把Token存在localStorage里，每次请求在Axios拦截器里带上Authorization头就行。
JWT用起来不复杂，引入jjwt依赖，登录成功时用用户的id和角色生成一个Token，有效期可以设置成7天。后端写一个拦截器，在每次请求时解析Token，把用户信息放入ThreadLocal，这样Controller里随时可以通过上下文拿当前登录用户。
但是JWT有一个容易被忽视的问题：它无法主动过期。比如你封禁了一个用户，他手里的Token在到期前依然有效。对共享平台这种场景，我的处理方式是加一个简单的“在线Token白名单”到Redis里，登录时写入，注销时删除，每次请求校验一下。如果项目没引入Redis，退而求其次可以维护一个内存Map，但服务器重启就失效，这个取舍心里有数就行。
3.4 前端项目结构与关键封装
前端我用的是Vue 3 + Vite，比Vue CLI的启动速度快很多，坑也少很多。项目结构上并不复杂，建议按这样的方式组织：
src ├── api # 接口请求模块，每个页面一个文件 ├── assets # 静态资源 ├── components # 公共组件 ├── router # 路由配置 ├── store # 状态管理，用Pinia ├── views # 页面组件 ├── utils # 工具函数 └── App.vueAxios的封装是整个前端项目的命脉。我会在utils里建一个request.js，统一做几件事：baseURL指向后端接口地址、请求拦截器里附加Token、响应拦截器里统一处理错误码。这里贴一个核心片段：
request.interceptors.response.use( (response) => { const res = response.data if (res.code !== 200) { ElMessage.error(res.message || '请求失败') return Promise.reject(new Error(res.message)) } return res }, (error) => { ElMessage.error(error.message || '网络异常') return Promise.reject(error) } )路由方面，后台管理页面我会做一层动态路由。所谓的动态路由，就是根据当前用户的角色，前端在登录后通过router.addRoute()把该角色可见的页面注入进去，这样学生登录后在地址栏手动输入/admin也跳不进去，因为路由根本不存在。这比单纯在页面里判断角色然后跳转要干净得多。
3.5 一次完整的下载调用链示例
把上面这些串起来看会比较直观。比如用户点击“下载”一个课件，前端的处理流程是这样的：
- 前端点击时先判断用户是否登录，未登录则弹窗提示去登录。
- 登录状态下调用后端/download接口，参数带上resourceId。
- 后端拦截器校验Token，通过后进入Service层。
- Service层先查资源状态，确认是已发布状态，然后新增一条下载记录，再把下载次数+1。
- 最后返回文件的相对路径，并通过ResponseEntity把文件流写回给前端。
- 前端拿到的其实是一个文件流，前端用window.open或者创建一个Blob链接触发浏览器下载。
这里面一个重要的细节是，下载接口必须用GET请求并在地址栏附带Token，还是通过Axios用Blob方式处理二进制流。我建议用Axios的responseType: 'blob'来做，这样可以在请求拦截器里自动带上Token头，而且上传下载体验一致，代码也好维护。
4. 常见问题与排错实录
4.1 三大高频Bug：跨域、上传超限、刷新404
这几个问题是前后端分离项目里出现频率最高的，基本每个新手都会遇到，我把排查方法一起说清楚。
跨域问题。现象是浏览器控制台报CORS错误。解决思路分两步：第一步，后端写一个CorsFilter或者用@CrossOrigin允许指定来源访问；第二步，也是更推荐的方式，真正部署时使用Nginx反向代理，让前端和后端看起来是同源的。我在开发环境常用Vite的proxy配置来解决，在 vite.config.js 里这样写：
server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }这样前端请求 /api/xxx 时，Vite会把请求转发到后端的8080端口，浏览器里不会产生跨域问题。这个配置几乎成了我所有项目的标配。
上传超限问题。前面提到Spring Boot默认上传只有1MB，如果你配置了还是报错，检查两件事：第一，前端组件accept和请求头的Content-Type是否有问题；第二，Nginx层的client_max_body_size默认是1m，部署后大文件上传失败大概率是这里没改。把Nginx配置改成client_max_body_size 1024m就好。
刷新404问题。部署Vue项目时，如果用的是history模式路由，用户在某个页面按F5刷新就会出现404，因为Nginx没有找到对应的物理路径。解决办法是在Nginx配置里加一行：
location / { try_files $uri $uri/ /index.html; }这个配置的意思是：如果请求的路径找不到真实文件，就回退到index.html，由前端路由接管。这行配置对单页应用来说是保命的。
4.2 版本与依赖的那些坑
关于Spring Boot版本，现在网上教程五花八门，很多老教程还在讲2.x，新项目一上来就搜到3.x的配置，然后发现有些代码用不了。Spring Boot 3.x最大的变化是Java 17+和javax包名改成了jakarta，如果你写代码时发现import javax.servlet报红，大概率就是版本混了。我的建议是：毕设和个人项目稳妥起见用Spring Boot 2.7.x配JDK 8或11，技术资料最全，遇到问题最好搜；如果你确实想用3.x，那就要做好很多旧教程不兼容的心理准备。
前端这边最大的坑在Node版本。Vite 5要求Node 18以上，但有些老机器上Node还是12或14，启动项目会直接报错。我遇到过几次这种问题，基本都是升级Node解决。另外npm安装依赖报错时，优先检查package-lock.json是否和package.json一致，必要时删掉node_modules和lock文件重装，别在一个错误的环境里死磕。
热词里“springboot 版本太高”这个搜索其实很能说明问题——很多人选型时并没有刻意锁定版本，结果项目建起来就各种报错。版本选择这件事，请务必在项目最开始就确定下来，最好写进README里，这能帮你把很多不可控因素提前排掉。
4.3 视频播放兼容性与浏览器限制
视频预览这里是重灾区。我建议按资源类型分别处理：
- mp4格式：直接用video标签播放，但要注意码率。特别大的mp4会出现拖动进度条加载慢的问题，这在教学视频里很常见。可以先用格式工厂等工具压一压分辨率，资源体积小很多，播放体验也提升明显。
- m3u8格式：用hls.js，代码在前面已经给过了。这里补充一个重点：m3u8的索引文件里如果记录的是相对路径，那么前端播放时需要通过后端映射正确拼出完整的ts文件地址，否则会404，而且这个问题只在播放中途才暴露，很难排查。
- PDF/Word文档：PDF可以用浏览器自带的iframe直接展示，Word文档则需要前端用docx-preview之类的库来渲染，或者后端用OpenOffice转成PDF再预览。高校资源共享平台里这个场景很常见，建议至少把PDF预览做掉，因为老师上传的课件大多是这个格式。
- 图片：用el-image组件自带的预览功能就够了，支持大图放大和轮播，成本最低。
4.4 排查问题的通用思路
写代码几年下来，我养成了一套自己的排查习惯。后端接口出问题，先看控制台日志，日志是沉默的情况下再查数据库数据是否异常，最后才去看是不是代码逻辑本身的问题。前端页面出问题，先打开浏览器开发者工具的Network面板看请求状态码，是404还是500还是跨域，基本能定位70%的问题。
这套方法听起来简单，但能解决几乎所有日常开发问题。很多时候新手卡住的根本原因不是不会写代码，而是不知道从哪下手排查。把“看日志”这个习惯刻进肌肉记忆里，能让你在项目开发中少加很多班。
5. 部署上线：轻松搞定一套可演示的环境
5.1 应用打包与环境准备
项目做完了总要部署，不然答辩的时候只能现场开IDEA，风险太大。部署我会分成两步走：先把后端打包成Jar包，把前端构建成静态文件，然后再考虑用不用Docker。
后端打包很简单，在项目根目录执行mvn clean package，目标目录下会生成一个jar包。执行时用java -jar xxx.jar就能启动。但这里有几个细节需要注意：第一，打包前把数据库连接地址改成服务器地址，别用localhost；第二，上传路径要改成服务器上的绝对路径，比如/data/edu-resource/files；第三，如果服务器上装的是MySQL 8，注意驱动版本。
前端构建更是简单，npm run build之后会生成一个dist目录，里面就是纯静态文件。这个目录你可以直接扔给Nginx托管，也可以用Docker的nginx镜像去跑。
5.2 宝塔面板 + Docker + Nginx的落地组合
我实际部署的时候用的是宝塔面板配合Docker来做的。你可能会问为什么不用纯命令行的Docker Compose？因为对于单机项目，宝塔的图形界面管理数据库和文件更方便，而且它自带了Docker管理器，装容器就是点几下的事。
一个比较省心的部署方案是这样的：
- 创建docker-compose.yml，里面定义三个服务：mysql（或者用宝塔自带的MySQL）、后端应用、前端Nginx。
- 后端写一个Dockerfile，基于openjdk:8或openjdk:11镜像，把jar包COPY进去，然后EXPOSE 8080。
- 前端写一个Dockerfile，基于nginx:alpine，把dist目录COPY到容器里的/usr/share/nginx/html，同时把自定义的nginx.conf也COPY进去。
- Nginx配置里把 /api 路径反向代理到后端的 8080 端口，把 /files 路径映射到后端的静态资源目录。
这套方案的好处是：整个环境可复现，你在自己电脑上能跑，拿到别的服务器上同样能跑，比起手工装环境要稳定太多。如果不想用Docker，宝塔也能直接部署，用它的“网站”功能添加一个Java项目，再添加一个静态站点，效果一样的，只是后期迁移会麻烦点。
5.3 关于“多个项目如何一次登录”的延伸思考
热词里有“多个springboot项目如何一次登录其他不用登录”，这其实就是单点登录（SSO）的问题。很多人在做毕设时会做多个系统，比如一个资源共享平台、一个考试系统、一个论坛，结果每个系统都要单独登录，体验很差。
对这个问题的浅层解法是：把Token存到同一个域名下的localStorage或Cookie里，后端的登录校验都指向同一个JWT密钥，这样几个系统都能解析同一个Token。但这个方案只适用于较简单的场景，而且存在安全隐患。更规范的思路是引入独立的认证中心，所有系统都跳转到认证中心登录，登录成功后再跳回原系统并携带票据。在后端如果不想自己实现，可以了解一下Sa-Token的SSO模块，里面有现成的方案，不过如果不是毕设要求，建议别在SSO上花太多时间，共享平台做好自己的登录体系就够了。
6. 关于这个项目，我最后想说的几点
做这种全栈项目，我个人体会最深的不是某个具体技术点，而是“闭环”这两个字。很多人的代码停在“能跑”这个层面，接口通了就觉得自己会了，但真正让你水平提升的是把上传、下载、预览、权限、异常处理、部署这一整条链路全部打通的那个过程。你会在这个过程里被迫去理解版本兼容问题、跨域问题、文件流问题、Nginx配置问题，这些才是面试里真正能拿出来聊的东西。
如果你打算在简历上写这个项目，建议重点突出几个细节：一是权限控制是怎么做的，二是视频预览和大文件上传这些有技术含量的点是如果解决的，三是部署上有没有引入Docker和Nginx的实践经验。这几个点任何一个都能在面试官追问的时候给你足够的发挥空间。
另外分享一个小技巧：项目开发到一半的时候，花点时间把README写起来。不用写多长，把技术栈、版本号、启动步骤、核心模块说明、数据库初始化脚本的位置写清楚。你会发现这东西在你自己回看项目、或者答辩前准备的时候，价值远超预期。毕竟项目做得再完整，如果接手的人（或者三个月后的你自己）看半天也不知道怎么跑起来，那前面的功夫就白费了。
