基于SpringBoot2+Vue3的线上教育培训办公系统全栈实战解析

先说说这个项目到底是个啥。简单讲，一套基于 SpringBoot2 + Vue3 + MyBatis-Plus + MySQL8.0 的线上教育培训办公系统，覆盖了在线课程、培训报名、考试测评、审批办公这些核心场景。前后端分离，后端负责业务逻辑和数据接口，前端负责交互和呈现，数据库用 MySQL8.0 做底层存储。说白了，就是教育机构、企业内部培训部门用来管理"课程—学员—考试—办公流程"的一套一体化平台。

这类系统在市面上见的多了，但真正能拿来就跑、带完整文档的源码其实不多。很多所谓的"毕业设计项目"要么前后端耦合严重，要么代码写成一坨，要么文档缺失，让人根本无从下手。我拿到这套源码之后，把整个项目从前到后过了一遍，又从部署到二次开发完整走了一遍，今天就把这套系统内部的实现思路、核心模块、实操细节以及我踩过的坑，全部拆开揉碎了讲给你听。

如果你是正要拿这类项目做毕业设计的学生，或者公司内部想快速搭一套培训管理平台的技术负责人，又或者是想通过一个完整项目学习 SpringBoot2 + Vue3 前后端分离开发方式的开发者，这篇文章值得你从头看到尾。

1. 项目整体设计与技术选型思路

1.1 为什么是 SpringBoot2 + Vue3 这套组合

很多人在选技术栈的时候容易纠结，其实这套组合放在今天依然是中小型管理系统最稳的搭配之一。SpringBoot2 解决了传统 SSM 时代大量 XML 配置的痛点，内置 Tomcat，搭配 MyBatis-Plus 做持久层，CRUD 写起来效率极高。Vue3 配合 Vite 构建，开发体验和运行性能都比 Vue2 + Webpack 时代提升了一大截。

后端选 SpringBoot2 而不是 SpringBoot3，原因很现实：生态兼容性。MyBatis-Plus、各类生成器、代码模板，市面上能查到的资料绝大多数基于 SpringBoot2。加上 JDK8 的普及率仍然很高，企业在部署时不需要强制升级 JDK17。如果你自己练手，用 JDK8 环境跑起来最省事，不会有各种版本兼容报错来干扰你学习业务流程本身。

前端 Vue3 用 Composition API 组织业务代码，配合<script setup>语法糖，写起来比 Options API 清爽很多。尤其是做后台管理系统，页面多、组件多、状态共享频繁，Composition API 在逻辑复用上的优势非常明显。Vite 开发环境下热更新速度极快，几乎是秒级响应，这一点在实际开发中体验非常好。

1.2 MyBatis-Plus 和 MySQL8.0 的组合逻辑

MyBatis-Plus 说白了就是 MyBatis 的增强工具，它没有改变 MyBatis 的核心能力，只是在单表 CRUD 上帮你封装好了通用方法。你不需要手写 insert、update、selectById 这些基础 SQL，直接继承 BaseMapper 就能用。条件构造器 QueryWrapper 和 LambdaQueryWrapper 也极大简化了动态 SQL 的拼接逻辑，代码量基本砍了一半。

MySQL8.0 选它是历史必然。8.0 已经是当前生产环境的主流版本，默认字符集从latin1改成了utf8mb4，对中文和多语言内容的支持更好。窗口函数、公用表表达式等功能对复杂统计查询非常友好。比如系统里"各课程报名人数趋势分析""部门培训完成率排名"这类报表需求，用窗口函数一条 SQL 就能搞定。

这套组合还有一个很关键的优点：学习曲线平滑。MyBatis-Plus 官网文档写得清楚，遇到问题搜一下基本都有答案。MySQL8.0 的坑也就集中在认证插件、时区、字符集这几个点上，下面正文会专门讲。

1.3 前后端分离与权限设计的总思路

系统采用前后端分离架构，后端统一返回 JSON 数据，前端通过 Axios 请求接口。登录认证我用了 JWT（JSON Web Token）方案，用户登录成功后后端签发一个带过期时间的 token，前端把 token 存在 localStorage 里，每次请求在请求头带上Authorization: Bearer <token>，后端通过拦截器统一校验。

权限设计上，典型的 RBAC 模型：用户属于角色，角色绑定菜单和按钮权限。这种模型的好处是权限配置灵活，新增一个角色不需要改代码，管理员直接在页面上勾选权限即可。系统里的权限粒度做了两级：菜单级权限控制前端路由能否访问，按钮级权限控制操作按钮能否显示。

2. 核心功能模块与数据库设计实战

2.1 用户端、管理端双视角的功能划分

线上教育培训办公系统，使用人群一般分成三类：平台管理员、培训讲师/部门管理员、普通学员。系统功能也围绕这三个角色来划分。

学员端核心是"学习"。登录后能看到分配给自己的课程列表，在线观看视频（支持记录学习进度）、下载课件、参加考试、查看成绩和证书。办公侧则有请假审批、报销申请、日程安排等日常功能。

管理端核心是"管理"。课程管理负责创建课程、上传视频/课件、设置课程分类和学习时长要求；考试管理负责创建题库、组卷、发布考试、自动阅卷（单选题和判断题自动判分，简答题人工判分）；用户管理负责账号维护、角色分配、部门管理；审批管理负责审批流程配置和待办处理。

统计分析模块是两个端都要用的，管理员要看培训完成率、考试通过率、课程热度排行；学员要看自己的学习时长、学分累积、考试历史。

2.2 数据库表设计的核心思路

我这套系统的核心表大致如下：用户表、角色表、菜单权限表、用户角色关联表、部门表、课程分类表、课程信息表、课程章节表、用户课程学习记录表、题库表、考试试卷表、用户考试记录表、公告表、审批类型表、审批实例表。整个设计遵循第三范式，尽量消除冗余，但考试答题记录这类高频访问数据我做了适度冗余，把题目快照直接存在答题表中，避免后续关联查询题目表导致性能问题。

用户表设计时有一个细节很值得提：除了基础的用户名、密码（BCrypt加密存储）、手机号、邮箱、头像、状态字段外，一定要预留open_id和union_id字段，方便后期对接企业微信或钉钉扫码登录。这个需求在真实企业环境中几乎一定会碰到，源码里提前预留好，后续改动成本低很多。

课程表和学习记录表是一对多的关系，学习记录表要记录用户ID、课程ID、章节ID、学习时长、最后学习时间、完成状态。判断一个课程"学完"的逻辑是有讲究的，源码里采用的方案是：以章节为单位，每个章节观看进度达到90%以上算学完，全部章节学完整个课程才算完成。有些系统粗放地只记录"看完整个视频"或者"进入课程就算完成"，很容易被学员刷学时，这个细节建议照抄。

2.3 数据字典与枚举状态管理

系统里有很多状态字段，比如课程状态（草稿/已上架/已下架）、考试状态（未开始/进行中/已结束）、审批状态（审批中/通过/驳回）、订单状态（待支付/已支付/已取消）等。源码中用两种方式管理：一种是数据库层面的数据字典表，存各种枚举值，前端通过字典接口动态获取下拉选项；另一种是后端代码里用枚举类管理，保证业务逻辑里不会出现魔法数字。

我个人的经验是：状态字段尽量用固定小写英文字符串（如draft、published）而不要用数字（如 0、1、2）。虽然数字省空间，但别人接手代码时看status = 1完全不知道是什么含义，用字符串状态码配合枚举类，代码可读性和可维护性都强很多。

3. 后端核心实现与实操细节

3.1 SpringBoot2 项目搭建与分层结构

后端项目我建议用 Maven 管理依赖，Java 包结构用标准的 controller-service-mapper-entity-common 五层。common层放统一返回结果类、全局异常处理器、工具类、常量定义。统一返回结果类设计成泛型结构：

@Data public class Result<T> { private Integer code; private String message; private T data; public static <T> Result<T> success(T data) { Result<T> result = new Result<>(); result.setCode(200); result.setMessage("操作成功"); result.setData(data); return result; } public static <T> Result<T> error(String message) { Result<T> result = new Result<>(); result.setCode(500); result.setMessage(message); return result; } }

全局异常处理器用@RestControllerAdvice注解实现，把参数校验异常、业务异常、未知异常统一捕获并转换为统一返回格式。这样前端 Axios 拦截器只需要判断一次code字段就能处理所有错误情况，不需要每个接口单独写 try-catch。这一层是很多初学者容易忽略的，没有全局异常处理的系统，代码里到处散落着 try-catch，维护起来极其痛苦。

数据库连接方面，Druid 连接池是我在这个项目里选用的方案。它除了性能稳定之外，还自带了监控页面，可以看到当前连接数、SQL执行频率和慢查询记录。这部分在生产排查问题时非常有用，我强烈建议你在配置文件中把 Druid 的 WebStatFilter 和 StatViewServlet 开启，访问/druid路径就能看到监控面板。

3.2 MyBatis-Plus 的高效用法

MyBatis-Plus 最让我省心的功能就是条件构造器和分页插件。先看条件构造器的用法，比如系统里列表页最常见的是"根据课程名称模糊查询 + 按状态筛选 + 按创建时间倒序"：

LambdaQueryWrapper<Course> wrapper = new LambdaQueryWrapper<>(); wrapper.like(StringUtils.hasText(name), Course::getName, name) .eq(status != null, Course::getStatus, status) .orderByDesc(Course::getCreateTime); IPage<Course> page = new Page<>(current, size); IPage<Course> result = courseMapper.selectPage(page, wrapper);

用 LambdaQueryWrapper 的好处是类型安全，不会因为手写字符串字段名写错导致运行时才报错。加StringUtils.hasText(name)这种条件判断，是为了实现"参数为空就不拼接条件"，这样前端少传一个查询条件也不会报错，配合前端表单传参非常灵活。

分页插件需要手动配置一个拦截器，很多初学者在这里踩坑，以为 MyBatis-Plus 默认就带分页能力，实际上必须加PaginationInnerInterceptor：

@Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; }

注意DbType.MYSQL这个参数要和你数据库类型匹配。如果你用的是 PostgreSQL 或者 SQL Server，这里填错会导致分页 SQL 生成不对，出现的错误非常隐蔽。

另外强烈建议开启 MyBatis-Plus 的逻辑删除功能，在实体类的deleted字段上加上@TableLogic注解。这样删除操作实际上是执行UPDATE ... SET deleted = 1，而不是物理删除。教育行业的数据往往涉及学时记录和考试记录，后续可能要做审计追踪，物理删数据后患无穷。逻辑删除开起来之后，查询也会自动带上deleted = 0条件，对业务代码完全无感。

3.3 JWT 认证与接口鉴权实现

JWT 登录流程我用一张流程图就能说清楚，但这里还是拆成步骤来讲：

1. 用户提交用户名和密码，后端用 BCrypt 校验密码是否正确。
2. 校验通过后，创建 JWT，把用户ID、用户名、角色编码放进去，设置过期时间（我系统里默认是 24 小时）。
3. 返回 token 给前端，前端后续请求带上请求头Authorization: Bearer <token>。
4. 后端拦截器解析 token，校验签名和过期时间，然后把用户信息放入ThreadLocal，供后续业务代码获取当前登录用户。

JWT 生成的代码用io.jsonwebtoken这个库，核心逻辑如下：

public String createToken(Long userId, String username, String roleCode) { Date now = new Date(); Date expireDate = new Date(now.getTime() + expireTime); return Jwts.builder() .setSubject(username) .claim("userId", userId) .claim("roleCode", roleCode) .setIssuedAt(now) .setExpiration(expireDate) .signWith(SignatureAlgorithm.HS256, secretKey) .compact(); }

secretKey一定要放在配置文件里，不要硬编码在代码里，更不要用默认的secret这种弱密钥。生产环境如果泄露了 JWT 密钥，攻击者可以自己签发任意身份的 token，后果非常严重。

接口鉴权我是在 Spring MVC 拦截器里做的。先在WebMvcConfigurer里注册拦截器并配置放行路径，比如登录接口、验证码接口、静态资源这些不需要鉴权。拦截器里拿到请求头 token 后解析，解析失败直接返回 401 状态码，前端收到后跳转登录页。角色级别的权限控制用@PreAuthorize("hasRole('ADMIN')")注解加在 controller 方法上，配合 Spring Security 的注解支持来实现。不用把所有权限校验都写在拦截器里，注解方式更直观。

3.4 文件上传与视频点播处理思路

教育培训系统绕不开文件上传，视频课件、课程封面、习题附件都需要。我后端封装了一个通用的文件上传接口，支持图片、视频、PDF、Word 等格式，限制单文件大小不超过 500MB（视频允许大一点）。文件存储路径在配置文件中指定，可以配置成本地磁盘路径，也可以扩展为阿里云 OSS 或 MinIO 对象存储。

这里有个很实用的小技巧：上传的文件如果直接存数据库字段，长时间运行数据库会变得非常臃肿，备份和迁移都很痛苦。正确做法是数据库只存文件访问路径，文件本身存磁盘或对象存储。系统运行时需要根据配置的访问前缀自动拼接完整的 URL。比如配置：

file.upload-path=/data/upload/ file.access-prefix=/files/

前端拿到相对路径/files/20240601/xxx.mp4，由 Nginx 直接映射到/data/upload/目录提供静态访问，完全不需要经过 Java 后端。

视频点播这块，源码提供的是直接播放 MP4 文件的方式，用 HTML5 video 标签就能播。如果你后续要做更专业的点播平台，可以在这个基础上集成阿里云视频点播或自建 HLS 切片方案，但作为教育办公一体化系统，直接播放 MP4 已经完全够用。学习进度上报接口是前端每 15 秒调一次，后端拿到当前播放秒数写库，页面关闭前一秒也上报一次。这样学员中途退出再进来，前端能通过接口获取上次学习位置，续播体验很好。

4. 前端核心实现与交互设计

4.1 Vue3 项目搭建与工程化配置

前端我用了 Vite 作为构建工具，创建项目直接执行：

npm create vite@latest admin-web -- --template vue

然后安装项目依赖，把 Vue Router、Pinia、Axios、Element Plus 都装上。Element Plus 是配合 Vue3 使用最顺手的组件库，表格、表单、弹窗、树形控件都有现成的，做后台管理系统效率极高。

前端目录结构我做了模块化拆分，src/api目录下按业务模块拆文件（如course.js、exam.js、user.js），src/views目录按页面模块建目录，每个目录里放index.vue入口文件。src/router放路由配置，src/store放 Pinia 状态管理代码。这样一个多人协作的项目结构清晰，谁负责哪个模块一目了然。

Vite 开发代理配置是前后端联调必备的一环，避免开发时出现跨域问题：

export default defineConfig({ server: { port: 5173, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })

前端请求统一写/api/xxx，Vite 在开发环境下自动代理到后端的 8080 端口。生产环境构建后由 Nginx 做反向代理，规则同样是把/api前缀的请求转发到 Java 服务。这样一来前后端联调和生产部署都只需要关心相对路径，不用在代码里硬编码 IP 和端口。

4.2 登录鉴权与动态路由设计

前端登录逻辑是这样的：用户登录页输入账号密码，调登录接口拿到 token 后存到 localStorage，同时调用获取用户信息的接口，拿到用户名、角色、权限点列表。然后根据角色动态生成可以访问的路由表，用router.addRoute()动态添加。这样做的好处是：不同角色登录后看到的菜单不同，普通学员登录不会在左侧菜单看到"用户管理""审批配置"这些管理端菜单。

路由守卫在每次页面跳转前检查 token 是否存在：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (to.path === '/login') { token ? next('/') : next() } else { token ? next() : next(`/login?redirect=${to.path}`) } })

这个逻辑看起来简单，但一定要加redirect参数，让登录成功后跳回用户原本想访问的页面，而不是永远回到首页。这个体验细节很多系统都没有做，登录一次就丢路径，用户很烦躁的。

Pinia 用来管理用户状态，比如当前用户信息、权限点集合、侧边栏折叠状态。核心代码如下：

export const useUserStore = defineStore('user', { state: () => ({ userInfo: null, permissions: [] }), actions: { setUserInfo(info) { this.userInfo = info this.permissions = info.permissions || [] }, hasPermission(perm) { return this.permissions.includes(perm) } } })

按钮级权限在前端用一个自定义指令实现，指令内部调用userStore.hasPermission，没有权限时直接移除按钮 DOM。这个方案比在每个按钮里写 v-if 判断要干净得多。

4.3 Axios 封装与接口请求处理

Axios 封装是整个前端项目的基建工程，这部分做得好，后面所有业务页面都能少写很多冗余代码。我的封装规则如下：

const service = axios.create({ baseURL: '/api', timeout: 30000 }) // 请求拦截器：自动携带 token service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // 响应拦截器：统一处理业务码 service.interceptors.response.use( response => { const res = response.data if (res.code === 200) { return res } else if (res.code === 401) { localStorage.removeItem('token') router.push('/login') return Promise.reject(new Error(res.message)) } else { ElMessage.error(res.message || '请求失败') return Promise.reject(new Error(res.message)) } }, error => { ElMessage.error(error.message || '网络异常') return Promise.reject(error) } )

超时时间设置 30 秒比较合理，因为有些接口比如导出一万多条数据的 Excel 确实会慢，设置太短会导致请求被误杀。响应拦截器里统一处理 401：token 过期后清掉本地 token，跳转登录页，并且用ElMessage提示"登录状态已过期，请重新登录"。这个逻辑只要改一遍，所有页面都能享受到统一体验。

4.4 课程学习与考试模块的前端交互细节

课程学习页是学员用得最多的页面。前端布局左侧是章节列表，中间是视频播放区域，右侧是课件下载区和笔记区。章节列表通过接口获取整个课程的章节树，当前章节高亮显示。视频播放用原生 video 标签，播放器监听timeupdate事件，每 15 秒上报一次进度。切章节时把当前播放时间存到 store，下个章节加载后继续播放。

考试模块的前端有几个坑要提前说一下：

• 考试倒计时组件不要用后端返回的截止时间戳做本地计算，因为用户改本地时间会影响倒计时准确性，正确做法是后端返回服务器的当前时间戳，前端基于这个时间戳做倒计时。
• 答题过程中前端要把答案实时保存在本地，防止页面刷新后答案丢失。我用的方案是 localStorage 存一份，同时每答一题调用一次保存接口。
• 交卷前做二次确认弹窗，提示"交卷后不可修改"，防止误触。
• 考试页面禁止复制粘贴文本，防止考生从外部搜索答案粘贴进来。这个功能用@copy事件阻止默认行为实现。

试卷的题目展示按题型分组，单选题用 radio 组件，多选题用 checkbox 组件，判断题也是 radio，简答题用 textarea。每种题型一个组件，通过动态组件component :is渲染，父组件只负责遍历题目数组并收集答案，结构清晰且便于扩展新题型。

5. 环境搭建、部署上线与文档配套

5.1 MySQL8.0 安装与初始化配置

数据库这块我踩过最多的坑就是时区和认证插件。MySQL8.0 安装完成后，如果你的 JDBC 连接串里没有加时区参数，会直接报Server returns invalid timezone错误。正确连接串写法：

jdbc:mysql://localhost:3306/edu_office?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai

serverTimezone=Asia/Shanghai这一个参数必须加，否则连接失败。

字符集方面建库的时候就要指定好：

CREATE DATABASE edu_office DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

MySQL8.0 默认就是 utf8mb4，但如果你是从老版本迁移过来的，一定要检查所有表，避免出现中文乱码。

关于 MySQL8.0 的安装方式，如果只是为了本地开发，我建议直接用 Docker 跑，省时省力。一条命令搞定：

docker run -d --name mysql8 -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD=yourpassword \ -e TZ=Asia/Shanghai \ -v /data/mysql:/var/lib/mysql \ mysql:8.0

生产环境如果有专门的服务器，用 Linux 二进制包安装更稳妥，内存占用比 Docker 更可控。但不管哪种方式，装完后都必须修改 root 账号的认证插件，MySQL8.0 默认的caching_sha2_password会导致一些旧版客户端连不上，改成mysql_native_password是最省事的方案：

ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'yourpassword'; FLUSH PRIVILEGES;

5.2 后端打包部署与前端构建

后端打包用 Maven 执行mvn clean package -DskipTests，生成一个可执行 jar 包。SpringBoot 内置 Tomcat，生产环境不需要单独装 Tomcat。启动命令：

java -Xms256m -Xmx512m -jar edu-office.jar \ --spring.profiles.active=prod \ --server.port=8080 > /data/logs/edu-office.log 2>&1 &

-Xms和-Xmx建议根据服务器内存情况调整，512MB 内存的小服务器 256/512 能跑起来，内存大的机器可以给到 1G/2G。日志重定向到文件，方便排查问题。

前端构建执行npm run build，生成静态文件到 dist 目录。然后配置 Nginx：

server { listen 80; server_name yourdomain.com; location / { root /data/www/edu-office/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

try_files $uri $uri/ /index.html这一行是 Vue Router history 模式必须的，否则前端路由页面刷新直接 404。这个坑几乎每个 Vue 项目部署都会遇到，先记下来。

5.3 系统文档包含哪些内容，怎么用

这套源码自带文档，包含了项目说明、数据库设计说明、接口文档和部署文档。我过了一遍，质量在线。数据库设计说明里每张表都标注了字段含义和枚举值说明，接口文档里对每个接口的请求参数和返回结果做了示例说明，部署文档里写了环境要求、初始化步骤和常见问题。

文档这块我要多强调一句：很多源码项目给了文档也不会看，到真正动手部署的时候遇到问题又不知道哪里查。建议不管文档多全，先把docs/目录完整看一遍再动手，别上来就启动。我就是因为先看了部署文档里的环境要求，才提前发现本地 JDK 版本不对，避免了后面一堆依赖报错。

6. 常见问题排查与避坑实录

6.1 跨域请求和会话保持问题

前后端分离最常遇到的就是跨域。如果你用我上面的方案，SpringBoot 后端加了 CORS 配置，或者前端开发环境用 Vite 代理 + 生产环境用 Nginx 代理，基本不会碰到跨域拦截问题。但如果你直接在浏览器地址栏访问前端页面，并且后端没有配置 CORS，请求就会报blocked by CORS policy。在 SpringBoot 后端加一个全局 CORS 配置类就可以解决：

@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); } }

注意allowedOriginPatterns("*")而不是allowedOrigins("*")，前者在配合allowCredentials(true)时不会报错。

6.2 MyBatis-Plus 字段自动填充失效

源码里用到了 MyBatis-Plus 的字段自动填充功能，也就是create_time、update_time这两个字段自动插入当前时间。实现方式是实现MetaObjectHandler接口，重写insertFill和updateFill方法。这里有个非常隐蔽的坑：实体类的createTime字段必须加@TableField(fill = FieldFill.INSERT)注解，updateTime加@TableField(fill = FieldFill.INSERT_UPDATE)，少了这个注解自动填充不生效。而且字段名要和数据库列名映射正确，不然填充进去的是 null。

6.3 接口返回 JSON 报循环引用异常

实体类如果存在多对多关系，比如用户表关联角色表，角色表又关联权限表，权限表又持有角色集合，用 Jackson 序列化时容易触发无限递归，导致StackOverflowError。解决方式有两种：字段上加@JsonIgnoreProperties做序列化忽略，或者在业务层转成 VO/DTO 对象返回。我代码里大量使用了 VO 对象，比如UserVO、CourseVO，只保留前端需要的字段，既避免循环引用，也控制了接口返回体大小。这个方法强烈推荐，别偷懒直接返回实体类。

6.4 前端 Element Plus 表格分页与排序联动的细节

列表页分页组件和表格必须配合好。Element Plus 的el-table自带sort-change事件，后端排序字段和排序方向要传给后端，后端通过 MyBatis-Plus 的orderBy方法拼进 SQL。这一套联动代码在源码里已经封装好了，但她封装的方式有个要点：如果前端点击排序，必须同时把页码重置为 1，否则用户在第 6 页点击排序，结果还是会从第 6 页开始展示，看起来"排序没生效"。

6.5 常见问题速查表

为了方便排查，我把常遇到的问题整理成一个速查表，建议截图保存。

6.6 性能优化与安全加固建议

系统跑起来简单，但要扛住真实生产流量，有几个地方值得优化。第一是数据库索引，登录账号、课程ID、用户ID这些高频查询条件都要建索引。我个人建议用SHOW INDEX FROM 表名检查一下，发现没有索引的高频查询字段赶紧补上。第二是首页统计相关接口如果数据量大，加一层 Redis 缓存，把课程数量、学员总数、今日学习人次这些指标缓存 5 分钟，减少数据库压力。

安全方面，生产环境记得改掉 Swagger/接口文档的默认开关，不要对外暴露内部接口说明。管理员账号密码要重置，默认密码必须改。JWT 密钥换成随机生成的 256 位字符串。文件上传接口要校验文件后缀名和 MIME 类型，防止上传恶意脚本。这些都是真实项目上线前必须检查的项。

7. 二次开发扩展方向

这个系统已经能跑通教育+办公的核心闭环，但如果你有新的业务场景，有几个扩展方向可以考虑。一是接入企业微信或钉钉，实现扫码登录、消息提醒、审批待办推送，这个在办公场景下价值很大。二是增加直播教学模块，集成腾讯云或声网的实时音视频能力，从点播升级到直播互动。三是引入 ElasticSearch 做课程搜索，当前用 MySQL 的LIKE %keyword%查询在小数据量下没问题，课程量过万后搜索性能会有瓶颈。四是增加移动端 H5 或小程序端，让学员在手机上也能看课、考试、提交审批。

从技术演进角度讲，如果团队人手多、流量大，可以把单体拆微服务，按用户、课程、考试、审批拆服务，中间加消息队列解耦，但这些是基于业务发展到一定规模之后的考量。当前这套单体架构对于中小团队和中小业务量完全够用，不要为了微服务而微服务。

这套系统的价值不在于用了多少新框架、写了多少行代码，而在于它把教育培训和办公审批两个领域最核心的业务场景做得足够完整，代码分层清晰，文档配备齐全，无论是学习、二次开发还是直接商业化落地，都能省下大量的起步时间。

最后分享我在实际体验过程中的一点体会。这类全栈系统项目，"跑起来"只是起点，真正值钱的是怎么把每个细节做对。比如密码加密用 BCrypt 而不是 MD5、逻辑删除而不是物理删除、文件路径存 DB 而不是文件本身、跨域通过代理解决而不是代码里硬编码。这些都是你在短期项目里看不出来的经验，但到了生产环境，每一项都决定着系统能不能长期稳定跑下去。希望这篇文章能帮你把这套系统吃透，也别只停在"能跑"，继续往深挖，收获会大得多。