SSM+微信小程序宠物寄养系统毕业设计源码（含论文与数据库）

简介：本资源是一份完整的本科毕业设计论文，面向计算机相关专业学生及微信小程序开发初学者，聚焦宠物寄养服务场景的信息化解决方案。论文全文约一万字，系统阐述了基于微信小程序的宠物寄养平台从需求分析、技术选型（前端微信小程序+后端SSM框架+MySQL数据库）、功能模块（宠主管理、寄养环境管理、在线预约、管理员审核等）、业务流程、ER图与数据字典到系统测试与总结的全流程实现逻辑，具备完整学术规范与工程落地参考价值。资源为1个DOC文档，大小1.18MB，结构清晰，含中英文摘要、目录、七章正文及参考文献，内容预览可见详细章节划分与技术关键词。目前已有531人学习下载，适合用于毕业设计选题参考、课程设计复现、小程序+Java全栈开发学习及数据库设计实践。

1. 一个能跑通的宠物寄养小程序：不是Demo，是完整毕业设计源码包，含SSM后端+微信前端+MySQL数据库+全套论文

上周帮某高校实验室调试一个学生毕设项目，打开「weixin288」这个压缩包时差点笑出声——解压后看到weixin288文件夹里整整齐齐放着springboot（错！其实是 SSM）、miniprogram、doc三大目录，还有db.sql和论文终稿.pdf，那一刻我意识到：这不是又一个“只配截图发朋友圈”的课程设计，而是一套真能部署、真能注册、真能下订单、真能查寄养状态的宠物寄养平台闭环实现。它没用 Spring Boot，但用了更贴近教学场景的 SSM（Spring + SpringMVC + MyBatis）；没上云服务，但本地 Tomcat + MySQL 8.0 就能全链路跑通；微信小程序端不依赖任何第三方 SDK，所有登录、支付、图片上传都走自己写的 Java 接口。适合两类人：一是大四学生拿去改个名字、换套 UI、调几个字段，两周内交毕设答辩；二是刚转行的前端/后端新手，想亲手拆一个“有管理后台、有用户流程、有真实数据库交互”的小程序项目——它不炫技，但每一步都踩在工程落地的实处。关键词就三个：微信小程序、毕业设计、论文，没有虚的，全是能抄、能跑、能改的硬货。

2. 技术栈与工程结构：SSM 后端 + 原生小程序 + MySQL，拒绝黑匣子式封装

这个项目的技术选型非常务实：不追新、不堆砌、不造轮子，所有技术点都在高校计算机专业课程范围内，且组合逻辑清晰。后端用 SSM 是因为 Spring 的 IoC 容器能讲清楚依赖注入，MyBatis 的 XML 映射比注解更利于初学者理解 SQL 与 Java 对象的绑定关系；前端用微信原生开发而非 Taro 或 UniApp，是因为所有 API 调用（wx.login、wx.requestPayment）都裸写，没有中间层抽象，调试时能直接看到请求 URL 和响应体；数据库选 MySQL 5.7+（兼容 8.0），表结构设计虽简单但覆盖了寄养业务核心实体，且.sql文件里带INSERT初始化数据，省去手动造测试数据的麻烦。整个工程不是单体巨石，而是清晰分层：后端是标准 Maven Web 项目，前端是独立miniprogram目录，文档和论文自成体系。这种结构让新手能一眼看懂“代码在哪改”“接口在哪配”“数据库在哪建”，而不是陷进 webpack 配置或小程序插件依赖里出不来。

2.1 后端目录结构：SSM 三层架构落地，Controller 层即接口入口

进入weixin288根目录下的src/main/java/com/weixin288（注意包名是com.weixin288，不是com.example），你能看到典型的 SSM 分包结构：

com.weixin288 ├── controller // 所有 HTTP 接口入口，命名直白：ChongzhuController.java（宠主）、JiyanghuanjingController.java（寄养环境） ├── entity // 实体类，与数据库表一一对应，如 Chongwujiyang.java（宠物寄养记录） ├── mapper // MyBatis Mapper 接口，如 ChongwujiyangMapper.java，定义 CRUD 方法 ├── service // 业务逻辑层，如 ChongwujiyangService.java，处理寄养订单状态流转 ├── service/impl // Service 实现类，含具体业务规则，如判断寄养时间是否冲突 └── util // 工具类，含文件上传（FileUploadUtil.java）、微信支付签名（WxPayUtil.java）、Token 生成（TokenUtil.java）

关键点在于：所有 Controller 方法都返回Map<String, Object>，而非 JSON 字符串。这是为了适配小程序端wx.request的 success 回调，统一约定{code: 200, msg: "成功", data: {...}}结构。比如ChongzhuController.java中的登录接口：

// com/weixin288/controller/ChongzhuController.java @PostMapping("/login") @ResponseBody public Map<String, Object> login(@RequestBody Map<String, String> params) { String zhanghao = params.get("zhanghao"); String mima = params.get("mima"); Chongzhu chongzhu = chongzhuService.findByZhanghaoAndMima(zhanghao, mima); if (chongzhu != null) { // 生成 Token，存入 Redis（项目中用 Map 模拟，实际可替换） String token = TokenUtil.generateToken(chongzhu.getId().toString()); Map<String, Object> result = new HashMap<>(); result.put("code", 200); result.put("msg", "登录成功"); result.put("data", chongzhu); result.put("token", token); // 小程序端需存此 token 用于后续请求鉴权 return result; } else { Map<String, Object> result = new HashMap<>(); result.put("code", 401); result.put("msg", "账号或密码错误"); return result; } }

提示：TokenUtil.generateToken()是一个简单的 UUID + 时间戳拼接，未使用 JWT，降低理解门槛。实际部署时建议替换为 Spring Security + Redis 方案，但毕设阶段够用。

2.2 微信小程序前端：原生开发，app.js全局配置 +pages/页面路由

小程序代码位于miniprogram目录，结构极简：

miniprogram ├── app.js // 全局逻辑：onLaunch 时检查登录态，getApp().globalData.token 存 token ├── app.json // 页面路径、窗口样式、tabBar 配置（首页、我的、管理员入口） ├── project.config.json // IDE 配置，无需修改 ├── utils/ │ └── request.js // 封装 wx.request，自动添加 header.Authorization = token ├── pages/ │ ├── index/ // 首页：展示寄养环境列表，调用 /jiyanghuanjing/list 接口 │ ├── login/ // 登录页：提交账号密码，调用 /chongzhu/login │ ├── register/ // 注册页：调用 /chongzhu/register │ ├── my/ // 我的页面：显示用户信息、我的寄养订单（/chongwujiyang/mylist） │ └── admin/ // 管理员入口（需输入密码）：跳转至后台管理页 └── sitemap.json // 搜索配置，可忽略

核心是utils/request.js，它让所有页面请求自动携带 token：

// miniprogram/utils/request.js function request(url, data = {}, method = 'GET') { return new Promise((resolve, reject) => { const token = getApp().globalData.token; wx.request({ url: 'https://localhost:8080' + url, // 注意：此处需改为你的后端地址！本地调试用 http://localhost:8080 method: method, data: data, header: { 'content-type': 'application/json', 'Authorization': token || '' // 关键：自动加 token }, success: (res) => { if (res.data.code === 200) { resolve(res.data.data); } else if (res.data.code === 401) { wx.showToast({title: '请先登录', icon: 'none'}); wx.navigateTo({url: '/pages/login/login'}); } else { wx.showToast({title: res.data.msg || '请求失败', icon: 'none'}); reject(res.data); } }, fail: (err) => { wx.showToast({title: '网络错误', icon: 'none'}); reject(err); } }); }); } module.exports = { request };

注意：wx.request默认不支持 localhost，真机调试需在微信开发者工具中勾选「不校验合法域名、HTTPS 证书」，或把后端部署到有备案域名的服务器。

2.3 数据库设计：10 张表，ER 图清晰，db.sql一键导入

项目附带的db.sql文件是精华所在。它不是空库，而是包含初始化数据的完整脚本，执行后直接有管理员账号（admin/123456）、测试宠主、3 条寄养环境、5 条宠物寄养记录。表结构遵循第三范式，核心表如下：

ER 图（见论文第 3.2 节图 3.2）明确表达了“一个寄养环境可被多个用户评论（1→M）”、“一个宠主可下多个寄养订单（1→M）”等关系。所有外键均未设数据库级约束（如 ON DELETE CASCADE），而是由 Java 代码控制删除逻辑，这是教学项目的常见做法——让学生亲手写@Transactional事务，理解数据一致性。

3. 运行全流程：从 JDK 配置到小程序真机预览，一步不跳过

跑通这个项目，本质是打通「Java 后端 → MySQL → 微信小程序」三段链路。很多同学卡在第一步：以为下载完代码就能 run，结果 Tomcat 启动报错、小程序连不上 localhost、登录返回 404。下面按真实踩坑顺序，把每一步的命令、配置、验证方法写透。这不是理想化流程，而是你开终端、点鼠标、看日志时的真实路径。

3.1 后端启动：JDK 1.8 + Tomcat 8.5 + MySQL 5.7，三件套缺一不可

第一步：确认 JDK 版本
必须是 JDK 1.8（非 JRE，非 JDK 11+）。命令行输入：

java -version # 正确输出应为：java version "1.8.0_3XX" # 若显示 11 或 17，请卸载，重装 JDK 1.8（推荐 Oracle 官网或 Adoptium）

第二步：配置 Tomcat 8.5
下载 Apache Tomcat 8.5.x（不要 9.x 或 10.x！SSM 项目默认编译级别是 1.8，高版本 Tomcat 会报ServletException）。解压后，在 IDEA 中配置：

• File → Project Structure → Project → Project SDK → 选 JDK 1.8
• File → Settings → Build → Compiler → Java Compiler → Target bytecode version → 1.8
• Add Framework Support → Web Application → Version 3.1（Tomcat 8.5 对应 Servlet 3.1）

第三步：导入 MySQL 并初始化数据

1. 启动 MySQL 服务（Windows 用服务管理器，Mac/Linux 用brew services start mysql）
2. 用 Navicat 或 MySQL Workbench 连接，新建数据库weixin288，字符集选utf8mb4
3. 执行项目根目录下的db.sql（右键运行，或mysql -u root -p weixin288 < db.sql）
4. 验证：执行SELECT * FROM chongzhu LIMIT 1;，应返回一条zhanghao='testuser'的记录

第四步：启动后端，验证接口
在 IDEA 中右键weixin288项目 → Run 'Application'（或点击绿色三角）。启动成功日志末尾会有：

INFO o.s.b.w.embedded.tomcat.TomcatWebServer - Tomcat started on port(s): 8080 (http) with context path '' INFO c.w.App - Started App in 8.2 seconds (JVM running for 8.7)

此时访问http://localhost:8080/chongzhu/list，应返回 JSON 数组（含 testuser 数据）；访问http://localhost:8080/返回 404 是正常的，因为没配首页 Controller。

提示：若启动报java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener，说明 Maven 依赖未下载全。右键项目 → Maven → Reload，等待 Dependencies 下载完成（约 2 分钟）。

3.2 小程序调试：开发者工具配置 + 接口地址替换 + 登录态模拟

第一步：微信开发者工具导入项目

1. 下载最新版「微信开发者工具」（Stable 版）
2. 打开 → 项目 → 选择miniprogram目录 → AppID 填暂不使用（学习用）
3. 工具右上角 → 详情 → 本地设置 → 勾选「不校验合法域名、HTTPS 证书」

第二步：修改请求地址
打开miniprogram/utils/request.js，找到这行：

url: 'https://localhost:8080' + url, // ❌ 错误：https + localhost 不被允许

改为：

url: 'http://localhost:8080' + url, // ✅ 正确：http 协议

注意：若后端部署在其他机器（如公司内网），此处需改为http://192.168.x.x:8080，并确保该 IP 能被手机访问。

第三步：真机预览前的关键验证

1. 在开发者工具中打开pages/login/login.js，在formSubmit方法里加一行console.log('login data:', e.detail.value)
2. 输入账号testuser、密码123456，点击登录
3. 查看 Console：应看到login data: {zhanghao: "testuser", mima: "123456"}
4. 查看 Network 面板：/chongzhu/login请求状态码为 200，Response 中code:200，data包含用户信息

第四步：真机扫码预览

1. 点击开发者工具左上角「预览」→ 生成二维码
2. 微信扫描，手机端打开小程序
3. 输入testuser/123456，成功跳转至首页，列表显示寄养环境 ——恭喜，前后端已贯通！

4. 核心功能模块拆解：从在线寄养下单到管理员审核，代码逐行解析

这个项目的价值不在炫技，而在把「用户怎么下单」「管理员怎么审核」「钱怎么算」这些业务细节，用最朴素的代码写出来。下面挑两个最核心、也最容易出错的模块：在线寄养下单（用户侧）和寄养订单审核（管理员侧），把关键代码、参数含义、业务逻辑掰开揉碎讲清楚。你看懂这两段，整个系统的骨架就立住了。

4.1 用户在线寄养：chongwujiyang/add接口，如何保证时间不冲突？

用户在小程序首页点击某个寄养环境 → 进入详情页 → 点击「立即寄养」→ 填写宠物信息、选择起止时间 → 提交。后端ChongwujiyangController.java的add方法处理此请求：

// com/weixin288/controller/ChongwujiyangController.java @PostMapping("/add") @ResponseBody public Map<String, Object> add(@RequestBody Chongwujiyang chongwujiyang) { // 1. 获取当前登录用户 ID（从 token 解析，项目中简化为从 session 取） Long userId = (Long) request.getSession().getAttribute("userId"); chongwujiyang.setChongzhuid(userId); // 绑定宠主 // 2. 校验寄养时间是否与该环境已有订单冲突 boolean conflict = chongwujiyangService.hasTimeConflict( chongwujiyang.getJiyanghuanjingid(), chongwujiyang.getKaishishijian(), chongwujiyang.getJiyangshizhang() ); if (conflict) { Map<String, Object> result = new HashMap<>(); result.put("code", 400); result.put("msg", "该时间段已被预约，请选择其他时间"); return result; } // 3. 计算费用：日收费 × 天数 Jiyanghuanjing jiyanghuanjing = jiyanghuanjingService.findById(chongwujiyang.getJiyanghuanjingid()); double dailyFee = jiyanghuanjing.getShoufei(); int days = chongwujiyang.getJiyangshizhang(); double totalFee = dailyFee * days; chongwujiyang.setTuoguanfeiyong((float) totalFee); chongwujiyang.setZongfeiyong((float) totalFee); // 本项目无其他费用，故相等 // 4. 保存订单，初始状态为 "待审核" chongwujiyang.setIspay("未支付"); // 支付状态 chongwujiyang.setShenhe("待审核"); // 审核状态 chongwujiyangService.insert(chongwujiyang); Map<String, Object> result = new HashMap<>(); result.put("code", 200); result.put("msg", "预约成功，请等待审核"); return result; }

关键参数说明：

• kaishishijian（开始时间）：格式为yyyy-MM-dd，如2024-06-01，不是时间戳，方便前端用picker组件选择
• jiyangshizhang（寄养时长）：单位为“天”，整数，如填5表示寄养 5 天
• hasTimeConflict()方法：遍历chongwujiyang表中jiyanghuanjingid相同且shenhe='已通过'的记录，判断[kaishishijian, kaishishijian + jiyangshizhang]是否与新订单区间重叠。这是防止“同一房间一天被订两次”的核心逻辑。

提示：此校验是应用层校验，非数据库唯一索引。教学项目中这样写更易理解，但生产环境建议在数据库加唯一约束或用分布式锁。

4.2 管理员审核订单：chongwujiyang/update接口，状态机驱动业务流

管理员登录后台（/admin/login，账号admin，密码123456）→ 进入「宠物寄养管理」→ 查看待审核订单 → 点击「通过」或「拒绝」。后端ChongwujiyangController.java的update方法处理：

// com/weixin288/controller/ChongwujiyangController.java @PostMapping("/update") @ResponseBody public Map<String, Object> update(@RequestBody Chongwujiyang chongwujiyang) { // 1. 仅允许修改审核状态（shenhe）和支付状态（ispay） Chongwujiyang old = chongwujiyangService.findById(chongwujiyang.getId()); if (old == null) { return failResult("订单不存在"); } // 2. 状态流转规则：只能从"待审核"→"已通过"/"已拒绝"，不能反向 if ("待审核".equals(old.getShenhe())) { if ("已通过".equals(chongwujiyang.getShenhe())) { // 通过时，自动将 ispay 设为 "已支付"（模拟线下确认后付款） chongwujiyang.setIspay("已支付"); } else if (!"已拒绝".equals(chongwujiyang.getShenhe())) { return failResult("审核状态只能是'已通过'或'已拒绝'"); } } else { return failResult("订单已审核，不可再次操作"); } // 3. 更新数据库 chongwujiyangService.update(chongwujiyang); Map<String, Object> result = new HashMap<>(); result.put("code", 200); result.put("msg", "审核成功"); return result; } private Map<String, Object> failResult(String msg) { Map<String, Object> result = new HashMap<>(); result.put("code", 400); result.put("msg", msg); return result; }

业务逻辑深挖：

• 状态机设计：shenhe字段只有三个值：待审核、已通过、已拒绝。代码强制校验流转方向，避免“已通过”再点“已拒绝”的误操作。这是小型系统保障数据一致性的低成本方案。
• 支付状态联动：当管理员点「通过」时，系统自动将ispay设为已支付，模拟了“审核即确认服务生效，费用锁定”的业务规则。若需对接真实微信支付，此处应调用WxPayUtil.unifiedOrder()生成预支付交易。
• 无并发控制：代码未加synchronized或数据库行锁。教学项目中可接受，但若并发审核，可能出现超卖。生产环境需加乐观锁（version字段）或悲观锁（SELECT ... FOR UPDATE）。

5. 避坑指南：5 个血泪经验总结，专治毕设调试期的崩溃瞬间

跑通这个项目，80% 的时间花在解决“看似简单却死活不通”的问题上。以下是我在帮学生调试时，高频出现的 5 个坑，每个都按「现象 → 原因 → 解决」给出可立即执行的方案。别跳过，你很可能正在经历其中某一个。

5.1 现象：小程序登录返回 404，Network 显示Failed to load resource: the server responded with a status of 404 ()

原因：后端 Controller 类或方法未被 SpringMVC 扫描到，或@RequestMapping路径写错。常见于：

• ChongzhuController.java上漏了@Controller注解
• @RequestMapping("/chongzhu")写成了@RequestMapping("/chongzhu/")（多了一个斜杠）
• spring-mvc.xml中<context:component-scan>的base-package配置错误，未扫到com.weixin288.controller

解决：

1. 检查ChongzhuController.java顶部是否有@Controller
2. 检查@RequestMapping路径是否与request.js中调用的/chongzhu/login完全一致（大小写、斜杠）
3. 打开src/main/resources/spring-mvc.xml，确认<context:component-scan base-package="com.weixin288" />

5.2 现象：登录成功后，首页列表为空，Console 显示Cannot read property 'length' of undefined

原因：后端接口返回了code:200，但data字段是null或空数组，小程序index.js的onLoad方法未做空值判断。

解决：

1. 在浏览器访问http://localhost:8080/jiyanghuanjing/list，确认返回 JSON 中data是否有数据
2. 若无数据，检查db.sql是否执行成功，jiyanghuanjing表是否有记录
3. 在miniprogram/pages/index/index.js的onLoad回调中，加空值判断：

// pages/index/index.js onLoad() { request('/jiyanghuanjing/list').then(data => { if (data && data.length > 0) { // 加这一行 this.setData({ envList: data }); } else { wx.showToast({title: '暂无寄养环境', icon: 'none'}); } }); }

5.3 现象：Tomcat 启动报错java.lang.NoClassDefFoundError: org/springframework/web/context/ContextLoaderListener

原因：Maven 依赖未下载，或pom.xml中spring-webmvc版本与 Spring 版本不匹配（如 Spring 4.3.x 需配spring-webmvc:4.3.30.RELEASE）。

解决：

1. 右键项目 → Maven → Reload（等待 Dependencies 列表出现spring-webmvc）
2. 打开pom.xml，检查<properties>中的spring.version（应为4.3.30.RELEASE），并确认spring-webmvc的<version>与之相同
3. 若仍报错，删掉~/.m2/repository/org/springframework整个文件夹，重新 Reload

5.4 现象：小程序真机预览白屏，Console 显示net::ERR_CONNECTION_REFUSED

原因：手机和电脑不在同一局域网，或电脑防火墙阻止了 8080 端口。

解决：

1. 手机和电脑连同一个 WiFi
2. 电脑上执行ipconfig（Windows）或ifconfig（Mac），记下 IPv4 地址（如192.168.31.123）
3. 修改miniprogram/utils/request.js中的 URL：url: 'http://192.168.31.123:8080' + url
4. Windows：关闭防火墙或添加入站规则（端口 8080，TCP）；Mac：系统偏好设置 → 安全性与隐私 → 防火墙 → 防火墙选项 → 允许java

5.5 现象：管理员审核订单后，用户端“我的寄养”列表仍显示“待审核”，状态未更新

原因：小程序端未主动刷新数据，或my.js中请求的是/chongwujiyang/list（查全部），而非/chongwujiyang/mylist（查当前用户）。

解决：

1. 检查miniprogram/pages/my/my.js中onLoad调用的接口是否为/chongwujiyang/mylist
2. 在my.js的onShow生命周期中加刷新逻辑（用户切回页面时更新）：

onShow() { this.onLoad(); // 重新加载我的订单 }

3. 若仍不更新，检查后端ChongwujiyangController.java的mylist方法，确认 SQL 查询条件含WHERE chongzhuid = ?

6. 二次开发实战：3 个可立即落地的改造点，让毕设脱颖而出

拿到这套源码，如果只是改个 logo、换套颜色，答辩老师一眼就能看出是“套壳”。真正体现你能力的，是基于现有架构，做小而准的增强。下面三个改造点，我都在线上环境验证过，每个都能在 2 小时内完成，且效果直观、逻辑清晰，绝对让答辩老师眼前一亮。

6.1 改造点一：为寄养环境增加「距离排序」功能，用高德地图 API 实现

现状：首页寄养环境列表是数据库ORDER BY id，无法按用户位置排序。
目标：用户授权获取地理位置后，列表按“离我最近”排序。
实施步骤：

1. 小程序端：在pages/index/index.js的onLoad中加定位：

onLoad() { wx.getLocation({ // 获取用户坐标 type: 'wgs84', success: (res) => { this.setData({ userLat: res.latitude, userLng: res.longitude }); this.loadEnvList(); // 调用新接口 } }); }, loadEnvList() { const { userLat, userLng } = this.data; request(`/jiyanghuanjing/nearby?lat=${userLat}&lng=${userLng}`).then(data => { this.setData({ envList: data }); }); }

2. 后端新增接口：在JiyanghuanjingController.java中加：

@GetMapping("/nearby") @ResponseBody public List<Jiyanghuanjing> nearby(@RequestParam Double lat, @RequestParam Double lng) { // SQL 计算球面距离（Haversine 公式），取最近 10 个 return jiyanghuanjingService.findNearby(lat, lng, 10); }

3. Mapper XML：在JiyanghuanjingMapper.xml中写：

<select id="findNearby" resultType="Jiyanghuanjing"> SELECT *, 6371 * acos( cos(radians(#{lat})) * cos(radians(lat)) * cos(radians(lng) - radians(#{lng})) + sin(radians(#{lat})) * sin(radians(lat)) ) AS distance FROM jiyanghuanjing ORDER BY distance ASC LIMIT #{limit} </select>

提示：lat/lng字段需提前存入jiyanghuanjing表。可在后台管理页加「经纬度」输入框，或用高德地理编码 API 批量转换地址。

6.2 改造点二：给宠物寄养订单增加「微信支付」，接入真实支付流程

现状：订单状态为已支付是代码硬编码，无真实扣款。
目标：用户提交订单后，调起微信支付，支付成功后回调更新订单状态。
实施步骤：

1. 申请微信支付商户号（沙箱环境即可），获取appid、mch_id、key
2. 后端新增支付接口：在ChongwujiyangController.java中：

@PostMapping("/pay") @ResponseBody public Map<String, Object> pay(@RequestBody Map<String, String> params) { String orderId = params.get("orderId"); Chongwujiyang order = chongwujiyangService.findById(Long.valueOf(orderId)); if (!"未支付".equals(order.getIspay())) { return failResult("订单已支付"); } // 调用微信统一下单 API Map<String, String> payParams = WxPayUtil.unifiedOrder( order.getId().toString(), // 商户订单号 "宠物寄养服务", // 商品描述 (int)(order.getZongfeiyong() * 100), // 金额，单位分 "http://yourdomain.com/pay/callback" // 支付成功回调地址 ); return successResult(payParams); // 返回给小程序调起支付 }

3. 小程序端：在pages/my/order-detail.js中调用wx.requestPayment，传入后端返回的payParams。

注意：http://yourdomain.com必须是备案域名，且在微信支付后台配置 JSAPI 支付目录。

6.3 改造点三：为管理员后台增加「数据看板」，用 ECharts 渲染寄养趋势图

现状：管理员后台只有列表，无数据洞察。
目标：在/admin/dashboard页面，用折线图展示近 30 天寄养订单量。
实施步骤：

1. 后端新增统计接口：在AdminController.java中：

@GetMapping("/order-trend") @ResponseBody public Map<String, Object> orderTrend() { List<Map<String, Object>> trend = chongwujiyangService.getOrderTrendLast30Days(); // 返回格式：[{date: "2024-05-01", count: 5}, ...] return successResult(trend); }

2. SQL 统计：在ChongwujiyangMapper.xml中：

<select id="getOrderTrendLast30Days" resultType="java.util.Map"> SELECT DATE_FORMAT(createtime, '%Y-%m-%d') as date, COUNT(*) as count FROM chongwujiyang WHERE createtime >= DATE_SUB(NOW(), INTERVAL 30 DAY) GROUP BY DATE_FORMAT(createtime, '%Y-%m-%d') ORDER BY date </select>

3. 小程序端：在pages/admin/dashboard.js中用echarts-for-weixin渲染图表（npm install 后引入）。

提示：ECharts 配置项可复用官网示例，重点是xAxis.data填日期数组，series[0].data填数量数组。

从那以后我每次接手毕设项目，都强制走一遍「本地 JDK/Tomcat/MySQL 环境验证 → 接口逐个 curl 测试 → 小程序真机预览 → 核心流程下单/审核走通」这四步。不是为了炫技，而是因为答辩现场老师问“你这个

本文还有配套的精品资源，点击获取