简介这是一套基于Java与uniapp开发的智能小程序商城系统源码面向具备一定Java与前端基础的开发者、计算机专业学生及需要搭建电商项目的团队可用于课程设计、毕业设计或二次开发。系统涵盖管理员、商家、用户三类角色实现商品发布与编辑、用户注册登录与信息修改、商品浏览下单支付、商品分类与订单后台管理以及图片上传等功能后端采用Java编写数据存储使用MySQL。压缩包共1449个文件约23.86MB其中vue与js文件构成前端页面与交互逻辑java文件承载后端业务json、yml负责配置png、jpg、svg等为界面素材另有sql脚本与bat启动脚本目录结构完整。已有36人学习下载。读者可据此获得一套可直接部署运行的全栈商城项目参照application.yml中的数据库配置说明快速完成环境搭建并借助现有模块理解前后端分离架构、订单流程与后台管理实现适合作为全栈开发练习与项目参考。1. 从一份 Java uniapp 商城源码说起它到底能跑出什么拿到「基于 Java 和 uniapp 的智能小程序商城系统」这类源码包多数人的第一反应是解压、找 README、翻配置文件然后卡在第一步——后端跑不起来前端连不上接口。这不是源码质量问题而是这类项目天然横跨两个技术栈Java 后端负责商品、订单、用户、支付等业务逻辑uniapp 前端负责编译成微信小程序、H5 甚至 App。两边各有各的构建链路任何一端配置错位整个商城就只剩一个白屏。这篇笔记面向三类人想拿这套源码做二次开发的 Java 工程师、想学 uniapp 小程序商城完整链路的移动端开发者、以及需要快速验证一套商城方案能不能落地的技术负责人。核心要解决的问题很具体——后端怎么起、数据库怎么建、前端怎么连、小程序怎么打包上线、哪些参数一改就翻车。不聊虚的架构演进只讲从源码到能下单支付的完整路径。2. 后端先跑通Java 商城工程的启动链路与数据库初始化2.1 技术栈识别与依赖梳理拿到源码后不要急着mvn spring-boot:run先花十分钟把工程结构看清楚。典型的 Java 商城后端常见组合是 Spring Boot MyBatis-Plus MySQL Redis部分项目会引入 JWT 做登录态、RabbitMQ 做订单异步。打开pom.xml重点看三样东西Spring Boot 版本、MyBatis-Plus 版本、以及有没有引入微信支付或支付宝的 SDK。版本决定了 JDK 要求——Spring Boot 2.x 用 JDK 8 或 11Spring Boot 3.x 强制 JDK 17 起步这个搞错后面全是编译报错。配置文件一般在src/main/resources/application.yml或application-dev.yml。需要改的关键项包括数据库连接、Redis 地址、文件上传路径、以及微信小程序的 appid 和 secret。很多源码包默认连的是作者本机的localhost:3306数据库名和密码都是占位符不改必然启动失败。提示如果pom.xml里出现了mybatis-plus-generator说明项目可能自带代码生成器建表 SQL 可以从实体类反推不一定非要找.sql文件。2.2 数据库建表与 MyBatis-Plus 实体映射商城系统的表结构通常围绕几张核心表展开user用户、goods商品、goods_category分类、order订单、order_item订单明细、cart购物车、address收货地址。如果源码包里没有现成的.sql文件可以用 MyBatis-Plus 的实体类反向生成建表语句。下面这段代码演示如何从实体类提取表名和字段// 基于 MyBatis-Plus 注解反推建表 SQL 的核心逻辑 public String generateCreateTableSql(Class? entityClass) { TableName tableName entityClass.getAnnotation(TableName.class); StringBuilder sql new StringBuilder(CREATE TABLE ) .append(tableName.value()).append( (\n); for (Field field : entityClass.getDeclaredFields()) { TableId tableId field.getAnnotation(TableId.class); TableField tableField field.getAnnotation(TableField.class); if (tableField ! null !tableField.exist()) continue; // 跳过非数据库字段 String columnName tableField ! null ? tableField.value() : camelToUnderscore(field.getName()); String columnType mapJavaTypeToMysql(field.getType()); sql.append( ).append(columnName).append( ).append(columnType); if (tableId ! null) sql.append( NOT NULL AUTO_INCREMENT PRIMARY KEY); sql.append(,\n); } sql.setLength(sql.length() - 2); // 去掉最后一个逗号 sql.append(\n) ENGINEInnoDB DEFAULT CHARSETutf8mb4;); return sql.toString(); }这段逻辑的关键在于TableName拿表名TableField拿字段名TableId标记主键。camelToUnderscore负责把 Java 的驼峰命名转成 MySQL 的下划线命名比如goodsName转成goods_name。mapJavaTypeToMysql做类型映射String对应varchar(255)BigDecimal对应decimal(10,2)LocalDateTime对应datetime。实际建表时还要根据业务补上索引比如order表的user_id和order_no必须加索引否则订单量一上来查询就慢。建完表后检查application.yml里的mybatis-plus.mapper-locations是否指向了正确的 XML 目录。有些项目用纯注解 Mapper有些用 XML混用会导致Invalid bound statement错误。2.3 启动类与常见启动失败排查启动类通常带SpringBootApplication和MapperScan。MapperScan的包路径必须覆盖所有 Mapper 接口写错了启动时报Consider defining a bean of type xxxMapper。启动命令用mvn spring-boot:run或直接跑main方法都行但建议先mvn clean package -DskipTests打一次包确认编译没问题。启动失败的常见原因按出现频率排数据库连不上检查 MySQL 是否启动、端口、账号密码、时区参数serverTimezoneAsia/Shanghai、Redis 连不上检查redis.host和redis.port、端口被占用改server.port、以及 JDK 版本不匹配。如果日志里出现Table xxx doesnt exist说明建表 SQL 没执行或数据库选错了。3. uniapp 前端对接从 HBuilderX 到微信开发者工具的完整链路3.1 项目导入与 manifest 配置要点uniapp 项目用 HBuilderX 打开最省事因为 HBuilderX 内置了 uniapp 的编译器和微信小程序模拟器。导入后第一件事是改manifest.json这里面的appid必须换成你自己在微信公众平台申请的小程序 appid否则微信开发者工具无法预览。manifest.json里还有几个关键配置mp-weixin.setting.urlCheck设为false可以在开发阶段跳过域名校验mp-weixin.appid填小程序 appidh5.router.base决定 H5 端的路由前缀。如果项目用了 TypeScript检查根目录有没有tsconfig.json和shims-uni.d.ts。uniapp 创建项目时支持 TS但老项目迁移过来经常缺类型声明导致uni.request报红。补一个shims-uni.d.ts声明文件就能解决。3.2 接口请求封装与后端联调商城前端的接口请求一般封装在utils/request.js或api/目录下。核心是用uni.request做统一拦截处理 token 注入、错误码提示、loading 状态。下面是一个典型的请求封装// utils/request.js —— uniapp 统一请求封装 const BASE_URL http://192.168.1.100:8080/api; // 后端地址真机调试时不能写 localhost const request (options) { return new Promise((resolve, reject) { uni.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header: { Content-Type: application/json, Authorization: uni.getStorageSync(token) || // 从本地缓存取登录态 }, success: (res) { if (res.statusCode 200 res.data.code 0) { resolve(res.data.data); // 业务成功返回 data 字段 } else if (res.data.code 401) { uni.navigateTo({ url: /pages/login/login }); // token 过期跳登录 reject(res.data); } else { uni.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res.data); } }, fail: (err) { uni.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); }; export default request;这段封装里BASE_URL在开发阶段指向局域网 IP因为微信开发者工具虽然能访问localhost但真机预览时手机和电脑不在同一网络环境下就请求不到。Authorization头注入 token 是商城登录态的标准做法后端用 JWT 解析。code 0是常见的业务成功码具体值要看后端Result类的定义。联调时如果遇到跨域H5 端可以在manifest.json的h5.devServer.proxy里配代理但微信小程序端没有跨域概念只要域名在微信后台配了request 合法域名就能通。开发阶段可以在微信开发者工具里勾选「不校验合法域名」绕过。3.3 微信小程序打包与体积优化打包微信小程序用 HBuilderX 的「发行 → 小程序-微信」它会调用微信开发者工具生成dist/dev/mp-weixin或dist/build/mp-weixin目录。这里最容易翻车的是体积超限——微信小程序主包限制 2MB整个项目不超过 20MB。如果编译报source size xxx KB exceed max limit 2MB说明主包塞了太多东西。优化手段按效果排序把非首屏页面放到分包pages.json里配subPackages、图片资源上传到 CDN 而不是打包进项目、开启manifest.json里的mp-weixin.optimization.subPackages分包优化。还有一个容易被忽略的点uni_modules里装了太多用不到的插件删掉能省不少体积。注意微信开发者工具的「详情 → 本地设置」里勾选「上传时压缩代码」和「上传时进行代码保护」能进一步减小上传体积但调试阶段不要勾否则 sourcemap 丢失没法定位报错。4. 商城核心业务链路登录、商品、订单、支付四个环节的落地细节4.1 微信小程序登录与手机号获取微信小程序的登录流程是前端调uni.login拿code把code发给后端后端用codeappidsecret调微信接口换openid和session_key然后生成自己的 token 返回前端。这个流程里code只能用一次且五分钟内有效。获取手机号需要用户点击按钮触发getPhoneNumber拿到加密的encryptedData和iv后端用session_key解密。注意这个能力需要小程序主体是企业认证个人小程序拿不到手机号。解密代码用微信官方提供的WXBizDataCrypt工具类Java 版本在微信文档里有直接拷过来改包名即可。4.2 商品列表与详情的数据结构商品列表接口一般返回分页数据包含goodsId、goodsName、goodsImage、price、sales等字段。前端用uni.request拿到后渲染到scroll-view或view列表里。详情页需要额外拿商品图集、规格参数、SKU 列表。SKU 是商城系统里最容易出 bug 的地方——多规格组合的价格和库存计算建议后端在商品详情接口里直接返回所有 SKU 组合的skuId、specs、price、stock前端只做展示和选择不做计算。4.3 订单创建与支付回调下单接口需要传goodsId、skuId、quantity、addressId后端校验库存、计算总价、生成订单号、写入order和order_item表。订单号建议用「时间戳 用户 ID 后四位 随机数」的格式避免自增 ID 暴露业务量。支付环节微信小程序用uni.requestPayment后端需要先调微信统一下单接口拿prepay_id再签名返回给前端。支付成功后的回调接口必须做幂等处理——微信会重复通知用订单号做唯一索引重复通知直接返回成功。回调里还要更新订单状态、扣减库存、增加销量这些操作建议放在同一个事务里。5. 避坑与排查这套源码最容易翻车的五个地方5.1 后端启动报「Access denied for user」现象启动日志里出现java.sql.SQLException: Access denied for user rootlocalhost。原因application.yml里的数据库密码和本机 MySQL 密码不一致或者 MySQL 8 的caching_sha2_password认证插件导致旧版驱动连不上。解决确认密码无误后把 JDBC URL 里的useSSL设为false并升级mysql-connector-java到 8.x 版本。如果还不行在 MySQL 里执行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 新密码;。5.2 uniapp 编译到微信小程序白屏现象HBuilderX 编译成功微信开发者工具打开后页面全白控制台无报错。原因manifest.json里的appid是测试号或空值或者pages.json里第一个页面路径写错。解决检查manifest.json → mp-weixin → appid是否填了真实 appid检查pages.json的pages数组第一项是否是登录页或首页路径不要带.vue后缀。5.3 接口请求返回 404 或 502现象前端调接口报 404或者 Nginx 返回 502。原因BASE_URL指向的地址不对或者后端服务没启动、Nginx 反代配置错误。解决先在浏览器或 Postman 里直接访问后端接口确认后端正常再检查前端BASE_URL是否带了/api前缀和后端server.servlet.context-path是否一致。真机调试时把BASE_URL换成电脑的局域网 IP不要用localhost。5.4 微信支付回调不触发现象用户支付成功但订单状态还是「待支付」。原因回调地址没配、回调地址不是 HTTPS、或者回调接口被 Spring Security 拦截了。解决在微信商户平台配置notify_url必须是公网可访问的 HTTPS 地址在 Spring Security 配置里放行回调路径比如.antMatchers(/api/pay/notify/**).permitAll()。回调接口里加日志确认微信到底有没有发通知过来。5.5 小程序上传代码体积超 2MB现象微信开发者工具点上传提示source size xxx KB exceed max limit 2MB。原因主包包含了太多页面和静态资源。解决在pages.json里配置subPackages把商品详情、订单列表等非首屏页面移到分包图片全部走 CDN删除uni_modules里未使用的插件开启manifest.json里的mp-weixin.optimization.subPackages: true。6. 二次开发进阶把商城改成多商户或加新支付渠道的实操思路源码跑通只是起点真正有价值的是二次开发。最常见的两个方向是多商户和新增支付渠道。多商户改造的核心是加一层merchant表商品、订单都挂merchant_id后端接口按merchant_id做数据隔离。MyBatis-Plus 可以用InterceptorIgnore配合自定义拦截器实现行级权限在 SQL 里自动拼WHERE merchant_id ?。前端需要加商户入驻页面和商户后台工作量不小但架构上就是加字段和加过滤条件。新增支付渠道比如云闪付或汇付天下思路是抽象一个PayService接口定义createOrder、queryOrder、refund、notify四个方法微信支付和支付宝各写一个实现类用策略模式在运行时选择。回调接口统一走/api/pay/notify/{channel}根据channel路由到对应实现。这样加新渠道不用改订单主流程。验证改造是否成功我一般用三个检查点下单后数据库order表的merchant_id和pay_channel字段是否正确写入支付回调后订单状态和库存是否在同一个事务里更新退款时金额是否原路返回。这三个点过了基本就能上线试运行。我自己踩过最深的坑是回调幂等——早期没加唯一索引微信重复通知导致库存扣了两次最后靠对账才查出来。从那以后任何支付回调接口我第一件事就是加数据库唯一约束第二件事是写日志。希望帮到你。本文还有配套的精品资源点击获取
