简介本资源是一套完整的微信小程序毕业设计项目——宠物店商城系统面向计算机专业本科生及Java全栈初学者解决课程设计与毕设中前后端协同开发、多角色权限管理及电商类小程序落地的典型需求。压缩包共1659个文件48.38MB涵盖250个JavaScript逻辑文件、184个Java后端接口与业务类、177个Vue组件含管理后台、130个WXML页面结构及132个WXSS样式文件辅以JSON配置、SVG图标、MP4演示视频等结构清晰前后端分离特征明显。已有176人学习下载适合快速掌握小程序SpringBootMySQL技术栈整合开发流程。资源提供完整可运行源码、编号282的全流程演示视频、详细功能说明文档以及管理员/用户/商家三端角色的完整业务闭环实现包括宠物信息管理、商品销售、服务预约、订单跟踪与日志发布等核心模块具备直接部署与二次开发基础。1. 微信小程序毕业设计不是“套模板交差”这个宠物店商城系统能跑通完整闭环前端交互、Java后端鉴权、MySQL事务订单适合真要答辩部署的本科生你是不是也见过那种“微信小程序毕业设计”压缩包——点开全是index.wxmlapp.js堆砌连登录态都靠wx.setStorageSync(token, xxx)硬写结果答辩时老师一问“用户下单后库存怎么扣”、“管理员删商品关联的日志和订单怎么处理”当场卡壳。这个宠物店商城系统不一样它用标准的「小程序前端 Spring Boot 后端 MySQL 8.0」三层结构把「用户买宠物、商家上架服务、管理员审核日志」全链路串起来了。不是静态页面演示而是真实走通了 JWT 登录鉴权、MyBatis-Plus 多表联查、订单状态机待支付→已发货→已完成、以及关键的库存预占与回滚逻辑。如果你正卡在毕设选题没方向、代码写到一半发现权限混乱、或者被导师质疑“业务逻辑太单薄”这个项目就是为你准备的——它不教你怎么画UI而是告诉你一个能过答辩、能本地部署、能讲清每行代码作用的微信小程序系统到底长什么样。2. 从源码结构看设计逻辑为什么用 Java 而不是云开发三个技术选型硬理由这个项目不是“小程序云函数”的轻量方案而是坚持用 Java 写后端。这不是为了炫技而是由业务刚性需求决定的。下面拆解源码目录和对应的技术决策依据。2.1 前端目录结构Vue 风格小程序组件化但严格遵循微信原生规范项目前端基于uni-app框架非 Taro 或原生 WXML但所有.vue文件均按微信小程序生命周期重写确保可直接导入微信开发者工具运行。关键文件如下├── pages/ # 页面级路由 │ ├── user/ # 用户模块 │ │ ├── order-list.vue # 订单列表含状态筛选 │ │ └── pet-detail.vue # 宠物详情页含立即购买按钮 │ ├── merchant/ # 商家模块 │ │ ├── goods-add.vue # 商品上架表单含富文本描述 │ │ └── service-schedule.vue # 服务预约日历组件 │ └── admin/ # 管理员模块需角色鉴权 │ ├── log-audit.vue # 日志审核页带通过/驳回按钮 │ └── order-manage.vue # 订单管理支持导出Excel ├── components/ # 可复用业务组件 │ ├── pet-card.vue # 宠物卡片含领养状态徽标 │ └── service-item.vue # 服务项目卡片含预约人数计数 └── static/ # 静态资源 └── icons/ # SVG图标非字体图标规避iOS兼容问题提示所有.vue.bak文件是历史备份如IndexMain.vue.bak实际运行以无.bak后缀为准。3-build.bat是 uni-app 编译命令生成dist/build/mp-weixin目录该目录可直接拖入微信开发者工具。为什么不用纯原生 WXML因为 uni-app 的v-if/v-for语法对本科生更友好且pages.json中已配置 tabBar 和 subNVue 原生导航栏兼顾开发效率与体验。但注意它没有使用任何第三方 UI 库如 uView所有样式均在main.css中定义避免答辩时被问“这个组件是你写的还是抄的”。2.2 后端核心模块Spring Boot 2.7 MyBatis-Plus 3.5拒绝“假 REST”后端采用标准 Maven 结构pom.xml明确声明依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId version2.7.18/version /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency关键控制器路径src/main/java/com/petstore/controller/控制器类名对应前端页面核心逻辑UserController.java用户注册/登录使用 BCrypt 加密密码JWT 生成 token有效期2小时OrderController.java订单提交/查询事务注解Transactional包裹下单全流程包含库存扣减、日志插入、订单创建三步原子操作PetLogController.java日志发布/审核PreAuthorize(hasRole(ADMIN))实现 RBAC 权限控制注意application.yml中数据库配置为spring.datasource.urljdbc:mysql://localhost:3306/petstore?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue必须开启serverTimezone参数否则 MySQL 8.0 会报时区错误——这是新手最常翻车的第一步。2.3 数据库设计12 张表支撑多角色业务重点看pet_order与inventory关联MySQL 表结构不是简单 CRUD而是针对宠物行业特性设计。关键表关系如下表名字段重点业务意义pet_infostatus TINYINT(1) DEFAULT 11待领养, 2已领养宠物状态实时更新影响前端展示goods_infostock INT NOT NULL DEFAULT 0商品库存下单时校验并扣减pet_orderorder_status ENUM(WAIT_PAY,PAID,SHIPPED,COMPLETED,CANCELLED)订单状态机支持前端按状态筛选inventorypet_id BIGINT, goods_id BIGINT, quantity INT宠物与商品共享库存表解决“同一宠物既可领养又可购买周边”的耦合问题提示inventory表是本项目设计亮点。传统方案会为宠物、商品各建一张库存表但这里用联合主键(pet_id, goods_id)统一管理避免数据冗余。例如一只金毛犬pet_id1001关联狗粮goods_id2001其quantity表示该犬可配套销售的狗粮包数。3. 本地部署四步法从拉取代码到微信扫码访问每一步都踩过坑别被“源码视频”吓住。这个项目我已在 Windows 10 macOS 14 上实测部署成功。只要按顺序执行15 分钟内就能看到首页。以下是经过血泪验证的步骤跳过任何一步都可能卡在白屏。3.1 后端启动先配 JDK 1.8再改数据库连接最后运行 JAR第一步永远是环境检查# 检查 JDK 版本必须是 1.8Spring Boot 2.7 不兼容 JDK 17 java -version # 输出应为java version 1.8.0_3XX # 解压后端源码路径示例D:\petstore-backend cd D:\petstore-backend # 修改 application.yml 中数据库配置 # 将 localhost 改为你的 MySQL IP若 MySQL 在 Docker 中填宿主机 IP # 将 username/password 改为你的 MySQL 账号密码 # 保存后执行 mvn clean package -Dmaven.test.skiptrue # 生成 target/petstore-0.0.1-SNAPSHOT.jar启动命令关键参数不能少java -Dfile.encodingUTF-8 -Dspring.profiles.activedev -jar target/petstore-0.0.1-SNAPSHOT.jar逻辑说明-Dfile.encodingUTF-8解决中文乱码-Dspring.profiles.activedev激活开发配置读取application-dev.ymlJAR 包内置 Tomcat无需额外安装。启动成功后访问http://localhost:8080/swagger-ui.html应看到 Swagger 接口文档——这是验证后端是否跑通的黄金标准。3.2 前端编译uni-app 项目必须用 HBuilderX 或 CLI微信开发者工具只负责预览不要直接用微信开发者工具打开src目录正确流程是# 进入前端目录路径示例D:\petstore-frontend cd D:\petstore-frontend # 安装依赖必须用 npmuni-app 对 yarn 兼容性差 npm install # 编译为微信小程序格式生成 dist/build/mp-weixin npm run build:mp-weixin # 此时 dist/build/mp-weixin 目录已生成 # 打开微信开发者工具 → 新建项目 → 选择该目录 → AppID 填 test测试用参数说明npm run build:mp-weixin调用的是package.json中定义的脚本build:mp-weixin: cross-env NODE_ENVproduction UNI_PLATFORMmp-weixin vue-cli-service uni-build。UNI_PLATFORMmp-weixin是关键它告诉 uni-app 编译目标为微信小程序而非 H5 或 App。3.3 小程序登录态打通前端如何拿到后端 JWT 并持久化小程序登录不是简单调wx.login()。本项目采用「手机号快速验证」「后端签发 JWT」双保险// pages/user/login.vue 中的登录方法 login() { wx.login({ success: (res) { // 1. 获取 code 发送给后端 this.$http.post(/api/user/login, { code: res.code }) .then(response { const token response.data.token; // 2. 存入 storage非内存变量防止页面刷新丢失 wx.setStorageSync(auth_token, token); // 3. 设置全局请求拦截器utils/request.js this.$http.defaults.headers.common[Authorization] Bearer token; wx.switchTab({ url: /pages/index/index }); }); } }); }逻辑说明wx.setStorageSync是关键。很多同学用this.token xxx存在 data 里结果跳转页面后 token 消失。而wx.setStorageSync将 token 持久化到本地后续所有 API 请求通过request.js的拦截器自动注入Authorization头实现全站登录态保持。3.4 首页白屏排查90% 的问题出在request.js的 baseURL 配置如果小程序首页一片空白F12 查看 Console 报错Failed to load resource: net::ERR_CONNECTION_REFUSED大概率是前端请求地址错了// utils/request.js 中的关键配置 const BASE_URL http://localhost:8080/api; // 开发环境 // const BASE_URL https://your-domain.com/api; // 生产环境需 HTTPS // 创建 axios 实例 const http axios.create({ baseURL: BASE_URL, timeout: 10000, });注意BASE_URL必须与后端启动端口一致。若后端改了端口如8081此处必须同步修改。微信小程序不允许请求http://协议的非本地地址所以生产环境必须配 Nginx 反向代理或换 HTTPS 域名。4. 避坑指南五个让答辩老师眼前一亮的真实问题与解法这五个问题是我帮 A 同学调试时反复遇到的也是答辩高频提问点。每个都按「现象 → 原因 → 解决」写清楚照着做就能避开雷区。4.1 现象管理员审核日志后用户端日志状态不更新原因前端日志列表页未监听 WebSocket 或轮询仅靠页面 onLoad 时请求一次数据。解决在log-list.vue中添加定时轮询答辩时可说明“为降低服务器压力设为30秒间隔”onLoad() { this.loadLogs(); this.timer setInterval(() { this.loadLogs(); // 重新拉取日志列表 }, 30000); }, onUnload() { clearInterval(this.timer); // 页面卸载时清除定时器 }4.2 现象用户下单后库存没扣减导致超卖原因OrderService.java中库存校验与扣减非原子操作存在并发漏洞。解决改用数据库行锁 乐观锁组合// 在 updateGoodsStock 方法中 int updated goodsMapper.update(null, new UpdateWrapperGoodsInfo() .lambda() .eq(GoodsInfo::getId, goodsId) .gt(GoodsInfo::getStock, quantity) // 库存必须大于下单量 .setSql(stock stock - quantity) // 原子扣减 ); if (updated 0) { throw new BusinessException(库存不足请刷新重试); }4.3 现象微信开发者工具提示 “request:fail net::ERR_CERT_AUTHORITY_INVALID”原因后端启用了 HTTPS 重定向但本地证书未信任。解决在application-dev.yml中关闭 HTTPS 重定向server: port: 8080 # 注释掉以下两行若存在 # ssl: # key-store: classpath:keystore.p124.4 现象商家上传宠物图片后前端显示 “400 Bad Request”原因PetController.java中文件接收参数名与前端formData.append(file, file)不一致。解决统一为file并在 Controller 方法中明确标注PostMapping(/upload-pet-image) public ResultString uploadPetImage(RequestParam(file) MultipartFile file) { // ... 处理逻辑 }4.5 现象MySQL 导入petstore.sql报错 “Unknown collation: utf8mb4_0900_ai_ci”原因SQL 文件导出自 MySQL 8.0但你的 MySQL 是 5.7。解决用 VS Code 打开petstore.sql全局替换utf8mb4_0900_ai_ci→utf8mb4_unicode_ciCOLLATE utf8mb4_0900_ai_ci→COLLATE utf8mb4_unicode_ci然后重新执行导入。5. 答辩加分技巧用三个真实数据验证业务逻辑让老师觉得“这学生真干了活”答辩时光说“我实现了订单功能”太苍白。我建议你现场演示三个具体数据流每个都带 SQL 查询佐证老师立刻明白你不是调 API 而是真懂底层。5.1 验证“用户下单 → 库存扣减 → 订单生成”原子性操作步骤登录管理员账号进入goods-info表找到 ID1001 的狗粮记录当前stock100用用户账号下单 5 包提交成功立即执行 SQLSELECT stock FROM goods_info WHERE id 1001; SELECT * FROM pet_order WHERE user_id 123 ORDER BY create_time DESC LIMIT 1;预期结果stock95且订单表中order_statusWAIT_PAYtotal_amount299.00假设单价59.8。这证明你不仅写了接口还验证了事务生效。老师若追问“怎么保证不超卖”你就打开OrderService.java指着Transactional和 SQL 行锁说“我在数据库层面加了约束不是靠代码 if 判断。”5.2 验证“管理员审核日志 → 用户端实时可见”操作步骤用户 A 发布一条日志内容“今天带狗狗打疫苗”状态为PENDING管理员 B 登录进入日志审核页点击“通过”切回用户 A 页面下拉刷新日志状态变为APPROVED执行 SQLSELECT status FROM pet_log WHERE id 555; -- 假设日志ID为555预期结果status2代码中定义 2审核通过。这个细节说明你理解了状态流转不是所有日志都直接显示。答辩时可以补充“我预留了 status3驳回虽然本次未实现但字段已设计好扩展成本为零。”5.3 验证“商家服务预约 → 日历组件渲染”操作步骤商家账号进入service-schedule.vue选择日期 2024-06-15预约人数设为 3提交后查看service_schedule表SELECT date, booked_count, max_capacity FROM service_schedule WHERE service_id 2001 AND date 2024-06-15;预期结果booked_count3,max_capacity10默认容量。这个表结构是项目亮点。很多毕设只做“预约成功”而你做了容量管控。老师若问“怎么防黄牛刷单”你可以说“我在booked_count字段加了唯一索引配合 Redis 计数器不过本次为简化未接入 Redis。”从那以后我每次帮同学改毕设都会强制他们用这三个 SQL 验证点过一遍——不是为了应付答辩而是确保自己真的搞懂了每一行代码在干什么、数据在哪儿、状态怎么变。这种肌肉记忆比背一百遍“MVC 是什么”都有用。希望帮到你。本文还有配套的精品资源点击获取