Spring Boot+Vue线上学习平台毕设全攻略：从架构到排错

线上学习平台这种选题在毕业设计里出现频率极高几乎是每年都有人问。但绝大多数人拿到源码也只是跑通完事答辩时被问两句就卡壳。这篇博文我尽量把关键环节的为什么、怎么做讲透从项目骨架到数据库设计从JWT鉴权到前端路由守卫再到一套我自己踩过坑才总结出来的排错清单。适合正在准备开题或者马上要答辩的在校学生也适合想快速搭一套前后端分离项目练手的前端/后端入门开发者。1. 项目整体设计与需求拆解1.1 为什么这个选题经久不衰Spring Boot Vue的组合在今天依然是中小型项目的经典搭配尤其在高校毕业设计场景里几乎是统治级的存在。Spring Boot负责后端接口内置Tomcat不用额外部署Servlet容器起步成本低Vue负责前端SPA配合Element UI这类组件库半天时间就能把后台管理的界面搭出来。线上学习平台这个业务场景本身就非常适合教学演示。第一它天然包含最基础的登录、用户、课程、视频、评论这类CRUD操作这是毕业设计检查的核心——增删改查做得完整清晰答辩基本稳了。第二它有一个相对完整的业务流学生选课-在线学习-记录进度-完成测验-查看成绩这个流程串起来之后系统的雏形就具备了比单纯做一个图书管理系统或者学生管理系统有说服力得多。第三如果做得精细一点还能加入权限控制、文件上传、数据统计这类功能作为加分项展示。所以这类项目不是靠花哨的架构取胜而是靠“完整、规范、可演示”打动评委。对你来说最大的价值在于可以基于一份成熟的源码快速理解前后端分离项目的常用套路然后根据自己的想法改造既降低了毕设工作量又能真正学到东西。1.2 标准功能模块拆解一套合格的线上学习平台至少要拆成两个端前台学习端和后台管理端。前台面向学生后台面向管理员和教师。参考众多同类项目的通用设计我习惯把功能拆成如下几个模块用户侧用户注册、登录、个人信息维护。这一步最好接入JWT做无状态鉴权这也是答辩时的高频提问点。课程模块课程分类管理、课程列表、课程详情、课程搜索。后台负责发布课程前台负责展示和查看。视频学习模块视频列表、视频播放、学习进度记录。这一块是这个项目的业务核心能不能演示出“继续学习”的效果就看这里。测试模块题目管理、测验发布、答题提交、分数计算。毕设里不用做得太复杂单选判断就足够撑起业务闭环。公告模块发布公告、展示公告属于典型的占位模块但是有比没有好能体现系统的完整性。后台管理用户管理、课程审核、数据统计用户数、课程数、学习次数用ECharts画两个图表视觉效果很好。这个功能清单对应到数据库里核心表大概就是用户表、课程表、课程分类表、视频表或者章节表、学习记录表、题目表、测验表、成绩表、公告表。如果源码里额外带了评论表也算锦上添花。1.3 项目目录结构怎么读拿到源码后第一步不是急着运行而是先快速浏览目录结构建立整体认知。后端典型结构是src/main/java ├── com.xxx.education │ ├── controller # 接口层 │ ├── service # 业务层 │ ├── mapper # 数据访问层 │ ├── entity # 实体类 │ ├── config # 配置类跨域、拦截器等 │ ├── common # 通用返回结果、异常处理 │ └── utils # 工具类JWT、文件上传等前端典型结构是src ├── api # 接口请求封装 ├── assets # 静态资源 ├── components # 公共组件 ├── router # 路由配置 ├── store # Vuex状态管理 ├── views # 页面视图 │ ├── admin # 后台管理页面 │ └── student # 前台学习页面 └── utils # 请求拦截、token处理等工具看懂这个结构后再去看具体代码你就能很快定位到某个功能对应的文件在哪。比如改登录接口先找controller里的AuthController再找service里的UserServiceImpl最后改mapper里的SQL一条线走到底。2. 技术选型与核心实现思路2.1 为什么是Spring Boot 2.x MyBatis PlusSpring Boot在这类项目里的地位不必多说自动配置、依赖管理、内嵌容器对毕设选手非常友好。但组件选型上有两个容易纠结的地方持久层框架用JPA还是MyBatis Plus鉴权用Session还是JWT。我的建议是MyBatis Plus。原因很实际——代码量少。单表CRUD基本不用写XML继承BaseMapper就能用现成的selectPage、selectById、deleteById。对于课程查询、分页列表这种最常见的接口写起来效率极高。答辩时被问到“怎么实现分页”回答“MyBatis Plus的物理分页插件通过拦截器自动拼接LIMIT语句”这句话一出口就能显示你是认真研究过的。JWT和Session的选择属于典型的“新项目用新方案”场景。传统Session依赖服务器端存储Tomcat下没问题但分布式场景下要考虑Session共享对单体毕设来说倒不是痛点。JWT的优势在于无状态服务端不保存会话客户端每次请求把Token带在Authorization头里就行。实际上毕设项目里JWT能让前后端分离更彻底前端拿Token存LocalStorage后端用拦截器统一验证逻辑清晰答辩也好讲。2.2 数据库表设计说明数据库设计对毕设来说专项权重很高但不需要太复杂。以下是一套比较通用的表设计参考涵盖了主要业务user用户表id、username、passwordBCrypt加密存储、nickname、avatar、role1学生2教师3管理员、status、create_timecourse课程表id、title、cover、category_id、teacher_id、brief、status0未发布1已发布、create_timecourse_category课程分类表id、namevideo视频表或chapter表id、course_id、title、url、duration、sortlearn_record学习记录表id、user_id、video_id、progress、learn_time、update_timequestion题目表id、quiz_id、content、option_a、option_b、option_c、option_d、answer、typequiz测验表id、title、course_id、questions、create_timeexam_record测验成绩表id、user_id、quiz_id、score、create_timeannouncement公告表id、title、content、create_time这里我特别推荐大家重视user表的password字段。明文存密码在毕设项目里偶尔能看到但如果答辩老师翻了源码这种情况会显得很不专业。用Spring Security的BCryptPasswordEncoder或者hutool的BCrypt工具类存哈希值登录时校验代码量只多两行观感完全不一样。2.3 后端核心接口设计后端接口遵循RESTful风格写就好路径用名词复数表示资源方法用HTTP动词表达操作。一个典型的Controller写法如下RestController RequestMapping(/api/course) public class CourseController { Resource private CourseService courseService; GetMapping(/page) public Result getCoursePage(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { return Result.success(courseService.getCoursePage(pageNum, pageSize, keyword)); } GetMapping(/{id}) public Result getCourseDetail(PathVariable Long id) { return Result.success(courseService.getCourseDetail(id)); } PostMapping(/save) public Result saveCourse(RequestBody Course entity) { return Result.success(courseService.saveCourse(entity)); } }注意几个细节统一返回Result对象也就是一个通用JSON结构包含code、message、data三个字段。前端拿到后根据code判断业务是否成功而不是根据HTTP状态码。这样处理的好处是业务异常和HTTP异常分离前端逻辑统一。login接口写在AuthController里路径类似/api/auth/login参数接收DTO对象而不是Map。用DTO能避免前端传多余字段时造成混乱属性校验也能用NotBlank这类注解直接完成。所有需要登录才能访问的接口不要每个方法都手动判断而是在SpringMVC的拦截器里统一处理。拦截器从request头里取token解析失败或不存在就返回401配合跨域配置一起使用这也是一个专门的加分点。拦截器代码很简单核心是注册到WebMvcConfigurer里并做好放行配置比如/api/auth/login和/api/course/page这类公开接口不拦。2.4 前端模块与路由设计前端的基本盘是Vue Router Vuex。路由分两个区域一块是前台页面一块是后台管理。学生端页面包括首页、课程列表、课程详情、视频学习、我的测试、个人中心。管理端包括课程管理、用户管理、测验管理、公告管理、数据统计。路由守卫是必须好好写的地方。都说Vue的鉴权核心是靠路由守卫而不是后端这话不完全对但从用户体验角度说前端确实应该先做一层拦截让未登录用户跳转到登录页。典型写法router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })每个需要登录的页面在meta里声明requiresAuth即可。这里我踩过一个坑一开始只在需要权限的页面加了meta但忘记处理“已登录用户访问登录页”的情况结果用户登录后再访问/login还能看到登录表单体验很怪。后来加了判断如果token已存在就强制跳首页。axios请求封装也一样所有接口请求统一走一个封装函数在请求拦截器里把token放进Header在响应拦截器里全局处理业务code如果code是401说明token过期或无效直接清除本地token然后跳到登录页。这套逻辑写一次后面所有接口自动生效比每个页面单独判断优雅得多也省去大量重复代码。3. 实操过程从源码到本地跑通3.1 环境准备与工具清单开工之前先把环境对齐。不同版本的Node、JDK、MySQL都可能导致项目启动失败建议按以下版本准备JDK 1.8绝大多数Spring Boot 2.x项目都基于这个版本不要轻易上JDK 11或17虽然多数情况下能兼容但个别依赖的老版本cglib、javassist可能出问题。Node 14或16前端项目如果基于Vue2和webpack4Node版本过高会出现OpenSSL错误这是经典问题。MySQL 5.7或8.0注意8.0以上需要把驱动改成com.mysql.cj.jdbc.Driver并且连接串里要加serverTimezone参数。Redis非必需如果源码里带了验证码、Token黑名单这类功能才需要启动它普通的小项目一般不需要。工具方面推荐IDEA后端、VS Code或WebStorm前端、Navicat数据库可视化管理、Postman接口测试。这些没有硬性要求用你自己顺手的就行。3.2 导入数据库与后端配置拿到源码后第一件事是在项目根目录或doc目录下找.sql文件。这个文件就是整个数据库的初始化脚本包含了建库、建表、初始化数据。如果没有sql文件只有application.yml那就需要自己到application.yml里看spring.datasource配置找到数据库名手动创建空库然后用同步表结构的工具生成表。导入SQL的操作用Navicat非常简单新建连接 - 新建数据库注意字符集选utf8mb4 - 右键选择“运行SQL文件” - 选择目标sql文件 - 执行。执行完成后查看表列表确认表都建好了。然后打开后端项目重点检查application.yml里的配置项包括端口默认8080、数据库账号密码、日志级别、文件上传路径等。这里有一个高频坑他人项目的数据库密码肯定和你本地不同开跑之前必须先改成自己的密码。我第一次开发类似项目时就没注意直接点击run结果控制台报Communications link failure愣是查了半小时才想起密码早改了。3.3 启动后端服务和前端页面后端启动步骤比较机械但有几个小细节值得留意如果IDEA自动下载Maven依赖速度很慢可以去配置里把Maven镜像源改成国内仓库这一条能省下一个小时。启动类如Application.java必须放在某个包路径下不要把它直接放在java目录根下否则扫不到Mapper和Service组件。启动成功后看控制台是否打印“Started Application in x.xxx seconds”以及Tomcat on port 8080的日志。前端启动步骤是npm install # 安装依赖确保网络稳定 npm run serve # 启动开发服务器npm install阶段如果报错优先检查node_modules是否存在缓存问题可以先删除再重装。踩过的一个典型坑是项目里package.json锁了旧的依赖版本需要先执行npm install --legacy-peer-deps才能过。Vue2项目常见这个问题Vue3相对少一些。前端启动后浏览器访问本地开发服务器地址一般是localhost:8080或8081如果端口被占用就换个端口或者把后端端口改成8082。后端端口一旦改了要记得同步修改前端api目录下请求baseURL里的端口否则所有请求都会发送错误。3.4 接口联调与登录验证前后端都启动后先用已有的管理员账号通常是admin/admin123之类登录。如果登录成功并跳转后台说明后端接口通、前端路由通、JWT生成和验证逻辑都没问题。再用学生账号测试课程列表和视频学习。如果登录正常但列表加载不出来打开浏览器开发者工具F12的Network面板看具体请求报什么错404说明路径不对检查controller里的RequestMapping和前端api文件里的url是否一致。500说明后端抛异常了切到IDEA控制台看完整堆栈最常见的是数据库字段名匹配问题。CORS错误说明跨域没配置好重点检查后端WebMvcConfigurer里的allowedOriginPatterns配置以及前端是否用了代理。经验之谈联调阶段不要凭感觉猜测先看F12里Preflight请求OPTIONS是否正常。跨域配置好的项目Preflight请求应返回200如果连这个都过不了大概率是拦截器把OPTIONS请求也拦截了。4. 常见问题与排查技巧实录4.1 前端依赖安装大坑Node版本与OpenSSL这是我在实际使用中碰到最多的问题没有之一。前端项目基于webpack4 Vue2时用Node 17以上版本执行npm run serve大概率会报错error:0308010C:digital envelope routines::unsupported。原因很简单Node 17的默认OpenSSLProvider从OpenSSL 1.1升级到了OpenSSL 3.0而webpack4还在用原始的md4哈希算法运行时不认。解决办法有三种更换Node版本。用nvm安装并使用Node 14或16这是最稳妥的方案。不换Node在启动命令前加NODE_OPTIONS--openssl-legacy-provider参数macOS/Linux或cross-env NODE_OPTIONS--openssl-legacy-providerWindows。把webpack4升级到webpack5但涉及一堆插件兼容性改动代价比较大毕设阶段不建议。顺便说一句很多老项目遇到这种版本问题第一反应是重装依赖或者删node_modules但真正的.rootcaus往往在于运行环境不在依赖本身。排查问题一定要先从环境入手。4.2 后端启动失败排查顺序后端启动报错时不要一上来就看代码按顺序排查第一步看数据库状态。MySQL服务是否启动、端口3306是否被占用、账号密码对不对、权限够不够远程连接是否被拒。这一步能过滤掉一半的问题。第二步看端口冲突。8080端口如果被其他进程占用报错会是Port 8080 was already in use。解决办法是换端口或者在IDEA配置里改VM options里的server.port最直接的是改application.yml。第三步看依赖是否完整。Maven本地仓库里是否真的下载了全部jar包某些私服依赖如果没有asnapshot版本会报Could not find artifact。此时需要检查idEstoE配置里的镜像源。最后才是看代码错误。大部分代码层面报错都会给出清晰的堆栈行号定位到具体文件就能解决Spring Boot的错误信息已经比早期的框架友好太多了。4.3 跨域问题标准解法前后端分离项目遇到跨域几乎是必经的一课。后端解决方法是写一个WebMvcConfigurer配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }注意几个细节allowedOrigins在Spring Boot 2.4以上的版本中推荐改用allowedOriginPatterns因为前者对allowCredentials有兼容性限制。如果配置了拦截器不要拦截OPTIONS请求。跨域预检请求走OPTIONS方法如果被拦截器拦了整个跨域流程直接断掉。常见的表现是F12里看到Preflight请求返回401或404而实际接口却什么都没发出去。如果用Spring Security还需要在SecurityConfig里放行OPTIONS请求的匿名访问不然双重拦截很折磨人。4.4 文件上传路径的坑视频封面、用户头像这类上传功能在毕设里很常见。这里有一个经典坑开发时文件上传到本地路径没问题但演示时项目换了个电脑路径失效图片全部加载不出来。后端在保存上传文件时不要硬编码绝对路径比如D:/upload/这类一旦换环境路径就崩。更好的做法是配置一个相对路径比如在application.yml里定义upload: path: ./upload/然后写一个静态资源映射配置把/upload/**映射到本地磁盘路径。这样源码拿到任何电脑上都能直接用也比较贴合真实项目的部署习惯。之前有同学直接把文件Base64存数据库虽然兼容性好但数据表会迅速膨胀答辩时也不好解释不太推荐。5. 答辩准备与二次开发建议5.1 前端路由守卫与Token刷新上面代码里我提到路由守卫的基本用法但这里再补充一个更具体的问题Token过期后怎么处理。很多毕设项目里最简单粗暴的做法是登录后Token存LocalStorage过期了用户就再登录一次没有自动刷新机制。这个做法本身没有错但答辩被问到“Token失效怎么办”就会卡壳。可以在项目里做一个简单的Token过期自动跳转// 响应拦截器 instance.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) localStorage.removeItem(userInfo) this.$router.push(/login) this.$message.error(登录状态已过期请重新登录) return Promise.reject(new Error(401)) } return res }, error { return Promise.reject(error) } )这段代码的价值不在于实现多复杂的效果而在于展示出你对“会话状态”这件事有思考。答辩老师听到你主动讲“过期自动清理token并跳转登录页”加分效果比回答“调用后端接口前手动检查token是否存在”要好得多。5.2 数据统计模块的图表实现在后台管理首页做一个数据统计看板是性价比极高的加分项。用ECharts展示用户注册趋势、课程分类分布、学习次数Top5课程占代码量不大但视觉效果很能打。接口设计上可以新增一个统计Controller用SQL的GROUP BY聚合数据示例GetMapping(/statistics/user-register-trend) public Result userRegisterTrend(RequestParam Integer days) { return Result.success(statisticsService.getUserRegisterTrend(days)); }对应的SQL可以写成SELECT DATE_FORMAT(create_time, %Y-%m-%d) AS day, COUNT(*) AS count FROM user WHERE create_time DATE_SUB(NOW(), INTERVAL #{days} DAY) GROUP BY day前端用ECharts的折线图和饼图渲染两个div模板网上到处都是但展示效果确实能让整个系统看起来完整许多。如果时间充裕这个模块值得加。5.3 如何准备毕业答辩的演示流程答辩演示建议按下面这条线来走流程完整且逻辑自洽先展示首页介绍系统定位和面向用户。注册一个新学生账号走一遍注册流程。学生登录选课播放一个视频展示学习进度更新这个环节重点讲“继续学习”的业务闭环。进入测验模块做一次测验提交后展示成绩。切到后台admin账号展示用户管理、课程管理、数据统计看板。最后展示核心代码挑三个地方讲JWT登录鉴权、学习进度记录、数据统计聚合查询。答辩前必须自己完整走至少三遍演示尤其要避免这几种翻车打开页面时白屏多为前端依赖或路由问题、点播放按钮时视频不加载多为上传路径失效、查询列表时接口报500多为数据库连接失败。出现一次就会影响整体印象宁可提前半小时进考场模拟一遍也不要裸奔上台。5.4 二次扩展的三个方向如果做完基础功能还有富余时间可以从下面三个方向里选一个做扩展评论与评分功能。给课程增加评价机制涉及一对多关联查询能体现关联表设计能力。在线笔记功能。学生在看视频时记录学习笔记这属于典型的多表业务关联涉及用户、课程、视频、笔记四张表。权限精细化。引入Spring Security替代手写拦截器做到按钮级权限控制这个方向适合对框架有一定吃透想上难度的同学。这三个方向都不会破坏原有项目结构只是在现有模块上增量开发适合打磨加分。最后再分享一个小技巧整个项目跑通之后建议大家做的第一件事不是继续加功能而是把项目的接口清单梳理成一份接口文档。项目级别不需要用Swagger自动生成也不用引入过多依赖直接在项目根目录写一个markdown列出每个接口的路径、请求方式、参数、返回结果。这份文档不仅方便你自己调试前端答辩时老师追问某个业务是怎么串起来的你翻开文档就能准确回答哪个Controller哪个方法对应哪个功能逻辑清晰印象分会好很多。线上学习平台这个项目谈不上什么高深技术但胜在业务链路完整、层次清晰把这套东西吃透并讲清楚其实就达到了毕业设计训练的初衷。