1. 项目背景与意义随着移动互联网的普及和高校信息化建设的不断深入传统课堂教学模式在时间、空间上存在一定局限学生课后复习、自主学习的需求日益增长。微信小程序凭借其无需下载安装、即用即走、跨平台兼容等优势成为高校在线学习平台的重要载体。本课题旨在设计并实现一个基于小程序的专业必修课程在线学习系统为专业必修课程提供统一的在线学习入口涵盖课程资源浏览、视频学习、章节测验、学习进度跟踪等核心功能。系统的建设具有以下意义提升学习效率学生可随时随地进行课程学习打破课堂时空限制巩固课堂所学知识。统一教学管理教师可集中发布课程资料、布置作业与测验降低教学管理成本。数据驱动教学系统记录学生学习行为数据为教师调整教学策略提供数据支撑。促进教育公平优质课程资源通过小程序触达更多学生缩小资源获取差距。2. 系统需求分析2.1 功能需求系统面向学生、教师、管理员三类角色核心功能需求如下角色功能模块功能说明学生课程学习浏览课程列表、查看课程详情、在线观看视频、阅读课件资料学生在线测验参与章节测验、查看测验成绩与答案解析学生学习记录查看学习进度、继续上次学习、收藏课程教师课程管理发布课程、上传课件与视频、维护章节结构教师测验管理创建题库、组卷、发布测验、查看学生成绩统计管理员用户管理管理学生、教师账号分配角色权限管理员数据统计查看平台整体学习数据、课程热度排行2.2 非功能需求性能需求页面首屏加载时间不超过 3 秒视频播放流畅支持并发访问。安全需求用户密码加密存储接口鉴权防止越权访问。易用性需求界面简洁清晰操作路径短符合学生使用习惯。可维护性需求前后端分离架构代码模块化便于后续功能扩展。3. 系统技术栈3.1 前端技术栈技术说明微信小程序原生小程序框架提供页面、组件、路由等基础能力WXML / WXSS小程序页面结构与样式语言JavaScript小程序业务逻辑开发语言Vant Weapp基于 Vue 的移动端组件库提供表单、弹窗、标签等 UI 组件ECharts数据可视化图表库用于学习数据统计展示3.2 后端技术栈技术说明Spring BootJava 后端开发框架简化配置快速构建 RESTful APIMyBatis-PlusORM 持久层框架简化数据库操作MySQL关系型数据库存储用户、课程、测验等业务数据Redis缓存数据库用于会话管理、热点数据缓存MinIO对象存储服务存储课程视频、课件等文件资源JWT无状态身份认证机制保障接口访问安全3.3 系统架构系统采用前后端分离架构小程序端通过 HTTP 请求与后端 RESTful API 交互整体架构如下flowchart TD A[微信小程序客户端] --|HTTPS 请求| B[Nginx 反向代理] B -- C[Spring Boot 后端服务] C -- D[MySQL 数据库] C -- E[Redis 缓存] C -- F[MinIO 对象存储] C -- G[微信登录 API]4. 数据库设计4.1 核心数据表系统核心数据表包括用户表、课程表、章节表、学习记录表、测验表、题目表等主要表结构如下表名字段类型说明useridbigint用户主键useropenidvarchar(64)微信唯一标识userroletinyint角色0 学生1 教师2 管理员courseidbigint课程主键coursenamevarchar(100)课程名称courseteacher_idbigint授课教师 IDchapteridbigint章节主键chaptercourse_idbigint所属课程 IDchaptertitlevarchar(200)章节标题chaptervideo_urlvarchar(500)视频文件地址study_recordidbigint记录主键study_recorduser_idbigint学生 IDstudy_recordchapter_idbigint章节 IDstudy_recordprogressint学习进度百分比quizidbigint测验主键quizchapter_idbigint所属章节 IDquestionidbigint题目主键questionquiz_idbigint所属测验 IDquestiontypetinyint题型0 单选1 多选2 判断5. 核心功能设计与实现5.1 微信登录与身份认证用户首次进入小程序时前端调用wx.login获取临时凭证 code后端通过 code 调用微信接口换取 openid完成用户注册或登录并签发 JWT Token 返回给前端。核心实现如下RestController RequestMapping(/api/auth) public class AuthController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody LoginRequest request) { // 调用微信接口换取 openid String openid wxService.code2Session(request.getCode()); User user userService.findOrCreateByOpenid(openid); String token jwtUtil.generateToken(user.getId(), user.getRole()); return Result.success(new LoginResponse(token, user)); } }5.2 课程列表与详情展示课程列表页通过滚动加载方式分页获取课程数据课程详情页展示课程基本信息、章节列表及学习进度。后端接口实现如下RestController RequestMapping(/api/course) public class CourseController { Autowired private CourseService courseService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) int page, RequestParam(defaultValue 10) int size) { PageCourse pageResult courseService.pageCourses(page, size); return Result.success(pageResult); } GetMapping(/{id}) public Result detail(PathVariable Long id) { CourseDetailVO vo courseService.getCourseDetail(id); return Result.success(vo); } }5.3 视频学习与进度记录学生进入章节学习页后小程序通过video组件播放视频并定时上报学习进度。后端接收进度上报并更新学习记录表实现断点续学功能。核心代码如下Service public class StudyRecordService { Autowired private StudyRecordMapper recordMapper; public void reportProgress(Long userId, Long chapterId, int progress) { StudyRecord record recordMapper.findByUserAndChapter(userId, chapterId); if (record null) { record new StudyRecord(); record.setUserId(userId); record.setChapterId(chapterId); record.setProgress(progress); recordMapper.insert(record); } else { // 只更新更大的进度避免回退 if (progress record.getProgress()) { record.setProgress(progress); recordMapper.updateById(record); } } } }5.4 在线测验与自动判分学生完成章节测验后提交答案后端逐题比对标准答案进行自动判分并返回成绩与答案解析。核心实现如下Service public class QuizService { public QuizResult submitQuiz(Long userId, Long quizId, ListAnswerItem answers) { ListQuestion questions questionMapper.findByQuizId(quizId); int score 0; ListAnswerResult results new ArrayList(); for (Question q : questions) { AnswerItem submitted findAnswer(answers, q.getId()); boolean correct checkAnswer(q, submitted); if (correct) { score q.getScore(); } results.add(new AnswerResult(q.getId(), correct, q.getAnswer())); } // 保存测验成绩 quizRecordMapper.insert(new QuizRecord(userId, quizId, score)); return new QuizResult(score, results); } }5.5 小程序端页面实现小程序端课程列表页使用wx.request请求后端接口核心代码如下Page({ data: { courseList: [], page: 1, loading: false, hasMore: true }, onLoad() { this.loadCourses(); }, loadCourses() { if (this.data.loading || !this.data.hasMore) return; this.setData({ loading: true }); wx.request({ url: https://api.example.com/api/course/list, data: { page: this.data.page, size: 10 }, header: { Authorization: wx.getStorageSync(token) }, success: (res) { const list res.data.data.records; this.setData({ courseList: this.data.courseList.concat(list), page: this.data.page 1, hasMore: list.length 10 }); }, complete: () this.setData({ loading: false }) }); }, goDetail(e) { const id e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/course/detail?id${id} }); } });6. 系统测试6.1 功能测试系统测试覆盖登录认证、课程浏览、视频播放、进度记录、在线测验等核心功能模块。测试结果表明各功能模块均能按预期工作接口响应正常数据读写准确。6.2 性能测试使用 JMeter 对课程列表、课程详情等高频接口进行并发压测。在 200 并发用户场景下接口平均响应时间低于 500 毫秒系统运行稳定未出现明显性能瓶颈。7. 总结与展望本文设计并实现了一个基于小程序的专业必修课程在线学习系统覆盖课程学习、在线测验、进度跟踪等核心功能验证了前后端分离架构在小程序在线学习场景中的可行性。系统界面友好、操作便捷能够满足专业必修课程在线教学的基本需求。后续可在以下方向继续优化引入智能推荐算法根据学生学习行为推荐个性化课程资源增加讨论区与直播功能提升师生互动体验完善数据统计分析能力为教学决策提供更全面的数据支持。
