SpringBoot Vue 的在线互动学习网站这个组合在毕业设计里可以说是常青树了。我当初带过的学生里十个有六七个选的是类似方向剩下几个在做商城或者管理系统。为什么这个选题这么吃香说白了它踩中了两个关键点一是前后端分离架构是目前企业级开发的主流形态做完这套东西你简历上写“熟悉前后端分离开发流程”是有底气撑住的二是“在线学习”这个场景自带互动属性有用户、有课程、有评论、有收藏功能点足够丰富论文和答辩都有得说。这篇博文就基于这个标题把整个项目的完整拆解讲透了从技术选型逻辑、数据库设计、核心功能实现到部署实操、论文结构、答辩话术甚至那些源码里和部署文档里不会告诉你的坑我都会一并写出来。这篇文章适合两类人一类是正准备拿这个题目做毕业设计的同学另一类是想把前后端分离项目完整过一遍、积累真实工程经验的开发者。不管你是哪一类照着这篇文章的思路走一遍收获绝对比你自己闷头敲代码要多得多。1. 整体设计与技术选型背后的逻辑1.1 为什么是 SpringBoot Vue MySQL 这个组合先聊技术选型。很多同学做毕设选技术栈的时候是跟风选的但如果你只是跟风答辩时评委一问“你为什么选这个组合”你就只能憋出一句“因为网上教程多”那印象分就没了。你得能说出这个组合在你的场景里解决了什么问题。先说SpringBoot。它是目前Java后端开发的事实标准内置Tomcat省掉了大量XML配置一个main方法就能启动一个Web应用。对于在线学习网站这种典型的CRUD密集型业务SpringBoot的声明式编程风格——Controller、Service、Mapper三层结构——配合MyBatis或MyBatis-Plus能把开发效率拉满。更重要的是SpringBoot生态成熟Spring Security做认证、Redis做缓存如果你扩展了、Swagger生成接口文档这些都是一条龙配套的。毕设选它意味着你从框架层面就已经站在一个工业级项目的肩膀上。再说Vue。Vue在国内前端圈的普及度比React要高一个身位。在浏览器中直接引入vue.js或者用Vue CLI现在更推荐Vite初始化项目就行。Vue的核心优势是组件化和响应式数据绑定。组件化意味着你可以在线学习网站里的导航栏、课程卡片、评论列表抽成独立组件复用性高响应式数据绑定意味着你操作数据时页面视图自动更新你不用手动操作DOM。配上Element UI或Element Plus这套组件库做出来的界面即便只是默认皮肤也远比手写CSS精致。很多同学担心自己有生之年写不出好看的页面用组件库是绕开这一短板最现实的办法。最后说MySQL。学习类网站的数据特征非常清晰用户表、课程表、章节表、评论表、收藏表、学习记录表这些都是结构化数据而且量级在毕设场景下也不会太大。MySQL事务ACID特性保证了数据一致性InnoDB引擎支持行级锁和事务对于评论点赞、收藏这些并发操作来说可靠性是有保障的。关键一点MySQL是免费的安装配置是傻瓜级的出了问题网上一搜全是解决方案这对新手来说是莫大的安全感。这套组合的另一个隐形优势是它天然就是一份标准的“前后端分离”课设。前端工程用npm管理依赖跑在8080端口或自定义端口后端工程用Maven管理依赖跑在8081端口两边通过RESTful API用JSON数据格式通信。这个架构本身就是答辩时最值得讲的话题后面我会细说。1.2 这个项目解决了什么问题功能边界在哪一个在线互动学习网站表面上看起来就是“把课程视频和图文资料放到网页上让用户看”但如果你把需求分层想一想它其实牵扯到三个维度的设计用户维度普通用户需要注册、登录、浏览课程、搜索课程、查看课程详情、发表评论、收藏课程、记录学习进度。这些是基础行为缺一个都不成体系。内容维度课程不是一条简单的记录它有分类、有难度等级、有章节结构章节里可能还有课时和资料附件。如果只有一张课程表那这个平台根本没有“教学”的概念所以课程结构的表设计是关键。管理员还需要对课程进行上下架、审核对用户进行管理。互动维度这个点是最容易出彩的也是标题里“互动”二字的落点。评论功能是最基础的一层进一步可以拆成“对课程的评论”和“对课程的评分”再进一步可以做收藏夹、学习笔记、问答答疑。每一层交互功能都对应着一套数据表和接口设计也对应着你论文里的一节。毕设并不是做得越多越好。你的时间有限答辩评委也不是看你功能堆了多少。我的建议是把“用户-课程-评论-收藏-学习记录”这条主链路做到闭环再加上管理员后台的“课程管理-用户管理-评论管理”这三件事就已经足够丰满。如果是学有余力的同学我再推荐加一个扩展模块教师端或讲师端让老师能上传课程、查看学员学习进度。一旦加了教师端你的系统就从“单角色”变成了“多角色”权限管理的复杂度上去了论文的含金量也会高一个档次。1.3 开发前必须想清楚的几个问题在真正动手之前有几件事没想清楚后面返工的概率非常大第一个问题移动端要不要适配很多同学做到一半才发现页面宽度一拉就变形然后急急忙忙补布局。我的建议是如果你时间紧张只做桌面端的响应式适配——用Flex或Grid布局保证在常见的1366px和1920px屏上好看就行不要强行追求手机端完美。毕设答辩用的都是投影仪或大屏没人拿手机看你网页。当然如果导师明确要求移动端也要能用那就在Vue项目里引入vw/vh或者rem适配方案这个提前规划好。第二个问题权限控制的粒度。普通用户和管理员是不是要分开登录入口如果共用一套登录接口那前端怎么区分展示后端接口要不要做权限校验很多毕设项目把权限做成“前端隐藏按钮”这是特别危险的——真正的权限必须在后端拦截器或Spring Security过滤器里做。原因是前端的隐藏只是UI层面的事情懂行的人通过浏览器开发者工具直接就能把请求发出来。你的接口必须做到非管理员的token访问管理接口直接返回403。第三个问题数据初始化。数据库表结构建好了但你不能空着跑项目啊。前期一定要写一套测试数据或SQL脚本至少包含5个以上的课程分类、每个分类下3-5门课程、每门课程3-5个章节还要有一批用户和评论。这套数据是给前端开发联调用的也是给论文截图准备的。没有数据支撑的截图空荡荡的页面非常没说服力。第四个问题命名规范。从项目名、包名到数据库表名一定要统一。比如类名用驼峰、数据库字段用下划线接口路径用复数名词加动词语义/api/courses, POST /api/courses/{id}/comments。这些细节看起来不起眼但在答辩时一个规范的代码库会让评委第一时间对你有好感。2. 数据库设计与核心表结构拆解2.1 从业务需求推导表结构的方法把表结构设计好是后端开发的一切前提。很多同学拿到题目就急着敲代码结果做到一半发现少了一张表或者表关系设计不合理再回头改代码那才叫痛不欲生。设计表结构的正确姿势是从业务对象出发先画出一张“实体关系图”再逐一对实体建表。咱们这个项目里核心实体有哪些用户、课程分类、课程、章节、课时或学习内容、评论、收藏、学习记录。这八个实体基本上把你这个网站所有要存的数据都覆盖了。实体之间的关系也要理清楚一个用户可以对多门课程收藏一门课程可以被多个用户收藏这是多对多关系需要通过中间表favorite来维护。一个用户可以对多门课程评论一门课程下面有多个评论这是一对多。注意评论表里还得保留一个parent_id字段用来做楼中楼的回复功能否则你就做不了“互动”的感觉。课程和分类是N对1关系一个分类下挂很多课程但一门课程原则上还是属于一个主分类。课程和章节是1对多关系章节和课时也是1对多。如果课时里还包含附件下载比如课件PDF那课时表里要预留file_url字段。2.2 关键表字段设计的实操细节我直接把你最关心的几张表的字段设计思路过一遍你照着这个思路去建表就不会有大漏洞。用户表userid主键、username用户名唯一索引、password加密后的密码用BCrypt、nickname昵称展示用、avatar头像URL、email邮箱可用于找回密码、role角色用tinyint存0是普通用户1是管理员、status状态0禁用1启用、create_time、update_time。这里要注意密码绝不能明文存一定是BCrypt加密后的哈希值role也不用建单独的表就一个字段搞定毕设层级别把权限模型搞得太复杂。课程分类表course_categoryid、name、sort_order排序权重数字越小越靠前、parent_id如果只做一级分类就留0如果做二级分类就自关联、create_time。很多同学忽略sort_order这个字段结果做后台的时候发现分类顺序没法控制只能按id排很难受。加一个排序字段是后台管理系统最基础的设计习惯。课程表courseid、category_id外键关联分类表、title课程标题、subtitle副标题或一句话简介、cover_url封面图、intro课程介绍长文本、difficulty难度用TINYINT存1入门2进阶3高级、price价格如果做免费平台就恒为0、teacher_name授课人名称如果没做教师表就先存字符串、status0未上架1已上架、view_count浏览量冗余字段每次请求课程详情时这里加1、create_time、update_time。这里课堂重点说说view_count这个冗余字段它不参与业务核心逻辑但能提升查询性能——如果每次都去单独统计一个课程浏览量的表那就会很麻烦直接在课程主表上加一个计数是最简单的做法。课程章节表course_chapterid、course_id外键、title、sort_order。课程和章节的关系很简单也很固定不做太多解释。唯一要注意的是批量插入章节数据时要保证sort_order是按顺序的不然前端展示的章节顺序会乱。评论表commentid、course_id、user_id、content、rating评分1-5你可以让它只有打分或只有评论但既然做了互动就别浪费让用户既能评文字又能打分、parent_id回复哪条评论0表示顶级评论、reply_count该评论下有多少回复的冗余字段、create_time。注意一点如果你在评论里做了“点赞”功能建议不要单独建一张点赞表而是在评论表加一个like_count字段做记数毕设讲清楚这个取舍就行。收藏表favoriteid、user_id、course_id、create_time其中user_id course_id要做唯一索引。唯一的含义是同一个用户对同一门课程只能收藏一次再次点击就是取消收藏。很多同学忘了加唯一索引结果一个用户能对同一门课程收藏几十条逻辑混乱不说前端做“是否已收藏”的判断也会很麻烦。学习记录表learning_recordid、user_id、course_id、last_chapter_id、progress学到第几章/总章节数可以存一个小数比如0.33代表学了三分之一、update_time。这张表就是“继续学习”功能的实现基础用户点开课程后要么插入一条新记录要么更新已有记录的last_chapter_id和时间。这几张表建好后你用Navicat或者MySQL Workbench的建模工具把它们的关系画出来截图放论文里就是一张漂亮的数据模型图。2.3 开发环境配置与初始化数据库设计好之后就是后端项目搭环境。我建议你严格按照下面这个顺序来不然会有乱七八糟的环境依赖问题第一步安装JDK至少JDK 8建议JDK 11或17配置好JAVA_HOME环境变量。命令行验证一下java -version。第二步安装MySQL建议5.7或8.0设置好root密码把MySQL服务启动。然后用命令行或Navicat执行你的建库语句CREATE DATABASE online_learning DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci。注意这里用utf8mb4而不是utf8因为utf8mb4才能完整支持emoji表情——评论里如果有表情utf8会报错。第三步用IDEA打开后端源码修改application.yml或application.properties配置文件把数据库的url、username、password改成你自己的然后在IDEA里运行DemoApplication类看到Spring Boot启动成功的日志说明后端已经跑起来了。第四步安装Node.js建议14以上版本用npm或者yarn安装前端依赖一般在项目目录scripts里可以看到具体命令。依赖装完之后运行npm run serve打开浏览器访问一下开发服务器的地址Vue项目就能起来。这样前后端并行跑着你在浏览器看到的其实只是前端展示内容前端再通过接口拿后端的数据。这一步跑通了后续的开发都是在验证接口的业务逻辑。3. 核心功能实现从登录到互动闭环3.1 用户认证与权限控制的完整方案用户的注册登录是整个系统最基础也最容易写崩的模块。我先说推荐方案再说坑。推荐用Spring Security JWT做无状态认证。为什么不用传统的Session因为前后端分离后前端可能部署在和后端不同的服务器上而且你还可能做多端比如移动端和Web端同时访问Session跨域跨端口处理起来很麻烦。JWT的思想是用户登录成功后端生成一个加密的token字符串返回给前端前端每次请求都在请求头里带上Authorization: Bearer xxx后端解析这个token就知道是谁在请求。具体在后端实现你要写三个核心类一个是JwtUtil负责生成token和解析token。生成时把用户id和角色放进token的claims里再设置过期时间建议24小时。解析时如果token过期或签名对不上直接抛异常。一个是JwtAuthenticationFilter继承OncePerRequestFilter在请求到达Controller之前拦截先检查请求头里的token如果有就解析解析成功就把用户信息放进Spring Security的SecurityContextHolder里后面在Controller里直接通过AuthenticationPrincipal拿到当前用户。一个是SecurityConfig继承WebSecurityConfigurerAdapterSpring Boot 2.7之前或者用SecurityFilterChain的写法2.7之后推荐在里面配置哪些接口放行、哪些接口需要认证。比如登录接口、注册接口、课程列表接口、课程详情接口这些是需要公开的收藏、评论、添加课程管理员这些是必须认证的。权限上可以用PreAuthorize(hasRole(ADMIN))这种注解加在管理端接口上保证只有管理员才能操作。谷歌搜索一下你会看到无数种写法但核心思想都一样认证是“你是谁”授权是“你能干什么”两个环节缺一不可。前端这边常用的做法是配合Vue Router的导航守卫做路由拦截。用户在登录页提交表单拿到token后存到localStorage再往Vuex或Pinia里放一份。每次页面跳转前在router.beforeEach里检查有没有token没有就重定向到登录页。按钮级别的权限再通过v-if或自定义指令判断用户角色。这里有一个非常多人踩的坑token失效后前端没有任何提示接口返回401页面白屏或接口报错。好的做法是在Axios的响应拦截器里统一处理HTTP状态码如果是401就清除本地token并跳回登录页如果是403就弹出“没有权限访问”的提示。3.2 课程浏览与搜索让内容可以被高效找到课程列表页是整个网站的流量入口用户体验好不好很大程度上取决于列表页的实现细节。课程列表接口的设计我推荐使用GET /api/courses支持这几个查询参数keyword关键词模糊匹配课程标题和副标题、categoryId分类筛选、difficulty难度筛选、pageNum和pageSize分页。后端用MyBatis-Plus的LambdaQueryWrapper链式调用like、eq、between这些方法组合条件分页就用IPage接口。前端用Element Plus的分页组件el-pagination页码变化时重新调用接口把数据重新渲染。如果你想让列表页长得更专业一点还可以加一个“排序”功能按最新、最热浏览量降序、评分最高平均评分降序。这个排序逻辑在后端就是orderBy子句的动态拼接前端传一个sort字段即可。课程详情页是最能体现开发功力的一页。上面是课程封面、标题、难度标签、简介下面是章节树和评论列表再往下是“收藏课程”和“开始学习”两个按钮。详情页的数据来源主要是两个接口一个是GET /api/courses/{id}返回课程基本信息另一个是GET /api/courses/{id}/chapters返回章节列表。评论数据单独走GET /api/courses/{id}/comments这是为了前端可以异步加载不用等待全部数据渲染完毕。有一个需要讨论的细节课程详情接口是否要在后端同时返回“当前用户是否已收藏”我觉得要否则前端拿到课程信息后还得额外交互一次才能知道收藏按钮该显示什么状态。这个做法在后端实现上很简单——在Controller里从SecurityContext中拿当前用户id然后查收藏表里有没有该用户对该课程的记录有就返回true。3.3 互动模块评论、收藏与学习记录互动模块是这个项目的灵魂。你光做浏览课程评委看着就觉得很乏味一旦有了评论和收藏这个系统才真正称得上“平台”。评论模块的实现要点发送评论接口是POST /api/courses/{courseId}/comments请求体里是{content, rating}后端通过token拿到用户id再存评论表。注意两点第一要对content做长度校验比如限制在10到500字之间同时要过滤掉空白字符第二如果启用了敏感词过滤可以在这里做替换。回复评论时前端输入框的placeholder动态显示“回复某某”提交时请求体里带上parentId字段。顶级评论列表的分页也很重要使用时间倒序每页10条通过“加载更多”或分页组件翻页。每一条评论下面如果它有回复是嵌套展示还是点击“展开”再展示这个看你的时间取舍功能上建议做到一级展开即可也就是只显示直接回复。收藏模块的逻辑更简单POST /api/courses/{courseId}/favorite收藏DELETE /api/courses/{courseId}/favorite取消收藏GET /api/user/favorites查当前用户收藏列表。前端的收藏按钮状态就三种未收藏显示图标为空心、已收藏显示实心并变红、正在请求中禁用防止重复点击很重要不然用户连点两次会发出两个请求数据就乱了。学习记录模块是很多同学容易忽略但实际很有亮点的一块。它的交互逻辑是用户点进某一章节开始学习前端跳转到学习页同时发送POST /api/courses/{courseId}/records请求后端判断这个用户之前有没有这条学习记录如果没有就插入lastChapterId是当前章节如果有就更新lastChapterId和progress。下次用户进入课程列表页“继续学习”按钮就能直接定位到他上次看到的那一章节。实现并不复杂但如果你在论文里把“学习进度追踪”单独写成一个小节答辩老师会觉得这个系统的用户粘性设计是做过的。3.4 后台管理把内容的掌控权交给管理员后台管理和前台是两个世界但它和前台共用同一套后端接口。后台的核心功能是四个课程管理、分类管理、用户管理、评论管理。课程管理管理员需要能新增课程、编辑课程、上下架课程。新增课程时封面图要上传。图片上传怎么做我建议在后端单独写一个UploadController接收MultipartFile参数把文件保存到服务器的指定目录比如/upload然后返回文件的访问URL可能是一个带主机名的完整URL。后端保存文件时要注意文件名不能直接用原始文件名因为可能会重复。我用UUID或时间戳重命名比如20231212_093212_abcd.jpg。同时为了防止存恶意文件要对文件后缀做白名单校验只允许.jpg、.png、.gif、.pdf、.mp4这些常见格式。前端使用Element Plus的el-upload组件对接。分类管理就是最简单的增删改查分类列表用sortOrder字段排序。用户管理主要就是查看用户列表、禁用/启用某个用户把status置0后该用户下次登录直接提示账号被封禁。评论管理则是查看所有评论对违规评论进行删除或隐藏。管理员和普通用户共用登录接口后端通过role字段区分。前端通过Vue Router的meta信息设置哪些路由只有管理员可以进入同时在路由守卫里判断。但这只是UI层的限制后端接口仍然必须校验权限这是我在前面已经强调过的。4. 部署上线从本地跑通到云端可用4.1 后端打包与服务器部署毕设做完要部署上线可是很多同学在本地开发环境下跑得好好的一到部署就各种翻车。我先把标准流程写在这里你按步骤操作就不会出大问题。后端打包在IDEA右侧的Maven面板里执行clean然后package会在target目录下生成一个可执行的jar文件比如在线学习网站-0.0.1-SNAPSHOT.jar。如果你的项目分离了不同的配置环境打包前确认application.yml里当前profile是生产环境。常见的问题是有些同学把本地的数据库密码写死在配置里服务器上就连接失败。建议你用环境变量方式配置数据库比如spring.datasource.username${DB_USERNAME}服务器上通过环境变量或启动命令传入。服务器基础环境如果你用的是云服务器Linux系统推荐用宝塔面板或手动安装JDK、MySQL、Nginx。JDK安装不再赘述MySQL要设置utf8mb4并创建一个新的数据库用户不要直接用root——安全习惯要养成。数据库导出的方式很简单用Navicat的转储SQL文件功能导出整个数据库的结构和数据然后在服务器上用source命令导入。启动后端服务jar包上传到服务器后执行nohup java -jar 你的项目.jar app.log 21 。这条命令的作用是把项目在后台运行日志输出到app.log文件。你再用cat app.log查看启动日志等到“Started application in X seconds”出现就说明启动成功了。在这里提醒一句云服务器的安全组或防火墙一定要放行你后端的端口比如8080否则外面连不上。同样的MySQL端口3306如果只允许本地访问就不要开放到公网减少安全隐患。4.2 前端打包与Nginx配置前端打包前一定要先改一个文件项目里关于接口地址的配置通常在一个叫.env.production或request.js/axios.js的文件里。把baseURL从http://localhost:8081改成你的服务器公网IP或域名加上后端端口比如http://你的IP:8081/api。改完执行npm run build会在dist目录生成一堆静态文件HTML、JS、CSS。把dist整个目录放到服务器上比如/usr/share/nginx/html/online-learning。然后配置Nginx新建一个server块将根目录指向这个文件夹配置反向代理把API请求转发到后端端口里。核心配置我已经整理成下面这个模板了。server { listen 80; server_name 你的域名或IP; # 前端页面 root /usr/share/nginx/html/online-learning; index index.html; # 前端路由history模式必须配置否则刷新404 location / { try_files $uri $uri/ /index.html; } # API反向代理 location /api/ { proxy_pass http://127.0.0.1:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }如果你用history模式刷新404多半就是没配try_files这段。如果你的资源路径出现404可能就是前端静态资源的绝对路径问题——对应的build配置里base需要改成./。4.3 部署踩坑实录我遇到的五件糟心事讲几个我帮学生部署时真实遇到过的问题你排查时可以少走弯路。第一个图片上传后无法访问。图片保存到了服务器但浏览器输入图片地址直接404。查了半天发现是Nginx没有为图片目录配置访问规则。在server块里加一行location /upload/ { alias /usr/share/nginx/html/upload/; } 就能访问了。或者更简单直接把上传目录也放到Nginx的root下面。第二个跨域问题在部署后依然存在。本地开发时前端用Vite的proxy代理解决跨域部署后如果前端页面和后端端口不在同一个域名或端口下浏览器就会拦截。你用Nginx反向代理把/api/路径转发到后端对浏览器来说所有请求都是同一个域名跨域问题直接消除。如果部署的时候还遇到CORS报错大概率是你后端没有加全局跨域配置或者Nginx的proxy_pass写错了路径。第三个云服务器上MySQL连接Too Many Connections。这是默认max_connections太小或者你的连接池配置不健康。排查时先把max_connections调大再看代码里有没有连接泄漏——检查每个使用数据库连接的地方是不是没有关闭。Spring Boot的HikariCP默认配置一般不会出问题但如果你手动写了奇怪的数据源配置就得仔细看了。第四个前端部署后CSS正常但JS报错或者整个页面白屏。百分百是访问路径有问题。多半情况是历史遗留写成绝对路径了或者是打包工具生成的JS包路径不对。把Vue项目的publicPath改成./再重新打包就行。第五个域名访问时Nginx返回403 Forbidden。先检查root目录是不是存在再确认Nginx对目录的读权限是否正常有些Linux系统的别家目录权限默认是禁止访问的。5. 论文结构与答辩准备的实战建议5.1 论文目录怎么排才显得有水平毕设论文写得好不好第一步看目录。很多同学把论文写成软件说明书——第一章介绍背景第二章列技术栈第三章贴代码第四章放截图完事。这种论文看起来就是流水账评委随便翻翻就失去了兴趣。我推荐你按照“系统分析—系统设计—系统实现—系统测试”这条软件工程主线来组织内容把重点放在前两步你的导师就会觉得你是真的做过功课的。具体目录结构可以参考这样的思路摘要概括你做了什么用了什么技术解决什么问题取得什么成果 第一章 绪论背景与意义、国内外研究现状、主要工作内容 第二章 相关技术介绍SpringBoot、Vue、MySQL、前后端分离架构每项技术写它是什么、为什么选它、在你项目里的具体作用 第三章 系统需求分析功能需求、用例分析、非功能需求性能、安全、易用性 第四章 系统总体设计架构设计画一张前后端交互图、模块划分、数据库设计E-R图加建表语句说明 第五章 系统详细设计与实现逐模块讲解核心功能的实现方案配合部分关键代码、时序图、界面截图 第六章 系统测试测试方案、功能测试用例表、测试结果分析 第七章 总结与展望总结你做了什么指出不足给出未来的改进方向关键是第四章和第五章这两章占了论文大半的篇幅也是评委重点看的章节。不要大段大段地贴代码而是把代码里最核心的逻辑用文字讲清楚再配合一张截图佐证——论文是“讲为什么”的不是“抄代码”的。5.2 答辩时评委最爱问的五个问题及应答思路答辩台上的二十分钟比你写一个月代码还紧张。评委一般不会逐行看你的代码他们其实就是想弄明白三件事这个东西是你做的吗你理解你的系统吗遇到问题你有解决思路吗第一个问题“你这个系统用了前后端分离架构那前后端是怎么通信的”标准的答法是前端通过Axios发送HTTP请求到后端RESTful API接口后端返回JSON数据前端拿到数据后动态渲染页面。可以再补一句API的设计遵循RESTful风格资源用名词表示操作通过HTTP方法区分GET查、POST增、PUT改、DELETE删。这个回答就显得很有体系。第二个问题“如果用户数量暴涨你觉得你的系统哪里会最先扛不住”这个问题特别能区分真做过和背过的人。从你的实际系统出发最先扛不住的大概率是课程列表接口和课程详情接口——每次打开都全表查一遍。你的改进方向是可以加Redis缓存课程列表数据或者对数据库表加索引。评委欣赏的是你知道瓶颈在哪而不是背出来一连串名词。第三个问题“你的密码是怎么存储的安全吗”你直接说“用BCrypt加密存储BCrypt是一个哈希算法相同密码因为加盐不同会生成不同的哈希值即使数据库泄露也无法破解回明文”——这就完全回答到位了。第四个问题“评论接口如果用Postman直接调用没有登录也能用吗”这个问题的背后是权限意识。你直接说后端用Spring Security和JWT做了拦截所有评论接口都需要在请求头携带有效的token拦截器没有解析到合法token会直接返回401。如果能做到这一步说明你的系统不是摆设。第五个问题“你的这个部署文档里Nginx的作用是什么”答法是Nginx是高性能的HTTP服务器和反向代理服务器在项目里干两件事一是托管前端打包后的静态文件二是把/api路径的请求转发到后端服务。本质上就是中台调度。这正好是你部署实操给你涨的经验分。5.3 附录、部署文档与演示视频的准备细节论文的附录部分要包含启动部署说明也就是部署文档的主要步骤。注意不要写得太简陋至少要有环境要求JDK版本、Node版本、MySQL版本、数据库初始化步骤导入哪个SQL文件、后端启动步骤改什么配置、跑哪条命令、前端启动步骤npm install、npm run serve或build。这一段不能省它证明你的项目是可复现的。如果你做的是源码包建议把目录结构写清楚前端在哪个文件夹、后端在哪个文件夹、SQL文件在哪、文档在哪。有经验的用户拿到包后先看README你的README写得越清晰项目被认可的程度就越高。关于演示视频这个容易被忽视但它非常加分。录一段3到5分钟的视频按“用户注册登录—浏览课程—搜索课程—查看课程详情—评论收藏—学习记录—管理员后台管理课程”这个顺序走一遍。录的时候把数据库操作和生产日志的细节也带上比如在截屏里显示后端控制台日志和数据库表数据变化这样更显得真实可信。有条件的话把页面录制分辨率调整好别录出那种模糊的窗口观感很重要。6. 项目的进一步完善思路与个人体会6.1 从毕设到作品集还可以加什么如果时间允许在这个基础上做两个小增量你的项目就能从“普通毕设”升级到“简历亮点”。第一个增量是Redis缓存。把首页课程列表和课程详情缓存起来设置过期时间比如30分钟命中缓存直接返回没命中再查库并回填缓存。这份改动不需要多少代码量但你在答辩时可以说“我用Redis降低数据库读压力”这是面试官在初级岗位里非常希望听到的实践。第二个增量是WebSocket在线聊天或实时通知。学习网站里如果加一个同学之间交流的轻量聊天室或者当有人回复你评论时给你推送通知整个系统的实时互动属性一下子就出来了。SpringBoot集成WebSocket并不复杂Vue端用一个WebSocket客户端连接即可。这个优化放在“展望”里即便不做完在论文里写清楚思路也是加分的。第三个增量是视频播放和进度上报。目前很多毕设的做法是视频用iframe嵌入或直接放HTML5 video标签学习进度靠按钮来记录。你要是能结合一个和事件上报的思路页面里监听video的timeupdate事件定期把播放进度同步到后端那这个系统就非常像一个真正的在线教育产品了。6.2 源码和部署文档里那些“天知地知你不知”的坑源码里常有几处地方是学生在做完后告诉我他们踩过坑的。我在这里集中说一遍数据库时区问题。MySQL连接串上如果你不加serverTimezoneAsia/Shanghai部署在服务器上经常会遇到报错“The server time zone value CST is unrecognized”或者时间全是错的。加上这个参数就解决了。前后端的时间格式不统一。Java后端默认返回的时间格式可能是“2024-05-01T10:00:00”而前端要显示成“2024-05-01 10:00”在application.yml里配一下jackson的date-format或者每个日期字段上加JsonFormat注解就统一了。IDEA热部署问题。改完代码要重启生效既浪费时间又容易让人烦。加一个spring-boot-devtools依赖改完代码自动重启开发体验提升明显。但是注意这块依赖不需要打包到生产环境所以scope要设置成runtime或者只在开发环境用。Vue项目里的eslint校验。如果源码里开了严格模式很容易出现“多个空格”“强制分号”之类的报错。实在不行可以在vue.config.js里把lintOnSave关掉先保证能跑起来再说。6.3 我个人的一个设计思考关于正常开发中如何留出扩展余地最后分享一个我反复给学生强调的习惯不要把所有功能都写在Controller里。很多新手拿到需求后直接在Controller里写Service的业务逻辑1000行的Controller都有。过两天加个需求发现代码根本没法维护项目也崩溃了。即使是一个毕业设计项目我也建议你强制自己遵守这个分层思想Controller只做参数接收和数据返回业务逻辑全部下沉到Service中数据访问只发生在Mapper里。同样地前端组件里也不要堆大量逻辑抽到api目录和utils目录。命名可以简洁但结构边界要清晰。这个习惯短期看不见什么好处但当你写到评论功能需要和收藏功能共用用户信息时当你需要增加一个管理端接口复用同样的业务逻辑时好处就会很明显。更别说到你以后进了公司代码复审的第一条就是说“Controller别写业务代码”。这个习惯越早养成越好。这篇内容到这里就完整了最后把我心里最想强调的一件事再重复一遍毕设的核心不是“做出来”而是“讲清楚”。代码是你解决问题的过程论文是你把过程系统表达出来的结果答辩是你让别人相信你的过程值得认可。三者都重视才算把这份毕业设计的价值真正挖到了手。如果你能在这个过程中建立起对前后端分离、数据库设计、部署上线这一整套流程的真实体感那么毕业之后无论走开发还是产品路线这段经历都会成为你的底子。