我最早接到这个“Java Web 信息化在线教学平台”项目需求的时候第一反应是这不就是把一个教学后台的增删改查搬到网页上嘛。真做下来才发现教学平台的难点从来不在写代码而在业务状态怎么设计、权限边界怎么划、课程资源怎么组织以及前后端怎么才不会在联调阶段互相推诿。这周正好把源码重新梳了一遍配合SpringBoot2Vue3MyBatis-PlusMySQL8.0这套组合把从表结构到登录鉴权、从课程发布到作业提交的完整链路拆给大家看。如果你正准备找一套能直接改的在线教学平台源码或者想参考一个规范的前后端分离企业级项目这篇内容会比较对你胃口。我会把骨架设计、关键代码原理、部署细节和容易踩的坑全部分享出来哪怕你之前没系统玩过MyBatis-Plus也能顺着这套东西读懂一个真实后台是怎么转起来的。1. 信息化在线教学平台的业务定位与整体架构1.1 在线教学平台要处理的核心角色与业务闭环教学类系统最容易犯的错是把它做成“课程表的展示网页”。真正能用的教学平台至少要跑通三条业务链管理链、教师链、学习链。管理链管用户、管课程分类、管全局配置教师链负责创建课程、发布章节、上传课件、布置作业学习链则要解决学生选课、看视频、做练习、交作业、看成绩这件事。于是角色模型就落成三个大类管理员后台入口管理所有用户和课程状态。教师能够创建课程、维护章节资源、批改作业。学生可选课、学习章节、提交作业、查看成绩。业务流程闭环是管理员构建基础数据教师生产教学内容学生消费教学内容并产生学习数据数据又回到管理后台变成统计报表。代码里对应的就是用户表、课程表、章节表、资源表、作业表、提交记录表这些实体看似普通但彼此之间的外键关系和状态流转才是整个项目最值得抄的部分。1.2 这套技术组合到底在解决什么问题SpringBoot2Vue3MyBatis-PlusMySQL8.0常被戏称为“国内后台管理系统经典起手式”。热度高不代表它简单恰恰说明这套组合能覆盖大多数中小型系统80%的通用需求。SpringBoot2虽然SpringBoot3已经发布但2.x版本生态最稳定尤其针对旧JDK8环境兼容性极佳教学类项目往往跑在各种版本不一的服务器上用JDK8SpringBoot2是最不折腾的选择。Vue3Composition API带来的逻辑复用能力让差不多大小的后台页面维护成本比Vue2时代低了不止一个档次。配合TypeScript团队协作时模块边界非常清晰。MyBatis-Plus单纯的MyBatis要写大量XML普通后台增删改查模板化痕迹太重。而MyBatis-Plus的通用Service和Wrapper查询让单表CRUD几乎不再需要手写SQL开发效率提升非常可观。MySQL8.0默认字符集utf8mb4让emoji正常入库窗口函数在处理排行、统计时有天然优势。相较5.78.0对JSON的支持和索引优化也让教学平台里动态表单、多条件筛选这类功能好写很多。组合在一起的时候数据流是单向清晰的Vue3页面触发axios请求SpringBoot Controller接收Service层完成业务MyBatis-Plus Mapper处理数据库。业务逻辑紧密聚集在Service层前端只拿到统一格式的JSON。对需要“一套代码同时维护PC端后台管理人员端”的项目来说限界非常舒服。2. 后端体系的拆解与关键实现2.1 为什么后端必须采用分层式工程结构我在很多项目的Service层里见过几百行业务逻辑这不叫分层这叫堆积。这版在线教学平台的前后端分离结构下我建议这样划分目录com.eduplatform ├── common # 通用结果、异常、常量 ├── config # 配置类如MyBatis-Plus分页插件、跨域配置 ├── controller # 接收参数、调用服务、返回统一结果 ├── entity # 数据库实体 ├── mapper # MyBatis-Plus 数据访问层 ├── service # 业务核心含service.impl └── util # 工具类如JWT工具这套分层的好处很明显Controller不写业务只做参数接收和响应封装。Service层是业务逻辑的唯一入口哪怕将来从SpringBoot换到别的框架只需要改Controller层。Mapper层全部交给MyBatis-Plus省去大量重复SQL。线上环境里排查问题可以从请求入口一路顺着堆栈找到具体业务节点快速定位。2.2 基于MyBatis-Plus的通用CRUD服务设计MyBatis-Plus最核心的卖点是通用Mapper接口教学平台里的用户、课程、章节几乎都是单表操作居多因此我建议先抽出一套通用Service接口public interface BaseServiceT { T get(Long id); ListT list(WrapperT queryWrapper); boolean save(T entity); boolean update(T entity); boolean delete(Long id); }再让具体Service继承它。拿课程模块举例public interface CourseService extends IServiceCourse { PageCourse pageCourses(int page, int size, CourseQuery query); ListCourse listPublishedCourse(); }业务实现类里直接用MyBatis-Plus自带的LambdaQueryWrapper做条件查询PageCourse page new Page(page, size); LambdaQueryWrapperCourse wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.isNotBlank(query.getName()), Course::getName, query.getName()) .eq(query.getStatus() ! null, Course::getStatus, query.getStatus()) .orderByDesc(Course::getCreateTime); return courseMapper.selectPage(page, wrapper);只要遵守命名规范实体字段和Java字段映射是自动的。遇到自定义SQL再在Mapper里用注解或XML处理。通用CRUD节省下的时间正好集中精力写选课、成绩统计这些真正的业务点。分页插件在MyBatis-Plus中必须显式配置否则分页查询会查全表Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; }2.3 数据库表设计与MySQL8.0实践教学平台典型表设计如下表名核心字段说明sys_userid, username, password, role, status用户统一表edu_courseid, teacher_id, title, cover, status课程主表edu_chapterid, course_id, title, sort章节表edu_resourceid, chapter_id, file_url, file_type课件/视频资源edu_homeworkid, course_id, title, deadline作业表edu_student_homeworkid, homework_id, student_id, score, content学生提交表edu_student_courseid, student_id, course_id, status选课关系表关于MySQL8.0有几点值得重点说说字符集统一utf8mb4排序规则utf8mb4_general_ci避免中文乱码和表情符号报错。InnoDB是必须的。外键约束在这个项目里我建议只在业务层维护数据库层面不加物理外键便于后续分库分表。常用查询字段建索引比如course表的status、order表里的course_id、student_id。MySQL8.0的索引是降序索引查询order by desc效率会比5.7高。如果涉及排行榜和统计可以用窗口函数。比如统计某门课程学生提交作业次数排名一条SQL即可SELECT student_id, COUNT(*) AS submit_cnt, RANK() OVER (ORDER BY COUNT(*) DESC) AS rk FROM edu_student_homework WHERE course_id 1 GROUP BY student_id;这套基础设施搭稳了后端开发才会真正变成“填业务方法”而不是天天处理乱码和超时。3. 前端Vue3工程与后台管理体验设计3.1 Composition API重写后的代码组织方式当年用Vue2写后台最大的痛苦是一个页面功能稍多data、methods、computed散落各处想复用一段逻辑得写个mixin结果mixin之间变量名冲突让人头大。Vue3把这一切收敛到了Composition API代码组织方式从“按数据类型切”变成了“按功能逻辑切”。以课程列表页为例我拆成三个区域const tableData refCourse[]([]); const loading ref(false); const queryParams reactive({ page: 1, size: 10, title: }); async function fetchList() { loading.value true; const { data } await getCourseList(queryParams); tableData.value data.records; total.value data.total; loading.value false; } function handleSearch() { queryParams.page 1; fetchList(); }这套代码在业务理解上很直观页面加载时请求列表搜索按钮重置页码并重新请求。Composition API带来的好处是这块逻辑可以整体抽到useCourseList函数里在多个页面复用。3.2 权限路由与动态菜单的实现思路一个管理后台一定存在角色差异学生能看到“我的课程”教师能看到“课程管理”管理员能看到“用户管理”。前端如果写死路由切账号时要么刷新全页要么出现无权页面。这套项目采用“动态路由菜单过滤”方案登录接口返回当前用户角色信息。前端根据角色从路由配置里过滤出可访问页面。菜单组件遍历过滤后的路由表自动生成侧边栏。核心代码大致是const allRoutes [ { path: /course, name: 课程中心, roles: [admin, teacher, student] }, { path: /course-manage, name: 课程管理, roles: [admin, teacher] }, { path: /user-manage, name: 用户管理, roles: [admin] }, ]; const userRoutes allRoutes.filter(r r.roles.includes(userRole));把角色信息存进Pinia刷新页面时再从本地持久化数据恢复。路由守卫里检查目标路由是否在用户路由表内不在就跳转403页面。小程序、移动端复用这套权限模型也只是换个壳核心逻辑完全一致。3.3 接口请求封装和跨域联调经验前后端分离项目中axios封装质量直接影响联调效率。直接在每个页面写axios.post会让拦截、错误提示、token注入全乱套。我通常封装一个请求模块const service axios.create({ baseURL: /api, timeout: 15000 }); service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) config.headers.Authorization Bearer ${token}; return config; }); service.interceptors.response.use(res { if (res.data.code 200) return res.data; ElMessage.error(res.data.message || 请求失败); return Promise.reject(res.data); }, err { if (err.response?.status 401) { router.push(/login); } return Promise.reject(err); });注意baseURL设为/api然后用Vite开发服务器代理转发到后端端口// vite.config.ts server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } }这是我在无数个项目里验证过最省心的方案浏览器不出现跨域生产部署时用Nginx反向代理到同一个域名下后端也无需开启CORS。后端不需要单独处理跨域减少安全隐患。3.4 后台管理页面里的组件化实践在线教学平台的页面重复率非常高几乎每个模块都是“查询条件表格弹窗表单”。我会专门封装一个通用ProTable组件让它能接收配置项columns表格列配置api请求方法searchForm查询条件渲染operateBtns操作按钮课程列表和作业列表只是换换配置不需要重写页面结构。表单部分用动态渲染根据schema生成下拉、日期、文件上传等控件。这样代码量最少缩减一半而且改UI风格只需要动一处公共组件。另外一个细节是表格分页组件要和后端分页返回格式对齐。后端我统一返回{ code: 200, data: { records: [], total: 100, current: 1, size: 10 } }前端拿到total直接赋给el-pagination的total属性就无需二次转换。4. 环境部署、初始化配置与坑位排查4.1 MySQL8.0安装和连接注意事项很多开发者在Windows本机安装MySQL8.0时就能卡掉一半时间。安装包路径最好选纯英文目录避免中文路径带来奇怪字符集问题。初始化数据时建议用Docker跑一个临时实例避免污染本机环境docker run -d --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD123456 \ -e TZAsia/Shanghai \ mysql:8.0这个命令会在3306端口起一个MySQL8.0。进入容器执行初始化SQL脚本docker exec -i mysql8 sh -c exec mysql -uroot -p123456 init.sql若用Navicat或JDBC连接密码加密方式要留意。MySQL8.0默认使用caching_sha2_password部分旧驱动连不上会报“Unable to load authentication plugin”。SpringBoot2.x的高版本驱动已经兼容如果还报错可以创建一个兼容账户CREATE USER edu% IDENTIFIED WITH mysql_native_password BY edu123456; GRANT ALL PRIVILEGES ON edu_platform.* TO edu%; FLUSH PRIVILEGES;另外连接串里加上时区参数spring: datasource: url: jdbc:mysql://localhost:3306/edu_platform?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalseallowPublicKeyRetrievaltrueallowPublicKeyRetrievaltrue这个参数用MySQL8.0本地调试时很容易被漏掉不加的话首次连接大概率报公钥检索失败。4.2 后端启动流程与YAML配置解读拿到源码之后第一步不是直接点运行而是要理顺启动流程建数据库执行项目doc目录下的schema.sql和data.sql前者建表后者写入管理员初始账号。修改application.yml里数据库账号密码。启动后端服务默认8080端口。启动前端npm install或者用pnpm、yarn然后npm run dev。application.yml中还经常配置MyBatis-Plus的逻辑删除和字段填充mybatis-plus: global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0配置逻辑删除后就不用手动在SQL里写deleted 0MyBatis-Plus会在查询时自动追加条件。有一点必须提醒逻辑删除字段的全局配置一旦开了所有实体都必须有deleted字段否则会报找不到列的错误。后端项目里如果有Redis支持注意本地没有Redis时启动会失败。可以先检查pom里是否依赖spring-boot-starter-data-redis若有最简单方案是本地起一个默认端口的Redis或者暂时注释掉与Redis相关的代码和配置。4.3 常见问题排查实录速查表我把这个项目运行时最容易遇到的问题整理成一张表逐一对应解决方式问题现象可能原因处理办法后端启动报端口被占用8080端口被其他进程占用改server.port或用netstat -ano查PID后结束进程登录接口返回密码错误数据库中密码是明文但登录时用了BCrypt加密确认密码字段存储的是使用了相同BCrypt生成的密文前端请求跨域或404代理配置不对或后端路径不匹配检查Vite代理前缀确认Controller的RequestMapping全路径查询列表接口返回全部数据分页参数没有传给MyBatis-Plus分页插件检查是否配置PaginationInnerInterceptor前端菜单不显示localStorage里角色过期或路由过滤错误重新登录清空缓存后再进入系统MySQL连接失败未修改yml配置或时区设置错误检查URL中serverTimezone确保数据库服务已启动Upload文件无法保存上传目录不存在或Nginx没有映射目录在配置中指定绝对路径创建目录并设置权限逻辑删除开启后查询报错某个实体没有deleted字段给对应表增加deleted字段或在实体中标注TableLogic有一个坑特别容易忽视前端Vue3的响应式如果使用const data reactive([]), 之后用data res.data替换整个数组那是不会触发视图更新的。得用splice清空再push或者干脆用ref管理列表变量。项目里因为这个问题我在排查时愣是浪费了一个下午后来统一了规范接口返回的列表一律用ref表单对象才用reactive。4.4 项目文档和二次开发扩展建议这套源码文档里一般会包含设计文档和数据库脚本。拿到后不要急着删建议先跑通能登录的流程再基于接口调试学习各个模块。二次开发时我建议从这三个点切入新增一个实体模块画表结构、生成实体类、Copy一个Controller/Service/页面就当模板约半小时就能完成。给课程加一个“公告”功能公告本质上也是附加在课程ID下的文本记录只要表结构加课程外键前端路由和菜单加一个入口即可。接入对象存储教学资源文件如果直接存在本机后续扩容很麻烦。可以把文件上传接口改造成对接阿里云OSS或MinIOPostgreSQL也一样适用。平台的价值不只是那几行增删改查而是你掌握这套模式之后接任何管理类项目都能快速复刻。5. 源码实操心得与几个值得改进的细节最后分享几个我在整理这个在线教学平台源码时印象比较深的点。第一个是JWT登录信息的存储。项目中用了JWT但前端后续请求需要解析用户ID怎么办我建议在用户登录时就把个人信息缓存到Pinia和localStorage而不要在每一次请求里解析token。token只负责“你是谁”用户资料负责“你长什么样”两者分离后业务代码会清爽很多。第二个是通用接口的权限控制。Controller上使用PreAuthorize注解控制接口权限但有的同学会把权限判断写在Service层里层层透传。更好的方法是入口处直接拦截PreAuthorize(hasRole(TEACHER)) PostMapping(/course)这样权限问题和业务逻辑彻底解耦不通过权限校验的请求根本进不了Service。第三个是单元测试和Mock数据。我看到很多团队拿到这种项目就直接往生产环境连其实可以在resources里准备一个测试数据源配置用H2内存库跑单元测试配合Spring Boot的MybatisTest把Service核心逻辑的回归保障起来。虽然在线教学平台复杂度不高但只要你想往团队多人协作方向走这步值得投资。还有个细节前端环境变量。项目里开发、测试、生产环境的后端地址不同建议配置.env.development和.env.production文件通过import.meta.env读取API前缀避免每次换环境都要改源码。这套平台在不同环境部署时这一条能让运维省掉大量麻烦。至于在线教学平台未来的演进方向我认为可以接上统计分析和学习行为采集把学生看完视频的进度、错题情况汇总成可视化报表甚至和消息推送打通。现在这套代码的底层结构对这些扩展是完全友好的课程、作业、用户、提交记录都有了往上堆功能就像是搭积木。我在实际动手过程中最大的体会是拿到任何一套源码先别急着改业务先跑通再看核心链路最后再动手。跟着用户、课程、作业这条链路走一遍整个SpringBoot2Vue3的技术栈基本就串起来了。剩下的就是在踩坑中加深记忆了。