微信小程序+Spring Boot考研题库毕业设计：从选题到跑通全流程

简介这是一套面向高校计算机相关专业学生的毕业设计/课程设计完整项目包主题为考研知识题库微信小程序采用微信小程序前端与Java后端分离架构适合正在准备毕业设计、需要项目实战经验或想学习小程序全栈开发的同学参考。压缩包共1243个文件约14.57MB涵盖227个png图片资源、192个js脚本、142个vue组件、128个java后端源码、92个wxml与88个wxss小程序页面样式以及json配置、sql数据库脚本、bat启动脚本和说明文档等前后端代码、数据库与部署说明一应俱全。目前已有216人学习下载。项目围绕考研题库的浏览、练习与管理场景展开包含小程序端页面、后台管理界面与Java服务端接口目录结构清晰便于按模块阅读与二次开发可作为毕业设计选题落地的参考方案也能帮助读者理解小程序与Java后端联调的完整流程。1. 考研题库小程序从选题到跑通一套能交差的毕业设计长什么样每年到了毕设选题季「基于微信小程序Java后端的考研知识题库」这类题目出现频率极高。原因很直接业务场景清晰刷题、错题本、收藏、模拟考技术栈主流微信小程序 Spring Boot MySQL工作量可控答辩时老师也挑不出大毛病。但真正动手的人会发现坑不在业务逻辑而在环境搭建、前后端联调、数据库设计和答辩文档这四件事上。我带过几届学生的毕设也自己接过类似的外包最常见的翻车场景是小程序端页面写完了后端接口跑不通或者接口通了但登录态、分页、错题记录这些细节一塌糊涂。这篇笔记就按「一个能跑通、能演示、能写进论文」的标准把整套方案拆开讲清楚适合正在做计算机毕业设计、想选一个稳妥题目的同学也适合想快速复现一套前后端分离项目实战的开发者。2. 技术选型与整体架构为什么这套组合最适合毕业设计2.1 小程序端选原生还是 uniapp这是第一个要做的决定。原生微信小程序开发工具上手快API 调用直接调试方便但代码只能跑在微信里。uniapp 可以一套代码多端发布但打包到微信小程序时偶尔会遇到样式兼容问题尤其是顶部导航栏高度、单选框样式这些细节。对于毕业设计来说我一般建议用原生原因是答辩老师不会因为你用了 uniapp 就加分但会因为小程序跑不起来而扣分。原生方案在微信开发者工具里的报错信息更直观社区资料也更多。如果你确实想用 uniapp注意两个点一是顶部导航栏高度要用uni.getSystemInfoSync().statusBarHeight动态获取不要写死二是打包时在 manifest.json 里正确配置 appid否则真机预览会失败。2.2 后端为什么选 Spring Boot MyBatisJava 后端做毕业设计Spring Boot 几乎是默认选项。它把 Tomcat 内嵌了一个 main 方法就能启动不需要额外配 web 服务器。持久层用 MyBatis 而不是 JPA是因为题库类项目的查询条件比较灵活——按科目筛、按年份筛、按题型筛、按关键词搜MyBatis 的 XML 写动态 SQL 更顺手。数据库用 MySQL 8.0字符集选 utf8mb4避免题目里出现特殊符号时乱码。整体架构就是经典的前后端分离小程序通过wx.request调用后端 REST 接口后端返回 JSON小程序渲染页面。登录态用 JWT 或者简单的 token 表来维护不建议用 session因为小程序没有 cookie 机制session 维护起来很别扭。2.3 数据库表设计的最小闭环题库类项目的表不用多但几张核心表必须设计清楚。下面是我常用的最小表结构表名作用关键字段user用户信息id, openid, nickname, avatar, create_timesubject科目分类id, name, sort_orderquestion题目主表id, subject_id, type, stem, options, answer, analysiswrong_book错题本id, user_id, question_id, wrong_count, last_wrong_timefavorite收藏id, user_id, question_id, create_timeexam_record模拟考记录id, user_id, score, total, create_time题目表里的options字段用 JSON 字符串存选项比如[{key:A,value:选项内容}]这样前端解析方便也避免了多建一张选项表的麻烦。type字段区分单选、多选、判断用 1/2/3 表示。3. 后端接口开发从登录到题库查询的完整实现3.1 微信登录接口与 token 发放小程序登录的流程是前端调用wx.login()拿到 code传给后端后端用 code appid secret 调用微信接口换 openid然后生成 token 返回给前端。下面是核心代码PostMapping(/login) public Result login(RequestBody LoginDTO loginDTO) { // 1. 用 code 换取 openid String url https://api.weixin.qq.com/sns/jscode2session ?appid appId secret appSecret js_code loginDTO.getCode() grant_typeauthorization_code; String response restTemplate.getForObject(url, String.class); JSONObject json JSON.parseObject(response); String openid json.getString(openid); // 2. 查库没有就注册 User user userService.getByOpenid(openid); if (user null) { user new User(); user.setOpenid(openid); user.setNickname(用户 System.currentTimeMillis() % 10000); userService.save(user); } // 3. 生成 token 返回 String token JwtUtil.generateToken(user.getId()); return Result.success(new LoginVO(token, user)); }这段代码的逻辑说明第一步用 RestTemplate 调微信接口返回的是 JSON 字符串用 FastJSON 解析出 openid。第二步查库如果用户不存在就自动注册昵称给一个默认值。第三步用 JWT 工具类生成 token把 userId 塞进 payload。参数方面appId 和 appSecret 放在配置文件里不要硬编码在代码中。token 的有效期一般设 7 天过期后前端重新走登录流程。注意微信接口返回的 session_key 不要返回给前端它只在后端用来解密用户信息泄露出去有安全风险。3.2 题库分页查询与多条件筛选题库列表是使用频率最高的接口必须支持分页和多条件筛选。前端传page、size、subjectId、type、keyword这几个参数后端用 MyBatis 动态 SQL 拼查询条件select idselectByCondition resultTypeQuestion SELECT * FROM question where if testsubjectId ! null AND subject_id #{subjectId} /if if testtype ! null AND type #{type} /if if testkeyword ! null and keyword ! AND stem LIKE CONCAT(%, #{keyword}, %) /if /where ORDER BY id DESC LIMIT #{offset}, #{size} /select逻辑说明where标签会自动处理第一个 AND避免 SQL 语法错误。offset由(page - 1) * size计算得出。参数方面size建议限制在 20 以内太大影响响应速度。关键词搜索用LIKE模糊匹配数据量超过几万条时需要考虑加索引或者用全文检索但毕业设计的数据量通常几百到几千条直接 LIKE 完全够用。3.3 错题本与收藏的写入逻辑错题本的逻辑是用户答错一题就往wrong_book表插一条记录如果已经存在就更新wrong_count和last_wrong_time。这里用INSERT ... ON DUPLICATE KEY UPDATE最简洁INSERT INTO wrong_book (user_id, question_id, wrong_count, last_wrong_time) VALUES (#{userId}, #{questionId}, 1, NOW()) ON DUPLICATE KEY UPDATE wrong_count wrong_count 1, last_wrong_time NOW();前提是user_id和question_id要建联合唯一索引否则 ON DUPLICATE KEY 不会生效。收藏逻辑类似只是不需要计数直接插入重复插入时忽略即可用INSERT IGNORE。4. 小程序端页面开发列表加载、答题交互与状态管理4.1 题库列表的上拉加载与下拉刷新微信小程序的列表加载更多核心是onReachBottom和onPullDownRefresh两个生命周期函数。下面是一个典型的实现Page({ data: { questionList: [], page: 1, size: 10, hasMore: true, loading: false }, onLoad() { this.loadQuestions(); }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.setData({ page: this.data.page 1 }); this.loadQuestions(); } }, onPullDownRefresh() { this.setData({ page: 1, questionList: [], hasMore: true }); this.loadQuestions(() { wx.stopPullDownRefresh(); }); }, loadQuestions(callback) { this.setData({ loading: true }); wx.request({ url: ${baseUrl}/question/list, data: { page: this.data.page, size: this.data.size, subjectId: this.data.subjectId }, success: (res) { const list res.data.data.list; this.setData({ questionList: this.data.page 1 ? list : this.data.questionList.concat(list), hasMore: list.length this.data.size, loading: false }); callback callback(); }, fail: () { this.setData({ loading: false }); wx.showToast({ title: 加载失败, icon: none }); } }); } });逻辑说明onReachBottom触发时先判断hasMore和loading避免重复请求。onPullDownRefresh重置页码和列表请求完成后调用wx.stopPullDownRefresh()停止刷新动画。loadQuestions里根据当前页码决定是替换还是追加列表。参数方面size设 10 比较合适太小请求频繁太大首屏加载慢。4.2 答题页的选项状态与提交逻辑答题页要处理单选和多选两种模式。单选用radio-group多选用checkbox-group。核心是把用户选中的选项存到data里提交时和正确答案比对submitAnswer() { const { currentQuestion, selectedOptions } this.data; const correctAnswer currentQuestion.answer.split(,); const isCorrect selectedOptions.length correctAnswer.length selectedOptions.every(item correctAnswer.includes(item)); if (!isCorrect) { // 写入错题本 wx.request({ url: ${baseUrl}/wrong/add, method: POST, header: { token: wx.getStorageSync(token) }, data: { questionId: currentQuestion.id } }); } this.setData({ showAnalysis: true, isCorrect }); }逻辑说明正确答案在数据库里存成A,B这种格式提交时先 split 成数组再和用户选中的选项比对。长度相同且每一项都包含才算对。答错时调后端接口写入错题本。参数方面token 放在 header 里传给后端做鉴权。4.3 顶部导航栏高度适配与单选框样式微信小程序的顶部导航栏高度在不同机型上不一样尤其是带刘海屏的 iPhone。获取方法是const systemInfo wx.getSystemInfoSync(); const statusBarHeight systemInfo.statusBarHeight; const navBarHeight 44; // 微信标准导航栏高度 const totalHeight statusBarHeight navBarHeight;把这个高度存到全局数据里自定义导航栏时用。单选框的样式在小程序里默认是圆形的如果想改成方形或者自定义颜色需要用wxss覆盖默认样式或者干脆不用原生组件自己用 view 模拟。5. 避坑与排查那些答辩前最容易翻车的地方5.1 跨域问题本地调试正常真机预览失败现象微信开发者工具里接口请求正常但真机预览时所有请求都失败。原因开发者工具默认关闭了跨域检查真机不会。解决后端加 CORS 配置或者在小程序后台配置合法域名。本地开发阶段可以在开发者工具里勾选「不校验合法域名」但上线前必须配好。5.2 分页查询数据重复或丢失现象上拉加载时第二页的数据和第一页有重复或者中间少了几条。原因排序字段不唯一MySQL 分页时顺序不稳定。解决ORDER BY 后面加一个唯一字段比如ORDER BY id DESC不要只用create_time排序。5.3 登录态过期后接口全部 401现象用户用了一段时间后所有需要登录的接口都返回 401。原因token 过期了但前端没有处理。解决在wx.request的fail或statusCode 401时清除本地 token 并重新走登录流程。最好封装一个统一的请求函数集中处理。5.4 数据库中文乱码现象题目里的中文存进去变成问号。原因数据库字符集不是 utf8mb4或者连接 URL 没指定字符集。解决建库时用CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci连接 URL 加?useUnicodetruecharacterEncodingutf8。5.5 小程序包体积超限现象上传代码时提示包体积超过 2M。原因图片资源太多或者引入了不必要的库。解决图片放 CDN 或者用网络图片不要打包进小程序清理未使用的依赖必要时用分包加载。6. 进阶技巧让这套毕设从「能跑」变成「能拿优」6.1 用拦截器统一处理 token 和日志后端加一个拦截器所有需要登录的接口先校验 token校验通过后把 userId 塞进 ThreadLocalController 里直接取不用每个方法都解析一遍。同时打印请求日志方便排查问题public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token request.getHeader(token); if (token null || !JwtUtil.verify(token)) { response.setStatus(401); return false; } Long userId JwtUtil.getUserId(token); UserContext.set(userId); return true; } Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) { UserContext.clear(); } }逻辑说明preHandle在请求进入 Controller 之前执行校验 token 并把 userId 存入 ThreadLocal。afterCompletion在请求结束后清理 ThreadLocal防止内存泄漏。参数方面拦截器需要在 WebMvcConfig 里注册并配置放行路径比如登录接口和静态资源。6.2 模拟考成绩的统计与错题回顾模拟考交卷后后端要计算得分并生成错题列表。得分计算很简单总分除以题目数乘以正确数。错题回顾是把这次考试中答错的题目 ID 收集起来批量查详情返回给前端。这里可以用 MyBatis 的foreach标签select idselectByIds resultTypeQuestion SELECT * FROM question WHERE id IN foreach collectionids itemid open( separator, close) #{id} /foreach /select逻辑说明foreach把 ID 列表拼成IN (1,2,3)的形式。参数方面ids列表不要超过 1000 个否则 SQL 会很长影响性能。6.3 答辩演示的准备工作答辩前一定要做三件事第一准备一个干净的数据库脚本现场导入就能跑第二录一段演示视频防止现场网络出问题第三把核心接口用 Postman 跑一遍截图放进论文附录。我见过太多人代码写得不错但答辩时环境起不来最后分数很难看。希望帮到你。本文还有配套的精品资源点击获取