前后端分离的学习类平台算是目前Web开发里需求最稳定、套路最成熟的一类项目了。无论是毕业设计、个人作品集还是企业内部的知识管理工具核心玩法都绕不开那几件事课程内容展示、用户学习轨迹、习题练习与评估。我这次做的这套“智能学习平台系统”就是用SpringBoot Vue MyBatis MySQL这套经典组合把完整流程跑通并且把所有源码和部署步骤整理了出来。这篇文章不聊虚的直接从设计思路、表结构、后端接口、前端页面到部署上线把我实际开发中的关键决策和踩过的坑全部摊开讲清楚适合正在做类似项目、或者想从前端转全栈的朋友参考。1. 项目全景与整体设计思路1.1 为什么选前后端分离而不是服务端渲染先回答一个很多人纠结的问题学习类平台这种以内容展示和交互为主的系统为什么非要前后端分离我的实际体会是学习平台的页面状态非常多视频播放进度、章节完成状态、刷题时的选项反馈、错题本的红点提醒这些都需要前端频繁地更新局部界面。如果还用传统的Thymeleaf模板服务端渲染每一次小交互都要刷新页面或者发Ajax请求拿整段HTML体验和开发效率都不太行。前后端分离之后前端只关注视图交互后端只输出JSON数据分工明确两边可以并行开发。另一个重要原因是部署维护的灵活性。前端打包成静态文件丢到Nginx后端打成jar包独立运行互不干扰。需要扩容的时候后端可以多开几个实例前端完全不用动。学习平台这类系统往往有流量波峰波谷比如期末考试周这种架构在应对横向扩展时从容很多。而且对于后续要加App端或者小程序端后端接口可以直接复用不用再为不同端分别写一套模板渲染。1.2 技术栈选型这套组合到底香在哪SpringBoot MyBatis MySQL是Java后端最“稳”的一套组合。SpringBoot的自动配置机制极大简化了项目搭建一个依赖加一个启动类就能跑起来。MyBatis则解决了复杂SQL的灵活性问题学习平台这种业务报表统计、多表关联查询、动态条件筛选特别多比如要查“某个学生在某个时间段内完成了哪些章节的哪些习题”这种SQL用MyBatis的XML映射文件写起来非常直观可控性比JPA那种全自动ORM强得多。数据库选MySQL是因为它足够成熟社区资料多出问题基本都能搜到解决方案对中小型项目来说性价比最高。前端选Vue的原因更简单生态成熟、上手曲线平缓、中文文档和社区资源极其丰富。我用的是Vue 3 Vite Pinia Vue Router这套组合配合Element Plus做UI组件库开发效率非常可观。Vite的按需编译让开发服务器的冷启动基本在1秒内改代码热更新也是毫秒级响应这对频繁调整页面样式和交互逻辑的开发过程来说体验上的提升是实打实的。1.3 平台功能模块拆解学生端、教师端、管理后台三端联动这个平台的业务模型可以拆成三个角色端来理解。学生端是核心使用场景注册登录后可以浏览课程列表、查看课程详情、在线观看视频、记录学习进度、做章节习题、查看错题本和学习统计报表。教师端负责内容生产课程管理、章节管理、习题管理、学生学情查看。管理后台则负责基础的运维支撑用户管理、角色权限分配、系统公告、数据统计概览。三个端之间通过权限控制来隔离功能边界后端用拦截器校验登录状态和角色标识前端通过路由守卫控制页面访问权限。这样设计的好处是任何一个端的功能调整都不会影响其他端比如后期想给学生端增加一个“学习计划日历”功能只需要在Vue里新增组件并调用后端新增的接口即可不需要动教师端的任何代码。整体项目结构我采用的是经典的前后端分离目录后端一个SpringBoot工程前端一个Vue工程互不耦合。2. 数据库设计与核心表结构规划2.1 基础表设计用户、课程、章节、习题的数据建模数据库设计是整个项目的地基表和字段如果设计得不合理后面写Mapper和查询逻辑的时候会极其痛苦。我根据业务的“人—课—章—题”这条主线规划了这样几个核心表。用户表sys_user存储账号、密码BCrypt加密、昵称、头像、角色标识。课程表edu_course存储课程标题、封面图、简介、所属教师ID、状态上架/下架。章节表edu_chapter归属课程表包含章节标题、视频地址存的是m3u8格式的播放地址、章节序号。习题表edu_question包含题目内容、选项A/B/C/D、正确答案、所属章节ID、难度等级。这里我要特别强调一下章节表设计的一个细节一定要加一个sort_order字段用于排序。很多新手会直接用自增id来排序但实际运营中调整章节顺序是非常高频的操作如果有sort_order字段只需要UPDATE一条记录的排序值就能完成顺序调整而不用去改主键。我在第一版的时候就忽略了这个问题后来调整课程顺序时发现代码写起来非常别扭重构后才彻底解决。这就是典型的“设计时多花一分钟开发时省一小时”。2.2 学习行为表设计学习记录、错题本、收藏夹学习平台区别于普通视频网站的核心在于学习行为的追踪和分析所以除了基础内容表我还设计了学习记录表stu_learn_record和错题本表stu_wrong_question。学习记录表记录学生每次学习某个章节的时间和观看视频的进度百分比字段包括学生ID、章节ID、学习时长秒、视频进度百分比、最后学习时间。这个表的粒度可以精确到“每次进入章节学习都生成一条记录”而不是只保留一条最新记录这样后期做学习趋势分析时数据才够用。错题本表的结构更简单学生ID、习题ID、错误次数、最近错误时间、是否已掌握用于从错题本中移除。这个表实际上是学生提交习题答案时由后端逻辑自动写入的不需要学生手动操作。我在设计时专门加了一个唯一索引student_id, question_id避免同一个学生同一道题产生多条重复记录写代码的时候用INSERT ... ON DUPLICATE KEY UPDATE来同时完成“新增”和“次数累加”两个操作非常巧妙。另外还有一张收藏表stu_favorite也是类似的结构这里不再赘述。2.3 索引设计与SQL优化心得表结构确定之后索引设计决定了系统在数据量上来之后的表现。我的经验是外键字段必须建索引查询频繁的联合条件字段要建联合索引。以学习记录表为例最频繁的查询一定是“查询某学生最近学习的所有章节记录”所以我在(student_id, last_learn_time)上建了联合索引。错题本表则在(student_id, question_id)上建了联合索引并且覆盖了“是否掌握”这个状态字段。课程表的查询场景主要是“查询已上架课程列表”所以(status, create_time)联合索引也很有必要。还有一个很容易忽略的点varchar类型的字段如果作为查询条件一定要控制长度并加上索引。比如用户表的手机号字段如果业务上支持用手机号登录那么这个字段就是查询条件必须要建索引。但也不需要建全文索引普通B-Tree索引就够了。实测下来在10万级数据量的情况下合理索引可以让查询时间从几百毫秒降到个位数毫秒这种优化几乎不花什么成本收益却是立竿见影的。3. 后端接口开发从Controller到MyBatis映射的完整链路3.1 统一返回格式与全局异常处理后端接口的第一步是把返回格式统一。我封装了一个Result类结构包含code200成功500失败401未登录、message、data三个字段。所有接口无论成功失败都返回这个格式前端只需要根据code判断结果状态统一处理错误提示。这个设计看似简单但在实际联调中避免了大量因返回格式不一致导致的兼容问题。与之配套的是全局异常处理器用RestControllerAdvice注解实现。运行时抛出的异常统一被捕获转换成Result对象返回。特别要注意的是业务异常比如“课程不存在”“该章节已删除”不能直接抛Exception而应该抛自定义的BusinessException带一个明确的错误码和提示信息。这样前端能精确区分“网络异常”和“业务规则拦截”用户看到的提示才会准确。我在实际开发中踩过一个坑最初把所有异常都笼统捕获返回的message全是“系统繁忙”结果前端同学报警说用户根本不知道具体哪里出了问题后来才重构成了现在这种分级异常处理。3.2 MyBatis动态SQL实战以条件查询为例MyBatis的XML映射文件是这个项目的核心代码之一。学习平台里最典型的动态SQL场景是习题条件查询学生可能在筛选栏选择章节、难度、题目类型也可能只输入关键词搜索题干这些条件都是可选的。如果不用动态SQL就得写多个if判断拼接SQL或者写多条Mapper方法代码冗余不说还容易出错。我用 标签配合 标签解决了这个问题。比如查询习题列表的SQL根据入参对象中的非空字段动态拼接WHERE子句。这里要提醒一个细节 标签会自动处理第一个条件之前的AND关键字所以第一行不用写WHERE后续的条件都要带AND前缀。我在初学MyBatis时总是忘记这个规则导致生成的SQL语法错误排查了半天才发现是多余了一个WHERE。另外动态SQL的 标签在处理批量插入、IN查询时也非常好用比如教师批量删除章节前端传一个id数组过来直接用 拼到IN条件里即可。3.3 鉴权与登录状态保持拦截器 Token学习平台的很多接口必须登录后才能访问比如提交习题答案、查看学习记录。我采用的是Token鉴权方案用户登录成功后后端生成一个UUID作为token存到Redis里设置过期时间我设为2小时可续期。登录后的请求在请求头中携带X-Token字段后端用一个拦截器Interceptor统一校验。校验通过就把当前登录用户的信息放到ThreadLocal中业务代码里通过UserContext.getUserId()就能拿到当前用户ID非常方便。这里有一个实战要点拦截器需要放行登录、注册、课程列表、课程详情等公开接口其他接口一律校验。放行的URL列表可以配置在配置文件里方便随时调整。拦截器校验失败时直接返回401错误码和“未登录或登录已过期”的提示前端收到后会跳转到登录页。我试过用Spring Security做更细粒度的权限控制但对于这个体量的项目来说一个简单的拦截器加角色判断完全够用引入Security反而增加了配置复杂度出了问题也更难排查。3.4 视频进度上报与学习时长统计的实现细节视频学习功能是学习平台的灵魂但实现起来有几个容易忽略的细节。前端播放器会每隔15秒向后端上报一次学习进度参数包括章节ID、当前播放秒数、是否已看完。后端收到上报后先查询该学生关于这个章节的最新学习记录如果有就更新进度和时长没有则新增一条记录。这里有个关键点前端上报的播放秒数后端要做一个合理性校验。比如视频总长是1000秒前端上报了1200秒明显是异常数据可能是拖动进度条到视频末尾时播放器的真实播放时间没有重置需要做最大值钳制处理。我的处理是如果上报的进度超过视频总时长就按总时长记录并且将该章节标记为“已完成”。另外学习时长的计算不是简单的每次上报的秒数累加而是要把本次上报的进度与历史进度做差只累加差值部分这样能有效防止用户反复拖拽进度条刷学习时长。这个逻辑写清楚之后学习统计报表的数据才有参考价值。4. 前端Vue实现页面交互与工程化实践4.1 Vue 3 Vite工程搭建与目录结构规划前端工程的搭建我建议直接用Vite的官方脚手架命令很简单npm create vuelatest。Vite创建的项目默认就集成了ESLint、Prettier、Vue Router、Pinia这些常用依赖省去了一堆手动配置的工作。项目装好之后我会先调整目录结构把视图组件views、路由配置router、状态管理stores、API封装api、公共组件components、工具函数utils分好目录这是整个前端工程可维护性的基础。实际开发中最容易遇到的问题就是各文件的职责边界不清。比如API请求我要求所有和后端接口相关的代码都必须放在api目录下每个模块一个文件比如course.js、chapter.js、question.js。页面组件里只负责调用这些封装好的方法不允许直接写axios请求。这样做的好处非常明显如果后端接口地址或请求参数发生变化只需要改api目录下的对应文件不用满项目搜索哪里用了这个接口。4.2 axios拦截器封装与Pinia状态管理axios封装是前端项目的必备环节。我创建了一个request.js文件实例化axios时设定baseURL指向后端接口地址开发环境和生产环境用环境变量区分请求拦截器里从localStorage读取token并设置到请求头响应拦截器里统一处理三种情况code为200时直接返回数据code为401时清除登录信息并跳转登录页其他code则通过Element Plus的Message组件弹出错误提示。这样做的效果是页面里调用接口时只需要关心业务逻辑完全不用处理错误提示和登录状态这些横切关注点。Pinia作为Vue 3官方推荐的状态管理库我用它管理两个核心状态用户信息和课程学习进度。用户信息在登录成功后写入Pinia的user store同时持久化到localStorage刷新页面不会丢失。课程学习进度则在视频播放页面每次上报时同步更新到Pinia中这样课程详情的“已学完”标签和进度条能实时联动刷新不需要重新请求接口。4.3 路由配置动态路由与权限控制的配合前端路由的设计我采用静态路由为主、动态路由兜底的方案。静态路由包含登录页、注册页、首页、课程列表页、课程详情页这些所有用户都可以访问的页面。动态路由针对教师端和管理员端在用户登录后根据其角色标识把对应的菜单和路由信息动态添加到Vue Router中。路由守卫是权限控制的关键一环。我在全局前置守卫中判断目标路由是否需要登录如果需要且本地没有token就跳转到登录页并记录原始目标地址登录成功后用redirect参数跳回原页面。这里有一种情况要特别注意路由在动态添加后Vue Router的相同路由重复添加会报警告所以动态添加路由前要先判断该路由是否已存在避免用户刷新页面时路由重复注册导致控制台报错。4.4 视频播放页面与m3u8流媒体播放适配视频播放是学习平台里最考验前端细节的功能。我第一版用的是简单的HTML5 video标签直接播放MP4文件但实际部署时发现视频文件体积大、加载慢而且不支持拖动进度后快速定位体验很一般。后来把视频统一转成了m3u8格式前端使用video.js配合videojs-contrib-hls插件来播放。这里有一个容易被新手忽略的配置点video.js播放m3u8时跨域请求经常导致播放失败所以后端必须对视频文件的访问响应头设置允许跨域或者把视频走Nginx反向代理由前端同源访问。实测下来走Nginx代理是最稳的方案让video.js直接请求/api/video/xxx.m3u8Nginx再把请求转发到视频存储服务器。我的视频学习页面还集成了进度记忆功能进入页面时从后端拉取该章节的历史学习进度播放器初始化后直接定位到上次观看的位置这个体验基本对标主流视频平台了。5. 部署上线从源码到线上环境的完整流程5.1 环境准备JDK、MySQL 8、Nginx的安装配置部署环境我推荐使用Linux服务器以CentOS 7.9为例。Java后端需要JDK 1.8或更高版本我用的JDK 8因为SpringBoot 2.7.x对该版本支持最好稳定性最高。JDK安装后记得配置JAVA_HOME环境变量否则启动脚本会报“找不到java命令”的错误。MySQL安装的是8.0版本注意8.0的认证插件默认是caching_sha2_password如果客户端工具版本过旧可能会出现连接认证失败可以在MySQL配置中改为mysql_native_password或者直接用较新的客户端连接。Nginx作为前端静态文件服务器和反向代理安装后需要修改nginx.conf配置文件。配置要点有两个一是root指向前端dist包解压后的目录二是location /api/的请求代理转发到后端服务的地址比如http://127.0.0.1:8080/api/。这里务必要保留路径中的/api/前缀因为后端接口的RequestMapping里包含了这个前缀。5.2 后端SpringBoot项目打包与启动后端项目打包使用的是Maven在项目根目录执行mvn clean package -DskipTests即可。打包产出的jar包直接通过nohup java -jar xxx.jar app.log 21 命令后台运行。这里我强烈建议在application.yml中配置多个profile比如开发环境用dev生产环境用prod通过启动参数--spring.profiles.activeprod来切换。生产环境的配置里数据库密码不应该明文写在配置文件中可以通过环境变量或者Jasypt加密避免源码泄露时数据库也跟着沦陷。启动之后通过查看日志和访问接口来验证服务是否正常。健康检查的接口建议加上Spring Boot Actuator依赖直接请求/actuator/health接口就能看到服务运行状态。如果启动失败重点检查日志中是否出现了数据库连接异常、端口占用、配置文件加载失败这几种常见问题基本能覆盖绝大多数启动故障。5.3 Nginx配置详解静态资源托管与反向代理Nginx配置是整个部署环节中最能体现“前后端分离”思路的地方。我的server块配置大致是listen 80server_name填域名或服务器IProot指向前端dist目录index指定index.html。location / { try_files $uri $uri/ /index.html; }这一行的作用非常关键因为前端Vue Router用的是history模式当用户访问某个路由比如/course/12时Nginx需要把请求重写到index.html由前端路由接管页面渲染否则会出现刷新404的问题。反向代理的配置是location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }。这里有一个细节proxy_pass后面如果带了路径比如http://127.0.0.1:8080/那么原始路径中匹配到的/api/前缀会被替换掉不带路径则保留原始路径。我测试过这两种写法的差异建议根据后端实际的RequestMapping来灵活调整。配置完成后记得nginx -t检查配置语法再执行nginx -s reload让配置生效。5.4 数据库初始化脚本与生产环境数据安全部署过程中数据库初始化是重要的一环。我提供了完整的db_init.sql脚本包含所有表的建表语句和基础数据比如默认管理员账号、默认课程分类。首次部署时通过mysql -uroot -p db_init.sql命令即可导入。这里要提醒的是生产环境上线前一定要修改默认密码同时在MySQL中创建单独的业务账号只授予该数据库的增删改查权限避免用root账号直接连业务库。关于数据安全我补充一个经验上线后第一天就要配置MySQL的定时自动备份。最简单的方案是通过crontab定时执行mysqldump命令备份文件按日期命名保留最近30天的备份。我曾经遇到过服务器磁盘损坏导致数据库全丢的情况幸好有每日备份恢复数据时只丢失了当天几个小时的数据损失还在可控范围。这个教训让我深刻认识到不管项目大小备份永远是数据安全的第一道防线。6. 常见问题与排查技巧实录6.1 跨域问题的三种场景与对应解决方案前后端分离项目最经典的问题就是跨域。我实际开发中遇到过三种典型场景。第一是开发环境下前端跑在localhost:5173后端跑在localhost:8080端口不同导致跨域这个最简单在后端写一个CorsConfig配置类注册CorsFilter放行指定来源即可。第二是生产环境下前端通过Nginx代理访问后端接口由于走的是同一个域名下的路径本质上已经规避了浏览器的同源策略限制所以不需要再处理跨域问题。第三是视频文件访问跨域上面已经提到通过Nginx转发解决。这里要强调一个容易踩坑的细节CorsConfig的allowedOriginPatterns配置中如果你使用allowedOrigins并写死了具体域名那么带Cookie的请求会失效需要改用allowedOriginPatterns并配合setAllowCredentials(true)。我最初就是在这个配置上卡了很久后来查阅资料才搞清楚这两者的区别这个坑相当隐蔽。6.2 MyBatis常见问题字段映射失败与SQL日志开启MyBatis在开发中最常见的报错就是“Could not find property xxx”这通常是因为实体类的属性和数据库字段名对不上。比如数据库字段是create_timeJava实体类属性是createTime如果直接在XML中写create_time列名MyBatis可能无法自动映射到属性。解决办法有两个一是开启MyBatis的驼峰命名自动映射配置map-underscore-to-camel-casetrue二是手动在resultMap中明确映射关系。我推荐直接开启第一个配置省时省力。另一个非常实用的小技巧是开启SQL日志打印方便调试时查看实际执行的SQL语句。在application.yml中配置logging.level.com.example.mapperdebug即可这样MyBatis会在控制台打印所有Mapper接口执行的SQL和参数值。开发阶段我强烈建议开启这个配置排查问题时能直观看到SQL是否正确、参数是否传递到位。生产环境务必关闭否则会有SQL注入和信息泄露的风险。6.3 前端部署后的白屏问题与静态资源路径排查前端项目开发调试都很正常但打包部署之后访问页面出现白屏这是很多新手常见的问题。根因几乎都是静态资源路径配置错误。Vue项目默认的base配置是/打包后的index.html中引用的JS和CSS路径是/assets/xxx.js如果前端项目部署在服务器下的子目录比如/app/那么这些资源路径就会404。解决办法很简单在vite.config.ts中设置base: ./这样打包后的资源路径会变成相对路径部署在任意目录下都能正常加载。另外一个容易被忽略的是刷新404问题前面提到过需要配置Nginx的try_files重写规则这里不再重复。我用过一个排查技巧打开浏览器开发者工具切换到Network面板看加载失败的资源路径就能快速定位是路径问题还是代理配置问题。6.4 数据库连接池参数调优与连接泄露排查数据库连接池的配置在spring.datasource配置块中我用的是HikariCPSpringBoot默认。上线初期流量不大时默认参数完全够用但随着并发量上升偶尔会出现“Connection is not available, request timed out”的报错这是连接池被耗尽的表现。我的调优思路是调整maximum-pool-size从默认的10改为30把connection-timeout从30秒改短到10秒避免请求长时间占线。连接泄露的场景排查起来更隐蔽。有一次我发现数据库连接数持续攀升重启服务后短暂恢复然后再次飙升通过查看MySQL的processlist发现大量状态为Sleep的连接堆积。进一步定位发现是某个Service方法中使用了Transactional注解方法中间有耗时的远程调用事务长时间不释放导致连接被占用。后面我把事务边界缩小到了真正需要原子性操作的数据库方法上问题彻底解决。这个案例让我深刻理解Transaction不是加得越多越好事务范围过大会放大数据库连接的占用时间。6.5 部署后常见问题速查表我在整个开发和部署过程中整理了这样一张问题速查表按我的经验覆盖了90%以上的常见故障场景问题现象可能原因解决方案后端启动失败提示端口占用8080端口已被其他进程占用用netstat -tlnp查看占用进程kill掉或修改服务端口前端页面加载不出数据接口跨域被拦截或请求地址错误检查浏览器Network面板的请求状态检查Nginx代理配置刷新页面404Nginx没有配置try_files重写规则在location /中添加try_files并重载配置MySQL连接失败认证插件不兼容或密码错误检查MySQL版本和客户端驱动修改认证插件为mysql_native_password上传的视频无法播放视频路径配置错误或跨域确认m3u8文件可访问检查Nginx对视频路径的静态资源配置Token过期后页面无响应全局异常处理未包含401场景在响应拦截器统一处理401跳转登录页打包后资源404Vite的base配置错误设置base: ./后重新打包7. 后续扩展方向建议这个项目虽然已经完整跑通了核心流程但作为学习平台还有很多可以“智能化”的方向可以继续深挖。第一个值得做的是学习数据的可视化分析目前我的学习统计报表还只是简单的折线图和柱状图后续可以把每个学生在每个知识模块的掌握度用雷达图呈现让薄弱知识点一目了然。第二个方向是智能推荐根据学生的错题分布和知识点关联关系构建知识点之间的依赖图谱再基于学生的历史行为做个性化习题推荐。这一步需要用springboot整合一些数据分析的组件来处理工程上稍微复杂一些但数据模型已经具备。第三个我觉得很有价值的方向是在线考试的防作弊设计。目前学生的答题行为比较自由如果要做严肃的在线考试需要加入题目乱序、选项乱序、切屏检测、答题时间限制等机制。这些功能从架构上看并不复杂主要是前端交互逻辑和状态管理会复杂一些比如计时器在刷新页面后如何恢复剩余时间这需要后端在考试进行中持续维护一个考试状态对象。数据安全层面也值得投入精力。我在生产环境已经启用了HTTPS证书但接口层的数据加密、敏感字段的脱敏显示、操作日志的审计追踪这些合规性要求目前还没有完全覆盖。如果是企业内部的学习平台这些点基本是刚需后续需要把日志切面和审计模块设计进去。最后我从一开始就预留了移动端适配的接口设计思路现在这套后端接口直接可以对接小程序端和App端前端只需要重新写一个端就能复用所有业务逻辑这也是当初选择前后端分离架构最赚的一笔投资。