简介本资源为在线课堂微信小程序毕业设计完整项目包面向计算机相关专业需要完成毕业设计的学生及Java全栈初学者。项目基于微信小程序、SSM框架与MySQL数据库开发覆盖管理员、教师、学生三类角色包含班级管理、课程信息、作业布置与评分、课堂签到、选课、考试、课程资源与成绩评价等完整业务模块可作为课程设计或论文选题的参考方案。压缩包共1137个文件约81.95MB以java后端源码、vue前端页面、png与jpg界面素材、js脚本、wxml与wxss小程序页面、sql数据库脚本及doc论文文档为主另含mp4演示视频与bat启动脚本目录结构清晰便于按模块查阅。已有240人学习下载适合需要完整源码、数据库、开题报告、论文答辩材料与视频演示的读者可快速理解系统分析与数据库设计思路对照实现各角色功能并完成部署调试。1. 在线课堂微信小程序从选题到跑通一套能扛住答辩的落地路径每年毕业季计算机专业的选题里总有一类经久不衰在线课堂微信小程序。标题里挂着微信小程序、SSM、MySql、源码、毕业设计这几个词看起来平平无奇但真正动手的人才知道坑不在写代码而在“怎么把一套能演示、能讲清、能答辩的系统在有限时间里跑起来”。我带过几届学生的毕设也帮人改过不少“跑不起来的源码”最常见的翻车现场不是功能少而是环境对不上、数据库连不上、小程序请求被拦、答辩时说不清架构。这篇笔记就按一线做法把在线课堂微信小程序从选型、搭环境、写核心模块到避坑完整走一遍。适合正在做计算机毕业设计、想用微信小程序SSMMySql交出一份能过答辩作品的读者也适合想拿它当项目实例练手的人。2. 在线课堂微信小程序的技术选型为什么是微信小程序SSMMySql2.1 三件套各自的角色与选型理由先把架构拆清楚。在线课堂微信小程序这套系统本质是一个“移动端展示 服务端接口 数据库存储”的经典三层结构。微信小程序负责学生和教师看到的界面比如课程列表、视频播放、作业提交、公告通知SSMSpring SpringMVC MyBatis负责提供 HTTP 接口、处理业务逻辑、操作数据库MySql 负责存用户、课程、章节、作业、选课记录这些数据。为什么毕业设计里这套组合这么常见原因很实际。第一微信小程序开发门槛低微信开发者工具装好就能写不用配 Android 或 iOS 原生环境对不熟悉移动端的学生友好。第二SSM 是 Java Web 里资料最多的框架组合遇到问题一搜就有答案不像一些新框架那样文档零散。第三MySql 免费、轻量、安装配置教程满地都是mysql安装配置教程、mysql下载及安装教程这类搜索词常年有热度说明它确实是新手最容易上手的数据库。提示选型不是越新越好。毕业设计的核心目标是“能跑通、能讲清、能扩展”SSM 虽然不算新但胜在稳定和资料全答辩时老师也熟悉反而省事。2.2 环境准备JDK、Maven、Tomcat、MySql 的版本搭配环境是第一个大坑。我一般会固定一套组合JDK 1.8、Maven 3.6.x、Tomcat 8.5、MySql 5.7 或 8.0。为什么强调版本因为 SSM 项目里 Spring 的版本和 JDK 版本强相关JDK 太高比如 17会导致一些老依赖报错MySql 8.0 的驱动类名和 5.7 不同连接 URL 也要加时区参数很多“数据库连不上”的问题就出在这里。下面是一套可抄的环境检查命令先在本地确认基础工具是否就位# 检查 JDK 版本期望输出 1.8.x java -version # 检查 Maven 版本期望 3.6 以上 mvn -v # 检查 MySql 是否安装并启动期望能进入 mysql 命令行 mysql -u root -p # 查看 MySql 版本5.7 和 8.0 在驱动配置上有区别 SELECT VERSION();逻辑说明这四步是搭 SSM 项目前的“体检”。java -version确认 JDK 是 1.8因为 Spring 4.x/5.x 在 JDK 1.8 上最稳mvn -v确认 Maven 能用来拉依赖mysql -u root -p确认数据库服务已启动SELECT VERSION()拿到具体版本决定后面 JDBC 驱动怎么写。参数上如果 MySql 是 8.0连接 URL 要写成jdbc:mysql://localhost:3306/online_class?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse其中serverTimezone不加会报时区错误useSSLfalse避免本地连接时的 SSL 警告。2.3 数据库设计在线课堂最少需要哪几张表数据库不用一上来就设计几十张表毕业设计演示够用就行。核心表我一般保留这几张用户表user、课程表course、章节表chapter、选课表course_student、作业表homework、作业提交表homework_submit、公告表notice。下面给出建表 SQL 的关键片段-- 用户表区分学生和教师role 字段控制身份 CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, real_name VARCHAR(50), role TINYINT DEFAULT 0 COMMENT 0学生 1教师, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 课程表教师发布课程学生选课 CREATE TABLE course ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, cover VARCHAR(255) COMMENT 封面图路径, teacher_id INT NOT NULL, intro TEXT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 选课表记录学生选了哪些课联合唯一防止重复选课 CREATE TABLE course_student ( id INT PRIMARY KEY AUTO_INCREMENT, course_id INT NOT NULL, student_id INT NOT NULL, select_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_course_student (course_id, student_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;逻辑说明user表用role字段区分学生和教师避免建两张表增加复杂度course表用teacher_id关联发布课程的教师course_student表用联合唯一索引uk_course_student防止同一个学生重复选同一门课这是业务上必须的约束。参数上字符集统一用utf8mb4因为课程名、公告里可能有 emoji 或特殊字符utf8会存不进去。create_time默认CURRENT_TIMESTAMP省去手动赋值。3. SSM 后端接口怎么写从登录到课程列表的最小闭环3.1 用 Maven 搭出 SSM 骨架与依赖配置后端第一步是把 Maven 的pom.xml配好。SSM 项目需要 Spring、SpringMVC、MyBatis、MySql 驱动、Druid 连接池、Jackson 等依赖。下面是一份精简可用的依赖片段!-- Spring 核心与 Web -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.3.20/version /dependency dependency groupIdorg.springframework/groupId artifactIdspring-jdbc/artifactId version5.3.20/version /dependency !-- MyBatis 与 Spring 整合 -- dependency groupIdorg.mybatis/groupId artifactIdmybatis-spring/artifactId version2.0.7/version /dependency !-- MySql 驱动8.0 用 mysql-connector-java 8.x -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.29/version /dependency !-- Druid 连接池 -- dependency groupIdcom.alibaba/groupId artifactIddruid/artifactId version1.2.11/version /dependency逻辑说明spring-webmvc提供 Controller 能力spring-jdbc提供事务管理mybatis-spring把 MyBatis 的 SqlSession 交给 Spring 管理mysql-connector-java是数据库驱动druid是连接池。参数上Spring 5.3.x 配 JDK 1.8 稳定MySql 驱动 8.x 对应 MySql 8.0如果本地是 5.7驱动可以降到 5.1.x但 URL 写法也要跟着改。依赖版本不要东拼西凑同一套项目里 Spring 各模块版本保持一致否则容易出现NoSuchMethodError。3.2 登录接口小程序端 wx.login 与后端 session 的配合登录是在线课堂小程序的第一道关。常见做法是小程序端调用wx.login拿到 code传给后端后端用 code 换 openid这里不展开第三方接口细节毕业设计里常用模拟或简化处理再查用户表返回登录状态。下面是一个简化的后端登录接口RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; // 小程序端提交 username 和 password后端校验 PostMapping(/login) public Result login(RequestBody LoginDTO dto, HttpSession session) { User user userService.findByUsername(dto.getUsername()); if (user null || !user.getPassword().equals(dto.getPassword())) { return Result.fail(用户名或密码错误); } // 登录成功把用户信息放进 session session.setAttribute(userId, user.getId()); session.setAttribute(role, user.getRole()); return Result.ok(user); } }逻辑说明RestController让返回自动转 JSONRequestBody接收小程序端发来的 JSON 数据登录成功后把userId和role放进 session后续接口从 session 取当前用户。参数上LoginDTO是一个简单对象包含username和password两个字段。注意毕业设计里密码常明文存储实际项目必须加盐哈希但答辩时如果老师问起要能说出“生产环境应使用 BCrypt”这类改进点这是加分项。3.3 课程列表与选课接口MyBatis 映射与事务处理课程列表接口负责把课程查出来给小程序展示选课接口负责往course_student插记录。先看 MyBatis 的 Mapper XML!-- CourseMapper.xml -- select idselectAllCourses resultTypecom.demo.entity.Course SELECT c.id, c.name, c.cover, c.intro, u.real_name AS teacherName FROM course c LEFT JOIN user u ON c.teacher_id u.id ORDER BY c.create_time DESC /select insert idinsertCourseStudent INSERT INTO course_student (course_id, student_id) VALUES (#{courseId}, #{studentId}) /insert逻辑说明selectAllCourses用左连接把教师姓名一起查出来避免小程序端再发一次请求insertCourseStudent用#{}占位符防止 SQL 注入。参数上resultType指向实体类字段名和数据库列名不一致时可以用别名如teacherName。选课接口在 Service 层要加事务Service public class CourseServiceImpl implements CourseService { Autowired private CourseMapper courseMapper; Transactional Override public void selectCourse(Integer courseId, Integer studentId) { // 先查是否已选避免重复插入触发唯一索引异常 int count courseMapper.countSelected(courseId, studentId); if (count 0) { throw new RuntimeException(已选过该课程); } courseMapper.insertCourseStudent(courseId, studentId); } }逻辑说明Transactional保证“查重 插入”在一个事务里避免并发下重复选课先查后插虽然不能完全替代数据库唯一索引但能给出友好提示。参数上courseId和studentId都由 Controller 从请求和 session 中获取不要信任前端传来的学生 ID否则会出现“替别人选课”的漏洞。4. 微信小程序端怎么接请求封装、页面跳转与视频播放4.1 请求封装统一 baseUrl 与错误处理小程序端最忌讳每个页面都写一遍wx.request。常见做法是封装一个request.js// utils/request.js const BASE_URL http://localhost:8080/online_class; function request(options) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header: { content-type: application/json }, success(res) { if (res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res.data); } }, fail(err) { wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request };逻辑说明BASE_URL统一管理后端地址换环境只改一处用 Promise 包装wx.request页面里可以用async/await调用根据后端返回的code判断成功失败失败时弹提示。参数上header里content-type用application/json和后端RequestBody对应。注意微信开发者工具里要勾选“不校验合法域名”否则本地localhost请求会被拦这是新手最常见的翻车点之一。4.2 页面跳转与参数传递课程详情页怎么拿 courseId课程列表页点击某一门课要跳到详情页并带上courseId。常见写法// 列表页跳转 wx.navigateTo({ url: /pages/course/detail?courseId item.id }); // 详情页 onLoad 接收参数 onLoad(options) { const courseId options.courseId; this.loadCourseDetail(courseId); }逻辑说明wx.navigateTo保留当前页面适合列表到详情的跳转参数直接拼在 URL 上详情页在onLoad的options里取。参数上courseId是数字但 URL 传过来是字符串后端接收时用Integer会自动转换如果手动处理要注意parseInt。如果详情页需要返回列表用wx.navigateBack不要用wx.redirectTo否则列表页会被销毁返回时重新加载体验差。4.3 视频播放在线课堂的核心展示与缓存设置在线课堂少不了视频。小程序里用video组件播放课程视频视频地址由后端返回。常见做法是把视频文件放在后端静态资源目录或者用云存储。毕业设计里为了简单常放在 Tomcat 的webapps下返回类似http://localhost:8080/videos/xxx.mp4的地址。!-- 课程详情页 wxml -- video src{{videoUrl}} controls autoplay{{false}} binderroronVideoError stylewidth: 100%; height: 420rpx; /video逻辑说明controls显示播放控件autoplay设为 false 避免一进页面就播放binderror捕获播放错误。参数上videoUrl从后端接口拿注意小程序对视频域名有要求本地调试时同样要勾选“不校验合法域名”。如果视频加载慢可以设置wx.setStorageSync缓存课程列表数据减少重复请求但缓存时间要控制比如 5 分钟避免数据过期。注意小程序里wx.setStorageSync是同步缓存数据量大时会阻塞课程列表这种小数据可以用视频文件不要往缓存里塞。5. 避坑与排查在线课堂小程序最容易翻车的 5 个地方5.1 数据库连不上驱动、URL、时区三连坑现象后端启动报Cannot load driver class: com.mysql.cj.jdbc.Driver或Unknown database。原因通常是 MySql 驱动版本和 URL 不匹配或者数据库没建。解决先确认pom.xml里驱动版本8.0 用com.mysql.cj.jdbc.Driver5.7 用com.mysql.jdbc.DriverURL 里数据库名要和实际建的一致8.0 必须加serverTimezoneAsia/Shanghai。我一般会先在命令行mysql -u root -p进去SHOW DATABASES;确认库存在再启动后端。5.2 小程序请求被拦合法域名与本地调试现象小程序端请求后端控制台报“不在以下 request 合法域名列表中”。原因微信开发者工具默认校验域名localhost不在白名单。解决开发阶段在开发者工具右上角“详情 → 本地设置”里勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。上线时才需要配置真实域名和 HTTPS毕业设计演示用本地即可。5.3 选课重复插入唯一索引异常没处理现象学生重复点选课按钮后端报Duplicate entry异常页面弹“系统错误”。原因course_student表有联合唯一索引重复插入触发异常但代码没捕获。解决Service 层先查重再插入或者捕获DuplicateKeyException返回“已选过该课程”。我一般两者都做查重给友好提示唯一索引兜底防并发。5.4 视频播放失败路径与跨域问题现象视频组件黑屏或报错。原因视频地址不对或者后端静态资源没配好。解决先在浏览器直接访问视频 URL能播放说明地址没问题如果浏览器能播、小程序不能播检查小程序是否勾选“不校验合法域名”。另外Tomcat 里视频文件要放在webapps下对应目录或者用 SpringMVC 配置静态资源映射。5.5 答辩时被问架构说不清 SSM 各层职责现象老师问“你的项目里 Spring 做了什么”答不上来。原因只照着源码跑没理解分层。解决记住一句话——Spring 管对象和事务SpringMVC 管请求和响应MyBatis 管 SQL 和结果映射。Controller 接请求Service 写业务Mapper 查数据库。答辩前把这三层各找一个方法能说清数据怎么从请求流到数据库再流回来基本就稳了。6. 进阶技巧让在线课堂小程序在答辩时多拿几分最后一章说点实用的。毕业设计不只是“跑起来”还要“讲得出彩”。我一般会建议在基础功能上加两个小亮点成本低但效果好。第一个是接口统一返回格式。很多源码里每个接口返回结构不一样前端处理起来乱。统一成{ code, msg, data }前端request.js里统一判断code代码干净答辩时也能说“做了统一异常处理”。下面是一个简单的统一返回类public class ResultT { private Integer code; private String msg; private T data; public static T ResultT ok(T data) { ResultT r new Result(); r.code 200; r.msg success; r.data data; return r; } public static T ResultT fail(String msg) { ResultT r new Result(); r.code 500; r.msg msg; return r; } // getter/setter 省略 }逻辑说明code用 200 表示成功500 表示业务失败前端只认code不用管 HTTP 状态码。参数上data用泛型可以返回用户、课程列表、分页对象等。这个类放在common包下所有 Controller 都返回Result答辩时老师一看就知道你有工程意识。第二个是分页查询。课程列表、作业列表数据多了要分页。用 MyBatis 的LIMIT加一个PageResult封装SELECT * FROM course ORDER BY create_time DESC LIMIT #{offset}, #{pageSize}逻辑说明offset是起始行pageSize是每页条数前端传pageNum和pageSize后端算offset (pageNum - 1) * pageSize。参数上pageSize不要超过 50否则小程序渲染卡顿。答辩时可以说“做了分页优化避免一次性加载过多数据”。最后一个技巧是演示前清缓存、备截图。微信开发者工具缓存有时会导致页面数据不更新演示前点“清缓存 → 全部清除”。另外视频播放依赖网络答辩现场网络不一定稳提前录好演示视频或截好关键页面图万一现场翻车还能兜底。我自己带学生时就遇到过现场断网幸好提前准备了截图没耽误答辩。这些经验都是一次次踩坑攒下来的希望帮到你。本文还有配套的精品资源点击获取 在线课堂微信小程序毕业设计：SSM+MySql从选型到答辩避坑指南
简介本资源为在线课堂微信小程序毕业设计完整项目包面向计算机相关专业需要完成毕业设计的学生及Java全栈初学者。项目基于微信小程序、SSM框架与MySQL数据库开发覆盖管理员、教师、学生三类角色包含班级管理、课程信息、作业布置与评分、课堂签到、选课、考试、课程资源与成绩评价等完整业务模块可作为课程设计或论文选题的参考方案。压缩包共1137个文件约81.95MB以java后端源码、vue前端页面、png与jpg界面素材、js脚本、wxml与wxss小程序页面、sql数据库脚本及doc论文文档为主另含mp4演示视频与bat启动脚本目录结构清晰便于按模块查阅。已有240人学习下载适合需要完整源码、数据库、开题报告、论文答辩材料与视频演示的读者可快速理解系统分析与数据库设计思路对照实现各角色功能并完成部署调试。1. 在线课堂微信小程序从选题到跑通一套能扛住答辩的落地路径每年毕业季计算机专业的选题里总有一类经久不衰在线课堂微信小程序。标题里挂着微信小程序、SSM、MySql、源码、毕业设计这几个词看起来平平无奇但真正动手的人才知道坑不在写代码而在“怎么把一套能演示、能讲清、能答辩的系统在有限时间里跑起来”。我带过几届学生的毕设也帮人改过不少“跑不起来的源码”最常见的翻车现场不是功能少而是环境对不上、数据库连不上、小程序请求被拦、答辩时说不清架构。这篇笔记就按一线做法把在线课堂微信小程序从选型、搭环境、写核心模块到避坑完整走一遍。适合正在做计算机毕业设计、想用微信小程序SSMMySql交出一份能过答辩作品的读者也适合想拿它当项目实例练手的人。2. 在线课堂微信小程序的技术选型为什么是微信小程序SSMMySql2.1 三件套各自的角色与选型理由先把架构拆清楚。在线课堂微信小程序这套系统本质是一个“移动端展示 服务端接口 数据库存储”的经典三层结构。微信小程序负责学生和教师看到的界面比如课程列表、视频播放、作业提交、公告通知SSMSpring SpringMVC MyBatis负责提供 HTTP 接口、处理业务逻辑、操作数据库MySql 负责存用户、课程、章节、作业、选课记录这些数据。为什么毕业设计里这套组合这么常见原因很实际。第一微信小程序开发门槛低微信开发者工具装好就能写不用配 Android 或 iOS 原生环境对不熟悉移动端的学生友好。第二SSM 是 Java Web 里资料最多的框架组合遇到问题一搜就有答案不像一些新框架那样文档零散。第三MySql 免费、轻量、安装配置教程满地都是mysql安装配置教程、mysql下载及安装教程这类搜索词常年有热度说明它确实是新手最容易上手的数据库。提示选型不是越新越好。毕业设计的核心目标是“能跑通、能讲清、能扩展”SSM 虽然不算新但胜在稳定和资料全答辩时老师也熟悉反而省事。2.2 环境准备JDK、Maven、Tomcat、MySql 的版本搭配环境是第一个大坑。我一般会固定一套组合JDK 1.8、Maven 3.6.x、Tomcat 8.5、MySql 5.7 或 8.0。为什么强调版本因为 SSM 项目里 Spring 的版本和 JDK 版本强相关JDK 太高比如 17会导致一些老依赖报错MySql 8.0 的驱动类名和 5.7 不同连接 URL 也要加时区参数很多“数据库连不上”的问题就出在这里。下面是一套可抄的环境检查命令先在本地确认基础工具是否就位# 检查 JDK 版本期望输出 1.8.x java -version # 检查 Maven 版本期望 3.6 以上 mvn -v # 检查 MySql 是否安装并启动期望能进入 mysql 命令行 mysql -u root -p # 查看 MySql 版本5.7 和 8.0 在驱动配置上有区别 SELECT VERSION();逻辑说明这四步是搭 SSM 项目前的“体检”。java -version确认 JDK 是 1.8因为 Spring 4.x/5.x 在 JDK 1.8 上最稳mvn -v确认 Maven 能用来拉依赖mysql -u root -p确认数据库服务已启动SELECT VERSION()拿到具体版本决定后面 JDBC 驱动怎么写。参数上如果 MySql 是 8.0连接 URL 要写成jdbc:mysql://localhost:3306/online_class?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse其中serverTimezone不加会报时区错误useSSLfalse避免本地连接时的 SSL 警告。2.3 数据库设计在线课堂最少需要哪几张表数据库不用一上来就设计几十张表毕业设计演示够用就行。核心表我一般保留这几张用户表user、课程表course、章节表chapter、选课表course_student、作业表homework、作业提交表homework_submit、公告表notice。下面给出建表 SQL 的关键片段-- 用户表区分学生和教师role 字段控制身份 CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, real_name VARCHAR(50), role TINYINT DEFAULT 0 COMMENT 0学生 1教师, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 课程表教师发布课程学生选课 CREATE TABLE course ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, cover VARCHAR(255) COMMENT 封面图路径, teacher_id INT NOT NULL, intro TEXT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 选课表记录学生选了哪些课联合唯一防止重复选课 CREATE TABLE course_student ( id INT PRIMARY KEY AUTO_INCREMENT, course_id INT NOT NULL, student_id INT NOT NULL, select_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_course_student (course_id, student_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;逻辑说明user表用role字段区分学生和教师避免建两张表增加复杂度course表用teacher_id关联发布课程的教师course_student表用联合唯一索引uk_course_student防止同一个学生重复选同一门课这是业务上必须的约束。参数上字符集统一用utf8mb4因为课程名、公告里可能有 emoji 或特殊字符utf8会存不进去。create_time默认CURRENT_TIMESTAMP省去手动赋值。3. SSM 后端接口怎么写从登录到课程列表的最小闭环3.1 用 Maven 搭出 SSM 骨架与依赖配置后端第一步是把 Maven 的pom.xml配好。SSM 项目需要 Spring、SpringMVC、MyBatis、MySql 驱动、Druid 连接池、Jackson 等依赖。下面是一份精简可用的依赖片段!-- Spring 核心与 Web -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.3.20/version /dependency dependency groupIdorg.springframework/groupId artifactIdspring-jdbc/artifactId version5.3.20/version /dependency !-- MyBatis 与 Spring 整合 -- dependency groupIdorg.mybatis/groupId artifactIdmybatis-spring/artifactId version2.0.7/version /dependency !-- MySql 驱动8.0 用 mysql-connector-java 8.x -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.29/version /dependency !-- Druid 连接池 -- dependency groupIdcom.alibaba/groupId artifactIddruid/artifactId version1.2.11/version /dependency逻辑说明spring-webmvc提供 Controller 能力spring-jdbc提供事务管理mybatis-spring把 MyBatis 的 SqlSession 交给 Spring 管理mysql-connector-java是数据库驱动druid是连接池。参数上Spring 5.3.x 配 JDK 1.8 稳定MySql 驱动 8.x 对应 MySql 8.0如果本地是 5.7驱动可以降到 5.1.x但 URL 写法也要跟着改。依赖版本不要东拼西凑同一套项目里 Spring 各模块版本保持一致否则容易出现NoSuchMethodError。3.2 登录接口小程序端 wx.login 与后端 session 的配合登录是在线课堂小程序的第一道关。常见做法是小程序端调用wx.login拿到 code传给后端后端用 code 换 openid这里不展开第三方接口细节毕业设计里常用模拟或简化处理再查用户表返回登录状态。下面是一个简化的后端登录接口RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; // 小程序端提交 username 和 password后端校验 PostMapping(/login) public Result login(RequestBody LoginDTO dto, HttpSession session) { User user userService.findByUsername(dto.getUsername()); if (user null || !user.getPassword().equals(dto.getPassword())) { return Result.fail(用户名或密码错误); } // 登录成功把用户信息放进 session session.setAttribute(userId, user.getId()); session.setAttribute(role, user.getRole()); return Result.ok(user); } }逻辑说明RestController让返回自动转 JSONRequestBody接收小程序端发来的 JSON 数据登录成功后把userId和role放进 session后续接口从 session 取当前用户。参数上LoginDTO是一个简单对象包含username和password两个字段。注意毕业设计里密码常明文存储实际项目必须加盐哈希但答辩时如果老师问起要能说出“生产环境应使用 BCrypt”这类改进点这是加分项。3.3 课程列表与选课接口MyBatis 映射与事务处理课程列表接口负责把课程查出来给小程序展示选课接口负责往course_student插记录。先看 MyBatis 的 Mapper XML!-- CourseMapper.xml -- select idselectAllCourses resultTypecom.demo.entity.Course SELECT c.id, c.name, c.cover, c.intro, u.real_name AS teacherName FROM course c LEFT JOIN user u ON c.teacher_id u.id ORDER BY c.create_time DESC /select insert idinsertCourseStudent INSERT INTO course_student (course_id, student_id) VALUES (#{courseId}, #{studentId}) /insert逻辑说明selectAllCourses用左连接把教师姓名一起查出来避免小程序端再发一次请求insertCourseStudent用#{}占位符防止 SQL 注入。参数上resultType指向实体类字段名和数据库列名不一致时可以用别名如teacherName。选课接口在 Service 层要加事务Service public class CourseServiceImpl implements CourseService { Autowired private CourseMapper courseMapper; Transactional Override public void selectCourse(Integer courseId, Integer studentId) { // 先查是否已选避免重复插入触发唯一索引异常 int count courseMapper.countSelected(courseId, studentId); if (count 0) { throw new RuntimeException(已选过该课程); } courseMapper.insertCourseStudent(courseId, studentId); } }逻辑说明Transactional保证“查重 插入”在一个事务里避免并发下重复选课先查后插虽然不能完全替代数据库唯一索引但能给出友好提示。参数上courseId和studentId都由 Controller 从请求和 session 中获取不要信任前端传来的学生 ID否则会出现“替别人选课”的漏洞。4. 微信小程序端怎么接请求封装、页面跳转与视频播放4.1 请求封装统一 baseUrl 与错误处理小程序端最忌讳每个页面都写一遍wx.request。常见做法是封装一个request.js// utils/request.js const BASE_URL http://localhost:8080/online_class; function request(options) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header: { content-type: application/json }, success(res) { if (res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res.data); } }, fail(err) { wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request };逻辑说明BASE_URL统一管理后端地址换环境只改一处用 Promise 包装wx.request页面里可以用async/await调用根据后端返回的code判断成功失败失败时弹提示。参数上header里content-type用application/json和后端RequestBody对应。注意微信开发者工具里要勾选“不校验合法域名”否则本地localhost请求会被拦这是新手最常见的翻车点之一。4.2 页面跳转与参数传递课程详情页怎么拿 courseId课程列表页点击某一门课要跳到详情页并带上courseId。常见写法// 列表页跳转 wx.navigateTo({ url: /pages/course/detail?courseId item.id }); // 详情页 onLoad 接收参数 onLoad(options) { const courseId options.courseId; this.loadCourseDetail(courseId); }逻辑说明wx.navigateTo保留当前页面适合列表到详情的跳转参数直接拼在 URL 上详情页在onLoad的options里取。参数上courseId是数字但 URL 传过来是字符串后端接收时用Integer会自动转换如果手动处理要注意parseInt。如果详情页需要返回列表用wx.navigateBack不要用wx.redirectTo否则列表页会被销毁返回时重新加载体验差。4.3 视频播放在线课堂的核心展示与缓存设置在线课堂少不了视频。小程序里用video组件播放课程视频视频地址由后端返回。常见做法是把视频文件放在后端静态资源目录或者用云存储。毕业设计里为了简单常放在 Tomcat 的webapps下返回类似http://localhost:8080/videos/xxx.mp4的地址。!-- 课程详情页 wxml -- video src{{videoUrl}} controls autoplay{{false}} binderroronVideoError stylewidth: 100%; height: 420rpx; /video逻辑说明controls显示播放控件autoplay设为 false 避免一进页面就播放binderror捕获播放错误。参数上videoUrl从后端接口拿注意小程序对视频域名有要求本地调试时同样要勾选“不校验合法域名”。如果视频加载慢可以设置wx.setStorageSync缓存课程列表数据减少重复请求但缓存时间要控制比如 5 分钟避免数据过期。注意小程序里wx.setStorageSync是同步缓存数据量大时会阻塞课程列表这种小数据可以用视频文件不要往缓存里塞。5. 避坑与排查在线课堂小程序最容易翻车的 5 个地方5.1 数据库连不上驱动、URL、时区三连坑现象后端启动报Cannot load driver class: com.mysql.cj.jdbc.Driver或Unknown database。原因通常是 MySql 驱动版本和 URL 不匹配或者数据库没建。解决先确认pom.xml里驱动版本8.0 用com.mysql.cj.jdbc.Driver5.7 用com.mysql.jdbc.DriverURL 里数据库名要和实际建的一致8.0 必须加serverTimezoneAsia/Shanghai。我一般会先在命令行mysql -u root -p进去SHOW DATABASES;确认库存在再启动后端。5.2 小程序请求被拦合法域名与本地调试现象小程序端请求后端控制台报“不在以下 request 合法域名列表中”。原因微信开发者工具默认校验域名localhost不在白名单。解决开发阶段在开发者工具右上角“详情 → 本地设置”里勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。上线时才需要配置真实域名和 HTTPS毕业设计演示用本地即可。5.3 选课重复插入唯一索引异常没处理现象学生重复点选课按钮后端报Duplicate entry异常页面弹“系统错误”。原因course_student表有联合唯一索引重复插入触发异常但代码没捕获。解决Service 层先查重再插入或者捕获DuplicateKeyException返回“已选过该课程”。我一般两者都做查重给友好提示唯一索引兜底防并发。5.4 视频播放失败路径与跨域问题现象视频组件黑屏或报错。原因视频地址不对或者后端静态资源没配好。解决先在浏览器直接访问视频 URL能播放说明地址没问题如果浏览器能播、小程序不能播检查小程序是否勾选“不校验合法域名”。另外Tomcat 里视频文件要放在webapps下对应目录或者用 SpringMVC 配置静态资源映射。5.5 答辩时被问架构说不清 SSM 各层职责现象老师问“你的项目里 Spring 做了什么”答不上来。原因只照着源码跑没理解分层。解决记住一句话——Spring 管对象和事务SpringMVC 管请求和响应MyBatis 管 SQL 和结果映射。Controller 接请求Service 写业务Mapper 查数据库。答辩前把这三层各找一个方法能说清数据怎么从请求流到数据库再流回来基本就稳了。6. 进阶技巧让在线课堂小程序在答辩时多拿几分最后一章说点实用的。毕业设计不只是“跑起来”还要“讲得出彩”。我一般会建议在基础功能上加两个小亮点成本低但效果好。第一个是接口统一返回格式。很多源码里每个接口返回结构不一样前端处理起来乱。统一成{ code, msg, data }前端request.js里统一判断code代码干净答辩时也能说“做了统一异常处理”。下面是一个简单的统一返回类public class ResultT { private Integer code; private String msg; private T data; public static T ResultT ok(T data) { ResultT r new Result(); r.code 200; r.msg success; r.data data; return r; } public static T ResultT fail(String msg) { ResultT r new Result(); r.code 500; r.msg msg; return r; } // getter/setter 省略 }逻辑说明code用 200 表示成功500 表示业务失败前端只认code不用管 HTTP 状态码。参数上data用泛型可以返回用户、课程列表、分页对象等。这个类放在common包下所有 Controller 都返回Result答辩时老师一看就知道你有工程意识。第二个是分页查询。课程列表、作业列表数据多了要分页。用 MyBatis 的LIMIT加一个PageResult封装SELECT * FROM course ORDER BY create_time DESC LIMIT #{offset}, #{pageSize}逻辑说明offset是起始行pageSize是每页条数前端传pageNum和pageSize后端算offset (pageNum - 1) * pageSize。参数上pageSize不要超过 50否则小程序渲染卡顿。答辩时可以说“做了分页优化避免一次性加载过多数据”。最后一个技巧是演示前清缓存、备截图。微信开发者工具缓存有时会导致页面数据不更新演示前点“清缓存 → 全部清除”。另外视频播放依赖网络答辩现场网络不一定稳提前录好演示视频或截好关键页面图万一现场翻车还能兜底。我自己带学生时就遇到过现场断网幸好提前准备了截图没耽误答辩。这些经验都是一次次踩坑攒下来的希望帮到你。本文还有配套的精品资源点击获取