做在线教育这块的朋友们应该都清楚一套完整的学习平台源码有多难得。学校、培训机构、甚至企业内部培训都需要一个能管课程、管学员、管学习进度还能出统计报表的系统。我最近刚好整理了一套基于SpringBoot2Vue3MyBatis-PlusMySQL8.0的智能学习平台系统前后端分离自带完整文档从环境搭建到功能上线都能照着做。这篇文章就把它拆开揉碎把技术选型、功能设计、数据库建表、部署配置这些核心关卡一个个讲清楚顺便把开发中踩过的坑和排查思路一并交代了适合准备做毕设的在校生、刚接触前后端分离项目的初级工程师也想给正在选型学习平台方案的技术负责人做个参考。1. 项目整体设计与技术选型解析1.1 智能学习平台的核心需求拆解很多人一听到智能学习平台第一反应就是要上人工智能、算法推荐这些高大上的东西。实际落地的时候你先得把基础业务跑通管理员要能发布课程、管理用户老师要能上传课件、出题考试学生要能看课、做题、查看学习记录。在此基础上再说智能——也就是通过学习行为数据做简单的分析和个性化推荐比如根据用户看课时长、刷题正确率推荐下一步学什么。所以这套系统的业务模块我拆成四个核心域用户域学生、老师、管理员三类角色涉及注册、登录、权限控制、个人资料管理。课程域课程分类、课程信息、课程章节、课件资源这是学习内容的载体。学习域选课、收藏、学习记录、笔记方便学员管理自己的学习进度。考核域题库、试卷、答题记录、成绩统计用于检验学习效果。这四个域合起来就是一套完整学习平台的骨架。数据库设计上我建议用户表和角色表分开中间用关系表关联这样后面扩展权限模型会灵活很多。课程、章节、课件也是层级关系课程表id作为章节表外键这种经典的设计模式不多说了。1.2 为什么选SpringBoot2Vue3这套组合技术选型这事儿我向来不追新只追稳。SpringBoot2现在依然是企业级Java后端的主流版本生态成熟用的人多出了问题能查到的解决方案也多。Vue3在2020年正式发布之后经过这几年沉淀Composition API和响应式机制已经被广泛接受搭配Element Plus做后台管理界面非常顺手。最关键的一点是这两个技术栈的招聘需求量大学会之后找工作也好用学生的简历上写这个组合面试官认可度很高。说一下为什么不选SpringBoot3和JDK17。SpringBoot3要求JDK17起步虽然性能有提升但是对新手来说JDK8的生态资料最丰富遇到的坑基本都被踩平了网上随便一搜就能找到答案。对做毕设和中小型系统来说JDK8SpringBoot2完全够用没必要冒兼容性的风险。Vue这边同理Vue3已经很成熟了但Vue2的组件库生态确实正在退化新项目没必要往后退。1.3 MyBatis-Plus解决了我哪些痛点接触过MyBatis的人都有体会写XML要写烦了。单表的增删改查本质上就那几条SQL但每个Mapper文件都得重复写一遍。MyBatis-Plus的核心价值就是把这些单表操作全部封装掉了你只需要定义一个实体类继承一个BaseMapper接口CRUD方法就自动有了分页查询也有现成的插件支持。我在这个项目里大概算了一下直接用MyBatis-Plus帮我省掉了实体类、Mapper接口和XML文件编写大概60%的重复代码量。比如用户表最简单的新增操作传统MyBatis要写接口方法、XML里的insert标签、参数映射至少三处改动。用MyBatis-Plus直接在Service层调用save(entity)就完事了。多条件分页查询更舒服PageUser加一个LambdaQueryWrapper条件链式构建代码可读性比拼接SQL强太多。后面章节的代码我会直接展示。2. 核心功能模块与数据库设计思路2.1 用户体系与权限控制的三表模型权限这块是任何平台的命脉不能儿戏。网上很多案例都直接用user表里加一个role字段做区分图省事。真要这么干后面加权限细粒度控制的时候就要大面积重构。我在这里用的是经典的RBAC简化版用户表(user)、角色表(role)、用户角色关联表(user_role)。查询用户时两表关联拿到角色再用Spring Security的拦截器做接口级权限校验。数据库里加不加外键是争议点我建议是不加逻辑层保证数据一致性就够了性能好删除灵活。注册登录我用的是JWT方案无状态认证前后端分离架构里最顺手的方案。用户登录成功后后端签发Token前端存到localStorage或者Pinia里每次请求通过拦截器加到Header上后端解析校验即可。注意Token有效期设置要合理我是把token的过期时间设置为2小时配合前端Axios响应拦截器实现401自动跳转登录页。至少再讲明白一点vue3前端用Axios实例封装baseURL和token注入逻辑这个小工具文件在项目里是必须的。2.2 课程与学习记录的数据结构课程模块是这个平台的核心内容区。我设计了三层结构课程表(course)、章节表(chapter)、课时表(lesson)。课程表记录标题、封面、简介、难度等级、分类id章节表属于某门课程课时表再挂到章节下面。看课视频我直接存对象存储的URL不建议把视频文件传到本地服务器前期用OSS或者腾讯云COS申请个测试Bucket就能把上传流程打通。学生看课产生的进度记录单独一张表(study_record)记录用户id、课时id、最近观看位置、状态是已完成还是学习中等。这里要特别注意课时内容类型不要用单一字段限制死。我设计kind字段区分视频、图文、文档、代码示例后面接不同的渲染组件这是一个低成本投入但高回报的前瞻性设计。一个真正的学习平台只有存放一个字段的课程肯定没法覆盖到习题、代码、实验这些多形态内容的需要。2.3 行为数据如何支撑“智能”推荐所谓智能推荐在这个体量的系统里没必要上协同过滤算法。我做了个相对轻量的方案——基于标签匹配和统计排序。学员每次学习完一个课时系统会记录对应的技术标签比如学的是MySQL8.0数据库配置就给该学员的标签权重加分。推荐列表的SQL逻辑就是从已选课程中高粒度标签出发查询同标签且评分靠前的未学课程。整个推荐查询其实一条SQL配合简单的统计就能搞定。这套方案表面上很简单但却是最不容易翻车的做法实际线上跑起来效果也不差。3. 环境搭建与关键配置实操3.1 用Docker快速搞定MySQL8.0环境我见过太多人在本机装MySQL装到心态崩溃系统里残留着多个版本服务端口占用、密码遗忘、字符集混乱。这次我推荐用Docker通俗讲就是开箱即用的集装箱一个Linux容器里装好了一份完整的MySQL8.0服务不污染宿主系统删了重来也就十几秒的事。装好Docker后执行这两条命令docker pull mysql:8.0 docker run -d \ -p 3306:3306 \ --name learning-mysql \ -e MYSQL_ROOT_PASSWORDroot123456 \ -e MYSQL_DATABASElearning_platform \ -v /data/mysql:/var/lib/mysql \ mysql:8.0参数说明一下-p 3306:3306把容器内的3306端口映射到主机-e MYSQL_ROOT_PASSWORD设置root密码-e MYSQL_DATABASE自动创建数据库-v挂载数据卷避免容器删除后数据丢失。第一次启动后建议进容器里改一下认证插件和字符集执行下面这组命令docker exec -it learning-mysql mysql -uroot -p mysql ALTER USER root% IDENTIFIED WITH mysql_native_password BY root123456; mysql SET NAMES utf8mb4;MySQL8.0默认的认证插件是caching_sha2_password它比旧版的mysql_native_password更安全但是老版本的图形化工具比如旧版Navicat连接时会报错。改成mysql_native_password后兼容性一下子就上来了这一步在开发阶段能帮你省下不少折腾的时间。3.2 SpringBoot2后端配置文件和MyBatis-Plus接入细节后端项目我用的是Maven聚合工程标准的controller-service-mapper三层。核心依赖就这几个Spring Boot 2.7.x、MyBatis-Plus 3.5.x、MySQL Connector/J 8.0.x、Spring Security、JWT工具库、Lombok。关键的application.yml配置直接贴这儿spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/learning_platform?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalseallowPublicKeyRetrievaltrue username: root password: root123456 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0连接串里的url参数这里要敲黑板serverTimezoneAsia/Shanghai是MySQL8.0必须要加的参数否则报时区错误allowPublicKeyRetrievaltrue配合mysql_native_password认证方式使用否则有的驱动版本连接时会报Public Key Retrieval错误。还有useSSLfalse本地开发没必要用SSL。这些参数一个个都是我实际测试过的少一个都会在启动时报错。逻辑删除配置这里也值得一说。物理删除就是直接DELETE数据没了就再也找不回来。业务表我基本都加了deleted字段用MyBatis-Plus的全局配置做逻辑删除查询时自动过滤已删除记录删除操作自动变成UPDATE。数据安全性高很多而且代码里你完全感知不到体验很好。MyBatis-Plus的配置代码也很简洁分页插件在配置类里加一下就好Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }分页插件不配置的话调用page()方法会全部查出来再内存分页数据量一大直接内存溢出。这个坑是新手最容易踩的先记着后面还会再提。3.3 Vue3Element Plus前端工程从零搭建前端用Vite作为构建工具相比Webpack最大的感受就是快。Webpack冷启动几秒到几十秒都是家常便饭Vite基于原生ES模块启动基本在毫秒级别。Vue3项目我推荐用Vite创建工程命令是npm create vitelatest learning-web -- --template vue-ts cd learning-web npm install npm install vue-router4 pinia element-plus axios创建好的项目结构里src/views目录放页面组件src/router目录配置路由src/store放Pinia状态管理src/api目录封装接口请求。我对目录规划有一个强迫症级别的习惯api目录下一张表一个文件user.ts只管用户接口、course.ts只管课程接口跟后端Controller路径一一对应。前端界面用Element Plus的表格、表单、弹窗、菜单组件后台管理界面的骨架是左侧菜单加右侧内容区这个布局直接用el-container组合就行。Vue3里注意一个常见的坑reactive处理表单对象时如果直接解构赋值响应式会失效因为reactive返回的是Proxy对象解构后你拿到的只是普通值修改它不会触发视图更新。这个项目里我都是直接用const form reactive({...})或者在setup里用toRefs保持响应式。这也是Vue3面试经常问的一个点最容易答错。4. 开发过程中踩过的坑与排查技巧实录4.1 MySQL8.0版本带来的兼容性三连击第一个坑连接驱动必须用com.mysql.cj.jdbc.Driver这个是MySQL8.0后推荐的驱动类。老的com.mysql.jdbc.Driver不是不能跑但是控制台会打印一大段警告说旧的驱动类已经废弃而且新版驱动对通信协议、时区处理做了升级不移除迟早出问题。pom.xml里依赖坐标的版本号建议像这样写一遍明确锁定dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency第二个坑JDBC连接串里的SSL证书警告。MySQL8.0默认开启SSL如果不显式配置useSSLfalse你每次启动项目都会看到一条关于SSL连接的红色WARN日志。虽然不影响功能但是看着烦而且没准哪天你遇到网络认证问题会分不清是SSL导致的还是别的什么原因。第三个坑MySQL8.0的groupBy查询比以前严格了。sql_mode默认带上了ONLY_FULL_GROUP_BY意思是select的字段必须在group by里或者聚合函数里。我写统计报表SQL时被这条规则教育了一上午解决方法是改sql_mode或者在业务SQL里遵守这个规范。建议遵守规范生产环境改全局sql_mode是非常危险的做法。4.2 Vue3TS开发中高频报错处理做管理后台时最常碰到的报错是TS类型推断不通过。Element Plus的表格列定义如果用{ prop: name, label: 姓名 }TS会推导出prop是string类型没问题。但是如果你在模板里写了scope.row.xxx某个字段TS又推断为never或any就会报出一片红色波浪线。我的解法是给接口返回值定义一个统一的Result类型泛型约束数据interface ApiResultT { code: number; message: string; data: T; }接口定义里用到ApiResultCourse[]页面拿到的数据就有完整的类型提示了。还有一个高频报错是Cannot find module /api/user这是tsconfig.json里没有配置路径别名指向src目录。在tsconfig.json的compilerOptions里加上这段就能解决{ compilerOptions: { baseUrl: ., paths: { /*: [src/*] } } }vite.config.ts里别漏了对应的resolve.alias配置两边都配好才能顺畅导入。4.3 MyBatis-Plus批量插入和分页的隐藏坑批量插入这个功能我用过一次就记住了。MyBatis-Plus提供saveBatch()接口但它底层是循环执行单条insert循环1000次就是1000条SQL。数据量持续增大的情况下速度非常感人。我建议大批量导入用自定义XML的foreach批量insert一次execute批量插入1000条不是问题。项目里我写了个importUserByBatch的方法XML里用foreach拼接values实测耗时从几秒降到几百毫秒级别。分页另一个坑在count统计上。MyBatis-Plus的分页插件默认会在查询时自动执行count如果主表数据量过大、关联了多个表count性能会拖后腿。如果业务场景不需要统计总数可以调用Page.setSearchCount(false)关掉或者用page.optimizeCountSql()选项让它先优化count语句再执行。分组统计的时候count优化有时会生成不正确的SQL这要根据实际SQL日志去验证。总之分页插件是个好东西但你要清楚它内部的机制才能用得不翻车。4.4 我建议的前后端联调排查思路联调阶段最容易出现的经典问题就是前端报跨域。现象是浏览器F12的网络请求里请求发出去了但是Response里没有数据控制台打印CORS错误。我习惯在后端写一个CorsConfig配置类放行所有跨域请求开发阶段简单又省事。线上部署时再通过Nginx反向代理解决跨域问题。注意开发阶段放行allowedOriginPatterns(*)的时候allowCredentials(true)要配套使用否则带Cookie的请求会被拦截。排查接口问题还有个顺序口诀先看网络请求通不通再看后端日志报什么错最后看SQL语句对不对。不要一上来就怀疑框架。我的套路是先在浏览器F12里看请求URL和参数确认无误后用Postman直接调后端接口如果Postman能通浏览器不通那就是前端的问题如果Postman也不通再用IDEA里SQL日志输出看一眼MyBatis执行了什么样的SQL。这个分层排查法能帮你缩小范围到单点比漫无目的改代码高效得多。5. 文档配套和系统演示的关键把控5.1 技术文档里必须包含的六类内容项目源码附带文档这件事说小不小说大也很大。我的经验是文档至少要覆盖六块内容环境要求、部署步骤、数据库初始化、账号说明、模块目录结构、接口文档。环境要求里写清楚JDK8、Maven3.6、Node14、MySQL8.0这些前置条件把本机环境对不上号的问题先排除掉。部署步骤要从拉取代码开始一步步走到前端npm run dev、后端启动成功中间涉及的所有命令都复制可执行避免你懂的式留白。数据库初始化文件要包含建库建表和测试数据两部分。我最怕拿到一个项目源码数据库脚本里只有表结构没有测试数据登录界面输什么都没有账号能登进去。所以我在init.sql里写好默认的三类角色账号各一个文档里也列出来密码暂时都是123456拿去演示或者二次开发都顺手。接口文档这块不用买Swagger UI的成套教程SpringBoot2里集成springfox的Swagger2依赖引入后访问Swagger-UI页面就能在线调试比手写接口文档省时间多了。5.2 演示时最影响体验的四个细节演示系统的时候细节决定使用者对这个系统的第一印象。我总结了四个最影响体验的点。第一登录页是门面切忌用丑陋的默认模板。Vue3技术栈配上Element Plus花半小时做一个居中卡片式登录界面左侧放一个平台Logo或者一张有科技感的配图右侧放登录表单观感差距是巨大的。第二菜单权限要跟着角色走。学生登录只能看到课程和学习中心管理员的菜单栏里才有用户管理和数据统计。这个不是功能丰富度问题而是用户心智问题。如果学生登录看到一堆管理功能会觉得这个系统乱。第三数据图表要有真实感。统计页面我用了ECharts画柱状图和折线图数据来源是数据库里初始化的一万多条模拟学习记录折线图有明显波动看着非常像真实运营数据。直接全用静态假数据的话演示时一眼穿帮。第四上传课程封面的接口要稳。往服务器传文件时静态资源映射要提前在SpringBoot里配置好WebMvcConfigurer里addResourceHandlers把本地磁盘目录映射成/upload/**访问路径否则前端上传成功但图片预览404体验一下子打折扣。6. 拓展方向如何把这个项目变成更完整的产物我这个项目按现在的完整度提交毕业设计或者放在作品集里当业务项目是够用的。但如果你想让它更有竞争力我可以列出几个低成本高收益的拓展方向。接入WebSocket做在线讨论室让学员在学习章节详情页可以实时交流提问把推荐逻辑升级为基于用户的协同过滤用余弦相似度计算用户之间的相似度来推荐课程算法部分正好和当前智能学习的概念对上了再就是增加一个简单的定时任务每天晚上统计学员的学习时长生成学习日报推送到邮箱或者站内信这是非常完整的生产级微功能。有一点我要特别提醒拓展功能一定不要在一开始就全部堆上去。先把SpringBoot2Vue3MyBatis-PlusMySQL8.0这套主流程跑得足够稳定再逐个叠加功能。不然项目做了一半报错了都不知道是该查前端还是后端、该查业务逻辑还是基础设施问题数量一多就非常打击自信心了。最后分享一个建议。我整理完这套系统最大的感受是一个项目的价值不只在代码能跑而在于你能否把为什么这样设计讲清楚。技术面试官问你的问题往往不是某段代码怎么写而是为什么选择这套方案、这个坑怎么排查、如果数据量大了怎么优化。把文章里的这些设计决策和踩坑记录多看两遍融到自己的表达里这套系统在你手上能发挥的价值会翻倍。