简介这是一套基于Java、SpringBoot、Vue与MySQL技术栈开发的微信小程序急救常识学习系统面向计算机相关专业的毕业生、课程设计学习者及需要急救知识普及平台的开发者。项目已通过导师指导并获高分下载后无需修改即可直接运行可作为毕设、课程设计或期末大作业的完整参考方案。压缩包共1331个文件约34.14MB涵盖136个Java后端源码、155个Vue前端组件、265个JavaScript脚本、440个PNG界面素材以及66个WXSS与60个WXML小程序页面文件另附数据库SQL脚本、Maven配置与说明文档前后端代码与数据库脚本一应俱全。系统包含用户注册登录、急救常识图文展示、答题互动、后台内容管理及微信小程序接口等模块界面美观、操作简单、管理便捷。目前已有88人学习下载适合希望快速获得可运行完整项目、理解前后端分离架构与小程序开发流程的读者参考使用。1. 急救常识学习小程序一份能跑通前后端全链路的毕设源码急救常识这件事真正落到产品上难点从来不是知识本身而是怎么让用户在突发场景下三秒内找到正确处置步骤。这份基于 JAVASpringBootVueMySQL 的微信小程序急救常识学习系统解决的正是这个场景后端用 SpringBoot 提供分类、题库、学习记录接口管理端用 Vue 做内容维护小程序端负责用户答题、查看急救图文、记录学习进度。它适合三类人——正在做毕设需要一套完整可演示项目的同学、想练手 SpringBoot 小程序联调的后端新手、以及需要一套急救知识类内容管理骨架的开发者。整套源码包含后端工程、Vue 管理后台、小程序前端和 MySQL 数据库脚本属于典型的三端一体结构拿来就能跑改改就能交。2. 三端架构拆解SpringBoot 接口层、Vue 管理端与小程序如何分工这套系统的价值不在于代码量而在于它把内容管理和用户学习两条线拆得很干净。理解清楚三端各自的职责边界后面部署和二次开发才不会乱。2.1 后端 SpringBoot 的接口分层与 MyBatis-Plus 用法后端是整个系统的中枢常见做法是按 controller / service / mapper / entity 四层组织。急救常识系统里核心实体一般包括急救分类category、急救知识文章knowledge、题库question、用户答题记录record、小程序用户user。MyBatis-Plus 在这里的作用是省掉大量单表 CRUD 的 XML实体类上加好注解就能直接生成基础 SQL。// Knowledge.java 实体示例 Data TableName(knowledge) public class Knowledge { TableId(type IdType.AUTO) private Long id; private String title; // 急救知识标题 private String categoryId; // 所属分类 private String content; // 图文内容 private Integer viewCount; // 浏览量 TableField(fill FieldFill.INSERT) private Date createTime; }逻辑说明TableName把实体映射到数据库表TableId指定主键策略为自增TableField(fill FieldFill.INSERT)配合 MetaObjectHandler 可以在插入时自动填充创建时间省去手动 set。参数上要注意categoryId用 String 还是 Long 要和数据库字段类型一致不一致时 MyBatis-Plus 查询会静默返回空列表这是新手最容易翻车的地方。分页查询是管理端列表的刚需配置好分页插件后直接这样写// 分页查询急救知识 PageKnowledge page new Page(pageNum, pageSize); LambdaQueryWrapperKnowledge wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(keyword), Knowledge::getTitle, keyword) .eq(StringUtils.hasText(categoryId), Knowledge::getCategoryId, categoryId) .orderByDesc(Knowledge::getCreateTime); return knowledgeMapper.selectPage(page, wrapper);逻辑说明LambdaQueryWrapper用方法引用代替字符串字段名重构时不会因为改字段名而漏改 SQL。like和eq的第一个参数是条件开关只有条件为 true 时才拼接该条件这样一套代码同时支持带关键词搜索和不带关键词全量查。参数上pageNum从 1 开始pageSize建议限制在 20 以内否则小程序端一次拉太多数据会明显卡顿。2.2 Vue 管理端的路由与接口对接Vue 管理端负责内容维护典型页面有分类管理、知识文章编辑、题库管理、用户学习记录查看。路由用 vue-router 配置接口请求统一封装 axios 实例把 baseURL 指向 SpringBoot 服务地址。// request.js 统一封装 import axios from axios const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 指向后端地址 timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers[Authorization] token return config }) export default service逻辑说明拦截器里统一挂 token避免每个请求手动加。baseURL走环境变量开发环境指向http://localhost:8080打包后改成实际域名。参数上timeout设 10 秒比较稳妥急救知识文章如果带大图上传接口要单独放宽超时否则大图上传必超时。管理端打包后要放进 SpringBoot 的 static 目录一起部署这是热词里vue 打包放进 springboot 中的典型场景。做法是把npm run build产出的 dist 内容拷到src/main/resources/static然后配置一个转发规则让非接口请求都回落到 index.html否则刷新页面会 404。2.3 小程序端的登录与数据获取小程序端核心是登录态和列表渲染。登录流程是wx.login拿 code传给后端换 openid后端生成 token 返回。这里要注意热词里微信小程序登录获取手机号是另一套流程需要 button 的 open-type 配合和基础登录不是一回事别混用。// 小程序登录 wx.login({ success: res { wx.request({ url: ${baseUrl}/wx/login, method: POST, data: { code: res.code }, success: r { wx.setStorageSync(token, r.data.data.token) } }) } })逻辑说明code只能用一次五分钟内有效所以拿到后要立刻发给后端。后端用 code 调微信接口换 openid 和 session_key再把自定义 token 返回给小程序存本地。参数上baseUrl在小程序里必须是 https 且已配置合法域名本地调试要在开发者工具里勾选不校验合法域名否则请求直接失败。3. 从零跑起来数据库导入、后端启动与小程序联调拿到源码后最怕的是跑不起来这一章按顺序把环境搭起来每一步都给出可复制的操作。3.1 MySQL 建库与数据导入先在 MySQL 里建库字符集用 utf8mb4否则急救知识里的特殊符号会乱码。CREATE DATABASE first_aid DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE first_aid; -- 然后执行源码里的 first_aid.sql SOURCE /path/to/first_aid.sql;逻辑说明utf8mb4比 utf8 多支持 emoji 和部分生僻字急救内容里如果有图标字符必须用它。SOURCE命令在命令行客户端里执行如果用的是 Navicat 这类工具直接右键运行 SQL 文件更省事。导入后检查表数量一般 5 到 8 张表属于正常范围少了说明脚本没跑完。数据库连接配置在application.yml里改spring: datasource: url: jdbc:mysql://localhost:3306/first_aid?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver逻辑说明serverTimezone必须显式指定不写的话 MySQL 8 会报时区错误。characterEncodingutf8配合库的 utf8mb4 使用驱动版本 8.x 用com.mysql.cj.jdbc.Driver5.x 用com.mysql.jdbc.Driver写错直接启动失败。3.2 后端启动与接口自测后端用 Maven 构建命令行进入项目根目录执行mvn clean package -DskipTests java -jar target/*.jar逻辑说明-DskipTests跳过测试加快打包毕设项目一般没写测试用例不跳过反而可能因为测试类报错卡住。启动成功后控制台会打印端口默认 8080。用浏览器或 Postman 访问一个列表接口验证比如http://localhost:8080/knowledge/list能返回 JSON 就说明后端通了。如果启动报Table xxx doesnt exist八成是数据库没导入或库名对不上报Access denied就是账号密码错报端口占用就改server.port。这几个是启动阶段最高频的问题。3.3 Vue 管理端与小程序联调管理端先装依赖再启动npm install npm run serve逻辑说明npm install如果卡住换国内镜像源能明显提速。启动后访问控制台提示的地址一般是 8081 或 8082。登录管理端后先加一条急救分类和一篇知识文章确认数据能写进数据库这一步通了说明前后端联调没问题。小程序端用微信开发者工具打开源码目录改app.js或配置文件里的baseUrl指向后端地址。本地调试勾选不校验合法域名真机预览则必须用 https 域名。小程序顶部导航栏高度这个点要注意自定义导航栏时不同机型高度不一样用wx.getSystemInfoSync().statusBarHeight动态算写死数值在部分机型上会错位。4. 避坑与排查跑这套源码最容易翻车的五个地方这一章全是血泪经验每条都按现象 → 原因 → 解决写遇到问题直接对号入座。现象一后端启动报时区错误The server time zone value is unrecognized。原因MySQL 8 的时区配置和 JDBC 驱动默认值不匹配。 解决连接串里加serverTimezoneAsia/Shanghai或者进 MySQL 执行SET GLOBAL time_zone 8:00。现象二小程序请求全部失败控制台提示不在合法域名列表。原因小程序正式环境只允许 https 且已备案的域名。 解决开发阶段在开发者工具详情 → 本地设置里勾选不校验合法域名上线前把后端域名配到小程序后台的 request 合法域名里。现象三Vue 打包放进 SpringBoot 后刷新页面 404。原因前端路由是 history 模式刷新时请求打到了后端后端找不到对应接口。 解决加一个配置类把非 api 开头的请求都转发到 index.html或者把前端路由改成 hash 模式。现象四MyBatis-Plus 查询返回空列表但数据库里明明有数据。原因实体字段类型和数据库字段类型不一致或者TableName写的表名和实际表名对不上。 解决逐字段核对类型开启 MyBatis-Plus 的 SQL 日志logging.level.com.xxx.mapperdebug看实际执行的 SQL 长什么样一目了然。现象五小程序登录后拿不到用户信息token 存了但接口还是 401。原因请求头里没带 token或者后端拦截器校验的 header 名和前端设置的不一致。 解决统一约定 header 名为Authorization前端拦截器统一加后端拦截器统一读别一个用 token 一个用 Authorization。提示这套源码涉及三端任何一端配置错都会表现为跑不起来排查时按数据库 → 后端 → 前端 → 小程序的顺序逐层验证别一上来就怀疑代码。5. 二次开发进阶把急救知识系统改成你自己的题库应用跑通只是第一步真正让这套源码产生价值的是二次开发。急救常识系统的骨架其实是一个通用的内容 题库 学习记录模型把急救知识换成任何垂直领域的内容都能复用。先说题库模块的扩展。原始题库一般是单选要加多选和判断核心是改question表的type字段和答案存储格式。单选答案存A多选存A,B,C判断存true/false。前端渲染时按 type 分支处理判分逻辑也要跟着改// 判分逻辑 public boolean checkAnswer(String userAnswer, String correctAnswer, Integer type) { if (type 1) { // 单选 return userAnswer.equals(correctAnswer); } else if (type 2) { // 多选排序后比较 ListString u Arrays.asList(userAnswer.split(,)); ListString c Arrays.asList(correctAnswer.split(,)); Collections.sort(u); Collections.sort(c); return u.equals(c); } return false; }逻辑说明多选判分必须先排序再比较否则用户选B,A和正确答案A,B会被判错这是题库类项目最经典的坑。参数上type用整数枚举1 单选 2 多选 3 判断别用字符串字符串比较容易因为大小写和空格出问题。再说学习记录的统计。原始系统一般只存答题记录要加学习时长和连续打卡可以在record表加duration和study_date字段用一条 SQL 统计连续天数SELECT COUNT(DISTINCT study_date) FROM record WHERE user_id #{userId} AND study_date DATE_SUB(CURDATE(), INTERVAL 7 DAY);逻辑说明这条 SQL 统计近七天有学习记录的天数配合前端展示本周学习 X 天。参数上INTERVAL 7 DAY可以按需改成 30 天做月度统计。注意study_date要存日期而不是时间戳否则 DISTINCT 去重会失效。最后说一个验证方法改完任何模块别只看页面能不能点要直接查数据库确认数据落库正确。我一般会准备几条边界数据——空答案、超长内容、特殊字符——跑一遍能过这几条基本就不会在答辩或演示时翻车。从那以后我每次拿到这类三端源码都强制先跑一遍边界数据再动业务代码省下的返工时间远比测试花的多。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/26 1:11:08 · 阅读 1.2k 基于SpringBoot+Vue+MySQL的微信小程序急救常识学习系统源码与部署指南
简介这是一套基于Java、SpringBoot、Vue与MySQL技术栈开发的微信小程序急救常识学习系统面向计算机相关专业的毕业生、课程设计学习者及需要急救知识普及平台的开发者。项目已通过导师指导并获高分下载后无需修改即可直接运行可作为毕设、课程设计或期末大作业的完整参考方案。压缩包共1331个文件约34.14MB涵盖136个Java后端源码、155个Vue前端组件、265个JavaScript脚本、440个PNG界面素材以及66个WXSS与60个WXML小程序页面文件另附数据库SQL脚本、Maven配置与说明文档前后端代码与数据库脚本一应俱全。系统包含用户注册登录、急救常识图文展示、答题互动、后台内容管理及微信小程序接口等模块界面美观、操作简单、管理便捷。目前已有88人学习下载适合希望快速获得可运行完整项目、理解前后端分离架构与小程序开发流程的读者参考使用。1. 急救常识学习小程序一份能跑通前后端全链路的毕设源码急救常识这件事真正落到产品上难点从来不是知识本身而是怎么让用户在突发场景下三秒内找到正确处置步骤。这份基于 JAVASpringBootVueMySQL 的微信小程序急救常识学习系统解决的正是这个场景后端用 SpringBoot 提供分类、题库、学习记录接口管理端用 Vue 做内容维护小程序端负责用户答题、查看急救图文、记录学习进度。它适合三类人——正在做毕设需要一套完整可演示项目的同学、想练手 SpringBoot 小程序联调的后端新手、以及需要一套急救知识类内容管理骨架的开发者。整套源码包含后端工程、Vue 管理后台、小程序前端和 MySQL 数据库脚本属于典型的三端一体结构拿来就能跑改改就能交。2. 三端架构拆解SpringBoot 接口层、Vue 管理端与小程序如何分工这套系统的价值不在于代码量而在于它把内容管理和用户学习两条线拆得很干净。理解清楚三端各自的职责边界后面部署和二次开发才不会乱。2.1 后端 SpringBoot 的接口分层与 MyBatis-Plus 用法后端是整个系统的中枢常见做法是按 controller / service / mapper / entity 四层组织。急救常识系统里核心实体一般包括急救分类category、急救知识文章knowledge、题库question、用户答题记录record、小程序用户user。MyBatis-Plus 在这里的作用是省掉大量单表 CRUD 的 XML实体类上加好注解就能直接生成基础 SQL。// Knowledge.java 实体示例 Data TableName(knowledge) public class Knowledge { TableId(type IdType.AUTO) private Long id; private String title; // 急救知识标题 private String categoryId; // 所属分类 private String content; // 图文内容 private Integer viewCount; // 浏览量 TableField(fill FieldFill.INSERT) private Date createTime; }逻辑说明TableName把实体映射到数据库表TableId指定主键策略为自增TableField(fill FieldFill.INSERT)配合 MetaObjectHandler 可以在插入时自动填充创建时间省去手动 set。参数上要注意categoryId用 String 还是 Long 要和数据库字段类型一致不一致时 MyBatis-Plus 查询会静默返回空列表这是新手最容易翻车的地方。分页查询是管理端列表的刚需配置好分页插件后直接这样写// 分页查询急救知识 PageKnowledge page new Page(pageNum, pageSize); LambdaQueryWrapperKnowledge wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(keyword), Knowledge::getTitle, keyword) .eq(StringUtils.hasText(categoryId), Knowledge::getCategoryId, categoryId) .orderByDesc(Knowledge::getCreateTime); return knowledgeMapper.selectPage(page, wrapper);逻辑说明LambdaQueryWrapper用方法引用代替字符串字段名重构时不会因为改字段名而漏改 SQL。like和eq的第一个参数是条件开关只有条件为 true 时才拼接该条件这样一套代码同时支持带关键词搜索和不带关键词全量查。参数上pageNum从 1 开始pageSize建议限制在 20 以内否则小程序端一次拉太多数据会明显卡顿。2.2 Vue 管理端的路由与接口对接Vue 管理端负责内容维护典型页面有分类管理、知识文章编辑、题库管理、用户学习记录查看。路由用 vue-router 配置接口请求统一封装 axios 实例把 baseURL 指向 SpringBoot 服务地址。// request.js 统一封装 import axios from axios const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 指向后端地址 timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers[Authorization] token return config }) export default service逻辑说明拦截器里统一挂 token避免每个请求手动加。baseURL走环境变量开发环境指向http://localhost:8080打包后改成实际域名。参数上timeout设 10 秒比较稳妥急救知识文章如果带大图上传接口要单独放宽超时否则大图上传必超时。管理端打包后要放进 SpringBoot 的 static 目录一起部署这是热词里vue 打包放进 springboot 中的典型场景。做法是把npm run build产出的 dist 内容拷到src/main/resources/static然后配置一个转发规则让非接口请求都回落到 index.html否则刷新页面会 404。2.3 小程序端的登录与数据获取小程序端核心是登录态和列表渲染。登录流程是wx.login拿 code传给后端换 openid后端生成 token 返回。这里要注意热词里微信小程序登录获取手机号是另一套流程需要 button 的 open-type 配合和基础登录不是一回事别混用。// 小程序登录 wx.login({ success: res { wx.request({ url: ${baseUrl}/wx/login, method: POST, data: { code: res.code }, success: r { wx.setStorageSync(token, r.data.data.token) } }) } })逻辑说明code只能用一次五分钟内有效所以拿到后要立刻发给后端。后端用 code 调微信接口换 openid 和 session_key再把自定义 token 返回给小程序存本地。参数上baseUrl在小程序里必须是 https 且已配置合法域名本地调试要在开发者工具里勾选不校验合法域名否则请求直接失败。3. 从零跑起来数据库导入、后端启动与小程序联调拿到源码后最怕的是跑不起来这一章按顺序把环境搭起来每一步都给出可复制的操作。3.1 MySQL 建库与数据导入先在 MySQL 里建库字符集用 utf8mb4否则急救知识里的特殊符号会乱码。CREATE DATABASE first_aid DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE first_aid; -- 然后执行源码里的 first_aid.sql SOURCE /path/to/first_aid.sql;逻辑说明utf8mb4比 utf8 多支持 emoji 和部分生僻字急救内容里如果有图标字符必须用它。SOURCE命令在命令行客户端里执行如果用的是 Navicat 这类工具直接右键运行 SQL 文件更省事。导入后检查表数量一般 5 到 8 张表属于正常范围少了说明脚本没跑完。数据库连接配置在application.yml里改spring: datasource: url: jdbc:mysql://localhost:3306/first_aid?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver逻辑说明serverTimezone必须显式指定不写的话 MySQL 8 会报时区错误。characterEncodingutf8配合库的 utf8mb4 使用驱动版本 8.x 用com.mysql.cj.jdbc.Driver5.x 用com.mysql.jdbc.Driver写错直接启动失败。3.2 后端启动与接口自测后端用 Maven 构建命令行进入项目根目录执行mvn clean package -DskipTests java -jar target/*.jar逻辑说明-DskipTests跳过测试加快打包毕设项目一般没写测试用例不跳过反而可能因为测试类报错卡住。启动成功后控制台会打印端口默认 8080。用浏览器或 Postman 访问一个列表接口验证比如http://localhost:8080/knowledge/list能返回 JSON 就说明后端通了。如果启动报Table xxx doesnt exist八成是数据库没导入或库名对不上报Access denied就是账号密码错报端口占用就改server.port。这几个是启动阶段最高频的问题。3.3 Vue 管理端与小程序联调管理端先装依赖再启动npm install npm run serve逻辑说明npm install如果卡住换国内镜像源能明显提速。启动后访问控制台提示的地址一般是 8081 或 8082。登录管理端后先加一条急救分类和一篇知识文章确认数据能写进数据库这一步通了说明前后端联调没问题。小程序端用微信开发者工具打开源码目录改app.js或配置文件里的baseUrl指向后端地址。本地调试勾选不校验合法域名真机预览则必须用 https 域名。小程序顶部导航栏高度这个点要注意自定义导航栏时不同机型高度不一样用wx.getSystemInfoSync().statusBarHeight动态算写死数值在部分机型上会错位。4. 避坑与排查跑这套源码最容易翻车的五个地方这一章全是血泪经验每条都按现象 → 原因 → 解决写遇到问题直接对号入座。现象一后端启动报时区错误The server time zone value is unrecognized。原因MySQL 8 的时区配置和 JDBC 驱动默认值不匹配。 解决连接串里加serverTimezoneAsia/Shanghai或者进 MySQL 执行SET GLOBAL time_zone 8:00。现象二小程序请求全部失败控制台提示不在合法域名列表。原因小程序正式环境只允许 https 且已备案的域名。 解决开发阶段在开发者工具详情 → 本地设置里勾选不校验合法域名上线前把后端域名配到小程序后台的 request 合法域名里。现象三Vue 打包放进 SpringBoot 后刷新页面 404。原因前端路由是 history 模式刷新时请求打到了后端后端找不到对应接口。 解决加一个配置类把非 api 开头的请求都转发到 index.html或者把前端路由改成 hash 模式。现象四MyBatis-Plus 查询返回空列表但数据库里明明有数据。原因实体字段类型和数据库字段类型不一致或者TableName写的表名和实际表名对不上。 解决逐字段核对类型开启 MyBatis-Plus 的 SQL 日志logging.level.com.xxx.mapperdebug看实际执行的 SQL 长什么样一目了然。现象五小程序登录后拿不到用户信息token 存了但接口还是 401。原因请求头里没带 token或者后端拦截器校验的 header 名和前端设置的不一致。 解决统一约定 header 名为Authorization前端拦截器统一加后端拦截器统一读别一个用 token 一个用 Authorization。提示这套源码涉及三端任何一端配置错都会表现为跑不起来排查时按数据库 → 后端 → 前端 → 小程序的顺序逐层验证别一上来就怀疑代码。5. 二次开发进阶把急救知识系统改成你自己的题库应用跑通只是第一步真正让这套源码产生价值的是二次开发。急救常识系统的骨架其实是一个通用的内容 题库 学习记录模型把急救知识换成任何垂直领域的内容都能复用。先说题库模块的扩展。原始题库一般是单选要加多选和判断核心是改question表的type字段和答案存储格式。单选答案存A多选存A,B,C判断存true/false。前端渲染时按 type 分支处理判分逻辑也要跟着改// 判分逻辑 public boolean checkAnswer(String userAnswer, String correctAnswer, Integer type) { if (type 1) { // 单选 return userAnswer.equals(correctAnswer); } else if (type 2) { // 多选排序后比较 ListString u Arrays.asList(userAnswer.split(,)); ListString c Arrays.asList(correctAnswer.split(,)); Collections.sort(u); Collections.sort(c); return u.equals(c); } return false; }逻辑说明多选判分必须先排序再比较否则用户选B,A和正确答案A,B会被判错这是题库类项目最经典的坑。参数上type用整数枚举1 单选 2 多选 3 判断别用字符串字符串比较容易因为大小写和空格出问题。再说学习记录的统计。原始系统一般只存答题记录要加学习时长和连续打卡可以在record表加duration和study_date字段用一条 SQL 统计连续天数SELECT COUNT(DISTINCT study_date) FROM record WHERE user_id #{userId} AND study_date DATE_SUB(CURDATE(), INTERVAL 7 DAY);逻辑说明这条 SQL 统计近七天有学习记录的天数配合前端展示本周学习 X 天。参数上INTERVAL 7 DAY可以按需改成 30 天做月度统计。注意study_date要存日期而不是时间戳否则 DISTINCT 去重会失效。最后说一个验证方法改完任何模块别只看页面能不能点要直接查数据库确认数据落库正确。我一般会准备几条边界数据——空答案、超长内容、特殊字符——跑一遍能过这几条基本就不会在答辩或演示时翻车。从那以后我每次拿到这类三端源码都强制先跑一遍边界数据再动业务代码省下的返工时间远比测试花的多。希望帮到你。本文还有配套的精品资源点击获取