简介这套毕业设计资源基于微信小程序打造完整商城项目适合计算机相关专业学生完成毕业设计或课程设计也适合刚入门小程序开发的新手对照学习。项目包含前端小程序页面与后端服务代码覆盖商城、商品详情、发现、我的、支付、消息等核心功能模块从商品浏览到下单支付流程完整并配有商品分类、活动专题、个人中心等多类页面界面整洁、操作流畅代码注释清晰便于理解与二次开发。压缩包共68个文件以png界面截图、js逻辑脚本、wxml/wxss页面结构及样式、json页面配置为主并附带数据库脚本与使用说明文档整体包体仅3.31MB学习与部署门槛较低。目前已有1240人学习下载配合源码、数据库、部署说明可快速理解前后端交互流程直接用于毕业答辩或课程项目演示也可作为后续二次开发的功能底版。1. 这套微信小程序商城毕设到底值不值得下载就跑每年毕业设计季都会有一批人下载到类似「微信小程序商城毕业设计附源码」的压缩包里面有前端小程序、后端代码、数据库脚本和一个教程文档。听起来挺齐全但真正打开后多数人被卡在第一步——不知道先点哪个文件更不知道数据库脚本导进去之后为什么报错。这个标题背后其实是一套完整的电商闭环用户端在小程序里浏览商品、加购物车、下单支付管理端在后台上架商品、处理订单中间靠后端接口和 MySQL 数据库把数据串起来。所以这篇笔记要解决的不是「这是什么」而是「怎么把它变成你自己的毕设」。我会按技术选型、数据库设计、本地运行、踩坑排查、二次开发这条线把从解压到答辩的完整路径讲清楚。适合两类人一类是自己下载了这个包想跑通的新手另一类是准备拿小程序商城当课题、但还没想清楚工作量怎么分的同学。先说结论这个方向值得做但值不值取决于你能不能把包里的代码拆开讲明白。2. 先看懂项目再动手微信小程序商城的技术栈与目录结构2.1 为什么这套毕设选「小程序前端 Spring Boot 后端 MySQL」一个商城类毕设最常见的搭配就是微信小程序做用户端、Spring Boot 写接口、MySQL 存数据。你下载到的包里大概率也是这套组合原因很简单它覆盖了毕业设计要求的全部知识点——小程序端有页面渲染和交互后端有接口设计和业务逻辑数据库有表结构和增删改查。而且这三样东西分开学都有大量资料组合起来就是一条完整的电商业务链路。后端用 Spring Boot 而不是别的框架是因为它对新手最友好内嵌 Tomcat不用单独部署容器一个main方法就能启动。配合 MyBatis 或 MyBatis-Plus 操作数据库写 SQL 比 JPA 直观得多。你答辩时被问到「为什么选这个技术栈」回答「Spring Boot 简化配置、MyBatis 方便控制 SQL、小程序天然贴近用户终端」基本就能站住脚。小程序端不用原生语言而是用 WXML WXSS JS 这一套是因为微信小程序商城必须调用微信提供的登录、支付、收货地址等能力这些 API 只有在小程序环境里才能调通。你看到的pages/index/index、pages/cart/cart这类目录结构就是小程序的页面路由。整个项目本质上是一个「前端展示层 接口层 数据层」的三层结构这也是你论文架构图里要画的那张图。2.2 解压后你手里到底有什么源码目录与文件约定拿到压缩包先不要急着导入 IDE。先在文件管理器里解压然后看一眼总目录。虽然不同作者放的文件名不一样但常规的毕设包里一定包含这几样东西你可以对照着找xxx.sql后缀的数据库脚本通常是mall.sql、shop.sql或db.sql一个小程序前端目录特征是有app.js、app.json、pages/文件夹一个后端工程目录特征是有pom.xmlMaven 工程或src/main/java结构一个教程文档可能是README.md、使用说明.txt或 Word 文档我一般会习惯性地先把目录结构做一个标记下面这个树状图可以帮你建立心理预期wechat-shop/ ├── miniprogram/ # 小程序前端代码 │ ├── app.js # 小程序全局逻辑 │ ├── app.json # 页面路由与窗口配置 │ ├── pages/ # 页面文件首页/分类/购物车/我的/订单 │ ├── utils/ # 封装好的请求工具 │ └── project.config.json ├── backend/ # Spring Boot 后端工程 │ ├── pom.xml │ └── src/main/ │ ├── java/ # controller / service / mapper 分层 │ └── resources/ # application.yml、mapper XML 文件 ├── sql/ │ └── mall.sql # 建库建表脚本和初始化数据 └── 运行教程.md这个结构能帮你快速判断包的质量有没有sql目录、后端是不是标准 Maven 工程、小程序端有没有project.config.json。如果这三样都在说明打包的人把运行路径理清楚了大概率能跑通如果只有一堆页面文件没有后端和数据库脚本那它只是一个前端模板不算完整的毕业设计。看目录的时间大概三分钟但能帮你避开后续两个小时的踩坑。2.3 三端联调的关系小程序、后端接口、数据库各自负责什么整个商城的业务流转是这样的小程序端发起请求——比如用户点击「加入购物车」前端把商品 ID 和数量发送给后端接口后端收到请求后调用 Service 层的业务方法再通过 Mapper 层执行 SQL 写入数据库。也就是说小程序只负责展示和交互所有业务规则都在后端数据持久化全靠 MySQL。你要理解一个关键点小程序不能直连数据库。有的同学下载的包里写了前端怎么连 MySQL这是错误的设计小程序跑在微信的沙箱环境里网络请求只能走wx.request访问 HTTPS 或本地 HTTP 接口数据库连接串根本不可能出现在前端代码里。所以你在小程序端看到的wx.request({ url: http://localhost:8080/product/list })这类代码那才是正常路径——localhost指向你的后端服务后端再去访问数据库。后端工程里重点看application.yml或application.properties这个文件它是整个后端能不能连上数据库的命门。你需要在这里配置数据库地址、用户名、密码配置错了后端启动时就会报数据库连接失败。这个文件要改成你自己的本地 MySQL 账号我在第 4 章会专门拆解具体的配置项。现在你只需要记住小程序、后端、数据库三者之间是串联关系排查问题的时候按照「前端请求不到 → 看后端接口通不通 → 看数据库连没连上」这个顺序来。3. 把数据库设计讲明白答辩才有硬货3.1 一个商城最少需要几张表核心表拆解商城的数据库设计是毕业设计答辩时老师最可能追问的地方所以不能只会导脚本要能说清楚每张表是干什么的。一套完整的商城系统核心表至少包括这几张用户表、商品表、商品分类表、购物车表、订单表、订单详情表。有的项目会加轮播图表、收货地址表、管理员表这些属于加分项。你下载的 SQL 脚本里建表的顺序是有讲究的先建没有外键依赖的表用户、分类、商品再建有外键依赖的表购物车、订单。因为 MySQL 在创建表时如果引用了不存在的表会直接报错。典型的核心表结构大致长这样-- 用户表存储小程序用户的唯一标识 openid CREATE TABLE t_user ( id INT NOT NULL AUTO_INCREMENT COMMENT 用户ID, openid VARCHAR(64) NOT NULL COMMENT 微信openid小程序登录唯一标识, nickname VARCHAR(50) DEFAULT 微信用户 COMMENT 昵称, avatar VARCHAR(255) DEFAULT NULL COMMENT 头像地址, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 注册时间, PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;商品表是信息量最大的表字段一般包含商品名称、主图、轮播图、价格、库存、销量、上下架状态、所属分类。这里有两个容易踩坑的字段类型问题价格一定要用DECIMAL(10,2)而不是FLOAT因为浮点数在金额计算时会产生精度丢失库存字段用INT就行但要注意并发扣减的问题这个我在后面讲订单时会提到。商品和分类之间是一对多关系商品表里用一个category_id外键指向分类表的主键。订单相关的表最好拆成两张订单主表和订单详情表。主表存订单号、用户ID、总金额、订单状态、创建时间详情表存每个商品项的 ID、购买数量、单价。拆成两张表的原因很实际同一个订单里可能有多件不同商品如果只建一张表要么重复存储订单信息要么没法表达多商品。这个拆表思路你答辩时一定要主动讲这是亮点。3.2 商城数据库初始化脚本从导入到验证拿到mall.sql脚本后在 Navicat 或者命令行里执行导入。常见做法是先创建一个数据库再导入脚本也可以在脚本里写了CREATE DATABASE IF NOT EXISTS。导入完成后你要有验证表是否齐全的意识不能导完就关掉。用下面这条 SQL 查看所有表-- 查看当前数据库下所有表确认导入是否完整 SHOW TABLES;导入后建议主动查几个关键表的数据量确认初始化数据真正进去了-- 商品表应该有多条测试商品 SELECT id, name, price, stock FROM t_product LIMIT 5;说说初始化数据的作用脚本里除了建表还会插入测试商品、测试分类、默认管理员账号。这些数据不是摆设是给你演示用的——小程序首页展示的商品列表就是从这些数据查出来的。如果你导入脚本后小程序首页空白优先检查商品表里有没有数据而不是去改前端代码。参数说明ENGINEInnoDB是必须的它支持事务订单创建时多表写入需要事务保证一致性CHARSETutf8mb4比utf8多了对 emoji 表情的支持商城用户昵称里经常会有表情符号用utf8建表存 emoji 会报错或变成问号。如果你手里的脚本建表语句用的是utf8建议自己手动改成utf8mb4。3.3 订单状态与库存扣减数据库层面的业务逻辑商城数据库不只是建表存数据还隐含了业务规则。最典型的就是订单状态流转待付款、待发货、待收货、已完成、已取消。这些状态通常用一个INT或VARCHAR字段存储后端代码里通过常量或枚举来控制状态变更。下单的流程涉及两张表的联动创建订单记录 扣减商品库存。这两步必须在一个事务里完成否则会出现「订单建好了但库存没扣」或者「库存扣了但订单没建成功」的脏数据。后端代码里一般是这样写的Override Transactional(rollbackFor Exception.class) public void createOrder(OrderCreateRequest req) { // 1. 创建订单主表记录 Order order new Order(); order.setUserId(req.getUserId()); order.setOrderNo(generateOrderNo()); order.setStatus(0); // 0待付款 orderMapper.insert(order); // 2. 扣减商品库存SQL 层面判断库存充足 int rows productMapper.deductStock(req.getProductId(), req.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足下单失败); } // 3. 写入订单详情 orderItemMapper.insert(orderItem); }这段代码的逻辑是先插入订单主表拿到自增 ID再扣库存时用受影响行数判断库存是否够——如果够deductStock返回 1继续写入订单详情如果不够返回 0抛出异常触发事务回滚订单主表那条记录也不会留下。Transactional注解是关键它保证方法里所有数据库操作要么全部成功、要么全部回滚。这个设计是你答辩时能拿出来讲的亮点比单纯说「我的项目有增删改查」有说服力得多。需要特别注意的是deductStock对应的 SQL 写法一定要用条件更新的方式而不是先查再改。UPDATE t_product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity}这种写法能在一条 SQL 里完成「检查 扣减」避免并发下超卖。如果包里的代码用的是「先 SELECT 再 UPDATE」的写法建议你改成条件更新这也是一个主动优化点。4. 把源码跑起来环境配置与本地联调的全过程4.1 环境准备清单JDK、MySQL、微信开发者工具一个都不能少跑这套商城毕设你得把环境先补齐。必要的工具包括JDK 1.8 或更高版本、Maven 3.6、MySQL 5.7 或 8.0、微信开发者工具、一个用于后端的 IDEIDEA 或 Eclipse。这些环境变量配置属于基础操作但容易出问题的地方在于版本匹配后端如果用的是较老的 Spring Boot 版本用 JDK 17 启动大概率会报错建议优先用 JDK 1.8 跑通再说。微信开发者工具需要去微信官方下载安装后要用微信扫码登录才能创建和导入项目。打开工具后选择「导入项目」目录选到小程序前端所在的文件夹有project.config.json的那一层AppID 可以先用测试号等真机调试时再换自己的小程序 AppID。这里先给出一条检查命令确认 Java 和 Maven 就位# 检查 JDK 版本1.8 会输出 java version 1.8.0_xxx java -version # 检查 Maven 版本确保 mvn 命令可用 mvn -v如果java -version报错说明 JDK 没装或JAVA_HOME环境变量没配如果mvn -v报错说明 Maven 没装或没配MAVEN_HOME。这两个命令是后续所有步骤的前提跑不通就先把环境修好。4.2 后端启动修改数据库密码、导入 Maven 依赖、启动服务后端工程导入 IDEA 后第一步改配置。找到src/main/resources/application.yml里面会有数据库连接信息把它改成你自己的 MySQL 账号密码和数据库名server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/mall_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你自己数据库的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这段配置里最常见的坑是serverTimezone。如果你的 MySQL 是 8.0 而没加这个参数启动时通常会报The server time zone value的异常加上Asia/Shanghai才能正确识别时区。map-underscore-to-camel-case是让数据库的user_name字段自动映射到 Java 的userName如果你发现查出来的数据某些字段是 null多半是这个配置没开。配置改完后打开 IDEA 的 Maven 面板点刷新让依赖下载完成。然后启动类上有个main方法直接右键运行。注意观察控制台日志看到Tomcat started on port(s): 8080就代表启动成功。之后在浏览器里访问以下地址验证接口是否通# 请求商品列表接口返回 JSON 数据即成功 curl http://localhost:8080/api/product/list如果返回了带商品信息的 JSON说明后端和数据库已经联通了。这一步是整个项目跑通的分水岭后端接口通了小程序端只需要把请求地址指过来就能出数据。4.3 小程序端联调修改请求地址和合法域名后端跑通后最后一个环节是小程序前端连到后端接口。打开小程序项目找到封装请求的文件通常在utils/request.js或config.js里里面定义了一个baseURL把它改成你的后端地址// utils/request.js const BASE_URL http://localhost:8080; // 本地调试用真机调试要改局域网 IP 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) resolve(res.data), fail: (err) reject(err) }); }); } module.exports request;这里解释几个参数url是接口路径比如/api/product/listmethod是 HTTP 方法商城接口以 GET 和 POST 为主header里声明Content-Type是为了让后端正确解析 POST 请求的 JSON 体。对新手来说最容易发现的现象是本地调试时小程序能请求到数据但手机预览时白屏。原因是在微信开发者工具里勾选了「不校验合法域名」可以访问localhost手机上却必须走 HTTPS 或局域网 IP。本地先跑通真机调试的坑我在下一章的避坑清单里专门写。改完baseURL后在开发者工具里点击编译首页如果显示出商品列表恭喜你这套毕设已经在本地完整跑通了。接下来你要做的事就是对照教程文档把每个功能页面点一遍确认购物车、下单、订单列表这些链路都能走通再考虑二次开发的事。5. 避坑指南微信小程序商城跑不起来的 5 个高频问题5.1 小程序编译报「ES6 转 ES5」错误或页面白屏现象导入小程序项目后点击编译工具提示某些目录下存在语法错误或者页面直接白屏Console 报错指向Promise或箭头函数。原因是微信开发者工具默认对 ES6 语法的转换规则和你本机的「基础库版本」不完全兼容。解决方法是在工具栏点击「详情」—「本地设置」勾选「ES6 转 ES5」同时把调试基础库版本切换到 2.x 左右不要用最新的 3.x 测试版。这类问题在旧项目上尤其常见老源码用了async/await的写法基础库版本太老反而识别不了。5.2 后端启动报「Access denied for user root」现象后端运行后控制台抛出Access denied for user rootlocalhost提示密码错误。原因通常是你把application.yml里的密码改错了或者 MySQL 8.0 默认的加密插件是caching_sha2_password而项目里的 MySQL 驱动版本过旧两者握手失败。解决方法是先确认密码没错然后去 MySQL 执行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码;把认证插件改成旧的mysql_native_password模式。如果你用的是 MySQL 5.7这条问题基本不会出现。5.3 首页有数据但点进商品详情是空白现象小程序首页列表能正常显示商品点击某个商品跳转到详情页后页面没有内容。原因大概率不是页面代码坏了而是详情页请求的接口参数传的是「商品 ID」而后端接口要求的是「商品编码」两个字段对不上导致查不到数据。解决方法是打开详情页 JS 文件查看onLoad(options)里取到的参数名和后端 Controller 方法的PathVariable或RequestParam对比一下改成一致。这类问题排查起来很快在 Console 里看到请求返回的 JSON 里data是null基本就实锤了。5.4 真机预览请求不到数据但模拟器正常现象在开发者工具里一切正常点「真机预览」后手机打开小程序所有列表都是空的网络请求全部报fail。原因很明确手机端不认localhost。你电脑上的localhost:8080只能指向本机手机访问时必须用电脑在局域网内的 IP比如192.168.1.101:8080。解决方法是先把电脑防火墙对 8080 端口放行然后把BASE_URL改成局域网 IP手机和电脑连同一个 Wi-Fi重新编译预览。如果手机还是请求失败用电脑开个热点让手机连再换对应的热点 IP这类问题基本都能解决。5.5 查询订单时间比实际时间早或晚 8 小时现象订单创建时间和实际时间差了整 8 个小时。原因是 MySQL 连接串里没有加serverTimezoneAsia/Shanghai数据库默认按服务器的 UTC 时区处理东八区的时间被当成了标准时间存储。解决方法很简单在application.yml里给 JDBC 连接串后面加上serverTimezoneAsia/Shanghai重启后端。这个问题不影响功能跑通但影响观感答辩演示时被老师看到时间对不上多少会减印象分。6. 进阶一步给商城加「列表分页加载」和「订单搜索」的改造示范跑通源码只是起点要想拿高分你要让项目看起来像「你的作品」而不是「下载的模板」。最容易出效果的改造方向是给商品列表加上分页加载——这也是实际商城必备的交互热搜里的「微信小程序页面列表加载更多」就是指这个功能。代码逻辑不复杂后端加两个参数、小程序端改一段触底函数就能讲出「我优化了列表性能」的故事。先看后端改造。大多数毕设源码中的商品列表接口是一次性返回全部数据数据量少看不出来但你答辩时可以主动说「这个接口在高数据量下会变慢所以我加了分页」。修改ProductController中的查询方法接收page和size两个参数返回固定条数和总数GetMapping(/api/product/list) public Result getProductList(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { int offset (page - 1) * size; ListProduct list productMapper.selectPage(offset, size); int total productMapper.countAll(); return Result.ok(list, total); }这段代码的逻辑是page从 1 开始offset根据页码算出 SQL 的LIMIT起始位置size控制每页条数。对应的 Mapper 里用两条 SQL一条查当前页数据一条查总条数前端拿总数来算有没有下一页。参数说明默认值设为1和10是为了兼容旧请求——不传参数时也能正常返回第一页不会影响已有调用。前端小程序端在商品列表页监听滚动到底部事件触底时把page加一再请求下一页把新数据追加到数组末尾。判断是否还能加载用后端返回的总条数和当前已加载条数对比// 商品列表页 JS let currentPage 1; const pageSize 10; onReachBottom() { const total this.data.total; const loaded this.data.productList.length; if (loaded total) { this.setData({ hasMore: false }); // 全部加载完不再请求 return; } currentPage; this.loadProducts(currentPage); } loadProducts(page) { const baseUrl http://localhost:8080; wx.request({ url: baseUrl /api/product/list, data: { page: page, size: pageSize }, success: (res) { const newList this.data.productList.concat(res.data.data.list); this.setData({ productList: newList, total: res.data.data.total }); } }); }这里有一个容易出错的细节concat是新数组赋值不能直接用push后再setData因为小程序的数据绑定需要你传入一个全新的数组才能触发视图更新。hasMore是一个控制变量数据加载完时置为false避免触底后重复发无效请求。这个改造只要两个小时但答辩时你能讲出「列表性能优化」「按需加载」这些关键词效果完全不一样。第二个低成本改造是给订单列表加上按订单号模糊搜索。后端接口加一个可选的关键词参数Mapper XML 里写动态 SQL。需要注意 SQL 里LIKE的写法CONCAT(%, #{keyword}, %)很多新手直接写%${keyword}%那会产生 SQL 注入风险。这里顺便说句血泪经验我当年答辩前就是因为顺手用了${}拼参数被老师当场问了 SQL 注入怎么防答得磕磕绊绊差点翻车。后来养成的习惯是写 SQL 一律用#{}涉及 LIKE 模糊查询就用CONCAT拼接这个习惯也建议你带进后面的工作里。做完这两个改造建议你重新从用户注册到下单走一遍全流程确认分页加载没有影响数据正确性。这个验证过程本身就是你论文里「系统测试」章节的素材截图保存好。最后说一句我的个人习惯不管是下载的源码还是自己写的代码拿到手我都会先通读一遍核心接口再决定改哪里而不是边改边看——这个习惯帮我躲过了不少「改了半天发现源头是另一个文件」的坑。希望帮到你。本文还有配套的精品资源点击获取
简介这套毕业设计资源基于微信小程序打造完整商城项目适合计算机相关专业学生完成毕业设计或课程设计也适合刚入门小程序开发的新手对照学习。项目包含前端小程序页面与后端服务代码覆盖商城、商品详情、发现、我的、支付、消息等核心功能模块从商品浏览到下单支付流程完整并配有商品分类、活动专题、个人中心等多类页面界面整洁、操作流畅代码注释清晰便于理解与二次开发。压缩包共68个文件以png界面截图、js逻辑脚本、wxml/wxss页面结构及样式、json页面配置为主并附带数据库脚本与使用说明文档整体包体仅3.31MB学习与部署门槛较低。目前已有1240人学习下载配合源码、数据库、部署说明可快速理解前后端交互流程直接用于毕业答辩或课程项目演示也可作为后续二次开发的功能底版。1. 这套微信小程序商城毕设到底值不值得下载就跑每年毕业设计季都会有一批人下载到类似「微信小程序商城毕业设计附源码」的压缩包里面有前端小程序、后端代码、数据库脚本和一个教程文档。听起来挺齐全但真正打开后多数人被卡在第一步——不知道先点哪个文件更不知道数据库脚本导进去之后为什么报错。这个标题背后其实是一套完整的电商闭环用户端在小程序里浏览商品、加购物车、下单支付管理端在后台上架商品、处理订单中间靠后端接口和 MySQL 数据库把数据串起来。所以这篇笔记要解决的不是「这是什么」而是「怎么把它变成你自己的毕设」。我会按技术选型、数据库设计、本地运行、踩坑排查、二次开发这条线把从解压到答辩的完整路径讲清楚。适合两类人一类是自己下载了这个包想跑通的新手另一类是准备拿小程序商城当课题、但还没想清楚工作量怎么分的同学。先说结论这个方向值得做但值不值取决于你能不能把包里的代码拆开讲明白。2. 先看懂项目再动手微信小程序商城的技术栈与目录结构2.1 为什么这套毕设选「小程序前端 Spring Boot 后端 MySQL」一个商城类毕设最常见的搭配就是微信小程序做用户端、Spring Boot 写接口、MySQL 存数据。你下载到的包里大概率也是这套组合原因很简单它覆盖了毕业设计要求的全部知识点——小程序端有页面渲染和交互后端有接口设计和业务逻辑数据库有表结构和增删改查。而且这三样东西分开学都有大量资料组合起来就是一条完整的电商业务链路。后端用 Spring Boot 而不是别的框架是因为它对新手最友好内嵌 Tomcat不用单独部署容器一个main方法就能启动。配合 MyBatis 或 MyBatis-Plus 操作数据库写 SQL 比 JPA 直观得多。你答辩时被问到「为什么选这个技术栈」回答「Spring Boot 简化配置、MyBatis 方便控制 SQL、小程序天然贴近用户终端」基本就能站住脚。小程序端不用原生语言而是用 WXML WXSS JS 这一套是因为微信小程序商城必须调用微信提供的登录、支付、收货地址等能力这些 API 只有在小程序环境里才能调通。你看到的pages/index/index、pages/cart/cart这类目录结构就是小程序的页面路由。整个项目本质上是一个「前端展示层 接口层 数据层」的三层结构这也是你论文架构图里要画的那张图。2.2 解压后你手里到底有什么源码目录与文件约定拿到压缩包先不要急着导入 IDE。先在文件管理器里解压然后看一眼总目录。虽然不同作者放的文件名不一样但常规的毕设包里一定包含这几样东西你可以对照着找xxx.sql后缀的数据库脚本通常是mall.sql、shop.sql或db.sql一个小程序前端目录特征是有app.js、app.json、pages/文件夹一个后端工程目录特征是有pom.xmlMaven 工程或src/main/java结构一个教程文档可能是README.md、使用说明.txt或 Word 文档我一般会习惯性地先把目录结构做一个标记下面这个树状图可以帮你建立心理预期wechat-shop/ ├── miniprogram/ # 小程序前端代码 │ ├── app.js # 小程序全局逻辑 │ ├── app.json # 页面路由与窗口配置 │ ├── pages/ # 页面文件首页/分类/购物车/我的/订单 │ ├── utils/ # 封装好的请求工具 │ └── project.config.json ├── backend/ # Spring Boot 后端工程 │ ├── pom.xml │ └── src/main/ │ ├── java/ # controller / service / mapper 分层 │ └── resources/ # application.yml、mapper XML 文件 ├── sql/ │ └── mall.sql # 建库建表脚本和初始化数据 └── 运行教程.md这个结构能帮你快速判断包的质量有没有sql目录、后端是不是标准 Maven 工程、小程序端有没有project.config.json。如果这三样都在说明打包的人把运行路径理清楚了大概率能跑通如果只有一堆页面文件没有后端和数据库脚本那它只是一个前端模板不算完整的毕业设计。看目录的时间大概三分钟但能帮你避开后续两个小时的踩坑。2.3 三端联调的关系小程序、后端接口、数据库各自负责什么整个商城的业务流转是这样的小程序端发起请求——比如用户点击「加入购物车」前端把商品 ID 和数量发送给后端接口后端收到请求后调用 Service 层的业务方法再通过 Mapper 层执行 SQL 写入数据库。也就是说小程序只负责展示和交互所有业务规则都在后端数据持久化全靠 MySQL。你要理解一个关键点小程序不能直连数据库。有的同学下载的包里写了前端怎么连 MySQL这是错误的设计小程序跑在微信的沙箱环境里网络请求只能走wx.request访问 HTTPS 或本地 HTTP 接口数据库连接串根本不可能出现在前端代码里。所以你在小程序端看到的wx.request({ url: http://localhost:8080/product/list })这类代码那才是正常路径——localhost指向你的后端服务后端再去访问数据库。后端工程里重点看application.yml或application.properties这个文件它是整个后端能不能连上数据库的命门。你需要在这里配置数据库地址、用户名、密码配置错了后端启动时就会报数据库连接失败。这个文件要改成你自己的本地 MySQL 账号我在第 4 章会专门拆解具体的配置项。现在你只需要记住小程序、后端、数据库三者之间是串联关系排查问题的时候按照「前端请求不到 → 看后端接口通不通 → 看数据库连没连上」这个顺序来。3. 把数据库设计讲明白答辩才有硬货3.1 一个商城最少需要几张表核心表拆解商城的数据库设计是毕业设计答辩时老师最可能追问的地方所以不能只会导脚本要能说清楚每张表是干什么的。一套完整的商城系统核心表至少包括这几张用户表、商品表、商品分类表、购物车表、订单表、订单详情表。有的项目会加轮播图表、收货地址表、管理员表这些属于加分项。你下载的 SQL 脚本里建表的顺序是有讲究的先建没有外键依赖的表用户、分类、商品再建有外键依赖的表购物车、订单。因为 MySQL 在创建表时如果引用了不存在的表会直接报错。典型的核心表结构大致长这样-- 用户表存储小程序用户的唯一标识 openid CREATE TABLE t_user ( id INT NOT NULL AUTO_INCREMENT COMMENT 用户ID, openid VARCHAR(64) NOT NULL COMMENT 微信openid小程序登录唯一标识, nickname VARCHAR(50) DEFAULT 微信用户 COMMENT 昵称, avatar VARCHAR(255) DEFAULT NULL COMMENT 头像地址, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 注册时间, PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;商品表是信息量最大的表字段一般包含商品名称、主图、轮播图、价格、库存、销量、上下架状态、所属分类。这里有两个容易踩坑的字段类型问题价格一定要用DECIMAL(10,2)而不是FLOAT因为浮点数在金额计算时会产生精度丢失库存字段用INT就行但要注意并发扣减的问题这个我在后面讲订单时会提到。商品和分类之间是一对多关系商品表里用一个category_id外键指向分类表的主键。订单相关的表最好拆成两张订单主表和订单详情表。主表存订单号、用户ID、总金额、订单状态、创建时间详情表存每个商品项的 ID、购买数量、单价。拆成两张表的原因很实际同一个订单里可能有多件不同商品如果只建一张表要么重复存储订单信息要么没法表达多商品。这个拆表思路你答辩时一定要主动讲这是亮点。3.2 商城数据库初始化脚本从导入到验证拿到mall.sql脚本后在 Navicat 或者命令行里执行导入。常见做法是先创建一个数据库再导入脚本也可以在脚本里写了CREATE DATABASE IF NOT EXISTS。导入完成后你要有验证表是否齐全的意识不能导完就关掉。用下面这条 SQL 查看所有表-- 查看当前数据库下所有表确认导入是否完整 SHOW TABLES;导入后建议主动查几个关键表的数据量确认初始化数据真正进去了-- 商品表应该有多条测试商品 SELECT id, name, price, stock FROM t_product LIMIT 5;说说初始化数据的作用脚本里除了建表还会插入测试商品、测试分类、默认管理员账号。这些数据不是摆设是给你演示用的——小程序首页展示的商品列表就是从这些数据查出来的。如果你导入脚本后小程序首页空白优先检查商品表里有没有数据而不是去改前端代码。参数说明ENGINEInnoDB是必须的它支持事务订单创建时多表写入需要事务保证一致性CHARSETutf8mb4比utf8多了对 emoji 表情的支持商城用户昵称里经常会有表情符号用utf8建表存 emoji 会报错或变成问号。如果你手里的脚本建表语句用的是utf8建议自己手动改成utf8mb4。3.3 订单状态与库存扣减数据库层面的业务逻辑商城数据库不只是建表存数据还隐含了业务规则。最典型的就是订单状态流转待付款、待发货、待收货、已完成、已取消。这些状态通常用一个INT或VARCHAR字段存储后端代码里通过常量或枚举来控制状态变更。下单的流程涉及两张表的联动创建订单记录 扣减商品库存。这两步必须在一个事务里完成否则会出现「订单建好了但库存没扣」或者「库存扣了但订单没建成功」的脏数据。后端代码里一般是这样写的Override Transactional(rollbackFor Exception.class) public void createOrder(OrderCreateRequest req) { // 1. 创建订单主表记录 Order order new Order(); order.setUserId(req.getUserId()); order.setOrderNo(generateOrderNo()); order.setStatus(0); // 0待付款 orderMapper.insert(order); // 2. 扣减商品库存SQL 层面判断库存充足 int rows productMapper.deductStock(req.getProductId(), req.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足下单失败); } // 3. 写入订单详情 orderItemMapper.insert(orderItem); }这段代码的逻辑是先插入订单主表拿到自增 ID再扣库存时用受影响行数判断库存是否够——如果够deductStock返回 1继续写入订单详情如果不够返回 0抛出异常触发事务回滚订单主表那条记录也不会留下。Transactional注解是关键它保证方法里所有数据库操作要么全部成功、要么全部回滚。这个设计是你答辩时能拿出来讲的亮点比单纯说「我的项目有增删改查」有说服力得多。需要特别注意的是deductStock对应的 SQL 写法一定要用条件更新的方式而不是先查再改。UPDATE t_product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity}这种写法能在一条 SQL 里完成「检查 扣减」避免并发下超卖。如果包里的代码用的是「先 SELECT 再 UPDATE」的写法建议你改成条件更新这也是一个主动优化点。4. 把源码跑起来环境配置与本地联调的全过程4.1 环境准备清单JDK、MySQL、微信开发者工具一个都不能少跑这套商城毕设你得把环境先补齐。必要的工具包括JDK 1.8 或更高版本、Maven 3.6、MySQL 5.7 或 8.0、微信开发者工具、一个用于后端的 IDEIDEA 或 Eclipse。这些环境变量配置属于基础操作但容易出问题的地方在于版本匹配后端如果用的是较老的 Spring Boot 版本用 JDK 17 启动大概率会报错建议优先用 JDK 1.8 跑通再说。微信开发者工具需要去微信官方下载安装后要用微信扫码登录才能创建和导入项目。打开工具后选择「导入项目」目录选到小程序前端所在的文件夹有project.config.json的那一层AppID 可以先用测试号等真机调试时再换自己的小程序 AppID。这里先给出一条检查命令确认 Java 和 Maven 就位# 检查 JDK 版本1.8 会输出 java version 1.8.0_xxx java -version # 检查 Maven 版本确保 mvn 命令可用 mvn -v如果java -version报错说明 JDK 没装或JAVA_HOME环境变量没配如果mvn -v报错说明 Maven 没装或没配MAVEN_HOME。这两个命令是后续所有步骤的前提跑不通就先把环境修好。4.2 后端启动修改数据库密码、导入 Maven 依赖、启动服务后端工程导入 IDEA 后第一步改配置。找到src/main/resources/application.yml里面会有数据库连接信息把它改成你自己的 MySQL 账号密码和数据库名server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/mall_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你自己数据库的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这段配置里最常见的坑是serverTimezone。如果你的 MySQL 是 8.0 而没加这个参数启动时通常会报The server time zone value的异常加上Asia/Shanghai才能正确识别时区。map-underscore-to-camel-case是让数据库的user_name字段自动映射到 Java 的userName如果你发现查出来的数据某些字段是 null多半是这个配置没开。配置改完后打开 IDEA 的 Maven 面板点刷新让依赖下载完成。然后启动类上有个main方法直接右键运行。注意观察控制台日志看到Tomcat started on port(s): 8080就代表启动成功。之后在浏览器里访问以下地址验证接口是否通# 请求商品列表接口返回 JSON 数据即成功 curl http://localhost:8080/api/product/list如果返回了带商品信息的 JSON说明后端和数据库已经联通了。这一步是整个项目跑通的分水岭后端接口通了小程序端只需要把请求地址指过来就能出数据。4.3 小程序端联调修改请求地址和合法域名后端跑通后最后一个环节是小程序前端连到后端接口。打开小程序项目找到封装请求的文件通常在utils/request.js或config.js里里面定义了一个baseURL把它改成你的后端地址// utils/request.js const BASE_URL http://localhost:8080; // 本地调试用真机调试要改局域网 IP 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) resolve(res.data), fail: (err) reject(err) }); }); } module.exports request;这里解释几个参数url是接口路径比如/api/product/listmethod是 HTTP 方法商城接口以 GET 和 POST 为主header里声明Content-Type是为了让后端正确解析 POST 请求的 JSON 体。对新手来说最容易发现的现象是本地调试时小程序能请求到数据但手机预览时白屏。原因是在微信开发者工具里勾选了「不校验合法域名」可以访问localhost手机上却必须走 HTTPS 或局域网 IP。本地先跑通真机调试的坑我在下一章的避坑清单里专门写。改完baseURL后在开发者工具里点击编译首页如果显示出商品列表恭喜你这套毕设已经在本地完整跑通了。接下来你要做的事就是对照教程文档把每个功能页面点一遍确认购物车、下单、订单列表这些链路都能走通再考虑二次开发的事。5. 避坑指南微信小程序商城跑不起来的 5 个高频问题5.1 小程序编译报「ES6 转 ES5」错误或页面白屏现象导入小程序项目后点击编译工具提示某些目录下存在语法错误或者页面直接白屏Console 报错指向Promise或箭头函数。原因是微信开发者工具默认对 ES6 语法的转换规则和你本机的「基础库版本」不完全兼容。解决方法是在工具栏点击「详情」—「本地设置」勾选「ES6 转 ES5」同时把调试基础库版本切换到 2.x 左右不要用最新的 3.x 测试版。这类问题在旧项目上尤其常见老源码用了async/await的写法基础库版本太老反而识别不了。5.2 后端启动报「Access denied for user root」现象后端运行后控制台抛出Access denied for user rootlocalhost提示密码错误。原因通常是你把application.yml里的密码改错了或者 MySQL 8.0 默认的加密插件是caching_sha2_password而项目里的 MySQL 驱动版本过旧两者握手失败。解决方法是先确认密码没错然后去 MySQL 执行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码;把认证插件改成旧的mysql_native_password模式。如果你用的是 MySQL 5.7这条问题基本不会出现。5.3 首页有数据但点进商品详情是空白现象小程序首页列表能正常显示商品点击某个商品跳转到详情页后页面没有内容。原因大概率不是页面代码坏了而是详情页请求的接口参数传的是「商品 ID」而后端接口要求的是「商品编码」两个字段对不上导致查不到数据。解决方法是打开详情页 JS 文件查看onLoad(options)里取到的参数名和后端 Controller 方法的PathVariable或RequestParam对比一下改成一致。这类问题排查起来很快在 Console 里看到请求返回的 JSON 里data是null基本就实锤了。5.4 真机预览请求不到数据但模拟器正常现象在开发者工具里一切正常点「真机预览」后手机打开小程序所有列表都是空的网络请求全部报fail。原因很明确手机端不认localhost。你电脑上的localhost:8080只能指向本机手机访问时必须用电脑在局域网内的 IP比如192.168.1.101:8080。解决方法是先把电脑防火墙对 8080 端口放行然后把BASE_URL改成局域网 IP手机和电脑连同一个 Wi-Fi重新编译预览。如果手机还是请求失败用电脑开个热点让手机连再换对应的热点 IP这类问题基本都能解决。5.5 查询订单时间比实际时间早或晚 8 小时现象订单创建时间和实际时间差了整 8 个小时。原因是 MySQL 连接串里没有加serverTimezoneAsia/Shanghai数据库默认按服务器的 UTC 时区处理东八区的时间被当成了标准时间存储。解决方法很简单在application.yml里给 JDBC 连接串后面加上serverTimezoneAsia/Shanghai重启后端。这个问题不影响功能跑通但影响观感答辩演示时被老师看到时间对不上多少会减印象分。6. 进阶一步给商城加「列表分页加载」和「订单搜索」的改造示范跑通源码只是起点要想拿高分你要让项目看起来像「你的作品」而不是「下载的模板」。最容易出效果的改造方向是给商品列表加上分页加载——这也是实际商城必备的交互热搜里的「微信小程序页面列表加载更多」就是指这个功能。代码逻辑不复杂后端加两个参数、小程序端改一段触底函数就能讲出「我优化了列表性能」的故事。先看后端改造。大多数毕设源码中的商品列表接口是一次性返回全部数据数据量少看不出来但你答辩时可以主动说「这个接口在高数据量下会变慢所以我加了分页」。修改ProductController中的查询方法接收page和size两个参数返回固定条数和总数GetMapping(/api/product/list) public Result getProductList(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { int offset (page - 1) * size; ListProduct list productMapper.selectPage(offset, size); int total productMapper.countAll(); return Result.ok(list, total); }这段代码的逻辑是page从 1 开始offset根据页码算出 SQL 的LIMIT起始位置size控制每页条数。对应的 Mapper 里用两条 SQL一条查当前页数据一条查总条数前端拿总数来算有没有下一页。参数说明默认值设为1和10是为了兼容旧请求——不传参数时也能正常返回第一页不会影响已有调用。前端小程序端在商品列表页监听滚动到底部事件触底时把page加一再请求下一页把新数据追加到数组末尾。判断是否还能加载用后端返回的总条数和当前已加载条数对比// 商品列表页 JS let currentPage 1; const pageSize 10; onReachBottom() { const total this.data.total; const loaded this.data.productList.length; if (loaded total) { this.setData({ hasMore: false }); // 全部加载完不再请求 return; } currentPage; this.loadProducts(currentPage); } loadProducts(page) { const baseUrl http://localhost:8080; wx.request({ url: baseUrl /api/product/list, data: { page: page, size: pageSize }, success: (res) { const newList this.data.productList.concat(res.data.data.list); this.setData({ productList: newList, total: res.data.data.total }); } }); }这里有一个容易出错的细节concat是新数组赋值不能直接用push后再setData因为小程序的数据绑定需要你传入一个全新的数组才能触发视图更新。hasMore是一个控制变量数据加载完时置为false避免触底后重复发无效请求。这个改造只要两个小时但答辩时你能讲出「列表性能优化」「按需加载」这些关键词效果完全不一样。第二个低成本改造是给订单列表加上按订单号模糊搜索。后端接口加一个可选的关键词参数Mapper XML 里写动态 SQL。需要注意 SQL 里LIKE的写法CONCAT(%, #{keyword}, %)很多新手直接写%${keyword}%那会产生 SQL 注入风险。这里顺便说句血泪经验我当年答辩前就是因为顺手用了${}拼参数被老师当场问了 SQL 注入怎么防答得磕磕绊绊差点翻车。后来养成的习惯是写 SQL 一律用#{}涉及 LIKE 模糊查询就用CONCAT拼接这个习惯也建议你带进后面的工作里。做完这两个改造建议你重新从用户注册到下单走一遍全流程确认分页加载没有影响数据正确性。这个验证过程本身就是你论文里「系统测试」章节的素材截图保存好。最后说一句我的个人习惯不管是下载的源码还是自己写的代码拿到手我都会先通读一遍核心接口再决定改哪里而不是边改边看——这个习惯帮我躲过了不少「改了半天发现源头是另一个文件」的坑。希望帮到你。本文还有配套的精品资源点击获取
