1. 项目背景与意义
随着移动互联网的普及和高校信息化建设的不断深入，传统课堂教学模式在时间、空间上存在一定局限，学生课后复习、自主学习的需求日益增长。微信小程序凭借其无需下载安装、即用即走、跨平台兼容等优势，成为高校在线学习平台的重要载体。
本课题旨在设计并实现一个基于小程序的专业必修课程在线学习系统，为专业必修课程提供统一的在线学习入口，涵盖课程资源浏览、视频学习、章节测验、学习进度跟踪等核心功能。系统的建设具有以下意义：
- 提升学习效率：学生可随时随地进行课程学习，打破课堂时空限制，巩固课堂所学知识。
- 统一教学管理：教师可集中发布课程资料、布置作业与测验，降低教学管理成本。
- 数据驱动教学：系统记录学生学习行为数据，为教师调整教学策略提供数据支撑。
- 促进教育公平：优质课程资源通过小程序触达更多学生，缩小资源获取差距。
2. 系统需求分析
2.1 功能需求
系统面向学生、教师、管理员三类角色，核心功能需求如下：
| 角色 | 功能模块 | 功能说明 |
|---|---|---|
| 学生 | 课程学习 | 浏览课程列表、查看课程详情、在线观看视频、阅读课件资料 |
| 学生 | 在线测验 | 参与章节测验、查看测验成绩与答案解析 |
| 学生 | 学习记录 | 查看学习进度、继续上次学习、收藏课程 |
| 教师 | 课程管理 | 发布课程、上传课件与视频、维护章节结构 |
| 教师 | 测验管理 | 创建题库、组卷、发布测验、查看学生成绩统计 |
| 管理员 | 用户管理 | 管理学生、教师账号，分配角色权限 |
| 管理员 | 数据统计 | 查看平台整体学习数据、课程热度排行 |
2.2 非功能需求
- 性能需求：页面首屏加载时间不超过 3 秒，视频播放流畅，支持并发访问。
- 安全需求：用户密码加密存储，接口鉴权，防止越权访问。
- 易用性需求：界面简洁清晰，操作路径短，符合学生使用习惯。
- 可维护性需求：前后端分离架构，代码模块化，便于后续功能扩展。
3. 系统技术栈
3.1 前端技术栈
| 技术 | 说明 |
|---|---|
| 微信小程序 | 原生小程序框架，提供页面、组件、路由等基础能力 |
| WXML / WXSS | 小程序页面结构与样式语言 |
| JavaScript | 小程序业务逻辑开发语言 |
| Vant Weapp | 基于 Vue 的移动端组件库，提供表单、弹窗、标签等 UI 组件 |
| ECharts | 数据可视化图表库，用于学习数据统计展示 |
3.2 后端技术栈
| 技术 | 说明 |
|---|---|
| Spring Boot | Java 后端开发框架，简化配置，快速构建 RESTful API |
| MyBatis-Plus | ORM 持久层框架，简化数据库操作 |
| 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 核心数据表
系统核心数据表包括用户表、课程表、章节表、学习记录表、测验表、题目表等，主要表结构如下：
| 表名 | 字段 | 类型 | 说明 |
|---|---|---|---|
| user | id | bigint | 用户主键 |
| user | openid | varchar(64) | 微信唯一标识 |
| user | role | tinyint | 角色：0 学生，1 教师，2 管理员 |
| course | id | bigint | 课程主键 |
| course | name | varchar(100) | 课程名称 |
| course | teacher_id | bigint | 授课教师 ID |
| chapter | id | bigint | 章节主键 |
| chapter | course_id | bigint | 所属课程 ID |
| chapter | title | varchar(200) | 章节标题 |
| chapter | video_url | varchar(500) | 视频文件地址 |
| study_record | id | bigint | 记录主键 |
| study_record | user_id | bigint | 学生 ID |
| study_record | chapter_id | bigint | 章节 ID |
| study_record | progress | int | 学习进度百分比 |
| quiz | id | bigint | 测验主键 |
| quiz | chapter_id | bigint | 所属章节 ID |
| question | id | bigint | 题目主键 |
| question | quiz_id | bigint | 所属测验 ID |
| question | type | tinyint | 题型：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) { Page<Course> 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, List<AnswerItem> answers) { List<Question> questions = questionMapper.findByQuizId(quizId); int score = 0; List<AnswerResult> 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. 总结与展望
本文设计并实现了一个基于小程序的专业必修课程在线学习系统，覆盖课程学习、在线测验、进度跟踪等核心功能，验证了前后端分离架构在小程序在线学习场景中的可行性。系统界面友好、操作便捷，能够满足专业必修课程在线教学的基本需求。
后续可在以下方向继续优化：引入智能推荐算法，根据学生学习行为推荐个性化课程资源；增加讨论区与直播功能，提升师生互动体验；完善数据统计分析能力，为教学决策提供更全面的数据支持。
