简介这是一套面向计算机专业学生与Java后端开发初学者的微信小程序购物商城完整项目适合作为课程设计、毕业设计或技能实训的参考方案。项目采用微信小程序前端搭配Java后端实现商品分类与关键字检索、购物车增减数量、订单提交与收货地址管理以及管理员在Web端处理待发货订单、填写物流信息、管理商品与图片、回复用户评价等完整业务闭环。压缩包共1539个文件约10.27MB涵盖176个Java源文件、305个JavaScript脚本、385个HTML页面、219张PNG与185张GIF素材以及WXML、WXSS、XML、SQL、JSON等配置与数据库文件前后端与文档说明齐备。已有205人学习下载。源码均经本地编译可运行评审分达95分以上难度适中且经助教老师审定读者可据此掌握小程序与Java后端联调、订单状态流转及后台管理的实现思路。1. 微信小程序购物商城带 Java 后端一套能跑通的前后端分离实战骨架很多人第一次接触「微信小程序购物商城 app 设计带 Java 后端 源代码 文档说明 数据库」这类打包项目第一反应是解压、导入、点运行然后卡在登录接口 500。我当年也这样翻车翻得挺彻底。这套东西的本质不是「一个能直接上线的商城」而是一套前后端分离项目实战的完整骨架小程序端负责页面渲染和交互Java 后端负责业务逻辑和鉴权数据库负责商品、订单、用户三类核心数据的落地。它适合两类人——想拿一个真实项目练手 Java 后端和微信小程序联调的新手以及需要一份结构完整、能改能扩的课程设计或毕设底稿的人。真正值钱的不是那堆源代码本身而是它把「小程序怎么调后端、后端怎么连数据库、数据库表怎么设计」这条链路完整摆在你面前。下面我按自己复现和改造这套东西的顺序把每一步讲透。2. 先看清这套商城骨架的四个组成部分2.1 小程序端、Java 后端、数据库、文档各自管什么拿到一个压缩包别急着跑。先按目录把职责拆开看这是避免后面瞎改的前提。常见做法是根目录下分三块小程序源码目录、后端 Java 工程目录、数据库脚本目录外加一份文档说明。小程序端通常用原生微信小程序语法或 uni-app 打包页面包括首页商品列表、商品详情、购物车、订单确认、个人中心这几类。Java 后端一般是 Spring Boot 单体对外暴露 REST 接口对内用 MyBatis 或 JPA 操作数据库。数据库脚本是.sql文件建库建表加初始数据。组成部分典型技术职责你要先确认的点小程序端原生 / uni-app页面渲染、调接口、本地缓存接口 baseURL 写在哪Java 后端Spring Boot MyBatis业务逻辑、鉴权、返回 JSON端口、数据库连接配置数据库MySQL存用户、商品、订单字符集、初始数据是否齐全文档说明Markdown / Word部署步骤、接口清单接口路径和实际代码是否一致先确认这四块能不能对上号比直接点运行重要得多。文档里写的接口路径经常和代码里的RequestMapping对不上这是打包项目最常见的坑之一。2.2 数据库表结构决定了后端能写多顺商城类项目的表设计基本绕不开用户、商品、分类、购物车、订单、订单明细这几张。你打开.sql文件重点看三件事主键是不是自增、外键关联有没有、金额字段用的什么类型。金额千万别用 float用decimal(10,2)这是血泪经验用 float 算总价会出现 0.10.2 那种玄学误差。-- 商品表核心字段示例 CREATE TABLE product ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, category_id BIGINT NOT NULL COMMENT 分类ID, name VARCHAR(128) NOT NULL COMMENT 商品名, price DECIMAL(10,2) NOT NULL DEFAULT 0.00 COMMENT 单价禁用float, stock INT NOT NULL DEFAULT 0 COMMENT 库存, cover_url VARCHAR(255) DEFAULT NULL COMMENT 封面图, status TINYINT NOT NULL DEFAULT 1 COMMENT 1上架 0下架, PRIMARY KEY (id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这段建表语句里DECIMAL(10,2)保证金额精确到分utf8mb4保证商品名里的 emoji 和生僻字不乱码idx_category让按分类查商品不至于全表扫描。参数上stock用 INT 而不是无符号是为了后面做库存扣减时能出现负数报警而不是直接溢出。你如果拿到的是别人写好的脚本先跑一遍看有没有报错再决定要不要改字段类型。2.3 后端接口清单要先跑通再谈改功能后端能不能起来取决于三处配置数据库连接、端口、以及接口前缀。打开application.yml或application.properties把数据库地址、账号密码改成你本地的然后启动。启动成功后别急着连小程序先用浏览器或接口工具测一个最简单的接口比如商品列表。# 启动后端Maven 项目常见方式 mvn spring-boot:run # 另开终端测商品列表接口 curl http://localhost:8080/api/product/list?page1size10mvn spring-boot:run会按pom.xml拉依赖并启动内嵌 Tomcat默认端口看配置文件。curl那条命令里的page和size是分页参数商城列表几乎都要分页这也是热搜里「微信小程序页面列表加载更多」对应的后端能力。如果返回一堆 JSON 数据说明后端和数据库通了如果报 500先看控制台异常栈八成是数据库连不上或表不存在。这一步跑通后面小程序联调才有意义。3. 把小程序端和后端接起来的最小闭环3.1 改 baseURL 和配置合法域名小程序调后端第一步是把请求地址指到你自己的后端。原生小程序一般在utils/request.js或app.js里封装了请求方法找到里面的 baseURL 改成你后端的地址。本地开发时微信开发者工具里要勾选「不校验合法域名」否则localhost会被拦。// utils/request.js 常见封装 const BASE_URL http://localhost:8080/api; function request(options) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL options.url, // 拼接完整接口路径 method: options.method || GET, data: options.data || {}, header: { content-type: application/json }, success: (res) { if (res.statusCode 200) { resolve(res.data); } else { reject(res); // 非200统一走失败分支 } }, fail: reject }); }); } module.exports { request };这段封装把wx.request包成 Promise方便页面里用 async/await。BASE_URL是唯一需要改的地址header里声明 JSON 格式后端才能正确解析。注意statusCode 200这个判断很多打包项目后端返回的是{code:200, data:...}这种业务码那就要改成判断res.data.code别照抄。改完在首页调一次商品列表能在控制台看到数据闭环就成了一半。3.2 列表加载更多怎么接后端分页热搜里「微信小程序页面列表加载更多」是高频需求商城首页、订单列表都要用。核心是维护一个页码触底时页码加一再请求下一页把新数据拼到旧数组后面。Page({ data: { list: [], page: 1, size: 10, hasMore: true }, onLoad() { this.loadList(); }, loadList() { if (!this.data.hasMore) return; // 没有更多就不再请求 request({ url: /product/list, data: { page: this.data.page, size: this.data.size } }).then(res { const newList res.data.records || []; this.setData({ list: this.data.list.concat(newList), // 拼接而非覆盖 page: this.data.page 1, hasMore: newList.length this.data.size // 满页说明可能还有 }); }); }, onReachBottom() { this.loadList(); } // 触底加载 });concat而不是直接赋值是为了保留已加载的数据。hasMore用「本页数量是否等于 size」判断是常见简化做法更严谨的应该用后端返回的总条数。onReachBottom是小程序页面触底的生命周期不用自己监听滚动。参数上size别设太大10 到 20 比较稳太大首屏慢太小请求频繁。3.3 登录态和购物车数据怎么串起来商城离不开登录。常见做法是小程序端调wx.login拿 code传给后端换 openid后端生成 token 返回之后请求带 token。购物车数据可以存后端也可以先存本地缓存登录后再合并。// 登录并保存 token wx.login({ success: (res) { request({ url: /user/login, method: POST, data: { code: res.code } }).then(r { wx.setStorageSync(token, r.data.token); // 本地存token }); } });wx.login的 code 只能用一次后端拿它去换 openid。wx.setStorageSync把 token 存本地后续请求在 header 里带上。这里要注意token 别写死在代码里也别放全局变量页面刷新就丢。购物车如果存本地用wx.setStorageSync(cart, ...)登录后调一个合并接口把本地购物车推到后端这是比较顺的路径。4. 避坑与排查这套打包项目最容易翻车的地方4.1 后端启动报数据库连接失败现象启动就抛Communications link failure或Access denied。原因通常是配置文件里的数据库地址、端口、账号密码和你本地不一致或者 MySQL 没启动。解决先确认 MySQL 服务在跑再用命令行mysql -u root -p登一次然后逐项核对application.yml里的url、username、password。注意 url 里的时区和字符集参数serverTimezoneAsia/Shanghai和characterEncodingutf8建议都带上否则时间字段和中文容易出问题。4.2 小程序请求全部失败但后端日志没反应现象小程序控制台报请求失败后端一条日志都没有。原因基本是请求根本没发出去被域名校验拦了或者 baseURL 写错。解决开发者工具里勾选「不校验合法域名」确认 baseURL 的端口和后端一致确认后端确实在监听那个端口。如果用了真机调试localhost 要换成电脑局域网 IP手机和电脑得在同一网络下。4.3 商品图片不显示现象列表有数据但图片是空白。原因通常是数据库里存的是相对路径或本地路径小程序加载不到。解决把图片路径改成完整 URL或者把图片放到后端静态资源目录并通过后端地址访问。检查cover_url字段里存的值如果是D:\images\1.jpg这种肯定不行。常见做法是后端提供一个静态资源映射图片走http://后端地址/images/xxx.jpg。4.4 下单后库存没扣或扣成负数现象下单成功但库存不变或者并发下库存变负。原因是没有做库存扣减或者扣减语句没加条件。解决扣库存时用带条件的更新UPDATE product SET stock stock - 1 WHERE id ? AND stock 0根据影响行数判断是否成功。别先查再改那样并发下必出问题。这是商城类项目最典型的坑打包项目里经常只写了查询没写扣减。4.5 文档里的接口和代码对不上现象照着文档调接口一直 404。原因打包项目文档往往是早期版本代码改过但文档没更新。解决以后端代码为准全局搜RequestMapping和GetMapping把真实路径列出来。别死磕文档文档只能当参考。我一般会先把所有 Controller 扫一遍自己整理一份真实接口清单再动手。5. 把这套骨架改成能拿得出手的作品5.1 先做减法再做加法这套打包项目功能往往堆得很全但代码质量参差。我的习惯是先做减法把用不到的功能模块注释掉或删掉只留商品、购物车、订单这条主链路跑通之后再逐个加回。这样出问题时排查范围小。加法阶段优先补三样接口统一返回格式、全局异常处理、参数校验。这三样加上去代码立刻像个正经项目。// 统一返回格式示例 public class ResultT { private int code; private String msg; private T data; public static T ResultT ok(T data) { ResultT r new Result(); r.code 200; r.msg success; r.data data; return r; } public static T ResultT fail(String msg) { ResultT r new Result(); r.code 500; r.msg msg; return r; } }统一返回格式的好处是小程序端只用判断一个code字段不用每个接口写一套解析逻辑。ok和fail两个静态方法覆盖绝大多数场景。加上RestControllerAdvice做全局异常捕获后端抛异常时也能返回统一格式而不是一坨 HTML 错误页。5.2 用接口文档工具替代手写文档手写文档一定会过期。常见做法是引入 Swagger 或 Knife4j在代码里加注解启动后自动生成接口文档。这样接口改了文档自动更新小程序端同学也能直接在线调试。加依赖、加配置类、加注解三步网上例子很多这里不展开。重点是养成「代码即文档」的习惯比维护一份 Word 靠谱得多。5.3 数据库改动要留脚本改表结构时别直接在数据库里点要写成.sql脚本存起来。比如加一个字段就写一个alter table脚本按日期命名。这样换台机器或者交给别人跑一遍脚本就能还原。我吃过亏本地改完没记录换电脑后死活想不起来改了啥。数据库同步软件可以用但脚本才是后悔药。5.4 验证这套东西值不值得投入判断标准很简单你能不能在不看文档的情况下自己把「小程序点商品 → 后端查数据库 → 返回 JSON → 页面渲染」这条链路讲清楚并复现。能说明这套骨架已经被你吃透可以往上加功能或者写进简历不能说明还停在「能跑但不懂」的阶段建议把请求封装、Controller、Service、Mapper 四层各挑一个接口逐行读一遍。这套东西的价值不在代码本身而在于它给了你一条完整链路去练手。我现在的习惯是拿到任何打包项目先跑通主链路再画一张请求流转图画不出来就说明没懂。希望帮到你。本文还有配套的精品资源点击获取
