简介这是一套面向计算机专业本科生及Java初学者的课程教学平台毕设级项目聚焦毕业设计、课程设计与期末大作业实战需求解决学生缺乏可运行、可演示、可扩展的全栈项目参考难题。资源包共含项目源码、MySQL数据库脚本、开发说明文档、部署操作视频与核心代码讲解视频等关键内容覆盖前后端完整开发链路压缩包为RAR格式大小19.9MB文件总数未提供但结构完备便于快速导入IDE与数据库并一键部署。已有45人学习下载适用于SpringBoot后端开发与Vue前端实践的中初级学习者。读者可直接复用系统功能模块如课程管理、在线教学、用户权限控制结合文档与视频理解MVC分层设计、RESTful接口规范及前后端联调要点显著降低毕设开发门槛与调试成本。 前段时间帮朋友看一个课程设计项目压缩包解压开文件名是“基于SpringBoot和vue的课程教学平台的设计与实现_f2840y9o_245-QQ.rar”典型的一看就是被来回传了不知道多少轮的资料包。里面是前后端分离的完整源码SpringBoot做后端Vue做前端。这种课程教学平台在毕业设计、期末项目、企业内部培训系统里都非常常见看着功能不算复杂但真正要从零落地路由、权限、视频播放、文件上传、跨域、部署每一步都有不少坑。今天我就拿这类项目当例子把我实际做过的设计思路和实现细节完整捋一遍。这个平台能做什么往简单里说就是让课程资源线上化学生能看课、选课、交作业教师能传课件、发布作业、批改成绩管理员能做人员管理和课程审核。往复杂里说权限模型、视频流媒体、学习进度跟踪、数据统计都能作为独立模块扩展。不管你是正在做毕业设计、还是接手了一个类似的管理系统这篇文章里的踩坑经验应该能帮你少走很多弯路。1. 项目整体拆解先想清楚要做什么再写代码1.1 功能边界与用户角色我见过很多学员拿到这类项目第一反应就是建表、写登录结果代码写到一半发现业务根本串不起来。课程教学平台的核心不是“课程管理”这个笼统概念而是三个角色之间的关系学生、教师、管理员。学生端核心是“看课”和“交作业”。课程列表、课程详情、章节课时、视频播放、作业提交、成绩查询、学习记录这些是一个完整闭环。教师端核心是“生产内容”。创建课程、编辑章节、上传视频和课件、发布作业、批改评分、答疑评论。管理员端核心是“管理边界”。用户管理、课程审核上下架、公告发布、基础数据统计注册人数、课程数、选课数。很多第一次做的人会在这里犯第一个大忌上来就做后台管理系统把课程管理、用户管理、角色管理全堆在一个页面里结果学生端的核心体验没做好后台也做成了半吊子。我建议真正动手前先按“用户角色 - 核心操作 - 页面清单 - 接口清单”的顺序把主流程走一遍学生注册/登录 - 浏览课程列表 - 查看课程详情 - 选课 - 播放视频 - 提交作业 - 查看成绩。教师登录 - 创建课程 - 维护章节视频 - 发布作业 - 批改学生作业。管理员登录 - 审核课程 - 管理用户 - 发布公告。这套主流程一旦走通平台的基本盘就有了剩下都是锦上添花。功能边界想得越清楚后端的表结构和前端的页面结构才会越稳。1.2 为什么是 SpringBoot Vue而不是其他组合课程类项目选技术栈讲究的是“开发效率高、生态成熟、面试聊起来有内容”。SpringBoot 是 Java 后端的一站式框架内嵌 Tomcat、自动配置、生态丰富写一个 Web 接口基本不用关心容器怎么启动。Vue 是渐进式前端框架组件化开发让页面复用变得容易和 SpringBoot 的组合在前后端分离领域已经成为一种事实标准。这个组合的真正优势我总结成三点分工清晰。前端关注页面交互和数据展示后端关注接口逻辑和数据持久化。两边都可以独立开发、独立测试只要把接口约定提前定义好。社区资源极多。登录、权限、文件上传、视频播放、部署几乎所有问题都能在社区找到现成答案特别适合一个人快速完成整个项目。技术点经得起追问。SpringBoot 的自动配置原理、约定优于配置、内嵌容器、拦截器过滤器机制Vue 的响应式原理、组件通信、路由守卫、状态管理这些本身就是面试里高频考的内容做完一个这样的项目面试素材自然就有了。当然也有同学问为什么不用若依这种现成脚手架我说实话如果你是直接生产交付用若依确实能省很多事。但如果你是为了学习和技术沉淀我建议还是自己从零走一遍。自己写完一个完整的登录鉴权、权限拦截、文件上传模块再去看若依你才会真正看懂它里面的代码在干什么。1.3 技术选型清单与踩坑提醒我整理一份常用的技术选型表基本能满足 90% 的课程教学平台需求层次技术选型说明后端框架SpringBoot 2.7.x稳定JDK 8 即可运行生态兼容性最好ORMMyBatis-Plus单表 CRUD 不用写 SQL复杂查询手写 XML数据库MySQL 5.7 / 8.0关系型数据存储表结构清晰缓存Redis验证码、Token 黑名单、热点课程缓存认证JWT无状态登录前后端分离首选接口文档Knife4j / Swagger自动生成接口文档调试方便前端框架Vue 3 Vite组合式 API 更现代化Vite 启动速度比 Webpack 快很多UI 组件Element Plus后台管理页面直接拖组件HTTP 客户端Axios统一拦截器、请求封装视频播放HLS.js video.js支持 m3u8 分片流播放部署Nginx Docker前后端分离部署标准方案这里有一个很重要的版本提示SpringBoot 版本不要盲目追新。很多人看教程时直接去 start.spring.io 选了最新的 3.x 版本结果项目一启动报错一查才发现 3.x 要求 JDK 17本地环境还是 JDK 8跑都跑不起来。还有一些第三方 SDK 对 SpringBoot 3.x 根本没适配换了版本之后全是坑。做课程平台这种业务系统SpringBoot 2.7.18 JDK 8 Vue 3 是我实测下来非常稳的组合。2. SpringBoot 后端设计与核心实现2.1 工程结构与启动流程后端工程结构我推荐按模块分包而不是按技术层分包com.example.course ├── config // 配置类CORS、拦截器、Swagger、Redis ├── controller // 接口层暴露 REST API ├── service // 业务层核心逻辑 ├── mapper // 数据访问层MyBatis-Plus Mapper ├── entity // 实体类对应数据库表 ├── dto // 数据传输对象接收前端参数 ├── vo // 视图对象返回前端数据 ├── utils // 工具类JWT、文件上传、日期 ├── exception // 全局异常处理 └── CourseApplication.java按模块分包的核心逻辑是你拿到一个需求能快速定位到代码位置。比如“课程列表”需求入口在 controller/CourseController逻辑在 service/CourseService数据在 mapper/CourseMapper一眼就能看完整条链路。如果按 controller、service、mapper 这种技术层分包后期类一多找起来特别痛苦。关于 SpringBoot 启动流程很多人面试会碰到。简单来说SpringApplication.run()会做这么几件事先判断运行环境Web 还是非 Web然后加载主配置类通过自动配置机制读取spring.factories中的配置类按条件注解ConditionalOnMissingBean、ConditionalOnClass按需装配 Bean最后启动内嵌 Tomcat完成上下文刷新。理解了这个流程你后面对“为什么引入一个依赖功能就自动生效了”就不会觉得玄乎。后端application.yml里最基础的配置是这样server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/course_platform?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 redis: host: localhost port: 6379 servlet: multipart: max-file-size: 500MB max-request-size: 600MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: map-underscore-to-camel-case: true jwt: secret: your-secret-key expire: 604800文件上传大小这里一定提前调好不然视频传一半 SpringBoot 直接给你抛 MaxUploadSizeExceededException。2.2 数据库表设计别把文件存进数据库课程教学平台的核心表我一般是这么设计的user用户表。字段包括 id、username、password、real_name、role、avatar、create_time。密码用 BCrypt 加密存储不要存明文。course课程表。id、teacher_id、title、cover、introduction、category、status0 草稿 / 1 已上架 / 2 已下架、create_time。chapter章节表。id、course_id、title、sort。一章对应多个课时。lesson课时表。id、chapter_id、title、video_url、duration、sort。user_course选课记录表。id、user_id、course_id、status、create_time。这里做学生和课程的多对多关系。homework作业表。id、lesson_id、title、content、deadline、create_time。homework_record作业提交记录表。id、homework_id、student_id、content、attachment_url、score、submit_time。建表时最容易犯的错误是把课程封面、附件、文档内容直接存成 Base64 塞进数据库。如果你真这么干了数据库体积会迅速膨胀查询性能严重下降。比如一个 2MB 的 PDF 转成 Base64 大概有 2.7MB你 100 个学生交作业就是 270MB这还是没算视频的情况。我见过一个项目下载文本文档的时候接口返回的是“data:application/pdf;base64,JVBERi0xLj...”这样的内容前端直接没法用。正确做法是服务器把文件保存到本地磁盘或对象存储数据库里只存文件访问路径比如attachment_url存的是/files/homework/1735689600.pdf。前端拿到路径直接拼接域名下载后端没必要做文件内容转码。具体表结构示例以course表为例CREATE TABLE course ( id bigint NOT NULL AUTO_INCREMENT, teacher_id bigint NOT NULL COMMENT 教师用户ID, title varchar(255) NOT NULL COMMENT 课程标题, cover varchar(500) DEFAULT NULL COMMENT 课程封面URL, introduction text COMMENT 课程简介, category varchar(50) DEFAULT NULL COMMENT 课程分类, status tinyint DEFAULT 0 COMMENT 0-草稿 1-已上架 2-已下架, create_time datetime DEFAULT NULL, update_time datetime DEFAULT NULL, PRIMARY KEY (id), KEY idx_teacher_id (teacher_id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4;这种设计后期扩展很方便比如要给课程加标签、加评分单独建关联表就行不会影响原有业务。2.3 JWT 认证与权限控制前后端分离项目不能再用传统的 Session 会话更主流的方式是 JWT。流程是用户在登录接口输入账号密码后端校验通过后生成一个 token 返回给前端前端把 token 存进 localStorage每次请求在请求头带上Authorization: Bearer token后端用拦截器拦截请求解析 token从中拿到用户 id 和角色判断是否有权限访问接口。核心拦截器代码大概长这样Component public class JwtInterceptor implements HandlerInterceptor { Resource private JwtUtil jwtUtil; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); } if (!jwtUtil.validateToken(token)) { response.setStatus(401); response.getWriter().write({\code\:401,\msg\:\token无效或已过期\}); return false; } // 把用户信息放到 request 属性中方便后续接口取用 request.setAttribute(userId, jwtUtil.getUserId(token)); request.setAttribute(role, jwtUtil.getRole(token)); return true; } }这里要特别提一个容易忽视的问题前端按钮隐藏不是权限控制。很多学员喜欢“学生端不显示按钮”来做权限结果学生直接请求接口就能越权访问教师功能。真正的权限控制必须在后端做在拦截器里判断角色在业务接口里校验“当前用户是不是这条数据的所有者”。比如学生要删除一个课程光有登录态不够还要判断这个课程的teacher_id是不是当前登录用户否则课程就被别人改了。这个问题我在很多接手项目里都发现过属于低级但致命的漏洞。2.4 视频上传与 m3u8 播放课程教学平台最核心的媒体内容就是视频这一块也是最容易出问题的。很多初次接触的人会直接在 Vue 里写video srchttp://xxx/course.mp4小视频没问题但视频稍微大一点拖动进度条就会卡顿加载慢播放体验很差。正确做法是把视频转成 HLSHTTP Live Streaming协议生成 m3u8 分片文件让前端播放器按需加载视频分片。后端流程一般是这样管理员或教师上传视频原文件服务器保存文件后调用 FFmpeg 命令把视频转成 m3u8ffmpeg -i course.mp4 -codec copy -hls_time 10 -hls_list_size 0 -hls_segment_filename video_%03d.ts output.m3u8这个命令的意思是将course.mp4转成 HLS每个分片 10 秒-hls_list_size 0表示不限制分片文件数量生成的切片是video_000.ts、video_001.ts这种格式。前端播放 m3u8我推荐用 hls.js兼容性比 video.js 好很多。核心代码是这样template video refvideoRef controls autoplay/video /template script setup import Hls from hls.js; import { onMounted, ref } from vue; const props defineProps({ src: { type: String, required: true } }); const videoRef ref(null); onMounted(() { const video videoRef.value; if (Hls.isSupported()) { const hls new Hls(); hls.loadSource(props.src); hls.attachMedia(video); } else if (video.canPlayType(application/vnd.apple.mpegurl)) { // Safari 原生支持 m3u8 video.src props.src; } }); /script这里有个实战经验m3u8 文件不要通过 SpringBoot 后端接口返回直接把 m3u8 和 .ts 切片放在 Nginx 静态目录下用静态文件方式访问。否则经过 Java 接口转发每一片视频都会吃一次 Tomcat 线程并发一高后端就崩了。还有个大坑在 Nginx 配置里。默认mime.types可能没有注册m3u8和ts类型浏览器访问时返回的不是视频类型播放器直接报错。解决方式是手动加上location ~ \.(m3u8|ts)$ { add_header Cache-Control no-cache; types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } }2.5 接口安全、Swagger 与防 XSS这类系统涉及师生信息接口安全不能只做一个登录糊弄。至少要处理三件事第一是防 XSS 攻击。学生提交课程评论、作业内容时如果后台不做处理恶意脚本会被存储进数据库其他用户访问时脚本就会执行。SpringBoot 里有现成方案搞一个全局的参数过滤器把请求参数中的 HTML 特殊字符转义掉。如果你上传的是 PDF 文件也要注意 PDF 内容里可能携带恶意脚本常规做法是只允许 PDF 在线预览不让用户直接上传带脚本的怪文件或者用 pdfbox 对 PDF 内容做清洗。第二是 Swagger 接口文档控制。开发阶段用 Knife4j 自动生成接口文档确实非常方便前后端联调效率至少提高一倍。但上线前一定要把界面给禁用掉不然任何人都能看到你所有接口的参数和返回结构等于把你的系统数据库结构直接暴露了。knife4j: production: true第三是 API Key 管理。现在很多课程平台接第三方能力比如语音识别、AI 翻译、内容审核。有些学员图省事直接把第三方 API Key 写在前端代码里这样等于公开了密钥别人可以在一天之内把你的额度刷爆。正确的做法是第三方 API Key 只放在 Java 后端的环境变量或配置中心里由后端代替前端去请求第三方接口再返回脱敏后的结果给前端。SpringBoot 对接外部 API 时最好做个单独的 HTTP 请求封装密钥统一从配置读取不让它散落在业务代码里。3. Vue 前端实现细节3.1 环境准备从零搭出 Vue 项目前端环境准备劝退过不少人。先用 Node 官网或 nvm 安装 Node 18 以上版本然后安装vue/cli或者直接用 Vite 创建项目。命令行方式npm create vitelatest course-frontend -- --template vue cd course-frontend npm install如果你习惯用 Vue CLI也可以npm install -g vue/cli vue create course-frontend这里提醒一点国内网络环境下npm install经常失败报各种奇怪的 ENOENT、ELIFECYCLE很多时候不是代码问题而是网络问题。建议先设置镜像源npm config set registry https://registry.npmmirror.com创建好项目后安装核心依赖npm install element-plus axios vue-router4 pinia npm install hls.js调试页面时强烈推荐装一个 Vue DevTools 浏览器插件。它能直接看组件树、Vuex/Pinia 状态、路由信息、事件触发排查数据流问题非常高效。很多人用了半天 debugger 找不到问题装上 DevTools 一眼就看出是 computed 没更新还是状态没同步。3.2 路由、菜单、权限与页面划分Vue 项目里的路由不只是页面跳转它还承担了权限控制的一部分职责。我把路由分成两组不需要登录就能访问的登录页、公开课程列表需要登录且区分角色的教师后台、学生课程中心、管理员系统。路由配置示例const routes [ { path: /login, component: () import(/views/Login.vue) }, { path: /, component: () import(/layout/HomeLayout.vue), children: [ { path: courses, component: () import(/views/course/CourseList.vue) }, { path: course/:id, component: () import(/views/course/CourseDetail.vue) } ] }, { path: /admin, component: () import(/layout/AdminLayout.vue), meta: { roles: [ADMIN] }, children: [ { path: users, component: () import(/views/admin/UserManage.vue) } ] } ]路由守卫里做登录判断和角色判断router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (!token to.path ! /login) { next(/login); } else if (token to.meta.roles !userStore.roles.includes(to.meta.roles[0])) { next(/403); } else { next(); } });关于 Vue 和 HTML 的区别面试也常被问到。我的理解是HTML 是“静态模板”页面写好了就是死样子Vue 是“数据驱动”数据和 DOM 绑定后数据一变页面自动跟着变。比如课程列表页你用原生 JS 可能写一大串document.createElement拼接 DOM在 Vue 里只要v-for循环一个数组就搞定了。这就是 Vue 真正提高了前端开发效率的地方。路由传参也要注意。课程详情页跳转时有人喜欢这样this.$router.push({ path: /course/ id })然后在详情页用this.$route.params.id取参。这种方式在页面刷新时参数不会丢因为参数在 URL 上。但如果你用query传参刷新也不会丢因为 on URL 上也有。真正会丢的是你组件里用 Pinia 存的数据刷新后全部归零所以页面初始化时一定要从路由参数或者接口重新拉取数据。3.3 Axios 请求封装与状态管理前端所有接口请求最好统一封装成一个模块方便做 token 携带、错误拦截、消息提示。我习惯在src/utils/request.js里做import axios from axios; import { ElMessage } from element-plus; import router from /router; const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 15000 }); request.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer ${token}; } return config; }); request.interceptors.response.use( response response.data, error { if (error.response?.status 401) { localStorage.removeItem(token); router.push(/login); } ElMessage.error(error.response?.data?.msg || 请求失败); return Promise.reject(error); } ); export default request;状态管理用 Pinia 或 Vuex 都行Vue 3 项目推荐 Pinia。用户登录成功以后把用户信息和 token 都放进 store同时持久化到 localStorage。刷新页面后从 localStorage 恢复用户信息。否则一刷新页面用户状态就丢了体验很差。要提醒一下不要在 store 里存敏感数据比如权限密钥、身份证号、密码。这些一旦被 XSS 攻击拿到就是安全事故。3.4 核心页面组件与常见组件坑页面组件方面重点讲几个高频使用的功能。第一个是课程列表搜索分页。用 el-table 或卡片列表展示课程搜索关键词要防抖不然用户每输入一个字符就请求一次接口后端很容易被击穿。防抖实现很简单let timer null; function onSearch() { clearTimeout(timer); timer setTimeout(() { getCourseList(); }, 300); }第二个是视频播放器封装。前面讲过 hls.js 播放 m3u8在组件里还可以加一层兜底如果浏览器不支持 HLS 且不支持 m3u8给用户提示换浏览器。第三个是 el-table 滚动位置问题。课程列表页切到详情再回来很多人的做法是直接重新请求第一页数据结果用户原来的分页和滚动位置全丢了。解决办法是用keep-alive缓存列表页面然后在activated钩子里恢复滚动位置template keep-alive includeCourseList router-view / /keep-alive /templateonActivated(() { nextTick(() { tableRef.value?.scrollTo({ top: savedScrollTop }); }); });这里有个细节keep-alive只对组件 name 生效所以列表组件的 name 一定要写对我见过好几个人配了 include 但没生效就是 name 写漏了。第四个是 Vue 的 computed。课程详情页里经常要把课程时长从秒数格式化成“1小时30分钟”或者根据课程状态计算按钮文案。这种派生数据直接用 computed 最合适const courseDurationText computed(() { const totalSeconds props.course.duration; const hours Math.floor(totalSeconds / 3600); const minutes Math.floor((totalSeconds % 3600) / 60); return hours 0 ? ${hours}小时${minutes}分钟 : ${minutes}分钟; });不要在模板里写{{ hours 0 ? ... }}这种长表达式既难读又不好维护。这是 Vue 开发里我很坚持的一点。4. 前后端联调与部署4.1 开发代理与跨域配置前后端分离环境下联调遇到最多的问题就是跨域。前端页面跑在 5173 端口后端接口跑在 8080 端口浏览器直接请求接口返回 CORS 错误。主流方案是配置前端开发服务器的代理。以 Vite 为例vite.config.js里这样配置export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })这样前端请求/api/course/list在开发阶段会被 Vite 代理转发到http://localhost:8080/api/course/list浏览器里看不到跨域因为浏览器认为请求是同源的。后端也可以做 CORS 配置但要注意一个细节allowedOrigins(*)和allowCredentials(true)不能同时使用浏览器会直接拒绝携带 cookie 的跨域请求。所以后端 CORS 配置要么指定固定域名要么关闭 credentials。4.2 构建部署Nginx SpringBoot项目完成后部署方案是最常规的后端打 jar 包mvn clean package -DskipTests java -jar course-platform.jar前端构建静态文件npm run build把dist目录里的文件扔到 Nginx 的html目录配置一个反向代理server { listen 80; server_name your-domain.com; root /usr/share/nginx/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location /files/ { alias /data/course-platform/files/; } location / { try_files $uri $uri/ /index.html; } }注意location /里的try_files这行配置解决的是前端路由刷新 404 的问题。Vue Router 使用 history 模式时你直接访问/admin/users页面Nginx 找不到这个真实路径会返回 404。try_files $uri $uri/ /index.html的意思是先找真实文件找不到就返回 index.html由前端路由接管。关于 SpringBoot 版本话题我再强调一次。我见过有人看到 IDEA 里新建 SpringBoot 项目时没有 3.4.3 那个版本选项就以为是自己 IDEA 出问题了其实不是。IDEA 的 Spring Initializr 选项是和网络元数据同步的有时候只显示 3.x有时候只显示 2.x。你可以直接访问 start.spring.io 网站生成项目压缩包再导入 IDEA。如果你长期用 JDK 8直接选 SpringBoot 2.7.x 就行完全不需要纠结版本太新。进阶一点现在很多团队会要求用 Docker 或 K8s 部署。K8s 部署 SpringBoot 项目最容易被忽略的是容器内存限制。JVM 默认堆内存是物理内存的四分之一如果 Pod 内存限制 512MB而 JVM 自动分配了 1GB一启动就会被杀。解决方式是在启动命令里加-XX:MaxRAMPercentage75.0让 JVM 按容器限制自适应。4.3 版本兼容与第三方 SDK 集成经验项目里如果集成了第三方 SDK版本兼容性问题会特别突出。比如在 Windows 上集成财务类的本地 SDK可能会碰到 DLL 文件加载失败、路径空格、32位 64位不匹配、环境变量没生效等问题。这里我的经验是第三方 SDK 尽量通过独立服务或中间层封装不要让业务代码直接依赖 SDK 原生库。还有第三方登录比如钉钉免登录、企业微信扫码登录都是基于 OAuth2 流程。前端跳转到第三方授权页授权后回调到后端接口后端拿 code 换 access_token再用 token 请求用户信息最后和本地用户绑定签发 JWT。这里的坑是回调地址要写完整的域名SpringBoot 本地调试时回调地址往往只能写公网地址很不方便。可以用内网穿透工具映射一下本地端口联调效率会高很多。如果你的课程平台要接消息队列做异步通知比如 ActiveMQ、MQTT要注意回调的幂等性和死循环问题。我之前遇到过一个 MQTT 监听系统所有设备连接状态的场景监听主题后在回调里又去发布一条消息结果触发新的主题事件又走到这个回调直接形成死循环。解决方式是回调里只记录状态不触发任何会产生新消息的操作如果一定要发消息必须加条件判断或延时处理。5. 常见问题速查与避坑实录5.1 环境安装问题速查下面这张表是我在帮别人排查环境问题里最常遇到的几种直接对照处理问题现象根本原因解决方式启动前端项目提示找不到 node_modules依赖没安装成功或安装目录不完整执行npm install网络不行就换镜像源npm install 报 ELIFECYCLE 错误依赖版本冲突或 Node 版本过新先用nvm use 18切换 Node 版本再重新安装IDEA 找不到 SpringBoot 新版本选项网络数据源没更新直接去 start.spring.io 手动生成再导入SpringBoot 3.x 启动失败JDK 版本低于 17换 SpringBoot 2.7.x JDK 8或升级 JDKVue DevTools 无法识别页面装了但没开开发模式 / 版本不匹配下载对应浏览器最新版本确认页面运行在开发模式环境问题占了这类项目前期 50% 的耗时但反复排查过一次之后你以后搭建任何新项目都会快很多。5.2 业务功能中容易踩的坑文件下载文件名乱码。有些浏览器下载接口返回中文文件名时直接变成“???”原因是 HTTP 响应头不支持非 ASCII 字符。用标准做法String encodedFileName URLEncoder.encode(fileName, UTF-8).replaceAll(\\, %20); response.setHeader(Content-Disposition, attachment; filename*UTF-8 encodedFileName);文件内容返回 Base64。很多初学者会把 PDF 文档读成字节流然后转成 Base64 放到 JSON 里返回前端再转回来。遇到小文件勉强能用遇到大文件内存直接爆掉。正确做法是后端把文件路径返回前端用 a 标签或者 window.open 直接访问文件 URL。前端路由回退后页面状态丢失。我处理过很多次这种问题用keep-alive缓存组件是标准答案但如果页面里有 el-table还需要在onActivated里恢复滚动位置否则页面回来了数据也回来了滚动条却跑到了顶部。权限校验只做前端。前端隐藏按钮只是体验优化后端接口必须做真实校验。学生调接口改成绩、删课程这种越权攻击只要用 Postman 测试一下就能被发现。课程删除时没有处理关联数据。直接删除课程表记录会导致选课记录变成孤儿数据学生端还会显示已选课程打开详情却 404。删除课程最好做成软删除或者在同一事务里把user_course、chapter、lesson都处理掉。5.3 面试版本SpringBoot 快问快答做完这个项目面试官大概率会追问 SpringBoot 的基础。我点几个高频方向SpringBoot 和 Spring 什么关系SpringBoot 基于 Spring通过自动配置和 Starter 机制屏蔽了大量模板配置核心是“约定优于配置”。自动配置是怎么实现的EnableAutoConfiguration会加载spring.factories里注册的AutoConfiguration类配合ConditionalOnClass、ConditionalOnMissingBean等条件注解按需装配。SpringBoot 启动流程是什么从构建 SpringApplication 开始推断应用类型、加载配置、创建环境、准备上下文、刷新上下文、启动内置容器。SpringBoot 和 SpringCloud 区别SpringBoot 是大单体应用的快速开发框架SpringCloud 是微服务治理方案包含注册中心、配置中心、网关、熔断等。SpringBoot 是 SpringCloud 的基础。如何自定义一个 Starter定义自动配置类加上Configuration然后在resources/META-INF下创建一个org.springframework.boot.autoconfigure.AutoConfiguration.imports文件声明自动配置类。这些题目看起来偏原理但都是真实工作中理解框架必须知道的东西。光会用只是第一步能解释为什么才算真的掌握。再分享一下我自己的实操习惯。每次接到课程类平台项目我第一件事不是去看需求文档而是先把视频播放、文件上传、JWT 登录这三个模块做成独立的可运行 Demo确定它们都能跑通再开始写业务代码。因为这三块是课程平台里最容易出问题、也最依赖第三方环境的部分提前解决掉后面业务代码写起来就没有“定时炸弹”了。你如果现在正在做类似的系统我建议你按这个顺序走先跑通视频 m3u8再做登录鉴权再做文件上传最后往这套骨架上填课程、作业、统计这些业务功能。等整个流程跑通后你会发现那些看着复杂的业务功能其实只是不停的 CRUD 而已。做项目最怕的不是不会写代码而是项目跑起来之后才被环境、版本、跨域这些问题反复打断。把这几个前置模块解决了你后面每写一个功能都是顺水推舟。如果你在实操中遇到其他奇奇怪怪的问题也欢迎随时回来交流说不定你踩的坑我也刚好帮他踩过一遍。本文还有配套的精品资源点击获取 
长河君 · 2026/8/31 2:32:40 · 阅读 1.2k SpringBoot+Vue课程教学平台设计与实现：从权限到部署全攻略
简介这是一套面向计算机专业本科生及Java初学者的课程教学平台毕设级项目聚焦毕业设计、课程设计与期末大作业实战需求解决学生缺乏可运行、可演示、可扩展的全栈项目参考难题。资源包共含项目源码、MySQL数据库脚本、开发说明文档、部署操作视频与核心代码讲解视频等关键内容覆盖前后端完整开发链路压缩包为RAR格式大小19.9MB文件总数未提供但结构完备便于快速导入IDE与数据库并一键部署。已有45人学习下载适用于SpringBoot后端开发与Vue前端实践的中初级学习者。读者可直接复用系统功能模块如课程管理、在线教学、用户权限控制结合文档与视频理解MVC分层设计、RESTful接口规范及前后端联调要点显著降低毕设开发门槛与调试成本。 前段时间帮朋友看一个课程设计项目压缩包解压开文件名是“基于SpringBoot和vue的课程教学平台的设计与实现_f2840y9o_245-QQ.rar”典型的一看就是被来回传了不知道多少轮的资料包。里面是前后端分离的完整源码SpringBoot做后端Vue做前端。这种课程教学平台在毕业设计、期末项目、企业内部培训系统里都非常常见看着功能不算复杂但真正要从零落地路由、权限、视频播放、文件上传、跨域、部署每一步都有不少坑。今天我就拿这类项目当例子把我实际做过的设计思路和实现细节完整捋一遍。这个平台能做什么往简单里说就是让课程资源线上化学生能看课、选课、交作业教师能传课件、发布作业、批改成绩管理员能做人员管理和课程审核。往复杂里说权限模型、视频流媒体、学习进度跟踪、数据统计都能作为独立模块扩展。不管你是正在做毕业设计、还是接手了一个类似的管理系统这篇文章里的踩坑经验应该能帮你少走很多弯路。1. 项目整体拆解先想清楚要做什么再写代码1.1 功能边界与用户角色我见过很多学员拿到这类项目第一反应就是建表、写登录结果代码写到一半发现业务根本串不起来。课程教学平台的核心不是“课程管理”这个笼统概念而是三个角色之间的关系学生、教师、管理员。学生端核心是“看课”和“交作业”。课程列表、课程详情、章节课时、视频播放、作业提交、成绩查询、学习记录这些是一个完整闭环。教师端核心是“生产内容”。创建课程、编辑章节、上传视频和课件、发布作业、批改评分、答疑评论。管理员端核心是“管理边界”。用户管理、课程审核上下架、公告发布、基础数据统计注册人数、课程数、选课数。很多第一次做的人会在这里犯第一个大忌上来就做后台管理系统把课程管理、用户管理、角色管理全堆在一个页面里结果学生端的核心体验没做好后台也做成了半吊子。我建议真正动手前先按“用户角色 - 核心操作 - 页面清单 - 接口清单”的顺序把主流程走一遍学生注册/登录 - 浏览课程列表 - 查看课程详情 - 选课 - 播放视频 - 提交作业 - 查看成绩。教师登录 - 创建课程 - 维护章节视频 - 发布作业 - 批改学生作业。管理员登录 - 审核课程 - 管理用户 - 发布公告。这套主流程一旦走通平台的基本盘就有了剩下都是锦上添花。功能边界想得越清楚后端的表结构和前端的页面结构才会越稳。1.2 为什么是 SpringBoot Vue而不是其他组合课程类项目选技术栈讲究的是“开发效率高、生态成熟、面试聊起来有内容”。SpringBoot 是 Java 后端的一站式框架内嵌 Tomcat、自动配置、生态丰富写一个 Web 接口基本不用关心容器怎么启动。Vue 是渐进式前端框架组件化开发让页面复用变得容易和 SpringBoot 的组合在前后端分离领域已经成为一种事实标准。这个组合的真正优势我总结成三点分工清晰。前端关注页面交互和数据展示后端关注接口逻辑和数据持久化。两边都可以独立开发、独立测试只要把接口约定提前定义好。社区资源极多。登录、权限、文件上传、视频播放、部署几乎所有问题都能在社区找到现成答案特别适合一个人快速完成整个项目。技术点经得起追问。SpringBoot 的自动配置原理、约定优于配置、内嵌容器、拦截器过滤器机制Vue 的响应式原理、组件通信、路由守卫、状态管理这些本身就是面试里高频考的内容做完一个这样的项目面试素材自然就有了。当然也有同学问为什么不用若依这种现成脚手架我说实话如果你是直接生产交付用若依确实能省很多事。但如果你是为了学习和技术沉淀我建议还是自己从零走一遍。自己写完一个完整的登录鉴权、权限拦截、文件上传模块再去看若依你才会真正看懂它里面的代码在干什么。1.3 技术选型清单与踩坑提醒我整理一份常用的技术选型表基本能满足 90% 的课程教学平台需求层次技术选型说明后端框架SpringBoot 2.7.x稳定JDK 8 即可运行生态兼容性最好ORMMyBatis-Plus单表 CRUD 不用写 SQL复杂查询手写 XML数据库MySQL 5.7 / 8.0关系型数据存储表结构清晰缓存Redis验证码、Token 黑名单、热点课程缓存认证JWT无状态登录前后端分离首选接口文档Knife4j / Swagger自动生成接口文档调试方便前端框架Vue 3 Vite组合式 API 更现代化Vite 启动速度比 Webpack 快很多UI 组件Element Plus后台管理页面直接拖组件HTTP 客户端Axios统一拦截器、请求封装视频播放HLS.js video.js支持 m3u8 分片流播放部署Nginx Docker前后端分离部署标准方案这里有一个很重要的版本提示SpringBoot 版本不要盲目追新。很多人看教程时直接去 start.spring.io 选了最新的 3.x 版本结果项目一启动报错一查才发现 3.x 要求 JDK 17本地环境还是 JDK 8跑都跑不起来。还有一些第三方 SDK 对 SpringBoot 3.x 根本没适配换了版本之后全是坑。做课程平台这种业务系统SpringBoot 2.7.18 JDK 8 Vue 3 是我实测下来非常稳的组合。2. SpringBoot 后端设计与核心实现2.1 工程结构与启动流程后端工程结构我推荐按模块分包而不是按技术层分包com.example.course ├── config // 配置类CORS、拦截器、Swagger、Redis ├── controller // 接口层暴露 REST API ├── service // 业务层核心逻辑 ├── mapper // 数据访问层MyBatis-Plus Mapper ├── entity // 实体类对应数据库表 ├── dto // 数据传输对象接收前端参数 ├── vo // 视图对象返回前端数据 ├── utils // 工具类JWT、文件上传、日期 ├── exception // 全局异常处理 └── CourseApplication.java按模块分包的核心逻辑是你拿到一个需求能快速定位到代码位置。比如“课程列表”需求入口在 controller/CourseController逻辑在 service/CourseService数据在 mapper/CourseMapper一眼就能看完整条链路。如果按 controller、service、mapper 这种技术层分包后期类一多找起来特别痛苦。关于 SpringBoot 启动流程很多人面试会碰到。简单来说SpringApplication.run()会做这么几件事先判断运行环境Web 还是非 Web然后加载主配置类通过自动配置机制读取spring.factories中的配置类按条件注解ConditionalOnMissingBean、ConditionalOnClass按需装配 Bean最后启动内嵌 Tomcat完成上下文刷新。理解了这个流程你后面对“为什么引入一个依赖功能就自动生效了”就不会觉得玄乎。后端application.yml里最基础的配置是这样server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/course_platform?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 redis: host: localhost port: 6379 servlet: multipart: max-file-size: 500MB max-request-size: 600MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: map-underscore-to-camel-case: true jwt: secret: your-secret-key expire: 604800文件上传大小这里一定提前调好不然视频传一半 SpringBoot 直接给你抛 MaxUploadSizeExceededException。2.2 数据库表设计别把文件存进数据库课程教学平台的核心表我一般是这么设计的user用户表。字段包括 id、username、password、real_name、role、avatar、create_time。密码用 BCrypt 加密存储不要存明文。course课程表。id、teacher_id、title、cover、introduction、category、status0 草稿 / 1 已上架 / 2 已下架、create_time。chapter章节表。id、course_id、title、sort。一章对应多个课时。lesson课时表。id、chapter_id、title、video_url、duration、sort。user_course选课记录表。id、user_id、course_id、status、create_time。这里做学生和课程的多对多关系。homework作业表。id、lesson_id、title、content、deadline、create_time。homework_record作业提交记录表。id、homework_id、student_id、content、attachment_url、score、submit_time。建表时最容易犯的错误是把课程封面、附件、文档内容直接存成 Base64 塞进数据库。如果你真这么干了数据库体积会迅速膨胀查询性能严重下降。比如一个 2MB 的 PDF 转成 Base64 大概有 2.7MB你 100 个学生交作业就是 270MB这还是没算视频的情况。我见过一个项目下载文本文档的时候接口返回的是“data:application/pdf;base64,JVBERi0xLj...”这样的内容前端直接没法用。正确做法是服务器把文件保存到本地磁盘或对象存储数据库里只存文件访问路径比如attachment_url存的是/files/homework/1735689600.pdf。前端拿到路径直接拼接域名下载后端没必要做文件内容转码。具体表结构示例以course表为例CREATE TABLE course ( id bigint NOT NULL AUTO_INCREMENT, teacher_id bigint NOT NULL COMMENT 教师用户ID, title varchar(255) NOT NULL COMMENT 课程标题, cover varchar(500) DEFAULT NULL COMMENT 课程封面URL, introduction text COMMENT 课程简介, category varchar(50) DEFAULT NULL COMMENT 课程分类, status tinyint DEFAULT 0 COMMENT 0-草稿 1-已上架 2-已下架, create_time datetime DEFAULT NULL, update_time datetime DEFAULT NULL, PRIMARY KEY (id), KEY idx_teacher_id (teacher_id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4;这种设计后期扩展很方便比如要给课程加标签、加评分单独建关联表就行不会影响原有业务。2.3 JWT 认证与权限控制前后端分离项目不能再用传统的 Session 会话更主流的方式是 JWT。流程是用户在登录接口输入账号密码后端校验通过后生成一个 token 返回给前端前端把 token 存进 localStorage每次请求在请求头带上Authorization: Bearer token后端用拦截器拦截请求解析 token从中拿到用户 id 和角色判断是否有权限访问接口。核心拦截器代码大概长这样Component public class JwtInterceptor implements HandlerInterceptor { Resource private JwtUtil jwtUtil; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); } if (!jwtUtil.validateToken(token)) { response.setStatus(401); response.getWriter().write({\code\:401,\msg\:\token无效或已过期\}); return false; } // 把用户信息放到 request 属性中方便后续接口取用 request.setAttribute(userId, jwtUtil.getUserId(token)); request.setAttribute(role, jwtUtil.getRole(token)); return true; } }这里要特别提一个容易忽视的问题前端按钮隐藏不是权限控制。很多学员喜欢“学生端不显示按钮”来做权限结果学生直接请求接口就能越权访问教师功能。真正的权限控制必须在后端做在拦截器里判断角色在业务接口里校验“当前用户是不是这条数据的所有者”。比如学生要删除一个课程光有登录态不够还要判断这个课程的teacher_id是不是当前登录用户否则课程就被别人改了。这个问题我在很多接手项目里都发现过属于低级但致命的漏洞。2.4 视频上传与 m3u8 播放课程教学平台最核心的媒体内容就是视频这一块也是最容易出问题的。很多初次接触的人会直接在 Vue 里写video srchttp://xxx/course.mp4小视频没问题但视频稍微大一点拖动进度条就会卡顿加载慢播放体验很差。正确做法是把视频转成 HLSHTTP Live Streaming协议生成 m3u8 分片文件让前端播放器按需加载视频分片。后端流程一般是这样管理员或教师上传视频原文件服务器保存文件后调用 FFmpeg 命令把视频转成 m3u8ffmpeg -i course.mp4 -codec copy -hls_time 10 -hls_list_size 0 -hls_segment_filename video_%03d.ts output.m3u8这个命令的意思是将course.mp4转成 HLS每个分片 10 秒-hls_list_size 0表示不限制分片文件数量生成的切片是video_000.ts、video_001.ts这种格式。前端播放 m3u8我推荐用 hls.js兼容性比 video.js 好很多。核心代码是这样template video refvideoRef controls autoplay/video /template script setup import Hls from hls.js; import { onMounted, ref } from vue; const props defineProps({ src: { type: String, required: true } }); const videoRef ref(null); onMounted(() { const video videoRef.value; if (Hls.isSupported()) { const hls new Hls(); hls.loadSource(props.src); hls.attachMedia(video); } else if (video.canPlayType(application/vnd.apple.mpegurl)) { // Safari 原生支持 m3u8 video.src props.src; } }); /script这里有个实战经验m3u8 文件不要通过 SpringBoot 后端接口返回直接把 m3u8 和 .ts 切片放在 Nginx 静态目录下用静态文件方式访问。否则经过 Java 接口转发每一片视频都会吃一次 Tomcat 线程并发一高后端就崩了。还有个大坑在 Nginx 配置里。默认mime.types可能没有注册m3u8和ts类型浏览器访问时返回的不是视频类型播放器直接报错。解决方式是手动加上location ~ \.(m3u8|ts)$ { add_header Cache-Control no-cache; types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } }2.5 接口安全、Swagger 与防 XSS这类系统涉及师生信息接口安全不能只做一个登录糊弄。至少要处理三件事第一是防 XSS 攻击。学生提交课程评论、作业内容时如果后台不做处理恶意脚本会被存储进数据库其他用户访问时脚本就会执行。SpringBoot 里有现成方案搞一个全局的参数过滤器把请求参数中的 HTML 特殊字符转义掉。如果你上传的是 PDF 文件也要注意 PDF 内容里可能携带恶意脚本常规做法是只允许 PDF 在线预览不让用户直接上传带脚本的怪文件或者用 pdfbox 对 PDF 内容做清洗。第二是 Swagger 接口文档控制。开发阶段用 Knife4j 自动生成接口文档确实非常方便前后端联调效率至少提高一倍。但上线前一定要把界面给禁用掉不然任何人都能看到你所有接口的参数和返回结构等于把你的系统数据库结构直接暴露了。knife4j: production: true第三是 API Key 管理。现在很多课程平台接第三方能力比如语音识别、AI 翻译、内容审核。有些学员图省事直接把第三方 API Key 写在前端代码里这样等于公开了密钥别人可以在一天之内把你的额度刷爆。正确的做法是第三方 API Key 只放在 Java 后端的环境变量或配置中心里由后端代替前端去请求第三方接口再返回脱敏后的结果给前端。SpringBoot 对接外部 API 时最好做个单独的 HTTP 请求封装密钥统一从配置读取不让它散落在业务代码里。3. Vue 前端实现细节3.1 环境准备从零搭出 Vue 项目前端环境准备劝退过不少人。先用 Node 官网或 nvm 安装 Node 18 以上版本然后安装vue/cli或者直接用 Vite 创建项目。命令行方式npm create vitelatest course-frontend -- --template vue cd course-frontend npm install如果你习惯用 Vue CLI也可以npm install -g vue/cli vue create course-frontend这里提醒一点国内网络环境下npm install经常失败报各种奇怪的 ENOENT、ELIFECYCLE很多时候不是代码问题而是网络问题。建议先设置镜像源npm config set registry https://registry.npmmirror.com创建好项目后安装核心依赖npm install element-plus axios vue-router4 pinia npm install hls.js调试页面时强烈推荐装一个 Vue DevTools 浏览器插件。它能直接看组件树、Vuex/Pinia 状态、路由信息、事件触发排查数据流问题非常高效。很多人用了半天 debugger 找不到问题装上 DevTools 一眼就看出是 computed 没更新还是状态没同步。3.2 路由、菜单、权限与页面划分Vue 项目里的路由不只是页面跳转它还承担了权限控制的一部分职责。我把路由分成两组不需要登录就能访问的登录页、公开课程列表需要登录且区分角色的教师后台、学生课程中心、管理员系统。路由配置示例const routes [ { path: /login, component: () import(/views/Login.vue) }, { path: /, component: () import(/layout/HomeLayout.vue), children: [ { path: courses, component: () import(/views/course/CourseList.vue) }, { path: course/:id, component: () import(/views/course/CourseDetail.vue) } ] }, { path: /admin, component: () import(/layout/AdminLayout.vue), meta: { roles: [ADMIN] }, children: [ { path: users, component: () import(/views/admin/UserManage.vue) } ] } ]路由守卫里做登录判断和角色判断router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (!token to.path ! /login) { next(/login); } else if (token to.meta.roles !userStore.roles.includes(to.meta.roles[0])) { next(/403); } else { next(); } });关于 Vue 和 HTML 的区别面试也常被问到。我的理解是HTML 是“静态模板”页面写好了就是死样子Vue 是“数据驱动”数据和 DOM 绑定后数据一变页面自动跟着变。比如课程列表页你用原生 JS 可能写一大串document.createElement拼接 DOM在 Vue 里只要v-for循环一个数组就搞定了。这就是 Vue 真正提高了前端开发效率的地方。路由传参也要注意。课程详情页跳转时有人喜欢这样this.$router.push({ path: /course/ id })然后在详情页用this.$route.params.id取参。这种方式在页面刷新时参数不会丢因为参数在 URL 上。但如果你用query传参刷新也不会丢因为 on URL 上也有。真正会丢的是你组件里用 Pinia 存的数据刷新后全部归零所以页面初始化时一定要从路由参数或者接口重新拉取数据。3.3 Axios 请求封装与状态管理前端所有接口请求最好统一封装成一个模块方便做 token 携带、错误拦截、消息提示。我习惯在src/utils/request.js里做import axios from axios; import { ElMessage } from element-plus; import router from /router; const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 15000 }); request.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer ${token}; } return config; }); request.interceptors.response.use( response response.data, error { if (error.response?.status 401) { localStorage.removeItem(token); router.push(/login); } ElMessage.error(error.response?.data?.msg || 请求失败); return Promise.reject(error); } ); export default request;状态管理用 Pinia 或 Vuex 都行Vue 3 项目推荐 Pinia。用户登录成功以后把用户信息和 token 都放进 store同时持久化到 localStorage。刷新页面后从 localStorage 恢复用户信息。否则一刷新页面用户状态就丢了体验很差。要提醒一下不要在 store 里存敏感数据比如权限密钥、身份证号、密码。这些一旦被 XSS 攻击拿到就是安全事故。3.4 核心页面组件与常见组件坑页面组件方面重点讲几个高频使用的功能。第一个是课程列表搜索分页。用 el-table 或卡片列表展示课程搜索关键词要防抖不然用户每输入一个字符就请求一次接口后端很容易被击穿。防抖实现很简单let timer null; function onSearch() { clearTimeout(timer); timer setTimeout(() { getCourseList(); }, 300); }第二个是视频播放器封装。前面讲过 hls.js 播放 m3u8在组件里还可以加一层兜底如果浏览器不支持 HLS 且不支持 m3u8给用户提示换浏览器。第三个是 el-table 滚动位置问题。课程列表页切到详情再回来很多人的做法是直接重新请求第一页数据结果用户原来的分页和滚动位置全丢了。解决办法是用keep-alive缓存列表页面然后在activated钩子里恢复滚动位置template keep-alive includeCourseList router-view / /keep-alive /templateonActivated(() { nextTick(() { tableRef.value?.scrollTo({ top: savedScrollTop }); }); });这里有个细节keep-alive只对组件 name 生效所以列表组件的 name 一定要写对我见过好几个人配了 include 但没生效就是 name 写漏了。第四个是 Vue 的 computed。课程详情页里经常要把课程时长从秒数格式化成“1小时30分钟”或者根据课程状态计算按钮文案。这种派生数据直接用 computed 最合适const courseDurationText computed(() { const totalSeconds props.course.duration; const hours Math.floor(totalSeconds / 3600); const minutes Math.floor((totalSeconds % 3600) / 60); return hours 0 ? ${hours}小时${minutes}分钟 : ${minutes}分钟; });不要在模板里写{{ hours 0 ? ... }}这种长表达式既难读又不好维护。这是 Vue 开发里我很坚持的一点。4. 前后端联调与部署4.1 开发代理与跨域配置前后端分离环境下联调遇到最多的问题就是跨域。前端页面跑在 5173 端口后端接口跑在 8080 端口浏览器直接请求接口返回 CORS 错误。主流方案是配置前端开发服务器的代理。以 Vite 为例vite.config.js里这样配置export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })这样前端请求/api/course/list在开发阶段会被 Vite 代理转发到http://localhost:8080/api/course/list浏览器里看不到跨域因为浏览器认为请求是同源的。后端也可以做 CORS 配置但要注意一个细节allowedOrigins(*)和allowCredentials(true)不能同时使用浏览器会直接拒绝携带 cookie 的跨域请求。所以后端 CORS 配置要么指定固定域名要么关闭 credentials。4.2 构建部署Nginx SpringBoot项目完成后部署方案是最常规的后端打 jar 包mvn clean package -DskipTests java -jar course-platform.jar前端构建静态文件npm run build把dist目录里的文件扔到 Nginx 的html目录配置一个反向代理server { listen 80; server_name your-domain.com; root /usr/share/nginx/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location /files/ { alias /data/course-platform/files/; } location / { try_files $uri $uri/ /index.html; } }注意location /里的try_files这行配置解决的是前端路由刷新 404 的问题。Vue Router 使用 history 模式时你直接访问/admin/users页面Nginx 找不到这个真实路径会返回 404。try_files $uri $uri/ /index.html的意思是先找真实文件找不到就返回 index.html由前端路由接管。关于 SpringBoot 版本话题我再强调一次。我见过有人看到 IDEA 里新建 SpringBoot 项目时没有 3.4.3 那个版本选项就以为是自己 IDEA 出问题了其实不是。IDEA 的 Spring Initializr 选项是和网络元数据同步的有时候只显示 3.x有时候只显示 2.x。你可以直接访问 start.spring.io 网站生成项目压缩包再导入 IDEA。如果你长期用 JDK 8直接选 SpringBoot 2.7.x 就行完全不需要纠结版本太新。进阶一点现在很多团队会要求用 Docker 或 K8s 部署。K8s 部署 SpringBoot 项目最容易被忽略的是容器内存限制。JVM 默认堆内存是物理内存的四分之一如果 Pod 内存限制 512MB而 JVM 自动分配了 1GB一启动就会被杀。解决方式是在启动命令里加-XX:MaxRAMPercentage75.0让 JVM 按容器限制自适应。4.3 版本兼容与第三方 SDK 集成经验项目里如果集成了第三方 SDK版本兼容性问题会特别突出。比如在 Windows 上集成财务类的本地 SDK可能会碰到 DLL 文件加载失败、路径空格、32位 64位不匹配、环境变量没生效等问题。这里我的经验是第三方 SDK 尽量通过独立服务或中间层封装不要让业务代码直接依赖 SDK 原生库。还有第三方登录比如钉钉免登录、企业微信扫码登录都是基于 OAuth2 流程。前端跳转到第三方授权页授权后回调到后端接口后端拿 code 换 access_token再用 token 请求用户信息最后和本地用户绑定签发 JWT。这里的坑是回调地址要写完整的域名SpringBoot 本地调试时回调地址往往只能写公网地址很不方便。可以用内网穿透工具映射一下本地端口联调效率会高很多。如果你的课程平台要接消息队列做异步通知比如 ActiveMQ、MQTT要注意回调的幂等性和死循环问题。我之前遇到过一个 MQTT 监听系统所有设备连接状态的场景监听主题后在回调里又去发布一条消息结果触发新的主题事件又走到这个回调直接形成死循环。解决方式是回调里只记录状态不触发任何会产生新消息的操作如果一定要发消息必须加条件判断或延时处理。5. 常见问题速查与避坑实录5.1 环境安装问题速查下面这张表是我在帮别人排查环境问题里最常遇到的几种直接对照处理问题现象根本原因解决方式启动前端项目提示找不到 node_modules依赖没安装成功或安装目录不完整执行npm install网络不行就换镜像源npm install 报 ELIFECYCLE 错误依赖版本冲突或 Node 版本过新先用nvm use 18切换 Node 版本再重新安装IDEA 找不到 SpringBoot 新版本选项网络数据源没更新直接去 start.spring.io 手动生成再导入SpringBoot 3.x 启动失败JDK 版本低于 17换 SpringBoot 2.7.x JDK 8或升级 JDKVue DevTools 无法识别页面装了但没开开发模式 / 版本不匹配下载对应浏览器最新版本确认页面运行在开发模式环境问题占了这类项目前期 50% 的耗时但反复排查过一次之后你以后搭建任何新项目都会快很多。5.2 业务功能中容易踩的坑文件下载文件名乱码。有些浏览器下载接口返回中文文件名时直接变成“???”原因是 HTTP 响应头不支持非 ASCII 字符。用标准做法String encodedFileName URLEncoder.encode(fileName, UTF-8).replaceAll(\\, %20); response.setHeader(Content-Disposition, attachment; filename*UTF-8 encodedFileName);文件内容返回 Base64。很多初学者会把 PDF 文档读成字节流然后转成 Base64 放到 JSON 里返回前端再转回来。遇到小文件勉强能用遇到大文件内存直接爆掉。正确做法是后端把文件路径返回前端用 a 标签或者 window.open 直接访问文件 URL。前端路由回退后页面状态丢失。我处理过很多次这种问题用keep-alive缓存组件是标准答案但如果页面里有 el-table还需要在onActivated里恢复滚动位置否则页面回来了数据也回来了滚动条却跑到了顶部。权限校验只做前端。前端隐藏按钮只是体验优化后端接口必须做真实校验。学生调接口改成绩、删课程这种越权攻击只要用 Postman 测试一下就能被发现。课程删除时没有处理关联数据。直接删除课程表记录会导致选课记录变成孤儿数据学生端还会显示已选课程打开详情却 404。删除课程最好做成软删除或者在同一事务里把user_course、chapter、lesson都处理掉。5.3 面试版本SpringBoot 快问快答做完这个项目面试官大概率会追问 SpringBoot 的基础。我点几个高频方向SpringBoot 和 Spring 什么关系SpringBoot 基于 Spring通过自动配置和 Starter 机制屏蔽了大量模板配置核心是“约定优于配置”。自动配置是怎么实现的EnableAutoConfiguration会加载spring.factories里注册的AutoConfiguration类配合ConditionalOnClass、ConditionalOnMissingBean等条件注解按需装配。SpringBoot 启动流程是什么从构建 SpringApplication 开始推断应用类型、加载配置、创建环境、准备上下文、刷新上下文、启动内置容器。SpringBoot 和 SpringCloud 区别SpringBoot 是大单体应用的快速开发框架SpringCloud 是微服务治理方案包含注册中心、配置中心、网关、熔断等。SpringBoot 是 SpringCloud 的基础。如何自定义一个 Starter定义自动配置类加上Configuration然后在resources/META-INF下创建一个org.springframework.boot.autoconfigure.AutoConfiguration.imports文件声明自动配置类。这些题目看起来偏原理但都是真实工作中理解框架必须知道的东西。光会用只是第一步能解释为什么才算真的掌握。再分享一下我自己的实操习惯。每次接到课程类平台项目我第一件事不是去看需求文档而是先把视频播放、文件上传、JWT 登录这三个模块做成独立的可运行 Demo确定它们都能跑通再开始写业务代码。因为这三块是课程平台里最容易出问题、也最依赖第三方环境的部分提前解决掉后面业务代码写起来就没有“定时炸弹”了。你如果现在正在做类似的系统我建议你按这个顺序走先跑通视频 m3u8再做登录鉴权再做文件上传最后往这套骨架上填课程、作业、统计这些业务功能。等整个流程跑通后你会发现那些看着复杂的业务功能其实只是不停的 CRUD 而已。做项目最怕的不是不会写代码而是项目跑起来之后才被环境、版本、跨域这些问题反复打断。把这几个前置模块解决了你后面每写一个功能都是顺水推舟。如果你在实操中遇到其他奇奇怪怪的问题也欢迎随时回来交流说不定你踩的坑我也刚好帮他踩过一遍。本文还有配套的精品资源点击获取