企业官网建设流程全解析

做在线教育这块的朋友们，应该都清楚一套完整的学习平台源码有多难得。学校、培训机构、甚至企业内部培训，都需要一个能管课程、管学员、管学习进度还能出统计报表的系统。我最近刚好整理了一套基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的智能学习平台系统，前后端分离，自带完整文档，从环境搭建到功能上线都能照着做。这篇文章就把它拆开揉碎，把技术选型、功能设计、数据库建表、部署配置这些核心关卡一个个讲清楚，顺便把开发中踩过的坑和排查思路一并交代了，适合准备做毕设的在校生、刚接触前后端分离项目的初级工程师，也想给正在选型学习平台方案的技术负责人做个参考。

1. 项目整体设计与技术选型解析

1.1 智能学习平台的核心需求拆解

很多人一听到"智能学习平台"，第一反应就是要上人工智能、算法推荐这些高大上的东西。实际落地的时候，你先得把基础业务跑通：管理员要能发布课程、管理用户，老师要能上传课件、出题考试，学生要能看课、做题、查看学习记录。在此基础上再说"智能"——也就是通过学习行为数据做简单的分析和个性化推荐，比如根据用户看课时长、刷题正确率推荐下一步学什么。

所以这套系统的业务模块我拆成四个核心域：

• 用户域：学生、老师、管理员三类角色，涉及注册、登录、权限控制、个人资料管理。
• 课程域：课程分类、课程信息、课程章节、课件资源，这是学习内容的载体。
• 学习域：选课、收藏、学习记录、笔记，方便学员管理自己的学习进度。
• 考核域：题库、试卷、答题记录、成绩统计，用于检验学习效果。

这四个域合起来就是一套完整学习平台的骨架。数据库设计上，我建议用户表和角色表分开，中间用关系表关联，这样后面扩展权限模型会灵活很多。课程、章节、课件也是层级关系，课程表id作为章节表外键，这种经典的设计模式不多说了。

1.2 为什么选SpringBoot2+Vue3这套组合

技术选型这事儿，我向来不追新，只追稳。SpringBoot2现在依然是企业级Java后端的主流版本，生态成熟，用的人多，出了问题能查到的解决方案也多。Vue3在2020年正式发布之后，经过这几年沉淀，Composition API和响应式机制已经被广泛接受，搭配Element Plus做后台管理界面非常顺手。最关键的一点是，这两个技术栈的招聘需求量大，学会之后找工作也好用，学生的简历上写这个组合，面试官认可度很高。

说一下为什么不选SpringBoot3和JDK17。SpringBoot3要求JDK17起步，虽然性能有提升，但是对新手来说，JDK8的生态资料最丰富，遇到的坑基本都被踩平了，网上随便一搜就能找到答案。对做毕设和中小型系统来说，JDK8+SpringBoot2完全够用，没必要冒兼容性的风险。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)就完事了。多条件分页查询更舒服，Page<User>加一个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_PASSWORD=root123456 \ -e MYSQL_DATABASE=learning_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?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true 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参数这里要敲黑板：serverTimezone=Asia/Shanghai是MySQL8.0必须要加的参数，否则报时区错误；allowPublicKeyRetrieval=true配合mysql_native_password认证方式使用，否则有的驱动版本连接时会报Public Key Retrieval错误。还有useSSL=false，本地开发没必要用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 Vue3+Element Plus前端工程从零搭建

前端用Vite作为构建工具，相比Webpack最大的感受就是快。Webpack冷启动几秒到几十秒都是家常便饭，Vite基于原生ES模块，启动基本在毫秒级别。Vue3项目我推荐用Vite创建工程，命令是：

npm create vite@latest learning-web -- --template vue-ts cd learning-web npm install npm install vue-router@4 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> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.33</version> </dependency>

第二个坑：JDBC连接串里的SSL证书警告。MySQL8.0默认开启SSL，如果不显式配置useSSL=false，你每次启动项目都会看到一条关于SSL连接的红色WARN日志。虽然不影响功能，但是看着烦，而且没准哪天你遇到网络认证问题会分不清是SSL导致的还是别的什么原因。

第三个坑：MySQL8.0的groupBy查询比以前严格了。sql_mode默认带上了ONLY_FULL_GROUP_BY，意思是select的字段必须在group by里或者聚合函数里。我写统计报表SQL时被这条规则教育了一上午，解决方法是改sql_mode或者在业务SQL里遵守这个规范。建议遵守规范，生产环境改全局sql_mode是非常危险的做法。

4.2 Vue3+TS开发中高频报错处理

做管理后台时最常碰到的报错是TS类型推断不通过。Element Plus的表格列定义如果用{ prop: 'name', label: '姓名' }，TS会推导出prop是string类型，没问题。但是如果你在模板里写了scope.row.xxx，某个字段TS又推断为never或any，就会报出一片红色波浪线。我的解法是给接口返回值定义一个统一的Result类型，泛型约束数据：

interface ApiResult<T> { code: number; message: string; data: T; }

接口定义里用到ApiResult<Course[]>，页面拿到的数据就有完整的类型提示了。还有一个高频报错是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做在线讨论室，让学员在学习章节详情页可以实时交流提问；把推荐逻辑升级为基于用户的协同过滤，用余弦相似度计算用户之间的相似度来推荐课程，算法部分正好和当前"智能学习"的概念对上了；再就是增加一个简单的定时任务，每天晚上统计学员的学习时长，生成学习日报推送到邮箱或者站内信，这是非常完整的生产级微功能。

有一点我要特别提醒，拓展功能一定不要在一开始就全部堆上去。先把SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0这套主流程跑得足够稳定，再逐个叠加功能。不然项目做了一半，报错了都不知道是该查前端还是后端、该查业务逻辑还是基础设施，问题数量一多就非常打击自信心了。

最后分享一个建议。我整理完这套系统最大的感受是：一个项目的价值不只在代码能跑，而在于你能否把"为什么这样设计"讲清楚。技术面试官问你的问题，往往不是某段代码怎么写，而是为什么选择这套方案、这个坑怎么排查、如果数据量大了怎么优化。把文章里的这些设计决策和踩坑记录多看两遍，融到自己的表达里，这套系统在你手上能发挥的价值会翻倍。