尧图网站建设 
简介本资源是一套面向计算机专业本科生的毕业设计实战项目基于微信小程序前端Vue.js技术栈与SSMSpringSpringMVCMyBatisJava后端架构结合MySQL数据库构建的完整购物商城系统适用于课程设计、毕设选题及全栈开发能力训练。压缩包共791个文件35.98MB涵盖140个Vue组件文件实现小程序页面逻辑与交互、114个Java类含Controller、Service、Mapper层完整业务代码、125张PNG/SVG图标资源、66个JS工具脚本、24个XML配置文件、20个WXML/WXSS样式文件以及SQL建表脚本、开题报告、论文讲解视频与配套实操教程。已有175人学习下载内容组织清晰从环境搭建含install/run/build三类bat脚本到功能模块商品管理、订单处理、用户与商家双角色权限体系均提供可运行源码与结构化文档特别适合零基础入门小程序Java全栈开发的学习者快速上手并理解电商系统核心业务流程。1. 毕业设计选题踩准了微信小程序 SSM MySQL 购物商城不是“拼凑三件套”而是能跑通、能答辩、能演示的最小闭环系统你手头那份标着“含完整源代码、数据库脚本、开题报告、论文视频、视频教程”的毕业设计压缩包本质不是一堆文件堆砌而是一套面向高校毕设场景深度适配的工程化交付物——它绕开了企业级微服务的复杂度但又拒绝“Hello World”式空壳它用微信小程序承载用户交互真机扫码即用SSMSpring SpringMVC MyBatis稳住后端逻辑兼容主流IDEA/EclipseTomcat部署MySQL落地数据持久5.7/8.0均可建表语句已预置外键与索引。这不是教科书里的理论模型而是你能在答辩现场打开手机扫二维码、登录账号、加购物车、提交订单、查订单状态——全程无报错、不卡顿、有日志、可截图的真实可验证系统。适合计算机/软件工程专业大四学生时间紧34周集中开发、资源少没服务器、没域名、没运维经验、要求高要查重、要录屏、要答辩PPT里放流程图和界面截图。它不教你分布式事务或高并发秒杀但会手把手带你把“用户登录态怎么存”“商品列表分页怎么写”“订单状态怎么原子更新”这些毕设高频卡点用最朴素、最易复现的方式落进代码里。2. 从零启动用微信开发者工具跑通小程序前端SSM项目在本地Tomcat部署MySQL建库建表一步到位2.1 微信小程序用开发者工具加载源码解决“真机调试白屏”和“request:fail”两大拦路虎拿到2048-小程序.zip后别急着解压到桌面。先确认你已安装微信开发者工具稳定版非Beta并用本人微信扫码登录。解压后打开项目根目录含app.js、project.config.json、sitemap.json的文件夹工具会自动识别为小程序项目。此时常见报错是真机扫码后首页白屏 → 检查project.config.json中appid是否为你自己申请的小程序 AppID不是模板里的wx...占位符控制台报request:fail url not in domain list→ 进入「详情」→「本地设置」→ 勾选「不校验合法域名、TLS版本以及HTTPS证书」仅开发阶段答辩演示前务必关掉登录后wx.getStorageSync(token)返回undefined→ 查看utils/api.js中login()方法是否调用了后端/user/login接口且返回 JSON 格式为{code: 200, data: {token: xxx}}。提示小程序所有网络请求必须走 HTTPS但毕设本地调试时后端用http://localhost:8080即可。开发者工具的「安全域名」配置只影响真机不影响模拟器。2.2 SSM后端用IDEA导入Maven项目关键依赖版本锁定Spring 5.2.22.RELEASE MyBatis 3.4.6 JDK 8解压后端源码通常为shopping-server或ssm-shop文件夹用 IDEA 打开选择 Maven 导入。重点检查pom.xml中三处版本锁死properties spring.version5.2.22.RELEASE/spring.version mybatis.version3.4.6/mybatis.version jdk.version1.8/jdk.version /properties为什么不是 Spring Boot因为毕设评审老师更熟悉传统 SSM 的三层结构Controller/Service/Dao且web.xmlspring-mvc.xml配置清晰可截图。若你遇到ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet说明spring-webmvc依赖缺失补上dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version${spring.version}/version /dependency启动前在 IDEA 右上角配置 Tomcat ServerDeployment 里添加Artifact类型为exploded确保Application context为/或/shop与小程序utils/api.js中BASE_URL一致。2.3 MySQL执行shopping.sql脚本建库重点处理字符集、外键约束与测试数据填充用 Navicat 或命令行连接本地 MySQL推荐 5.7.44 或 8.0.33避坑 8.0.34 的默认密码策略变更mysql -u root -p # 输入密码后执行 CREATE DATABASE IF NOT EXISTS shopping DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE shopping; SOURCE /path/to/shopping.sql; # 注意路径用正斜杠或双反斜杠shopping.sql必含三类语句CREATE TABLE user (...) ENGINEInnoDB DEFAULT CHARSETutf8mb4;→ 强制指定utf8mb4支持微信昵称中的 emojiALTER TABLE order_item ADD CONSTRAINT fk_order_id FOREIGN KEY (order_id) REFERENCES orders(id);→ 外键保证订单与子项一致性INSERT INTO product (id,name,price,stock) VALUES (1,iPhone 15,5999.00,100);→ 至少 5 条测试商品避免列表页空数据报错。注意若执行报错ERROR 1822 (HY000): Failed to add the foreign key constraint说明被引用表如orders未建或字段类型不匹配orders.id是BIGINT而order_item.order_id是INT需统一为BIGINT。3. 关键链路打通登录态管理、商品列表分页、下单事务三段核心代码逐行拆解3.1 小程序端login.js与app.js联动实现 token 持久化解决“切后台再回来要重新登录”问题小程序没有 Cookie登录态靠wx.setStorageSync(token, res.data.token)存本地。但仅存不够——app.js的onLaunch必须做两件事// app.js App({ onLaunch: function () { const token wx.getStorageSync(token); if (token) { // 检查 token 是否过期简单方案存登录时间戳30分钟内有效 const loginTime wx.getStorageSync(loginTime); if (Date.now() - loginTime 30 * 60 * 1000) { this.globalData.token token; } else { wx.removeStorageSync(token); wx.removeStorageSync(loginTime); } } }, globalData: { token: null, userInfo: null } })然后在每个需要鉴权的页面如pages/order/list.jsonLoad里加onLoad() { if (!getApp().globalData.token) { wx.navigateTo({ url: /pages/login/login }); // 未登录跳转 return; } this.loadOrderList(); // 加载订单 }逻辑说明onLaunch是小程序冷启动入口getApp().globalData.token是全局变量比反复读wx.getStorageSync更高效loginTime时间戳存的是毫秒值Date.now()返回当前毫秒差值小于 180000030分钟即认为有效。3.2 SSM后端ProductController.java实现分页查询MyBatis XML 中用if动态拼接条件小程序商品列表页常带搜索框按名称模糊查和分类筛选按 category_id 精确查后端 Controller 必须支持多条件组合// ProductController.java RequestMapping(/product/list) ResponseBody public Result list(RequestParam(required false) String keyword, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { PageHelper.startPage(pageNum, pageSize); ListProduct products productService.listByKeywordAndCategory(keyword, null); PageInfoProduct pageInfo new PageInfo(products); return Result.success(pageInfo); }对应 MyBatis Mapper XML!-- ProductMapper.xml -- select idlistByKeywordAndCategory resultTypeProduct SELECT * FROM product WHERE 11 if testkeyword ! null and keyword ! AND name LIKE CONCAT(%, #{keyword}, %) /if if testcategoryId ! null AND category_id #{categoryId} /if ORDER BY create_time DESC /select参数说明RequestParam(required false)让keyword可为空PageHelper.startPage()是物理分页插件避免LIMIT写死CONCAT(%, #{keyword}, %)防止 SQL 注入用#{}不是${}ORDER BY create_time DESC保证新品在前。3.3 下单事务OrderService.java用Transactional保证“减库存写订单写订单项”原子性下单是最易翻车环节。常见错误是先查库存SELECT stock FROM product WHERE id1再UPDATE product SET stockstock-1 WHERE id1中间被并发请求插队导致超卖。正确做法是一条 SQL 完成扣减与校验// OrderService.java Transactional(rollbackFor Exception.class) public Result createOrder(Long userId, ListOrderItem items) { // 1. 扣减库存带库存校验 for (OrderItem item : items) { int affected productMapper.reduceStock(item.getProductId(), item.getQuantity()); if (affected 0) { throw new RuntimeException(商品ID item.getProductId() 库存不足); } } // 2. 写订单主表 Order order new Order(); order.setUserId(userId); order.setTotalPrice(calculateTotal(items)); orderMapper.insert(order); // 3. 写订单子项 for (OrderItem item : items) { item.setOrderId(order.getId()); orderItemMapper.insert(item); } return Result.success(order.getId()); }对应 Mapper XML!-- ProductMapper.xml -- update idreduceStock UPDATE product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity} /update关键点AND stock #{quantity}是原子校验affected 0表示没更新成功库存不足或商品不存在Transactional保证三步要么全成功要么全回滚rollbackFor Exception.class确保运行时异常也触发回滚。4. 避坑指南毕设高频翻车点、报错现象、根本原因与一招解决法4.1 小程序真机扫码显示“系统错误”控制台无日志 → 后端跨域未放开且Access-Control-Allow-Origin写死了localhost现象开发者工具里一切正常真机扫码后页面空白控制台无任何 request 日志Network 面板显示Failed to load resource: net::ERR_CONNECTION_REFUSED原因后端WebConfig.java中跨域配置写了registry.addMapping(/**).allowedOrigins(http://localhost:8080)而真机访问时 Origin 是https://servicewechat.com/xxx/xxx/page-frame.html不匹配解决改为允许所有小程序来源Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) // 毕设阶段直接放开答辩后可细化 .allowCredentials(true) .maxAge(3600); } }注意allowedOrigins(*)在 Spring 5.3 需配合allowCredentials(true)使用否则报错生产环境必须替换为具体域名。4.2 小程序wx.request报400 Bad Request但后端 Controller 方法参数接收为空 → 前端传参格式与后端RequestParam不匹配现象小程序调用wx.request({url: /user/login, method: POST, data: {username:a, password:b}})后端RequestParam String username始终为null原因wx.request默认Content-Type是application/json而RequestParam只解析application/x-www-form-urlencoded或 URL Query解决二选一✅ 方案一推荐后端改用RequestBody UserLoginDTO dto前端保持 JSON 传参✅ 方案二前端显式声明header: {content-type: application/x-www-form-urlencoded}并用wx.utils.param()序列化const data { username: a, password: b }; wx.request({ url: /user/login, method: POST, header: { content-type: application/x-www-form-urlencoded }, data: wx.utils.param(data), // 生成 usernameapasswordb success: res console.log(res) });4.3 MySQL 执行shopping.sql报错ERROR 1067 (42000): Invalid default value for create_time→ MySQL 5.7 严格模式限制0000-00-00日期现象CREATE TABLE user (...) create_time DATETIME DEFAULT 0000-00-00 00:00:00执行失败原因MySQL 5.7 默认开启STRICT_TRANS_TABLES禁止零日期解决临时关闭严格模式毕设够用SET sql_mode(SELECT REPLACE(sql_mode,STRICT_TRANS_TABLES,)); -- 然后执行 shopping.sql -- 永久生效需修改 my.cnfsql_mode NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION血泪经验别硬改 SQL 里的DEFAULT 0000-00-00为CURRENT_TIMESTAMP因为 MyBatis 插入时若字段为nullMySQL 会忽略默认值导致create_time为NULL。4.4 IDEA 启动 Tomcat 报java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener→ Maven 依赖未正确导入或 Tomcat 部署路径错误现象控制台刷屏Caused by: java.lang.ClassNotFoundException: ...浏览器访问http://localhost:8080显示 404原因pom.xml中spring-web依赖 scope 是test或 IDEA 的 Artifact 打包未包含lib目录解决检查pom.xmlscope必须是compile默认值删掉该标签即可IDEA 中File → Project Structure → Artifacts确认Output Layout下Available Elements里WEB-INF/lib已展开且所有 jar 包已拖入清理Build → Clean Project再Build → Rebuild Project最后重启 Tomcat。4.5 小程序支付回调notify_url无法触发日志显示Connection refused→ 本地开发环境无法接收微信服务器回调必须用 ngrok 或 natapp现象调起微信支付成功但后端PayController.java的PostMapping(/pay/notify)方法从未执行原因微信服务器只能回调公网 IP端口localhost:8080对它不可达解决✅ 毕设演示绕过支付在OrderService.createOrder()里直接将订单状态设为PAID跳过调起支付步骤✅ 真机演示需公网回调用 natapp 免费隧道注册后natapp -authtokenxxx -subdomainyourname将http://localhost:8080映射为https://yourname.natapp1.cc填入微信商户平台提示natapp 免费版每小时断连一次答辩前 10 分钟启动即可避免长时间等待。5. 论文与答辩开题报告怎么写才不被导师打回视频教程怎么录才体现工作量源码怎么整理才让评阅老师一眼看懂5.1 开题报告聚焦“三个为什么”用技术选型对比表代替空泛描述毕设开题最怕写成“本系统采用微信小程序因为微信用户多”——这不算理由。要写成为什么选微信小程序而非 H5用户触达无需下载扫码即用符合校园场景食堂订餐、二手书交易能力支撑wx.login()提供安全 openidwx.chooseAddress()直接获取收货地址省去自建地址库成本控制无域名备案、无 HTTPS 证书费用本地调试即可完成 90% 功能。为什么选 SSM 而非 Spring Boot教学对齐《Java Web 开发》课程讲授 ServletSpringMVCSSM 结构与教材完全一致部署透明web.xml配置清晰可截图便于答辩时讲解“请求如何从 DispatcherServlet 流向 Controller”兼容稳妥学校实验室服务器多为 CentOS 6 JDK 8SSM 无 Spring Boot 的嵌入式 Tomcat 版本冲突风险。然后放一张技术选型对比表表格必须出现在开题报告“技术路线”章节维度微信小程序H5 页面React Native开发成本低官方组件丰富文档完善中需适配多端 viewport高需双端调试学习曲线陡部署难度极低上传即用无需运维中需 Nginx 配置高需 iOS 证书、Android 签名毕设可行性★★★★★真机扫码演示无门槛★★★☆☆需域名HTTPS★★☆☆☆环境搭建耗时长评审友好度★★★★★界面截图、网络请求日志直观★★★★☆需解释跨域、缓存策略★★☆☆☆Native 模块难解释注意表格中“毕设可行性”和“评审友好度”是导师最关心的两个维度必须量化打星不能写“较好”“一般”。5.2 视频教程按“功能模块”分段录制每段开头说清“这段解决什么问题”结尾定格代码/界面截图别录一个 40 分钟的“从头敲到尾”——评委不会看。按以下 5 段剪辑总时长控制在 12 分钟内环境准备1.5 分钟展示微信开发者工具登录、IDEA 导入项目、Navicat 连接 MySQL 并执行shopping.sql登录与首页2 分钟扫码进入小程序 → 输入账号密码 → 成功跳转首页 → 控制台显示token→ Network 面板查看/user/login请求响应商品浏览与搜索2.5 分钟下拉刷新 → 搜索框输入“苹果” → 列表只显示 iPhone 商品 → 查看ProductController.list()日志输出 SQL下单与支付3 分钟点击商品 → 加入购物车 → 去结算 → 提交订单 → 数据库orders表新增记录 →product.stock减少后台管理1.5 分钟访问http://localhost:8080/admin→ 登录后台 → 查看订单列表 → 修改订单状态为“已完成”。每段开头用画外音说“接下来演示商品搜索功能解决用户快速定位商品的需求……”结尾画面定格在关键证据上如 Network 面板的200 OK、Navicat 里orders表新增行、IDEA 控制台打印的 SQL。5.3 源码整理按“三层结构”归档README.md 写清“三步启动法”禁用任何第三方云盘链接把源码压缩包命名为shopping-mall-2024-graduation.zip解压后目录结构必须是shopping-mall-2024-graduation/ ├── README.md # 重中之重 ├── docs/ │ ├── 开题报告.docx │ ├── 论文终稿.pdf │ └── 答辩PPT.pptx ├── frontend/ # 小程序源码 │ ├── project.config.json │ └── ... ├── backend/ # SSM 后端 │ ├── pom.xml │ └── src/main/java/com/shopping/... ├── database/ │ └── shopping.sql # 建库脚本 └── video/ └── 演示视频.mp4README.md第一行写毕业设计基于微信小程序的购物商城系统SSM MySQL作者XXX 学号XXX 专业软件工程三步启动法复制粘贴即可MySQL 执行database/shopping.sql建库IDEA 导入backend/配置 Tomcat 指向backend/target/shopping-1.0-SNAPSHOT微信开发者工具打开frontend/修改utils/api.js中BASE_URL为http://localhost:8080。提示README.md是评阅老师打开压缩包看到的第一个文件必须用最简语言说清“怎么跑起来”。不要写“本系统实现了XXX功能”那是论文干的事。6. 最后一道防线答辩现场演示失败的“后悔药”以及我坚持了三年的毕设交付习惯6.1 演示失败的应急包离线版小程序 静态 HTML 后台 预录数据库操作视频哪怕你把所有链路测了十遍答辩当天也可能翻车——WiFi 断了、微信开发者工具崩溃、Tomcat 端口被占。我的“后悔药”清单离线小程序包在开发者工具里点击「编译」→「上传」→ 复制体验版二维码用另一台手机保存该二维码图片不依赖网络静态后台页面用 VS Code 新建admin.html用 Bootstrap 写一个假订单列表页表格数据写死trtd20240501001/tdtd张三/tdtd已发货/td/tr放在backend/src/main/webapp/下访问http://localhost:8080/admin.html即可数据库操作录屏用 OBS 录一段 60 秒视频Navicat 连接 → 执行SELECT * FROM orders;→ 显示刚下的订单 → 执行UPDATE orders SET statusDELIVERED WHERE id1;→ 再查确认更新。存为db-demo.mp4答辩时说“这部分已在数据库层面验证”。这些不是作弊而是工程思维——真实项目上线前也要做降级预案。评委看到你连“断网怎么演”都想好了反而觉得靠谱。6.2 我的毕设交付铁律所有文件必须“所见即所得”绝不留任何需要“自行配置”的黑匣子过去三年我帮 27 个学弟学妹改毕设发现 80% 的返工源于同一个问题源码里藏着未文档化的硬编码。比如api.js里写死BASE_URL: https://api.xxx.com但没告诉学生要改成localhostjdbc.properties里jdbc.urljdbc:mysql://192.168.1.100:3306/shopping但学生电脑没这 IPlog4j2.xml里fileNamelogs/app.log但没创建logs文件夹导致启动报错。所以现在我交付前必做三件事全局搜索http://、https://、IP 地址、绝对路径全部替换成localhost或相对路径新建一个config-checklist.txt列出所有要改的地方[必改] frontend/utils/api.js 第 3 行BASE_URL 改为 http://localhost:8080 [必改] backend/src/main/resources/jdbc.propertiesurl/user/password 按你本地 MySQL 填 [必做] 启动前手动创建 backend/src/main/webapp/logs/ 文件夹用一台干净虚拟机VMwareWin10JDK8从头走一遍流程录像记录每一步操作确认无卡点。最后一句毕设不是比谁代码炫技而是比谁能把一个需求用最扎实、最透明、最抗压的方式落到可演示、可答辩、可存档的实物上。这份购物商城源码的价值不在它多先进而在它让你第一次体会到——当mvn clean package成功当真机扫码出现首页当答辩老师点头说‘这个思路很清晰’那种亲手造出东西的踏实感就是工程师生涯的第一块基石。希望帮到你。本文还有配套的精品资源点击获取 微信小程序+SSM+MySQL毕业设计实战指南
简介本资源是一套面向计算机专业本科生的毕业设计实战项目基于微信小程序前端Vue.js技术栈与SSMSpringSpringMVCMyBatisJava后端架构结合MySQL数据库构建的完整购物商城系统适用于课程设计、毕设选题及全栈开发能力训练。压缩包共791个文件35.98MB涵盖140个Vue组件文件实现小程序页面逻辑与交互、114个Java类含Controller、Service、Mapper层完整业务代码、125张PNG/SVG图标资源、66个JS工具脚本、24个XML配置文件、20个WXML/WXSS样式文件以及SQL建表脚本、开题报告、论文讲解视频与配套实操教程。已有175人学习下载内容组织清晰从环境搭建含install/run/build三类bat脚本到功能模块商品管理、订单处理、用户与商家双角色权限体系均提供可运行源码与结构化文档特别适合零基础入门小程序Java全栈开发的学习者快速上手并理解电商系统核心业务流程。1. 毕业设计选题踩准了微信小程序 SSM MySQL 购物商城不是“拼凑三件套”而是能跑通、能答辩、能演示的最小闭环系统你手头那份标着“含完整源代码、数据库脚本、开题报告、论文视频、视频教程”的毕业设计压缩包本质不是一堆文件堆砌而是一套面向高校毕设场景深度适配的工程化交付物——它绕开了企业级微服务的复杂度但又拒绝“Hello World”式空壳它用微信小程序承载用户交互真机扫码即用SSMSpring SpringMVC MyBatis稳住后端逻辑兼容主流IDEA/EclipseTomcat部署MySQL落地数据持久5.7/8.0均可建表语句已预置外键与索引。这不是教科书里的理论模型而是你能在答辩现场打开手机扫二维码、登录账号、加购物车、提交订单、查订单状态——全程无报错、不卡顿、有日志、可截图的真实可验证系统。适合计算机/软件工程专业大四学生时间紧34周集中开发、资源少没服务器、没域名、没运维经验、要求高要查重、要录屏、要答辩PPT里放流程图和界面截图。它不教你分布式事务或高并发秒杀但会手把手带你把“用户登录态怎么存”“商品列表分页怎么写”“订单状态怎么原子更新”这些毕设高频卡点用最朴素、最易复现的方式落进代码里。2. 从零启动用微信开发者工具跑通小程序前端SSM项目在本地Tomcat部署MySQL建库建表一步到位2.1 微信小程序用开发者工具加载源码解决“真机调试白屏”和“request:fail”两大拦路虎拿到2048-小程序.zip后别急着解压到桌面。先确认你已安装微信开发者工具稳定版非Beta并用本人微信扫码登录。解压后打开项目根目录含app.js、project.config.json、sitemap.json的文件夹工具会自动识别为小程序项目。此时常见报错是真机扫码后首页白屏 → 检查project.config.json中appid是否为你自己申请的小程序 AppID不是模板里的wx...占位符控制台报request:fail url not in domain list→ 进入「详情」→「本地设置」→ 勾选「不校验合法域名、TLS版本以及HTTPS证书」仅开发阶段答辩演示前务必关掉登录后wx.getStorageSync(token)返回undefined→ 查看utils/api.js中login()方法是否调用了后端/user/login接口且返回 JSON 格式为{code: 200, data: {token: xxx}}。提示小程序所有网络请求必须走 HTTPS但毕设本地调试时后端用http://localhost:8080即可。开发者工具的「安全域名」配置只影响真机不影响模拟器。2.2 SSM后端用IDEA导入Maven项目关键依赖版本锁定Spring 5.2.22.RELEASE MyBatis 3.4.6 JDK 8解压后端源码通常为shopping-server或ssm-shop文件夹用 IDEA 打开选择 Maven 导入。重点检查pom.xml中三处版本锁死properties spring.version5.2.22.RELEASE/spring.version mybatis.version3.4.6/mybatis.version jdk.version1.8/jdk.version /properties为什么不是 Spring Boot因为毕设评审老师更熟悉传统 SSM 的三层结构Controller/Service/Dao且web.xmlspring-mvc.xml配置清晰可截图。若你遇到ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet说明spring-webmvc依赖缺失补上dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version${spring.version}/version /dependency启动前在 IDEA 右上角配置 Tomcat ServerDeployment 里添加Artifact类型为exploded确保Application context为/或/shop与小程序utils/api.js中BASE_URL一致。2.3 MySQL执行shopping.sql脚本建库重点处理字符集、外键约束与测试数据填充用 Navicat 或命令行连接本地 MySQL推荐 5.7.44 或 8.0.33避坑 8.0.34 的默认密码策略变更mysql -u root -p # 输入密码后执行 CREATE DATABASE IF NOT EXISTS shopping DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE shopping; SOURCE /path/to/shopping.sql; # 注意路径用正斜杠或双反斜杠shopping.sql必含三类语句CREATE TABLE user (...) ENGINEInnoDB DEFAULT CHARSETutf8mb4;→ 强制指定utf8mb4支持微信昵称中的 emojiALTER TABLE order_item ADD CONSTRAINT fk_order_id FOREIGN KEY (order_id) REFERENCES orders(id);→ 外键保证订单与子项一致性INSERT INTO product (id,name,price,stock) VALUES (1,iPhone 15,5999.00,100);→ 至少 5 条测试商品避免列表页空数据报错。注意若执行报错ERROR 1822 (HY000): Failed to add the foreign key constraint说明被引用表如orders未建或字段类型不匹配orders.id是BIGINT而order_item.order_id是INT需统一为BIGINT。3. 关键链路打通登录态管理、商品列表分页、下单事务三段核心代码逐行拆解3.1 小程序端login.js与app.js联动实现 token 持久化解决“切后台再回来要重新登录”问题小程序没有 Cookie登录态靠wx.setStorageSync(token, res.data.token)存本地。但仅存不够——app.js的onLaunch必须做两件事// app.js App({ onLaunch: function () { const token wx.getStorageSync(token); if (token) { // 检查 token 是否过期简单方案存登录时间戳30分钟内有效 const loginTime wx.getStorageSync(loginTime); if (Date.now() - loginTime 30 * 60 * 1000) { this.globalData.token token; } else { wx.removeStorageSync(token); wx.removeStorageSync(loginTime); } } }, globalData: { token: null, userInfo: null } })然后在每个需要鉴权的页面如pages/order/list.jsonLoad里加onLoad() { if (!getApp().globalData.token) { wx.navigateTo({ url: /pages/login/login }); // 未登录跳转 return; } this.loadOrderList(); // 加载订单 }逻辑说明onLaunch是小程序冷启动入口getApp().globalData.token是全局变量比反复读wx.getStorageSync更高效loginTime时间戳存的是毫秒值Date.now()返回当前毫秒差值小于 180000030分钟即认为有效。3.2 SSM后端ProductController.java实现分页查询MyBatis XML 中用if动态拼接条件小程序商品列表页常带搜索框按名称模糊查和分类筛选按 category_id 精确查后端 Controller 必须支持多条件组合// ProductController.java RequestMapping(/product/list) ResponseBody public Result list(RequestParam(required false) String keyword, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { PageHelper.startPage(pageNum, pageSize); ListProduct products productService.listByKeywordAndCategory(keyword, null); PageInfoProduct pageInfo new PageInfo(products); return Result.success(pageInfo); }对应 MyBatis Mapper XML!-- ProductMapper.xml -- select idlistByKeywordAndCategory resultTypeProduct SELECT * FROM product WHERE 11 if testkeyword ! null and keyword ! AND name LIKE CONCAT(%, #{keyword}, %) /if if testcategoryId ! null AND category_id #{categoryId} /if ORDER BY create_time DESC /select参数说明RequestParam(required false)让keyword可为空PageHelper.startPage()是物理分页插件避免LIMIT写死CONCAT(%, #{keyword}, %)防止 SQL 注入用#{}不是${}ORDER BY create_time DESC保证新品在前。3.3 下单事务OrderService.java用Transactional保证“减库存写订单写订单项”原子性下单是最易翻车环节。常见错误是先查库存SELECT stock FROM product WHERE id1再UPDATE product SET stockstock-1 WHERE id1中间被并发请求插队导致超卖。正确做法是一条 SQL 完成扣减与校验// OrderService.java Transactional(rollbackFor Exception.class) public Result createOrder(Long userId, ListOrderItem items) { // 1. 扣减库存带库存校验 for (OrderItem item : items) { int affected productMapper.reduceStock(item.getProductId(), item.getQuantity()); if (affected 0) { throw new RuntimeException(商品ID item.getProductId() 库存不足); } } // 2. 写订单主表 Order order new Order(); order.setUserId(userId); order.setTotalPrice(calculateTotal(items)); orderMapper.insert(order); // 3. 写订单子项 for (OrderItem item : items) { item.setOrderId(order.getId()); orderItemMapper.insert(item); } return Result.success(order.getId()); }对应 Mapper XML!-- ProductMapper.xml -- update idreduceStock UPDATE product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity} /update关键点AND stock #{quantity}是原子校验affected 0表示没更新成功库存不足或商品不存在Transactional保证三步要么全成功要么全回滚rollbackFor Exception.class确保运行时异常也触发回滚。4. 避坑指南毕设高频翻车点、报错现象、根本原因与一招解决法4.1 小程序真机扫码显示“系统错误”控制台无日志 → 后端跨域未放开且Access-Control-Allow-Origin写死了localhost现象开发者工具里一切正常真机扫码后页面空白控制台无任何 request 日志Network 面板显示Failed to load resource: net::ERR_CONNECTION_REFUSED原因后端WebConfig.java中跨域配置写了registry.addMapping(/**).allowedOrigins(http://localhost:8080)而真机访问时 Origin 是https://servicewechat.com/xxx/xxx/page-frame.html不匹配解决改为允许所有小程序来源Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) // 毕设阶段直接放开答辩后可细化 .allowCredentials(true) .maxAge(3600); } }注意allowedOrigins(*)在 Spring 5.3 需配合allowCredentials(true)使用否则报错生产环境必须替换为具体域名。4.2 小程序wx.request报400 Bad Request但后端 Controller 方法参数接收为空 → 前端传参格式与后端RequestParam不匹配现象小程序调用wx.request({url: /user/login, method: POST, data: {username:a, password:b}})后端RequestParam String username始终为null原因wx.request默认Content-Type是application/json而RequestParam只解析application/x-www-form-urlencoded或 URL Query解决二选一✅ 方案一推荐后端改用RequestBody UserLoginDTO dto前端保持 JSON 传参✅ 方案二前端显式声明header: {content-type: application/x-www-form-urlencoded}并用wx.utils.param()序列化const data { username: a, password: b }; wx.request({ url: /user/login, method: POST, header: { content-type: application/x-www-form-urlencoded }, data: wx.utils.param(data), // 生成 usernameapasswordb success: res console.log(res) });4.3 MySQL 执行shopping.sql报错ERROR 1067 (42000): Invalid default value for create_time→ MySQL 5.7 严格模式限制0000-00-00日期现象CREATE TABLE user (...) create_time DATETIME DEFAULT 0000-00-00 00:00:00执行失败原因MySQL 5.7 默认开启STRICT_TRANS_TABLES禁止零日期解决临时关闭严格模式毕设够用SET sql_mode(SELECT REPLACE(sql_mode,STRICT_TRANS_TABLES,)); -- 然后执行 shopping.sql -- 永久生效需修改 my.cnfsql_mode NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION血泪经验别硬改 SQL 里的DEFAULT 0000-00-00为CURRENT_TIMESTAMP因为 MyBatis 插入时若字段为nullMySQL 会忽略默认值导致create_time为NULL。4.4 IDEA 启动 Tomcat 报java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener→ Maven 依赖未正确导入或 Tomcat 部署路径错误现象控制台刷屏Caused by: java.lang.ClassNotFoundException: ...浏览器访问http://localhost:8080显示 404原因pom.xml中spring-web依赖 scope 是test或 IDEA 的 Artifact 打包未包含lib目录解决检查pom.xmlscope必须是compile默认值删掉该标签即可IDEA 中File → Project Structure → Artifacts确认Output Layout下Available Elements里WEB-INF/lib已展开且所有 jar 包已拖入清理Build → Clean Project再Build → Rebuild Project最后重启 Tomcat。4.5 小程序支付回调notify_url无法触发日志显示Connection refused→ 本地开发环境无法接收微信服务器回调必须用 ngrok 或 natapp现象调起微信支付成功但后端PayController.java的PostMapping(/pay/notify)方法从未执行原因微信服务器只能回调公网 IP端口localhost:8080对它不可达解决✅ 毕设演示绕过支付在OrderService.createOrder()里直接将订单状态设为PAID跳过调起支付步骤✅ 真机演示需公网回调用 natapp 免费隧道注册后natapp -authtokenxxx -subdomainyourname将http://localhost:8080映射为https://yourname.natapp1.cc填入微信商户平台提示natapp 免费版每小时断连一次答辩前 10 分钟启动即可避免长时间等待。5. 论文与答辩开题报告怎么写才不被导师打回视频教程怎么录才体现工作量源码怎么整理才让评阅老师一眼看懂5.1 开题报告聚焦“三个为什么”用技术选型对比表代替空泛描述毕设开题最怕写成“本系统采用微信小程序因为微信用户多”——这不算理由。要写成为什么选微信小程序而非 H5用户触达无需下载扫码即用符合校园场景食堂订餐、二手书交易能力支撑wx.login()提供安全 openidwx.chooseAddress()直接获取收货地址省去自建地址库成本控制无域名备案、无 HTTPS 证书费用本地调试即可完成 90% 功能。为什么选 SSM 而非 Spring Boot教学对齐《Java Web 开发》课程讲授 ServletSpringMVCSSM 结构与教材完全一致部署透明web.xml配置清晰可截图便于答辩时讲解“请求如何从 DispatcherServlet 流向 Controller”兼容稳妥学校实验室服务器多为 CentOS 6 JDK 8SSM 无 Spring Boot 的嵌入式 Tomcat 版本冲突风险。然后放一张技术选型对比表表格必须出现在开题报告“技术路线”章节维度微信小程序H5 页面React Native开发成本低官方组件丰富文档完善中需适配多端 viewport高需双端调试学习曲线陡部署难度极低上传即用无需运维中需 Nginx 配置高需 iOS 证书、Android 签名毕设可行性★★★★★真机扫码演示无门槛★★★☆☆需域名HTTPS★★☆☆☆环境搭建耗时长评审友好度★★★★★界面截图、网络请求日志直观★★★★☆需解释跨域、缓存策略★★☆☆☆Native 模块难解释注意表格中“毕设可行性”和“评审友好度”是导师最关心的两个维度必须量化打星不能写“较好”“一般”。5.2 视频教程按“功能模块”分段录制每段开头说清“这段解决什么问题”结尾定格代码/界面截图别录一个 40 分钟的“从头敲到尾”——评委不会看。按以下 5 段剪辑总时长控制在 12 分钟内环境准备1.5 分钟展示微信开发者工具登录、IDEA 导入项目、Navicat 连接 MySQL 并执行shopping.sql登录与首页2 分钟扫码进入小程序 → 输入账号密码 → 成功跳转首页 → 控制台显示token→ Network 面板查看/user/login请求响应商品浏览与搜索2.5 分钟下拉刷新 → 搜索框输入“苹果” → 列表只显示 iPhone 商品 → 查看ProductController.list()日志输出 SQL下单与支付3 分钟点击商品 → 加入购物车 → 去结算 → 提交订单 → 数据库orders表新增记录 →product.stock减少后台管理1.5 分钟访问http://localhost:8080/admin→ 登录后台 → 查看订单列表 → 修改订单状态为“已完成”。每段开头用画外音说“接下来演示商品搜索功能解决用户快速定位商品的需求……”结尾画面定格在关键证据上如 Network 面板的200 OK、Navicat 里orders表新增行、IDEA 控制台打印的 SQL。5.3 源码整理按“三层结构”归档README.md 写清“三步启动法”禁用任何第三方云盘链接把源码压缩包命名为shopping-mall-2024-graduation.zip解压后目录结构必须是shopping-mall-2024-graduation/ ├── README.md # 重中之重 ├── docs/ │ ├── 开题报告.docx │ ├── 论文终稿.pdf │ └── 答辩PPT.pptx ├── frontend/ # 小程序源码 │ ├── project.config.json │ └── ... ├── backend/ # SSM 后端 │ ├── pom.xml │ └── src/main/java/com/shopping/... ├── database/ │ └── shopping.sql # 建库脚本 └── video/ └── 演示视频.mp4README.md第一行写毕业设计基于微信小程序的购物商城系统SSM MySQL作者XXX 学号XXX 专业软件工程三步启动法复制粘贴即可MySQL 执行database/shopping.sql建库IDEA 导入backend/配置 Tomcat 指向backend/target/shopping-1.0-SNAPSHOT微信开发者工具打开frontend/修改utils/api.js中BASE_URL为http://localhost:8080。提示README.md是评阅老师打开压缩包看到的第一个文件必须用最简语言说清“怎么跑起来”。不要写“本系统实现了XXX功能”那是论文干的事。6. 最后一道防线答辩现场演示失败的“后悔药”以及我坚持了三年的毕设交付习惯6.1 演示失败的应急包离线版小程序 静态 HTML 后台 预录数据库操作视频哪怕你把所有链路测了十遍答辩当天也可能翻车——WiFi 断了、微信开发者工具崩溃、Tomcat 端口被占。我的“后悔药”清单离线小程序包在开发者工具里点击「编译」→「上传」→ 复制体验版二维码用另一台手机保存该二维码图片不依赖网络静态后台页面用 VS Code 新建admin.html用 Bootstrap 写一个假订单列表页表格数据写死trtd20240501001/tdtd张三/tdtd已发货/td/tr放在backend/src/main/webapp/下访问http://localhost:8080/admin.html即可数据库操作录屏用 OBS 录一段 60 秒视频Navicat 连接 → 执行SELECT * FROM orders;→ 显示刚下的订单 → 执行UPDATE orders SET statusDELIVERED WHERE id1;→ 再查确认更新。存为db-demo.mp4答辩时说“这部分已在数据库层面验证”。这些不是作弊而是工程思维——真实项目上线前也要做降级预案。评委看到你连“断网怎么演”都想好了反而觉得靠谱。6.2 我的毕设交付铁律所有文件必须“所见即所得”绝不留任何需要“自行配置”的黑匣子过去三年我帮 27 个学弟学妹改毕设发现 80% 的返工源于同一个问题源码里藏着未文档化的硬编码。比如api.js里写死BASE_URL: https://api.xxx.com但没告诉学生要改成localhostjdbc.properties里jdbc.urljdbc:mysql://192.168.1.100:3306/shopping但学生电脑没这 IPlog4j2.xml里fileNamelogs/app.log但没创建logs文件夹导致启动报错。所以现在我交付前必做三件事全局搜索http://、https://、IP 地址、绝对路径全部替换成localhost或相对路径新建一个config-checklist.txt列出所有要改的地方[必改] frontend/utils/api.js 第 3 行BASE_URL 改为 http://localhost:8080 [必改] backend/src/main/resources/jdbc.propertiesurl/user/password 按你本地 MySQL 填 [必做] 启动前手动创建 backend/src/main/webapp/logs/ 文件夹用一台干净虚拟机VMwareWin10JDK8从头走一遍流程录像记录每一步操作确认无卡点。最后一句毕设不是比谁代码炫技而是比谁能把一个需求用最扎实、最透明、最抗压的方式落到可演示、可答辩、可存档的实物上。这份购物商城源码的价值不在它多先进而在它让你第一次体会到——当mvn clean package成功当真机扫码出现首页当答辩老师点头说‘这个思路很清晰’那种亲手造出东西的踏实感就是工程师生涯的第一块基石。希望帮到你。本文还有配套的精品资源点击获取