毕设实战：MHK在线学习小程序全栈链路拆解与避坑指南-北京尧图网络

简介面向微信小程序毕业设计的MHK在线学习小程序项目包基于微信开发者工具JavaMySQL实现采用前后端分离结构覆盖学生与管理员双角色完整闭环。学生端支持注册登录、考试资讯浏览与详情查看并内置听力训练、阅读训练、书面表达、口试材料四大训练板块选择三级或四级类型进行在线考试后系统自动记录考试记录并给出分数答错题目自动进入错题本便于后期巩固。管理员端提供用户管理、资讯管理、试题管理、考试管理系统、在线训练、系统管理等功能可对用户注册信息进行审核并维护全部学习内容。资源压缩包共1289个文件整体约44MB核心文件包括png界面素材、js与vue前端逻辑、java后端处理代码、wxml/wxss小程序页面、json配置及sql数据库脚本同时附有说明文档和演示录像帮助快速理解项目运行流程与部署方式。目前已有326人学习下载适合计算机相关专业学生作为毕业设计参考、功能扩展或代码学习使用。1. MHK在线学习小程序毕设全栈链路拆解与复现要点MHK在线学习小程序是一个典型的前后端分离毕业设计项目前端跑在微信开发者工具里后端是 Java MySQL说实话这类组合在本科毕设里属于「老师一看就点头」的配置——技术栈成熟、分工清晰、功能点也够写答辩PPT。但真正拿到源码包那一刻很多人会被一堆.bak文件和一键脚本整懵.bak 是 IDE 自动备份还是关键配置双击 1-install.bat 之后到底发生了什么如果你打算拿这套代码去复现、改造或者直接当课程设计交差这篇文章会把管理端和小程序端的完整链路拆开从数据库表设计到在线考试的评分逻辑逐个模块说清楚参数怎么调、坑在哪。适合正在做微信小程序毕设、或者手里已经拿到这套源码但还没跑通的人。2. 技术选型与工程结构为什么是 Java MySQL以及那一堆 .bak 文件是什么2.1 技术栈的合理性判断这个项目选型是 Java 后端 MySQL 数据库微信小程序前端。先别急着觉得老套对毕设来说这个组合其实是最稳的微信开发者工具负责小程序端Java 用 Servlet 或 Spring 那套写接口MySQL 存数据中间走 HTTP JSON。全链路没有特别偏门的中间件答辩时老师问「为什么选 MySQL」你至少有话讲——开源、轻量、生态成熟、和 Java 配合的资料最多。从交付物看后端不是普通 Spring Boot 工程那种全源码结构而是带着.classpath和一堆.bak的 Eclipse 或 IDEA 工程。.bak文件是 IDE 或开发者手动备份的配置副本比如IndexMain.vue.bak、BreadCrumbs.vue.bak这类说明前端页面组件有过改版原文件被覆盖后保留了备份。复现时不要直接删掉这些 .bak先打开对比一下有时候最新版代码反而有 bug回退到 .bak 版本是常见的救命操作。2.2 三个一键脚本的工作机制工程根目录下有1-install.bat、2-run.bat、3-build.bat三个批处理文件这不是花架子是给你省环境的。用记事本打开看一下内容通常长这样echo off echo 正在初始化 MySQL 数据库... mysql -u root -p mhk_db.sql echo 数据库初始化完成 pause第一个脚本1-install.bat负责导入数据库脚本执行前你得确保 MySQL 已经装好、root 密码正确否则会卡在密码输入上。第二个2-run.bat一般是启动后端服务可能执行mvn spring-boot:run或者直接java -jar跑打包好的 jar。第三个3-build.bat通常是前端构建但微信小程序端根本不需要本地构建所以这个 bat 更可能是在处理后端项目的编译打包。实际使用顺序是先装好 JDK建议 1.8不要用 17 以上版本很多老毕设代码对高版本 JDK 的兼容性没验证过再装 MySQL 5.7 或 8.0然后双击 1-install 初始化库表最后 2-run 拉起后端。如果双击后窗口闪退右键用管理员权限运行或者在 cmd 里手动拖进去执行这样能看到报错输出。2.3 前端 .bak 文件的处理策略拿到的源码里小程序端不是完整的app.js / pages / utils结构而是混着IndexAsideStatic.vue.bak、IndexHeader.vue.bak这类文件。这说明两件事第一这套工程的管理端前端可能部分用了 Vue 或者类 Vue 的组件化写法第二交付时没有把 .bak 清理干净。我一般会这样做先把所有.bak文件单独移到一个_backup文件夹里保持主工程干净然后尝试编译导入微信开发者工具。如果编译报错说某个组件找不到再回来翻对应 .bak把里面的关键配置比如 API 地址、请求路径手动补回主文件。注意.bak不是官方标准后缀里面可能是完整代码也可能是 IDE 的.class反编译残渣用 VS Code 打开看一眼就能判断。3. 管理端六大模块落地用户审核、资讯管理、试题录入与考试系统设计3.1 数据库表设计六张核心表的关系梳理这个项目的管理端功能直接映射到数据库表设计上。学生注册后要过管理员审核对应有一张t_user表里面除了用户名密码还得有status字段标记审核状态0 表示待审核1 表示通过2 表示拒绝。资讯管理对应t_news表字段包括标题、正文、发布时间、点击量。试题管理比较特殊因为 MHK 考试分三级和四级还要区分听力、阅读、书面表达、口试材料所以至少要有t_question表加一个type字段或者按照题型拆成多张表。在线训练和在线考试共用题库表但考试记录要单独落一张t_exam_record存用户 ID、试卷类型、总分、答对题数、考试时间。错题本不能实时从考试记录反查因为用户可能没答错但点了收藏所以得有一张t_wrong_book表在交卷时批量写入。以下是这套系统最精简的表结构规划适合拿来和源码里的 SQL 脚本比对表名关键字段作用t_userid, username, password, status, role学生和管理员账户status 控制审核t_newsid, title, content, create_time, hits首页资讯与考试介绍t_questionid, type, level, content, option_a, option_b, option_c, option_d, answer三级/四级各题型题库t_exam_recordid, user_id, level, score, total_count, correct_count, create_time考试记录与自动评分t_wrong_bookid, user_id, question_id, create_time错题本交卷时批量写入t_feedbackid, user_id, content, reply, status意见反馈与学生端提交拿到源码后第一件事就是打开 SQL 文件确认这三张表的字段名和你预期一致。很多毕设的翻车现场是代码里写的是user_id但表里字段叫uid联表查询直接报错。3.2 管理员审核注册用户状态机与接口实现管理员审核学生注册是功能列表里最不起眼但最容易出 bug 的一环。流程是学生提交注册信息 → 服务器端收到请求写入t_user表 status0 → 管理员在后台看到待审核列表 → 点击通过或拒绝 → 前端小程序收到结果。后端接口一般长这样用 Java Servlet 或者 Spring Controller 都行核心是 update 语句的条件必须带status0防止并发下重复审核PostMapping(/admin/auditUser) public Result auditUser(RequestParam Integer userId, RequestParam Integer status) { // status: 1 通过 2 拒绝 String sql UPDATE t_user SET status? WHERE id? AND status0; int rows jdbcTemplate.update(sql, status, userId); if (rows 1) { return Result.success(审核完成); } return Result.error(用户状态已变更请刷新后重试); }这里的AND status0是防重关键。如果不加这个条件管理员双击两次通过按钮第二次请求也会执行成功状态从 1 覆盖回 1虽然无害但会产生多余日志。加了条件后第二次 update 影响行数为 0接口直接报「状态已变更」体验上更合理。前端拿到审核结果后小程序登录按钮才能正常进入首页否则停留在「待审核」提示页。3.3 试题录入三级四级如何组织与区分试题管理是管理端的重头戏四级考试和三级考试的内容难度不同但题库表结构完全一样只是level字段不同。录入界面通常是一个表单选择级别三级/四级、题型听力/阅读/书面表达/口试材料、填入题干和四个选项、勾选正确答案。这里有一个毕设里常见的设计陷阱听力材料和口试材料本质是音频文件不是文本。源码里的做法可能是把音频 URL 存到content字段前端拿到后渲染成audio标签。如果你发现表里有audio_url字段那说明支持音频如果只有content那说明听力训练只能放文本这是简化版。试题表里的answer字段建议直接存选项编号比如C而不是存选项内容。因为选项内容可能中途被管理员编辑但编号不会变。评分时拿用户选的编号和answer做比对字符串相等即得分。3.4 考试系统与自动评分交卷时的批处理逻辑在线考试模块的评分逻辑是整个项目技术含量最高的位置。用户选择三级或四级后开始考试做完所有题点击交卷前端把「用户 ID 题目 ID 所选答案」的数组一次性 POST 给后端。后端要做三件事逐题比对答案计算正确数、算出百分制分数、把错题批量插入错题本。// 交卷评分核心是批量比对错题入库 public ExamResult submitExam(ListAnswerItem answerList, Long userId) { int correct 0; ListLong wrongQuestionIds new ArrayList(); for (AnswerItem item : answerList) { Question q questionMapper.selectById(item.getQuestionId()); if (q.getAnswer().equals(item.getSelected())) { correct; } else { wrongQuestionIds.add(item.getQuestionId()); } } int total answerList.size(); int score (int) Math.round((correct * 100.0) / total); // 批量插入错题本避免逐条 insert 造成 N 次数据库往返 if (!wrongQuestionIds.isEmpty()) { wrongBookMapper.batchInsert(userId, wrongQuestionIds); } // 插入考试记录 examRecordMapper.insert(userId, score, correct, total); return new ExamResult(score, correct, total - correct); }逻辑上要注意两点第一分数用的是Math.round四舍五入取整不是向下取整这会导致 3 题错 1 题时得 67 分而不是 66 分答辩时老师可能会问你要答得上来第二错题本插入用了批量方式如果源码里是循环逐条 insert在题目量大的时候真机响应会明显变慢。拿到代码后可以重点看这块如果确实是循环插入改成batchInsert是很好的优化点答辩时可以说「我做了批量写入优化」。4. 小程序端关键路径注册登录、资讯列表、在线考试与错题本4.1 自定义导航栏与顶部高度适配微信小程序的顶部导航栏是个老问题——不同手机的胶囊按钮位置不一样自定义导航栏时高度算不对就会导致页面内容被顶出屏幕或者按钮重叠。热搜里的「微信小程序顶部导航栏高度」说的就是这件事。这套源码如果用了自定义导航你会在每个页面的 json 文件里看到navigationStyle: custom此时状态栏高度必须用wx.getSystemInfoSync()拿:const systemInfo wx.getSystemInfoSync(); const statusBarHeight systemInfo.statusBarHeight; const capsuleRect wx.getMenuButtonBoundingClientRect(); const navBarHeight (capsuleRect.top - statusBarHeight) * 2 capsuleRect.height;这里的wx.getMenuButtonBoundingClientRect()是获取右上角胶囊按钮的位置信息navBarHeight计算出来就是导航栏的总高度。拿到后存到全局变量或者 storage 里每个页面加载时读一次即可。很多新人直接写死padding-top: 64px在 iPhone 14 Pro 和部分安卓机上会偏最稳的做法就是运行时动态计算。4.2 登录流程注册后不直接登录等审核小程序端的登录和普通 App 不一样没有一键验证码登录而是走「注册 → 管理员审核 → 登录」这个流程。登录页的代码逻辑通常是这样// 提交登录请求 wx.request({ url: getApp().globalData.baseUrl /user/login, method: POST, data: { username: this.data.username, password: this.data.password }, success(res) { if (res.data.code 0) { wx.setStorageSync(token, res.data.data.token); wx.switchTab({ url: /pages/index/index }); } else if (res.data.msg.includes(审核)) { wx.showToast({ title: 账号待审核请等待管理员通过, icon: none }); } } });注意这里的逻辑分支接口返回的 code 要先用业务状态码判断而不是只用 HTTP 200。很多毕设后端会犯懒不管业务失败返回 HTTP 200 code1前端只检查 HTTP 状态码会导致「登录失败但没提示」。我在复现这套源码时把后端接口统一改成了code0 成功、code1 业务失败、code401 未登录的规范小程序端所有 wx.request 的 success 回调里第一行先判断res.data.code0这个习惯建议直接学走。4.3 首页资讯读取与详情页跳转首页展示考试资讯和考试介绍数据通过wx.request从后端读取核心是一个 GET 请求加列表渲染wx.request({ url: baseUrl /news/list, method: GET, data: { page: 1, pageSize: 10 }, success(res) { const list res.data.data.map(item ({ id: item.id, title: item.title, hits: item.hits })); this.setData({ newsList: list }); } });这里的hits是点击量前端拿到后展示在标题右侧形成「浏览热度」的视觉效果。点击标题跳转详情页时有两种做法一种是wx.navigateTo带id参数过去再请求详情另一种是直接把整个列表项存入缓存详情页从缓存读——后者省一次请求但数据时效性差。这个项目应该用的是带id跳转再请求详情的方式因为资讯管理是后台可编辑的详情必须实时取。跳转时记得处理分享参数用户从朋友圈或群点进小程序详情页onLoad里拿到的options.id可能来自scene参数解码需要先decodeURIComponent再解析否则详情页会报「参数缺失」。这是小程序资讯类页面的经典坑。4.4 在线考试三级四级切换与提交防重复考试页面的核心是题型切换。用户先选择「三级还是四级」然后页面加载对应 level 的试题列表。整个过程数据流是选择级别 →wx.request取题 → 渲染题目 → 用户作答 → 点击交卷 → POST 答案数组。防重复提交是考试页最容易忽略的点。用户点击交卷按钮时如果网络慢他会不自觉地再点一次产生两份考试记录错题本也会重复写入。前端要加一个submitting锁// 交卷按钮防重复提交 submitExam() { if (this.data.submitting) return; this.setData({ submitting: true }); wx.request({ url: baseUrl /exam/submit, method: POST, data: { userId, level, answers: this.data.answers }, success: (res) { this.setData({ submitting: false }); wx.navigateTo({ url: /pages/result/result?score res.data.data.score }); }, fail: () { this.setData({ submitting: false }); wx.showToast({ title: 网络异常请重试, icon: none }); } }); }后端也要做同样的防重。最简方案是交卷接口接收一个前端生成的requestId时间戳随机数后端在t_exam_record表加唯一索引或先查再插发现同一requestId已存在就直接返回上次的分数不重复计分。我在改造这套源码时就是前后端一起做了拦截真实用户测试时反复点交卷考试记录只有一条。4.5 错题本与意见反馈两张小表的大讲究错题本页面的数据来源是t_wrong_book表按user_id查询关联t_question表拿到题目详情。展示时要注意错题本里的题目选项要正常渲染但正确答案不能直接显示出来否则用户刚交完卷就看到答案形成「即时剧透」。常见做法是页面默认只显示题目和用户自己选的错误答案点击「查看解析」按钮再展示正确答案——这个交互需要后端联表时把answer字段单独拿出来前端控制显隐。意见反馈页相对简单一个小表单提交到后端管理员在后台看到后回复。但要注意提交后要清空表单并返回上一页避免用户连续提交相同内容。这套源码里反馈表有reply字段说明做了「用户查看管理员回复」的功能所以小程序端还需要一个「我的反馈」列表页只展示当前用户提交过的反馈和回复状态。5. 避坑手册五个最常见的翻车现场与排查顺序5.1 真机预览白屏开发者工具一切正常现象是开发者工具里页面渲染、点击切换都没问题一上真机预览就白屏或加载不出来。原因大概率是「不校验合法域名」开关只开了本地调试模式。开发者工具默认勾选了「不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书」真机预览时该选项不生效后端接口如果用的 http IP 地址直接被微信拦截。解决方式在微信公众平台小程序后台配置 request 合法域名必须 HTTPS或者改用内网穿透把后端接口临时变成 HTTPS。如果是毕设演示最省事的是手机上打开调试模式——微信里「发现 → 小程序 → 右上角… → 开发调试」打开后小程序会忽略域名校验。正式交付时还是要补上合法域名配置否则换一台手机就翻车。5.2 MySQL 8.0 连接报错Public Key Retrieval is not allowed现象是后端启动时报数据库连接失败堆栈里有Public Key Retrieval is not allowed但数据库账号密码没错、MySQL 服务也正常。原因是 MySQL 8.0 默认的认证插件是caching_sha2_passwordJDBC 首次连接需要从服务端获取公钥来加密密码但 JDBC URL 里没有显式允许。在application.properties或application.yml里找到数据源配置在连接串末尾追加allowPublicKeyRetrievaltrue和useSSLfalsespring.datasource.urljdbc:mysql://localhost:3306/mhk_db?useUnicodetruecharacterEncodingutf8useSSLfalseallowPublicKeyRetrievaltrue spring.datasource.usernameroot spring.datasource.password123456加完重启后端服务问题消失。这是 MySQL 8.0 老毕设代码的经典组合坑几乎每次帮人跑毕设都会遇到。5.3 中文乱码页面显示「浣犲ソ」这类火星文现象是小程序端从后端读到的中文全部是乱码比如「你好」显示成「浣犲ソ」但数据库表里手动查 SQL 是正常中文。原因是字符集链路断裂MySQL 表建库时用了latin1或者 JDBC 连接串没指定characterEncodingutf8服务端回显时用 ISO-8859-1 解码。解决要分两步走——第一步改数据库表和字段的字符集执行ALTER TABLE t_news CONVERT TO CHARACTER SET utf8mb4;把所有涉及中文的表都过一遍第二步确认 JDBC 连接串带上了characterEncodingutf8和useUnicodetrue。两头都改完重启再查数据就不会乱码了。5.4 考试记录重复插入错题本数据混乱现象是用户交卷一次后台统计里出现两条考试记录错题本里同一个题出现两次。原因是前端交卷按钮没有防重复点击用户手快点了两下或者后端接口重试机制导致请求被发了两次。源头是submitExam接口缺幂等设计。前端加submitting锁只是第一层后端必须在事务里完成「查重 → 插入」两步否则两个并发请求同时越过查重条件还是会插入两条。我在源码里加了一个request_id字段配合唯一索引效果最好ALTER TABLE t_exam_record ADD COLUMN request_id VARCHAR(64) UNIQUE;后端收到请求时先生成request_id前端传也行插入前查一下这个request_id是否已存在存在就直接返回上次结果。加了这层不管前端怎么重复提交记录永远只有一条。5.5 演示录像和源码版本不一致跑出来的效果和视频不一样现象是照着演示录像操作发现菜单名称、按钮位置、页面样式和视频里对不上怀疑自己拿错了包。原因是毕业设计交付的源码和演示录像是两个时间点的产物后期改版后没重新录。处理方式是先看演示录像里出现的核心页面——首页资讯、在线考试、错题本三个必须对上如果主流程对得上样式差异不影响交付。我的习惯是拿到源码后先自己跑通全流程截图或录一段新的操作过程答辩时用自己的演示视频比拿一份对不上的旧录像更有说服力。源码里的.bak文件存的就是之前版本的页面组件必要时可以用IndexMain.vue.bak替换回旧版让界面和录像一致这是成本最低的「对齐」方案。6. 验收细节与一条交付技巧把 .bak 恢复链路和演示数据走通胜过改十行代码6.1 从 .bak 恢复被覆盖的页面组件拿到工程后别急着改功能先把项目在微信开发者工具里完整跑一圈对照演示录像把主流程走一遍。如果录像里的某个页面在源码里找不到去_backup目录翻.bak文件这些备份文件里可能就藏着被覆盖的旧版页面代码。恢复操作很简单把IndexMain.vue.bak复制一份重命名为IndexMain.vue注意.bak文件本身的文件名后缀要一起去掉让 IDE 识别成正式源码文件。然后重新编译预览如果新版本的页面还有报错再检查是不是引用了被删除的样式文件main.css.bak里的类名——这种情况把对应样式片段从.bak里剪出来贴进主 CSS 文件即可。6.2 用脚本批量制造演示数据避免手动录入几十条试题管理端手动录入试题和资讯太费时间而且演示时如果题库是空的考试页面一片空白观感很差。写个简短的 SQL 脚本批量造数据是让整套系统在答辩现场「看起来像个真实产品」的关键-- 批量生成 30 条三级阅读题 INSERT INTO t_question (type, level, content, option_a, option_b, option_c, option_d, answer) SELECT 阅读, 三级, CONCAT(模拟阅读材料第, n, 篇MHK考试阅读理解训练文本。), 选项A内容, 选项B内容, 选项C内容, 选项D内容, ELT(1 FLOOR(RAND() * 4), A, B, C, D) FROM (SELECT 1 AS n UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION SELECT 10) t, (SELECT 1 UNION SELECT 2 UNION SELECT 3) t2;执行后一次性生成 30 条带随机答案的阅读题听力、书面表达、口试材料同理把type字段替换成对应题型即可。注意answer是随机生成的管理端编辑试题时能看到正确答案分布不影响演示效果。造完数据后走一遍完整验收流程学生注册 → 管理员审核 → 学生登录 → 首页看资讯 → 做一套三级题 → 交卷看分数 → 检查错题本 → 提交反馈 → 管理员回复。全程录屏这个视频就是你答辩时的实操证据。6.3 真机预览时把后端接口地址改成本机局域网 IP最后一条交付技巧演示场景往往在教室或会议室手机和电脑连同一个 Wi-Fi把小程序端的baseUrl从localhost改成电脑的局域网 IP比如http://192.168.1.105:8080这样手机无需云端服务器也能实时调用本地后端。改完重启微信开发者工具真机预览即可访问。别用localhost因为那在手机里指向手机自己前端根本连不上后端。这是每次带毕设学生做现场演示时必踩的坑——代码在电脑上跑得好好的换手机连就全部失败查了半天发现是 IP 没改。从那以后我每次跑真机预览都会先 ping 一下电脑 IP确保手机和电脑在同一网段再打开小程序端验证登录接口。希望这篇拆解能帮你少走几趟弯路把 MHK 在线学习小程序稳稳跑起来。本文还有配套的精品资源点击获取

毕设实战：MHK在线学习小程序全栈链路拆解与避坑指南

相关推荐

飞书CLI开源后，Claude Code办公自动化实战大纲：从Base URL改到TaoToken开始

Claude Fable 5 正式发布，TaoToken 统一 Key 接入 Anthropic 新模型

headcount 16部门选型完全指南：CFO、CTO、CISO等角色该装哪些技能

更多资讯

串口不死：从UART物理层、RS485到DMA缓冲区的IIoT调试指南

LabVIEW直连稀释制冷机的三大通信方案：REST/WebSocket/MQTT

SSM+JSP酒店客房预定系统开发全攻略：从环境搭建到避坑指南

储能柜效率差，问题可能藏在电池簇DC/DC里

Linux PM QoS 功耗管理：约束聚合机制与驱动开发实践

模型服务规模化：调度、KV Cache 与资源池化的系统之道

今日更新

PHP htmlentities()函数用法讲解

AI Agent工程实战：从七要素到七个决策点的系统设计指南

AI入局芯片设计验证：验证收敛50倍加速的真相与应对

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？