微信小程序商城+Java后台本地联调实战指南

简介这是一套完整的微信小程序商城前端与Java后台协同开发的源码项目面向中初级Java开发者及小程序学习者适用于技术研究、课程设计或小公司快速换皮开发新电商项目。资源包含1302个文件主体为197个JavaScript逻辑文件、193个GIF/PNG图片资源、88个CSS样式文件、70个Java业务类及72个编译后class文件辅以JSP、HTML、JSON等配套文件整体压缩包达77.87MB结构清晰模块划分明确涵盖商品管理、购物车、订单、登录等核心电商功能。已有648人下载学习内容预览显示包含GoodsAction、CarAction、LoginAction等典型业务控制器及BaseDaoImpl、DateUtils等基础工具类体现了典型的SSMSpringSpringMVCMyBatis架构实践便于理解前后端交互流程、数据库操作封装及小程序API对接方式。1. 微信小程序商城 Java 后台不是“拿来就能跑”的压缩包而是理解前后端协同边界的实战切口你下载了一个叫微信小程序商城java后台.zip的压缩包解压后看到miniprogram/和backend/两个文件夹心里一热“终于有完整商城了”——但很快卡在登录页白屏、商品列表空、后台启动报ClassNotFoundException。这不是源码有问题而是你误把「工程骨架」当成了「开箱即用的成品」。这个标题指向的是一套典型的微信生态轻量级电商技术组合前端用原生小程序框架非 uni-app 或 Taro后端用 Spring Boot MyBatis-Plus 构建 RESTful API数据库为 MySQL部署依赖本地或云服务器。它不解决高并发秒杀、分布式事务或支付合规审计但精准覆盖「从零搭起一个可演示、可调试、可二次开发的最小可行商城」的全部链路。适合刚学完 Java Web 和小程序基础、正卡在「怎么把两个端真正连通」这一关的开发者也适合需要快速验证某个模块比如微信手机号快速授权、订单状态机流转、SKU 库存扣减逻辑的中级工程师。它价值不在功能多全而在每一行代码都暴露真实调用路径——比如wx.login()返回的 code 怎么传给/api/auth/login接口、Java 后端怎么用WxMaService解密手机号、MyBatis-Plus 的TableName注解如何与小程序端字段名对齐。接下来我会带你把这堆源码从「解压即弃」变成「逐层可调试」的沙盒环境。2. 搭建本地可调试环境从解压到前后端联调成功的最小闭环拿到.zip包后第一反应不该是双击运行而是先确认它是否具备可复现性。我见过太多“源码包”实际缺失关键配置、数据库脚本或依赖版本说明。本节目标明确在你自己的 Windows/macOS 笔记本上50 分钟内让小程序前端能加载商品列表Java 后端能响应/api/goods/list请求并返回 JSON 数据。这不是理想化流程而是我反复踩坑后提炼出的最小可靠路径。2.1 确认项目结构与关键文件清单别跳过这步解压后先打开终端进入根目录执行tree -L 2 -I node_modules|.git|target|logs你应看到类似结构. ├── backend # Java Spring Boot 工程Maven │ ├── pom.xml # 关键看 spring-boot-starter-web 版本 │ ├── src │ │ └── main │ │ ├── java/com/example/mall/ # 主包路径 │ │ └── resources/ │ │ ├── application.yml # 数据库、微信配置在此 │ │ └── mapper/ # MyBatis XML 映射文件如有 ├── miniprogram # 小程序源码原生非 uni-app │ ├── app.js # 小程序生命周期入口 │ ├── project.config.json # 开发者工具配置含 AppID 占位符 │ ├── pages/ │ │ └── index/ # 首页重点看 index.js 中的 wx.request 调用 ├── docs/ # 可能存在的数据库表结构 SQL 文件命名常为 mall_schema.sql └── README.md # 但大概率是空的或只有“请自行配置”提示如果backend/src/main/resources/application.yml里spring.datasource.url是jdbc:mysql://localhost:3306/mall?...说明它默认期望你本地装了 MySQL 8.0若看到url: jdbc:h2:mem:testdb则是用 H2 内存数据库——后者启动快但无法持久化仅适合纯学习。我们按 MySQL 场景推进因它更贴近生产。22 配置 Java 后端三步启动不报错步骤 1初始化数据库必须手动执行找到docs/或backend/src/main/resources/下的 SQL 文件常见名mall_init.sql、schema.sql。用 MySQL 客户端执行-- 创建数据库编码必须 utf8mb4否则微信昵称emoji存不进去 CREATE DATABASE IF NOT EXISTS mall CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- 导入表结构注意只导入 DDL不导入测试数据 -- 执行 SQL 文件内容示例片段 CREATE TABLE goods ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 商品名称, price decimal(10,2) NOT NULL COMMENT 价格, stock int NOT NULL DEFAULT 0 COMMENT 库存, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;参数说明utf8mb4是硬性要求微信用户昵称可能含 emoji如 MySQL 的utf8实际只支持 3 字节会报错Incorrect string valueENGINEInnoDB支持事务后续扣库存需用。步骤 2修改 application.yml核心配置项打开backend/src/main/resources/application.yml重点改以下三处spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrueuseSSLfalse username: root # 你的 MySQL 用户名 password: your_password # 你的 MySQL 密码 driver-class-name: com.mysql.cj.jdbc.Driver # 微信配置小程序开发必备 wechat: miniapp: appid: wx1234567890abcdef # 替换为你自己申请的小程序 AppID开发版 secret: your_app_secret # 对应的 AppSecret在微信公众平台获取 msgDataFormat: json # MyBatis-Plus 日志调试神器 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印 SQL逻辑说明serverTimezoneAsia/Shanghai防止时间字段插入时区错误allowPublicKeyRetrievaltrueuseSSLfalse是 MySQL 8.0 连接必需参数否则报Public Key Retrieval is not allowedlog-impl开启后控制台会输出每条 SQL方便排查goods表查不到数据是 SQL 写错还是数据库没数据。步骤 3启动后端服务确保 JDK 11Spring Boot 2.7 要求、Maven 3.6 已安装。在backend/目录下执行mvn clean compile spring-boot:run成功标志控制台出现Tomcat started on port(s): 8080 (http)且无红色 ERROR。此时访问http://localhost:8080/api/goods/list应返回 JSON即使为空数组[]证明后端已就绪。2.3 配置小程序前端绕过 AppID 校验与域名限制微信开发者工具对未认证小程序有严格限制wx.request只能请求https://域名且域名需在后台配置。但本地调试时我们用「开发环境开关」绕过步骤 1修改 project.config.json关键找到miniprogram/project.config.json添加miniprogramRoot: ./miniprogram若不存在并确保{ description: 项目配置文件, packOptions: { ignore: [] }, setting: { urlCheck: false, // ⚠️ 必须设为 false否则 request 会被拦截 es6: true, enhance: true, postcss: true, preloadBackgroundImage: false, uploadWithSourceMap: true, domainWhiteList: [http://localhost:8080] // 允许请求本地后端 } }参数说明urlCheck: false是本地调试的生命线它关闭 HTTPS 强制校验domainWhiteList告诉开发者工具允许向http://localhost:8080发起请求注意是http不是https。步骤 2修改请求地址index.js 示例打开miniprogram/pages/index/index.js找到商品列表请求代码// 原始代码可能写死线上域名 // wx.request({ url: https://api.example.com/api/goods/list }) // 修改为本地后端地址 wx.request({ url: http://localhost:8080/api/goods/list, // 注意协议是 http method: GET, success: (res) { console.log(商品列表:, res.data); this.setData({ goodsList: res.data }); }, fail: (err) { console.error(请求失败:, err); } });逻辑说明小程序wx.request默认走 HTTPS但localhost无法配 SSL 证书所以必须用http://localhost:8080同时后端application.yml中server.port: 8080不能改否则前端地址要同步改。步骤 3在开发者工具中预览打开微信开发者工具选择「小程序」项目根目录选miniprogram/点击「编译」按钮或 CtrlB若控制台无红字报错且 Network 面板能看到http://localhost:8080/api/goods/list返回 200则前端已连通后端此时你已完成最核心的「本地联调闭环」——小程序发起请求 → Java 后端接收 → 查询数据库 → 返回 JSON → 小程序渲染。下一步才是业务逻辑的深水区。3. 关键业务模块拆解登录、商品、订单的三段式数据流光跑通接口只是起点。这个源码包的价值在于它把微信生态特有的鉴权链路、电商核心状态机、以及 Java 后端的数据持久化逻辑用最简方式串在一起。本节不讲理论只拆三个高频模块的真实代码路径和设计意图帮你理解「为什么这么写」。3.1 微信小程序登录与手机号获取两步鉴权的不可省略性小程序登录不是传统账号密码而是「code 换 session_key openId」再「encryptedData 解密手机号」。源码中通常分两步实现后端/api/auth/login接口JavaPostMapping(/login) public ResultMapString, Object login(RequestBody MapString, String params) { String code params.get(code); // 小程序 wx.login() 返回的临时 code // 1. 调用微信接口换取 session_key 和 openId WxMaJscode2SessionResult result wxMaService.getUserService() .getSessionInfo(code); // 使用 weixin-java-miniapp SDK String openId result.getOpenid(); String sessionKey result.getSessionKey(); // 2. 根据 openId 查询或创建用户关键 User user userService.getByOpenId(openId); if (user null) { user new User(); user.setOpenId(openId); user.setCreateTime(LocalDateTime.now()); userService.save(user); // MyBatis-Plus 保存 } // 3. 生成自定义 token非微信 token String token JwtUtil.generateToken(user.getId(), user.getOpenId()); MapString, Object data new HashMap(); data.put(token, token); data.put(userId, user.getId()); return Result.success(data); }参数说明JwtUtil.generateToken()是自定义 JWT 工具类生成含userId和openId的 token后续所有接口用此 token 鉴权userService.getByOpenId()是 MyBatis-Plus 的QueryWrapper查询避免重复创建用户。小程序端获取手机号bindgetphonenumber!-- index.wxml -- button open-typegetPhoneNumber bindgetphonenumberonGetPhoneNumber 一键登录 /button// index.js onGetPhoneNumber(e) { if (e.detail.code) { // 1. 将 encryptedData 和 iv 发送给后端 wx.request({ url: http://localhost:8080/api/auth/get-phone, method: POST, data: { encryptedData: e.detail.encryptedData, iv: e.detail.iv, token: wx.getStorageSync(token) // 上一步登录返回的 token }, success: (res) { console.log(手机号:, res.data.phoneNumber); // 存储手机号到用户表 } }); } }逻辑说明bindgetphonenumber是微信原生组件用户点击后触发e.detail包含加密数据后端用WxMaService.getPhoneNoInfo()解密必须传入当前用户的sessionKey从 Redis 或数据库根据openId获取否则解密失败。这是新手最常翻车点以为sessionKey是全局的实际它是 per-user per-session 的。3.2 商品管理MyBatis-Plus 自动生成建表 SQL 的实操标题中提到的「mybatisplus根据java实体类生成创建表的sql语句」正是这个源码包后端的核心便利点。它避免手写 SQL但需正确配置。实体类标注Goods.javaimport com.baomidou.mybatisplus.annotation.*; Table(name goods) // 显式指定表名避免驼峰转下划线出错 public class Goods { TableId(type IdType.AUTO) // 主键自增 private Long id; TableField(name) // 显式指定字段名与数据库列名一致 private String name; TableField(price) private BigDecimal price; TableField(stock) private Integer stock; // getter/setter 省略 }参数说明Table(name goods)强制映射到goods表TableField(name)避免 MP 自动将name转成name_因 MP 默认开启camelCaseToUnderscoreIdType.AUTO对应 MySQL 的AUTO_INCREMENT。启动生成建表 SQL开发期一次性操作在backend/src/main/java/com/example/mall/config/MybatisPlusConfig.java中添加Bean public MybatisPlusAutoGenerator autoGenerator() { // 配置包路径、数据源等... // 关键设置 strategy StrategyConfig strategy new StrategyConfig(); strategy.setInclude(goods, order, user); // 指定要生成的表 strategy.setRestControllerStyle(true); strategy.setControllerMappingHyphenStyle(true); // ...其他配置 return new MybatisPlusAutoGenerator(strategy); }然后运行MybatisPlusAutoGenerator.main()方法它会扫描TableName注解的实体类生成对应CREATE TABLE语句并输出到控制台。注意生成的 SQL 需手动执行到数据库MP 不会自动建表。3.3 订单状态流转从「待支付」到「已完成」的状态机雏形电商核心是状态一致性。该源码包的订单模块虽简但体现了关键设计订单实体状态字段Order.javapublic class Order { // ...其他字段 TableField(status) private Integer status; // 1-待支付 2-已支付 3-已发货 4-已完成 5-已取消 // 状态常量避免魔法数字 public static final int STATUS_WAIT_PAY 1; public static final int STATUS_PAID 2; public static final int STATUS_SHIPPED 3; public static final int STATUS_COMPLETED 4; public static final int STATUS_CANCELLED 5; }更新状态的 Service 方法防并发扣库存Transactional // 必须加事务 public boolean updateStatus(Long orderId, Integer newStatus, Integer oldStatus) { // 乐观锁只更新 oldStatus 匹配的记录 UpdateWrapperOrder wrapper new UpdateWrapper(); wrapper.eq(id, orderId) .eq(status, oldStatus); // 例如从 1→2必须当前是 1 才能更新 Order order new Order(); order.setStatus(newStatus); order.setUpdateTime(LocalDateTime.now()); return this.update(order, wrapper); // MyBatis-Plus 的条件更新 }逻辑说明updateStatus(..., 1, 2)表示「将订单 ID 为 X 的订单从待支付1更新为已支付2」UpdateWrapper的eq(status, oldStatus)是关键防止重复支付导致状态错乱Transactional保证更新订单状态和扣减库存在一个事务内。4. 避坑指南本地调试阶段的 5 个血泪经验这 5 条全是我在搭建同类项目时花 2-8 小时不等才定位到的根本原因。它们不显眼但足以让你卡在「明明代码没错却跑不通」的玄学状态。4.1 现象小程序wx.request报request:fail net::ERR_CONNECTION_REFUSED原因后端服务根本没启动或启动端口被占用如 8080 被 Tomcat 占用。解决执行netstat -ano | findstr :8080Windows或lsof -i :8080macOS查占用进程kill -9 PID结束检查backend/src/main/resources/application.yml中server.port是否为 8080默认是若改过前端url必须同步改启动后端时观察控制台最后一行是否为Started Application in X seconds而非Application run failed。4.2 现象后端日志显示SQLSyntaxErrorException: Table mall.goods doesnt exist原因数据库mall已创建但goods表未执行建表 SQL。解决确认 SQL 文件中的CREATE TABLE语句是否以;结尾部分编辑器会删掉在 MySQL 客户端执行USE mall; SHOW TABLES;看goods是否在列表中如果用的是 H2 内存数据库application.yml中url含h2则无需手动建表但重启应用后数据丢失——这是 H2 特性非 bug。4.3 现象小程序登录后/api/auth/login返回{code:500,msg:invalid appid}原因application.yml中wechat.miniapp.appid或secret填错或该 AppID 未在微信公众平台开通「小程序」服务。解决登录 微信公众平台 → 「开发」→ 「开发管理」→ 「开发AppID」核对appid「开发设置」→ 「服务器域名」→ 「request 合法域名」填localhost仅开发版有效secret在「开发设置」→ 「AppSecret」旁点击「重置」获取重置后旧 secret 失效。4.4 现象商品列表返回空数组[]但数据库goods表有数据原因MyBatis-Plus 的TableField字段名与数据库列名不匹配导致查询条件失效。解决查看后端控制台打印的 SQLlog-impl: StdOutImpl开启后如SELECT * FROM goods WHERE name LIKE ?确认WHERE条件是否合理检查Goods.java中TableField(name)的字符串是否与数据库goods表的列名完全一致区分大小写MySQL 在 Linux 下列名区分大小写若数据库列为goods_name则TableField(goods_name)而非TableField(name)。4.5 现象微信手机号解密失败返回{code:500,msg:Illegal Buffer}原因小程序端传给后端的encryptedData和iv是 base64 编码但后端未解码直接传给微信 SDK。解决后端接收参数时必须先 base64 解码String encryptedData new String(Base64.getDecoder().decode(params.get(encryptedData))); String iv new String(Base64.getDecoder().decode(params.get(iv)));确保WxMaService.getPhoneNoInfo()的第三个参数sessionKey是从数据库根据openId查出的最新值而非缓存的老值。5. 进阶验证与可扩展技巧用 Postman 测试接口、用 Swagger 文档化、用 Docker 一键部署当你已跑通本地联调下一步不是急着加功能而是建立可持续验证和交付的能力。本节提供三个真实项目中高频使用的技巧每个都能节省你未来 30% 的联调时间。5.1 用 Postman 手动测试后端接口替代小程序前端小程序开发者工具的 Network 面板只能看请求无法构造复杂参数。Postman 是后端接口的「万能探针」步骤测试登录接口新建 RequestMethod 选POSTURL 填http://localhost:8080/api/auth/loginBody → raw → JSON输入{ code: 013JXxl003ZcOq1Kuwl00Yknl00JXxlP // 用真 code从小程序 wx.login() 获取 }Send查看返回的token和userId将token复制用于后续接口的 Authorization HeaderAuthorization: Bearer your_token价值点当小程序前端逻辑混乱时用 Postman 直接验证后端是否正常快速定位问题是前端还是后端。例如/api/goods/list返回空用 Postman 调用发现同样为空则问题在 Java 层如数据库没数据或 SQL 写错若 Postman 返回正常而小程序不显示则问题在前端setData或 WXML 渲染逻辑。5.2 用 Swagger 为 Java 后端生成交互式文档微信小程序商城java后台.zip通常不带接口文档靠读代码效率极低。集成 Swagger 两步搞定步骤 1添加依赖pom.xmldependency groupIdio.springfox/groupId artifactIdspringfox-swagger2/artifactId version2.9.2/version /dependency dependency groupIdio.springfox/groupId artifactIdspringfox-swagger-ui/artifactId version2.9.2/version /dependency步骤 2配置 Swagger ConfigJava 类Configuration EnableSwagger2 public class SwaggerConfig { Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.basePackage(com.example.mall.controller)) .paths(PathSelectors.any()) .build() .apiInfo(apiInfo()); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title(微信小程序商城 API 文档) .version(1.0) .build(); } }启动后访问http://localhost:8080/swagger-ui.html所有RestController接口自动列出可直接试用。比手写 Markdown 文档强十倍——参数类型、示例、返回值一目了然。5.3 用 Docker 一键部署到云服务器告别环境差异本地跑通 ≠ 线上可用。Docker 封装环境让backend/和miniprogram/在任何 Linux 服务器上行为一致后端 Dockerfilebackend/DockerfileFROM openjdk:11-jre-slim VOLUME /tmp ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]构建命令cd backend mvn clean package docker build -t mall-backend .Nginx 配置小程序静态资源miniprogram/build/server { listen 80; server_name your-domain.com; location / { alias /var/www/miniprogram/; # 将小程序 build 目录挂载至此 index index.html; try_files $uri $uri/ /index.html; } # 代理 API 到后端容器 location /api/ { proxy_pass http://mall-backend:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }我的习惯本地开发用http://localhost:8080上线前用 Docker Compose 统一管理# docker-compose.yml version: 3.8 services: mall-backend: image: mall-backend ports: [8080:8080] environment: - SPRING_PROFILES_ACTIVEprod nginx: image: nginx:alpine ports: [80:80] volumes: - ./nginx.conf:/etc/nginx/nginx.conf - ./miniprogram/build:/var/www/miniprogram执行docker-compose up -d整个商城就跑起来了。这是我给自己留的后悔药——每次新服务器部署5 分钟搞定不用再查 JDK 版本、MySQL 驱动兼容性、防火墙端口。希望帮到你。本文还有配套的精品资源点击获取