尧图网站建设 
简介这份资源是面向高校计算机相关专业毕业设计场景的微信点餐小程序完整项目包基于微信小程序、SSM框架与MySQL数据库开发适合正在准备毕设或需要小程序Java后台实战案例的学生与开发者参考。压缩包共915个文件约16.55MB涵盖134个Java后端源码、102个Vue前端组件、114个JavaScript脚本、28个wxss与27个wxml小程序页面文件以及png、svg、jpg等界面素材另附sql数据库脚本、doc论文文档与bat启动脚本结构完整、层次清晰。资源包含源码、数据库、开题报告、毕业论文与视频演示功能覆盖管理员端的用户、菜品、预定订单、活动信息、用户评价与系统管理以及用户端的订购菜品、我的订单、收藏与评价等模块可帮助读者快速理解SSM与小程序的前后端协作方式对照论文梳理系统分析与数据库设计思路并借助演示视频完成环境搭建与功能验证。目前已有252人学习下载。1. 微信点餐小程序毕设从选题到答辩一套 SSM 后端怎么撑起来很多同学做微信点餐小程序毕业设计第一反应是打开微信开发者工具把页面和按钮先画出来结果做到“下单”这一步就卡住了——订单数据存哪购物车怎么同步后台管理员怎么改菜品库存这时候才发现前端只是壳真正决定这个毕设能不能跑通、能不能写进论文的是后面那套 SSM 后端和 MySQL 数据库。这个标题讲的就是一套典型的微信小程序 SSM MySQL 点餐系统覆盖源码、数据库脚本、开题报告、毕业论文和演示视频。它适合正在找“基于 Java 的毕业设计选题”的计算机、软件工程专业学生也适合想用一个小程序项目把 SSM 框架真正串一遍的开发者。下面我按实际落地顺序把环境、数据库、后端接口、小程序联调和论文材料一条线讲清楚。2. 环境与工程结构先把 SSM 后端和微信开发者工具跑起来2.1 为什么选 SSM 而不是 Spring Boot热搜里“ssm常用注解”“基于 java 的毕业设计选题”出现频率很高说明大部分高校的 Java Web 课程还是以 SSM 为主线。SSM 指 Spring SpringMVC MyBatis它的好处是分层清晰Controller 接请求Service 写业务Mapper 管数据库论文里画架构图、写模块设计都容易对应上。相比 Spring BootSSM 需要手动配web.xml、applicationContext.xml、spring-mvc.xml配置量大但正因为配置多答辩时老师问“IOC 容器怎么启动的”“事务在哪里配的”你有东西可讲。常见做法是JDK 1.8 Maven 3.6 Tomcat 8.5 MySQL 5.7 或 8.0这套组合在 Windows 10 上最稳网上“mysql 安装教程 8.0”一搜就有装完记得把characterSet设成utf8mb4否则微信昵称里的 emoji 存进去会变问号。2.2 工程目录与依赖配置拿到源码后先看目录结构。典型布局是src/main/java下分controller、service、mapper、entitysrc/main/resources下放mapper/*.xml和数据库配置src/main/webapp放前端页面和WEB-INF。pom.xml里核心依赖如下!-- pom.xml 核心依赖版本按你本地仓库已有版本调整 -- dependencies !-- Spring 核心IOC 和 AOP -- dependency groupIdorg.springframework/groupId artifactIdspring-context/artifactId version5.3.20/version /dependency !-- SpringMVC处理 HTTP 请求和 JSON 返回 -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.3.20/version /dependency !-- MyBatisSQL 映射 -- dependency groupIdorg.mybatis/groupId artifactIdmybatis/artifactId version3.5.9/version /dependency !-- MySQL 驱动8.0 用 com.mysql.cj.jdbc.Driver -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.28/version /dependency !-- 阿里 FastJSON小程序接口返回 JSON 常用 -- dependency groupIdcom.alibaba/groupId artifactIdfastjson/artifactId version1.2.83/version /dependency /dependencies这段配置里Spring 版本和 MyBatis 版本要匹配否则启动时报NoClassDefFoundError。MySQL 驱动 8.0 以上必须写com.mysql.cj.jdbc.DriverURL 后面加serverTimezoneAsia/Shanghai不然连接时区报错。参数上spring-context和spring-webmvc版本保持一致避免 Bean 加载冲突。配好后用 Maven 的clean package打 war 包丢进 Tomcat 的webapps目录启动看日志有没有Root WebApplicationContext initialized有就说明后端起来了。2.3 微信开发者工具导入与基础配置小程序端用微信开发者工具打开源码目录appid可以先用测试号。热搜里“微信开发者工具里的小程序怎么发给其他人试用”是个高频问题做法是在开发者工具点“上传”填版本号和备注然后到微信公众平台后台把该版本设为体验版生成体验二维码发给同学。注意project.config.json里的appid要换成你自己的否则上传会报 10002 错误。另外“微信小程序顶部导航栏高度”在不同机型不一样点餐页如果用了自定义导航栏建议用wx.getSystemInfoSync().statusBarHeight动态算别写死 44px否则 iPhone 和安卓会错位。3. 数据库设计点餐业务表怎么建、MySQL 怎么配3.1 核心表结构与字段说明点餐系统的数据库一般围绕“用户—菜品—订单”三块展开。下面给出最小可用表结构字段类型和索引都按实际查询场景定-- 用户表存微信 openid 和昵称 CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, openid VARCHAR(64) NOT NULL COMMENT 微信唯一标识, nickname VARCHAR(64) DEFAULT NULL, avatar VARCHAR(255) DEFAULT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 菜品表分类、价格、库存、图片 CREATE TABLE dish ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(64) NOT NULL, price DECIMAL(10,2) NOT NULL DEFAULT 0.00, category_id INT NOT NULL, stock INT NOT NULL DEFAULT 0, image VARCHAR(255) DEFAULT NULL, status TINYINT DEFAULT 1 COMMENT 1上架 0下架 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 订单表订单号、用户、总价、状态 CREATE TABLE orders ( id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(32) NOT NULL, user_id INT NOT NULL, total_price DECIMAL(10,2) NOT NULL, status TINYINT DEFAULT 0 COMMENT 0待支付 1已支付 2已完成, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_order_no (order_no), KEY idx_user (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 订单明细表一个订单对应多条菜品 CREATE TABLE order_item ( id INT PRIMARY KEY AUTO_INCREMENT, order_id INT NOT NULL, dish_id INT NOT NULL, count INT NOT NULL, price DECIMAL(10,2) NOT NULL, KEY idx_order (order_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;user表的openid加唯一索引防止同一用户重复插入。dish的price用DECIMAL不用FLOAT避免金额计算出现 0.30000000000000004 这种玄学问题。orders和order_item是一对多查订单详情时用order_id关联idx_order索引能明显加快列表加载。热搜里“mysql 排序”在点餐场景很常用比如菜品按销量倒序SELECT * FROM dish ORDER BY sales DESC如果数据量大sales字段也要加索引。3.2 MySQL 安装配置与常见连接错误Windows 10 上装 MySQL 8.0下载 zip 包解压后在根目录建my.ini写入basedir和datadir然后mysqld --initialize --console初始化记下临时密码。安装成服务用mysqld --install启动net start mysql。热搜里“mysql ssl 连接错误”多半是因为客户端没配 SSL 而服务端强制要求解决办法是在 JDBC URL 里加useSSLfalseallowPublicKeyRetrievaltrue。如果报Public Key Retrieval is not allowed就是缺了后面那个参数。另外“docker 安装 mysql 失败”常见原因是端口 3306 被占用换-p 3307:3306映射即可。数据库字符集统一utf8mb4排序规则utf8mb4_general_ci这样微信昵称和菜品描述里的特殊字符都能正常存。3.3 后端 Mapper 与 Service 的对应写法MyBatis 的 Mapper 接口和 XML 要一一对应。比如订单查询// OrderMapper.java public interface OrderMapper { // 根据用户 id 查订单列表按时间倒序 ListOrders selectByUserId(Param(userId) Integer userId); }!-- OrderMapper.xml -- select idselectByUserId resultTypecom.example.entity.Orders SELECT * FROM orders WHERE user_id #{userId} ORDER BY create_time DESC /selectParam注解用于多参数传值这里只有一个参数其实可以省略但写上更清晰。resultType要写全限定类名或者在mybatis-config.xml里配typeAliasesPackage简化。Service 层加Transactional保证下单时插订单和扣库存要么都成功要么都回滚这是答辩常问的事务点。4. 小程序端与 SSM 接口联调请求封装、列表加载与下单流程4.1 封装 wx.request 与统一接口前缀小程序不能直接连数据库所有数据都通过wx.request调后端接口。建议在utils/request.js里统一封装// utils/request.js const BASE_URL http://localhost:8080/order; // 后端 war 包名 function request(url, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { content-type: application/json }, success: (res) { // 后端统一返回 { code: 200, data: ..., msg: ... } if (res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res.data); } }, fail: (err) { // 真机调试时 localhost 要换成电脑局域网 IP wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request };BASE_URL在开发者工具里可以用localhost但真机预览必须换成电脑的局域网 IP比如http://192.168.1.100:8080/order且手机和电脑在同一 WiFi 下。header里content-type用application/json后端 Controller 方法加RequestBody才能自动映射。如果后端返回的是text/html检查ResponseBody有没有加或者 SpringMVC 有没有配mvc:annotation-driven/。4.2 菜品列表分页与加载更多热搜里“微信小程序页面列表加载更多”是点餐页必备。做法是维护page和pageSize下拉到底时page再请求// pages/menu/menu.js const { request } require(../../utils/request.js); Page({ data: { list: [], page: 1, pageSize: 10, hasMore: true }, onLoad() { this.loadDish(); }, loadDish() { if (!this.data.hasMore) return; request(/dish/list?page this.data.page size this.data.pageSize) .then(res { // 拼接新数据避免覆盖 this.setData({ list: this.data.list.concat(res.records), hasMore: res.records.length this.data.pageSize }); }); }, onReachBottom() { // 触底加载下一页 this.setData({ page: this.data.page 1 }); this.loadDish(); } });后端分页用 PageHelper 插件最省事PageHelper.startPage(page, size)放在查询前一行返回的PageInfo里就有records和total。参数上page从 1 开始size别超过 50否则小程序渲染会卡。hasMore判断逻辑是“本次返回条数等于 pageSize 就还有下一页”如果后端返回总数用page * size total更准。4.3 下单接口与购物车数据传递下单是核心链路小程序把购物车数组转成 JSON 传给后端后端开事务插订单、插明细、扣库存。接口定义如下// OrderController.java RestController RequestMapping(/order) public class OrderController { Autowired private OrderService orderService; PostMapping(/create) public Result create(RequestBody OrderDTO orderDTO) { // orderDTO 包含 userId 和 items 列表 String orderNo orderService.createOrder(orderDTO); return Result.success(orderNo); } }OrderDTO里用ListOrderItemDTO items接收菜品明细。Service 实现里先insert订单拿到自增 id再循环insert明细同时update dish set stock stock - #{count} where id #{dishId} and stock #{count}用stock count做乐观锁防止超卖。如果更新影响行数为 0抛异常回滚。小程序端下单成功后清空购物车并跳转订单详情页wx.navigateTo带orderNo参数即可。5. 避坑与排查毕设从跑通到答辩的 5 个血泪经验5.1 跨域与 404接口调不通先看这三处现象小程序请求后端返回 404 或跨域报错。原因通常是后端 war 包名和BASE_URL不一致或者 Tomcat 没启动。解决先浏览器直接访问http://localhost:8080/order/dish/list能出 JSON 说明后端正常再看小程序BASE_URL是否多了或少了一层路径。跨域在开发者工具里可以勾选“不校验合法域名”真机则必须配 HTTPS 域名毕设阶段用体验版加“不校验”选项也能演示。5.2 中文乱码数据库、连接、响应三层都要查现象菜品名存进去是问号或者接口返回乱码。原因可能是数据库字符集不是utf8mb4或者 JDBC URL 没加characterEncodingutf8或者 Controller 返回时produces没指定。解决建库时CREATE DATABASE order_db DEFAULT CHARSET utf8mb4JDBC URL 加characterEncodingutf8useUnicodetrueSpringMVC 配StringHttpMessageConverter默认 UTF-8。5.3 订单重复提交前端防抖加后端唯一约束现象用户快速点两次“提交订单”生成两条相同订单。原因前端按钮没禁用后端没做幂等。解决前端点完立即this.setData({ submitting: true })禁用按钮后端order_no用时间戳加随机数并加唯一索引重复插入会抛异常捕获后返回“请勿重复提交”。5.4 图片上传路径本地存储与真机访问的坑现象开发者工具里菜品图片能显示真机不显示。原因图片存的是localhost路径或相对路径。解决后端把图片存到 Tomcat 的webapps/upload下数据库存/upload/xxx.jpg小程序端用完整域名拼接。毕设演示用本地 IP 即可但论文里要写清楚生产环境应换对象存储。5.5 论文查重与代码注释开题报告和毕业论文的对应关系现象论文写完了代码却对不上答辩被问住。原因开题报告里的功能模块和实际实现脱节。解决开题报告列出的“用户管理、菜品管理、订单管理、购物车”四个模块在论文里每章对应一个代码里每个 Controller 对应一个模块截图从开发者工具和浏览器后台各取几张。热搜里“毕业设计从 github 抄来”风险很高建议以参考为主自己重写 Service 和 Mapper注释写清楚业务含义查重和答辩都稳。6. 进阶技巧用接口文档和演示视频把毕设收尾最后一章说两个具体技巧。第一用 Postman 或 Apifox 把后端接口整理成文档导出 HTML 放进论文附录。每个接口写清 URL、方法、参数、返回示例答辩时老师翻附录就能看到你确实调通了。第二演示视频别只录小程序页面要录“小程序下单 → 数据库订单表新增记录 → 后台管理页看到订单”这条完整链路用 OBS 或手机录屏都行时长控制在 3 到 5 分钟。视频里口述清楚“这里调用了/order/create接口后端用事务插入了 orders 和 order_item 两张表”比单纯展示界面有说服力。我自己做这类项目时习惯先把数据库脚本和接口文档定死再写小程序页面这样返工最少。希望帮到你。本文还有配套的精品资源点击获取 微信点餐小程序毕设：SSM后端与MySQL数据库实战指南
简介这份资源是面向高校计算机相关专业毕业设计场景的微信点餐小程序完整项目包基于微信小程序、SSM框架与MySQL数据库开发适合正在准备毕设或需要小程序Java后台实战案例的学生与开发者参考。压缩包共915个文件约16.55MB涵盖134个Java后端源码、102个Vue前端组件、114个JavaScript脚本、28个wxss与27个wxml小程序页面文件以及png、svg、jpg等界面素材另附sql数据库脚本、doc论文文档与bat启动脚本结构完整、层次清晰。资源包含源码、数据库、开题报告、毕业论文与视频演示功能覆盖管理员端的用户、菜品、预定订单、活动信息、用户评价与系统管理以及用户端的订购菜品、我的订单、收藏与评价等模块可帮助读者快速理解SSM与小程序的前后端协作方式对照论文梳理系统分析与数据库设计思路并借助演示视频完成环境搭建与功能验证。目前已有252人学习下载。1. 微信点餐小程序毕设从选题到答辩一套 SSM 后端怎么撑起来很多同学做微信点餐小程序毕业设计第一反应是打开微信开发者工具把页面和按钮先画出来结果做到“下单”这一步就卡住了——订单数据存哪购物车怎么同步后台管理员怎么改菜品库存这时候才发现前端只是壳真正决定这个毕设能不能跑通、能不能写进论文的是后面那套 SSM 后端和 MySQL 数据库。这个标题讲的就是一套典型的微信小程序 SSM MySQL 点餐系统覆盖源码、数据库脚本、开题报告、毕业论文和演示视频。它适合正在找“基于 Java 的毕业设计选题”的计算机、软件工程专业学生也适合想用一个小程序项目把 SSM 框架真正串一遍的开发者。下面我按实际落地顺序把环境、数据库、后端接口、小程序联调和论文材料一条线讲清楚。2. 环境与工程结构先把 SSM 后端和微信开发者工具跑起来2.1 为什么选 SSM 而不是 Spring Boot热搜里“ssm常用注解”“基于 java 的毕业设计选题”出现频率很高说明大部分高校的 Java Web 课程还是以 SSM 为主线。SSM 指 Spring SpringMVC MyBatis它的好处是分层清晰Controller 接请求Service 写业务Mapper 管数据库论文里画架构图、写模块设计都容易对应上。相比 Spring BootSSM 需要手动配web.xml、applicationContext.xml、spring-mvc.xml配置量大但正因为配置多答辩时老师问“IOC 容器怎么启动的”“事务在哪里配的”你有东西可讲。常见做法是JDK 1.8 Maven 3.6 Tomcat 8.5 MySQL 5.7 或 8.0这套组合在 Windows 10 上最稳网上“mysql 安装教程 8.0”一搜就有装完记得把characterSet设成utf8mb4否则微信昵称里的 emoji 存进去会变问号。2.2 工程目录与依赖配置拿到源码后先看目录结构。典型布局是src/main/java下分controller、service、mapper、entitysrc/main/resources下放mapper/*.xml和数据库配置src/main/webapp放前端页面和WEB-INF。pom.xml里核心依赖如下!-- pom.xml 核心依赖版本按你本地仓库已有版本调整 -- dependencies !-- Spring 核心IOC 和 AOP -- dependency groupIdorg.springframework/groupId artifactIdspring-context/artifactId version5.3.20/version /dependency !-- SpringMVC处理 HTTP 请求和 JSON 返回 -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.3.20/version /dependency !-- MyBatisSQL 映射 -- dependency groupIdorg.mybatis/groupId artifactIdmybatis/artifactId version3.5.9/version /dependency !-- MySQL 驱动8.0 用 com.mysql.cj.jdbc.Driver -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.28/version /dependency !-- 阿里 FastJSON小程序接口返回 JSON 常用 -- dependency groupIdcom.alibaba/groupId artifactIdfastjson/artifactId version1.2.83/version /dependency /dependencies这段配置里Spring 版本和 MyBatis 版本要匹配否则启动时报NoClassDefFoundError。MySQL 驱动 8.0 以上必须写com.mysql.cj.jdbc.DriverURL 后面加serverTimezoneAsia/Shanghai不然连接时区报错。参数上spring-context和spring-webmvc版本保持一致避免 Bean 加载冲突。配好后用 Maven 的clean package打 war 包丢进 Tomcat 的webapps目录启动看日志有没有Root WebApplicationContext initialized有就说明后端起来了。2.3 微信开发者工具导入与基础配置小程序端用微信开发者工具打开源码目录appid可以先用测试号。热搜里“微信开发者工具里的小程序怎么发给其他人试用”是个高频问题做法是在开发者工具点“上传”填版本号和备注然后到微信公众平台后台把该版本设为体验版生成体验二维码发给同学。注意project.config.json里的appid要换成你自己的否则上传会报 10002 错误。另外“微信小程序顶部导航栏高度”在不同机型不一样点餐页如果用了自定义导航栏建议用wx.getSystemInfoSync().statusBarHeight动态算别写死 44px否则 iPhone 和安卓会错位。3. 数据库设计点餐业务表怎么建、MySQL 怎么配3.1 核心表结构与字段说明点餐系统的数据库一般围绕“用户—菜品—订单”三块展开。下面给出最小可用表结构字段类型和索引都按实际查询场景定-- 用户表存微信 openid 和昵称 CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, openid VARCHAR(64) NOT NULL COMMENT 微信唯一标识, nickname VARCHAR(64) DEFAULT NULL, avatar VARCHAR(255) DEFAULT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 菜品表分类、价格、库存、图片 CREATE TABLE dish ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(64) NOT NULL, price DECIMAL(10,2) NOT NULL DEFAULT 0.00, category_id INT NOT NULL, stock INT NOT NULL DEFAULT 0, image VARCHAR(255) DEFAULT NULL, status TINYINT DEFAULT 1 COMMENT 1上架 0下架 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 订单表订单号、用户、总价、状态 CREATE TABLE orders ( id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(32) NOT NULL, user_id INT NOT NULL, total_price DECIMAL(10,2) NOT NULL, status TINYINT DEFAULT 0 COMMENT 0待支付 1已支付 2已完成, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_order_no (order_no), KEY idx_user (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 订单明细表一个订单对应多条菜品 CREATE TABLE order_item ( id INT PRIMARY KEY AUTO_INCREMENT, order_id INT NOT NULL, dish_id INT NOT NULL, count INT NOT NULL, price DECIMAL(10,2) NOT NULL, KEY idx_order (order_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;user表的openid加唯一索引防止同一用户重复插入。dish的price用DECIMAL不用FLOAT避免金额计算出现 0.30000000000000004 这种玄学问题。orders和order_item是一对多查订单详情时用order_id关联idx_order索引能明显加快列表加载。热搜里“mysql 排序”在点餐场景很常用比如菜品按销量倒序SELECT * FROM dish ORDER BY sales DESC如果数据量大sales字段也要加索引。3.2 MySQL 安装配置与常见连接错误Windows 10 上装 MySQL 8.0下载 zip 包解压后在根目录建my.ini写入basedir和datadir然后mysqld --initialize --console初始化记下临时密码。安装成服务用mysqld --install启动net start mysql。热搜里“mysql ssl 连接错误”多半是因为客户端没配 SSL 而服务端强制要求解决办法是在 JDBC URL 里加useSSLfalseallowPublicKeyRetrievaltrue。如果报Public Key Retrieval is not allowed就是缺了后面那个参数。另外“docker 安装 mysql 失败”常见原因是端口 3306 被占用换-p 3307:3306映射即可。数据库字符集统一utf8mb4排序规则utf8mb4_general_ci这样微信昵称和菜品描述里的特殊字符都能正常存。3.3 后端 Mapper 与 Service 的对应写法MyBatis 的 Mapper 接口和 XML 要一一对应。比如订单查询// OrderMapper.java public interface OrderMapper { // 根据用户 id 查订单列表按时间倒序 ListOrders selectByUserId(Param(userId) Integer userId); }!-- OrderMapper.xml -- select idselectByUserId resultTypecom.example.entity.Orders SELECT * FROM orders WHERE user_id #{userId} ORDER BY create_time DESC /selectParam注解用于多参数传值这里只有一个参数其实可以省略但写上更清晰。resultType要写全限定类名或者在mybatis-config.xml里配typeAliasesPackage简化。Service 层加Transactional保证下单时插订单和扣库存要么都成功要么都回滚这是答辩常问的事务点。4. 小程序端与 SSM 接口联调请求封装、列表加载与下单流程4.1 封装 wx.request 与统一接口前缀小程序不能直接连数据库所有数据都通过wx.request调后端接口。建议在utils/request.js里统一封装// utils/request.js const BASE_URL http://localhost:8080/order; // 后端 war 包名 function request(url, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { content-type: application/json }, success: (res) { // 后端统一返回 { code: 200, data: ..., msg: ... } if (res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res.data); } }, fail: (err) { // 真机调试时 localhost 要换成电脑局域网 IP wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request };BASE_URL在开发者工具里可以用localhost但真机预览必须换成电脑的局域网 IP比如http://192.168.1.100:8080/order且手机和电脑在同一 WiFi 下。header里content-type用application/json后端 Controller 方法加RequestBody才能自动映射。如果后端返回的是text/html检查ResponseBody有没有加或者 SpringMVC 有没有配mvc:annotation-driven/。4.2 菜品列表分页与加载更多热搜里“微信小程序页面列表加载更多”是点餐页必备。做法是维护page和pageSize下拉到底时page再请求// pages/menu/menu.js const { request } require(../../utils/request.js); Page({ data: { list: [], page: 1, pageSize: 10, hasMore: true }, onLoad() { this.loadDish(); }, loadDish() { if (!this.data.hasMore) return; request(/dish/list?page this.data.page size this.data.pageSize) .then(res { // 拼接新数据避免覆盖 this.setData({ list: this.data.list.concat(res.records), hasMore: res.records.length this.data.pageSize }); }); }, onReachBottom() { // 触底加载下一页 this.setData({ page: this.data.page 1 }); this.loadDish(); } });后端分页用 PageHelper 插件最省事PageHelper.startPage(page, size)放在查询前一行返回的PageInfo里就有records和total。参数上page从 1 开始size别超过 50否则小程序渲染会卡。hasMore判断逻辑是“本次返回条数等于 pageSize 就还有下一页”如果后端返回总数用page * size total更准。4.3 下单接口与购物车数据传递下单是核心链路小程序把购物车数组转成 JSON 传给后端后端开事务插订单、插明细、扣库存。接口定义如下// OrderController.java RestController RequestMapping(/order) public class OrderController { Autowired private OrderService orderService; PostMapping(/create) public Result create(RequestBody OrderDTO orderDTO) { // orderDTO 包含 userId 和 items 列表 String orderNo orderService.createOrder(orderDTO); return Result.success(orderNo); } }OrderDTO里用ListOrderItemDTO items接收菜品明细。Service 实现里先insert订单拿到自增 id再循环insert明细同时update dish set stock stock - #{count} where id #{dishId} and stock #{count}用stock count做乐观锁防止超卖。如果更新影响行数为 0抛异常回滚。小程序端下单成功后清空购物车并跳转订单详情页wx.navigateTo带orderNo参数即可。5. 避坑与排查毕设从跑通到答辩的 5 个血泪经验5.1 跨域与 404接口调不通先看这三处现象小程序请求后端返回 404 或跨域报错。原因通常是后端 war 包名和BASE_URL不一致或者 Tomcat 没启动。解决先浏览器直接访问http://localhost:8080/order/dish/list能出 JSON 说明后端正常再看小程序BASE_URL是否多了或少了一层路径。跨域在开发者工具里可以勾选“不校验合法域名”真机则必须配 HTTPS 域名毕设阶段用体验版加“不校验”选项也能演示。5.2 中文乱码数据库、连接、响应三层都要查现象菜品名存进去是问号或者接口返回乱码。原因可能是数据库字符集不是utf8mb4或者 JDBC URL 没加characterEncodingutf8或者 Controller 返回时produces没指定。解决建库时CREATE DATABASE order_db DEFAULT CHARSET utf8mb4JDBC URL 加characterEncodingutf8useUnicodetrueSpringMVC 配StringHttpMessageConverter默认 UTF-8。5.3 订单重复提交前端防抖加后端唯一约束现象用户快速点两次“提交订单”生成两条相同订单。原因前端按钮没禁用后端没做幂等。解决前端点完立即this.setData({ submitting: true })禁用按钮后端order_no用时间戳加随机数并加唯一索引重复插入会抛异常捕获后返回“请勿重复提交”。5.4 图片上传路径本地存储与真机访问的坑现象开发者工具里菜品图片能显示真机不显示。原因图片存的是localhost路径或相对路径。解决后端把图片存到 Tomcat 的webapps/upload下数据库存/upload/xxx.jpg小程序端用完整域名拼接。毕设演示用本地 IP 即可但论文里要写清楚生产环境应换对象存储。5.5 论文查重与代码注释开题报告和毕业论文的对应关系现象论文写完了代码却对不上答辩被问住。原因开题报告里的功能模块和实际实现脱节。解决开题报告列出的“用户管理、菜品管理、订单管理、购物车”四个模块在论文里每章对应一个代码里每个 Controller 对应一个模块截图从开发者工具和浏览器后台各取几张。热搜里“毕业设计从 github 抄来”风险很高建议以参考为主自己重写 Service 和 Mapper注释写清楚业务含义查重和答辩都稳。6. 进阶技巧用接口文档和演示视频把毕设收尾最后一章说两个具体技巧。第一用 Postman 或 Apifox 把后端接口整理成文档导出 HTML 放进论文附录。每个接口写清 URL、方法、参数、返回示例答辩时老师翻附录就能看到你确实调通了。第二演示视频别只录小程序页面要录“小程序下单 → 数据库订单表新增记录 → 后台管理页看到订单”这条完整链路用 OBS 或手机录屏都行时长控制在 3 到 5 分钟。视频里口述清楚“这里调用了/order/create接口后端用事务插入了 orders 和 order_item 两张表”比单纯展示界面有说服力。我自己做这类项目时习惯先把数据库脚本和接口文档定死再写小程序页面这样返工最少。希望帮到你。本文还有配套的精品资源点击获取