微信小程序购物商城Java后端全流程解析与部署避坑指南

简介基于微信小程序购物商城App设计并搭配Java后端源码是一份面向毕业设计、期末大作业和课程设计场景的完整项目资料。压缩包共有1247个文件、约36.23MB包含小程序前端页面、Java后端业务逻辑、数据库脚本及说明文档其中png/jpg/gif等提供页面与展示素材js/wxml/wxss实现前端页面交互与界面样式java/class/jar对应后端服务实现及依赖库db/sql文件可快速初始化数据库md/txt文档帮助理清项目结构与部署流程。整体代码注释详细商品、购物车、订单、登录等商城常用模块均有覆盖新手也能按文档完成部署与二次开发若有答辩或课程汇报需求还可借助文档和数据库设计说明梳理业务逻辑。目前已有499人学习参考非常适合需要短时间内搭建商城类项目并希望获得高分评价的学生使用。1. 一套能答辩的微信小程序购物商城Java 后端、数据库、文档一次给齐每年到毕业设计选题季微信小程序购物商城永远是最抢手的方向但真正能直接跑通的项目不多。这套基于微信小程序购物商城 app 设计的资源不是只给一个前端壳子而是把小程序页面、Java 后端、数据库脚本、说明文档和带注释的源代码打包到一起。我从类文件清单里扫了一遍LoginAction、GoodsAction、CarAction、DdAction 把登录、商品、购物车、订单这几条主线全覆盖了再加上 BaseDaoImpl、BaseServiceImpl 这种通用分层属于典型的课设刚需结构复杂程度刚好够答辩撑起一个完整体系又不会让新手上去就懵。无论是毕业设计、期末大作业拿它当底子来改还是学完 Java Web 想找一份真实的前后端闭环项目复现都比较合适。2. 从 class 文件名反推项目架构九个类背后的分层逻辑与请求链路2.1 先别管 class 后缀从源码清单读出八个模块拿到压缩包第一眼如果看到一堆 .class 文件我的建议是直接忽略它们。这是打包的人没清理编译产物真正的源码在 src 目录下躺着.java 文件才是要读的。先把类名过一遍整个项目负责什么功能心里立刻有数。类名对应模块我猜它干什么LoginAction登录用户注册、登录、微信 code 换 openidGoodsAction商品商品列表、详情、上下架、库存查询LbAction轮播图首页 banner 轮播列表PpAction品牌/分类商品页面顶部品牌或分类筛选CarAction购物车加购、改数量、删除、购物车列表DdAction订单下单、订单列表、订单状态更新ManageAction后台管理商品管理、订单管理、发货操作BaseDaoImpl / BaseServiceImpl通用层泛型 CRUD业务子类继承复用DateUtils工具类日期格式化订单时间、下单时间展示从命名习惯看Lb、Dd、Pp 都是拼音首字母缩写这在个人课设项目里太常见了。别嫌它土反而方便对上号要改轮播图就去翻 LbAction要改订单就去翻 DdAction。拿到资源后第一件事建议把 src 下的包结构展开对照这张表建好心理模型后面每动一个需求都知道该找哪个类。2.2 一条请求从 wx.request 到 MySQL控制层、业务层、数据层各干什么这种规模的 Java Web 课设分层通常是控制器 → 业务 → 数据的三明治结构。控制器是那批 Action 类负责收前端参数、把参数交给 Service、最后把返回值序列化成 JSON 丢回小程序Service 层是业务逻辑的所在地比如加购之前先查库存下单时要同时生成订单和扣减库存Dao 层离数据库最近专门执行 SQL 并把结果集映射成实体对象。我一般会在纸上先把数据表的关系画出来。这类商城项目的表结构万变不离其宗用户表存 openid 和昵称商品表存名称、价格、库存、图片地址购物车表通过用户 id 和商品 id 关联订单表把用户、商品、数量、收货地址串起来再做一张订单明细表存快照。理解表关系的好处是遇到接口返回异常时你能快速判断是查少了表还是 join 错了字段。这条完整链路两端隔着 HTTP小程序 wx.request 发出请求到 Tomcat经过 web.xml 里配置的过滤器做编码处理和跨域放行再分发到对应 Action。Action 不做业务只做三件事——从 request 里拿参数、调用 Service、把结果转成 JSON。Service 里运行业务规则需要落库就调 Dao 的 insert、update。Dao 层拿 JDBC 连 MySQLSQL 执行完一层层往回返最后小程序拿到的是一段 JSON前端再绑定渲染。理解这条链路最大的价值在于排错。接口返回 500先去看 Action 层控制台报了什么 SQL 错误接口返回了数据但页面不显示问题大概率不在后端而是小程序端字段名没对齐。2.3 泛型 BaseDao 和 BaseServiceImpl课设里最值得抄的封装代码清单里出现 BaseDaoImpl.class 和 BaseServiceImpl.class说明这套项目在通用层做了泛型封装。课设里几乎每个模块都要增删改查如果每张表写一套完全独立的 Dao又臭又长。常见做法是抽一个泛型 BaseDao把查全部按 id 查插入更新删除这些通用操作统一实现具体业务 Dao 继承它只补自己的特殊 SQL。public interface BaseDaoT { ListT queryList(ClassT clazz); // 查全表 T queryById(ClassT clazz, Integer id); // 按主键查单条 int insert(T entity); // 插入一条记录 int update(T entity); // 更新一条记录 int deleteById(ClassT clazz, Integer id); // 按主键删除 }这里的核心设计是 Class 参数。通用方法里没有写死表名而是靠 clazz 反射拿实体类的类名按约定映射成表名字段名也对齐实体属性名。这样后续新增一张表只需要建实体类、建对应的 Dao 接口继承 BaseDao基本 CRUD 就全齐了。Service 层同理BaseServiceImpl 持有 Dao 引用把通用操作转发下去业务子类专注于自己的复合逻辑。这套封装抄的价值比用更大。答辩时你能讲清楚反射 泛型实现了模板方法比背任何框架代码都加分。它的缺点也藏在反射里一旦表名、字段名和实体类对不上约定SQL 就查错表了。遇到这种问题不用死磕 Dao先比对实体类名和 show tables 的结果。2.4 web.xml 和过滤器跑起来之前先看这两个配置文件很多新手拿到项目直接点运行报错后无从下手其实应该先看 web.xml。这个文件里声明了三件事Servlet 或 Action 的映射规则、过滤器的注册顺序、欢迎页面。商城项目的过滤器一般干两件事把所有请求的编码统一成 UTF-8给接口加上跨域响应头。少了跨域那一行小程序开发工具里请求会成功浏览器直接访问接口却可能被同源策略挡住。filter filter-nameencodingFilter/filter-name filter-classcom.shop.filter.EncodingFilter/filter-class /filter filter-mapping filter-nameencodingFilter/filter-name url-pattern/*/url-pattern /filter-mapping注意 url-pattern 写成 /*意思是对所有路径生效。写成一个正斜杠的表达方式也不对那是 Servlet 映射路径不是过滤器映射。过滤器顺序也有讲究编码过滤器要放在最前面如果后面还有登录态校验过滤器顺序反了可能导致请求还没转码就去校验参数中文参数直接乱码。3. 小程序端与 Java 后端怎么对话接口契约、登录态与三个可抄的请求模板3.1 小程序目录结构与前后端分离的实感小程序端的目录结构非常固定pages 下面按页面分目录每个页面包含四个文件wxml 管结构、wxss 管样式、js 管逻辑、json 管页面配置。根目录的 app.js 是全局入口登录 token 存取、全局购物车数量这类逻辑可以挂在这里。utils 目录放请求封装和公共工具函数。这套项目天然就是前后端分离的形态。Java 后端是一个独立的 Web 服务小程序是独立客户端两边只通过 HTTP 接口交换 JSON 数据。理解了这一点后面做任何改造心里都有底你哪天把后端从这套 Action 结构换成 Spring Boot小程序端一个页面都不用改只要接口路径和返回结构保持一致就行。3.2 后端接口契约一张表把主要接口的对口径说清楚复现之前先弄清楚后端到底暴露了哪些接口。我按经验把这类商城项目的主要接口整理成下面这份契约实际以项目源码里的注解或 web.xml 映射为准但路径和参数的大方向基本一致。接口方法参数返回说明/user/loginPOSTcode 或 username、password返回 token/goods/listGETpage、size商品分页列表/goods/detailGETid商品详情/lb/listGET无首页轮播图/pp/listGET无品牌/分类列表/car/listGETtoken当前用户购物车/car/addPOSTtoken、goodsId、num加购结果/car/updatePOSTtoken、id、num更新数量结果/dd/addPOSTtoken、goodsId、num、address下单结果这份契约表建议你在连接后端之前先对着源码核对一遍。接口路径在 Action 类的注解或 web.xml 里能找到参数名看 request.getParameter 那行就知道。把契约对齐之后小程序端的对接就是纯粹的体力活。3.3 请求封装把 baseUrl、错误码、toast 收敛到 utils/request.js我一般建议拿到项目先改 utils/request.js把公共逻辑收敛住。一个够用的封装必须做到三件事统一 baseUrl、统一业务码处理、统一错误提示。const baseUrl http://192.168.1.100:8080/shop function request(path, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: baseUrl path, method: method, data: data, header: { content-type: application/json }, success(res) { if (res.data.code 0) { resolve(res.data.data) } else { wx.showToast({ title: res.data.msg, icon: none }) reject(res.data) } }, fail(err) { wx.showToast({ title: 网络异常检查后端是否启动, icon: none }) reject(err) } }) }) } module.exports { request, baseUrl }这段代码的前提是后端返回结构统一为 { code: 0, data: ..., msg: ... }。code 为 0 代表业务成功非 0 直接弹后端返回的提示。baseUrl 单独拎出来是为了部署到不同机器时只改这一处。header 里的 content-type 按项目要求改如果后端用表单接收参数就改成 application/x-www-form-urlencoded否则按 JSON 处理。请求失败时弹检查后端是否启动排查时能省很多时间。3.4 首页商品与轮播图先跑通第一个 GET 请求商品列表是最典型的 GET 接口参数带分页。小程序端在 onLoad 生命周期里调用拿到数据 setData 渲染到页面。Page({ data: { goodsList: [], page: 1 }, onLoad() { this.loadGoods() }, loadGoods() { const { request } require(../../utils/request) request(/goods/list, GET, { page: this.data.page, size: 10 }) .then(res { this.setData({ goodsList: this.data.goodsList.concat(res.list) }) }) } })onLoad 进入页面立即触发适合放首次数据请求。res.list 是后端返回的当前页数据用 concat 拼接而不是直接赋值是为后面做上拉加载预留的写法。首页轮播图套路完全一样调 /lb/list 接口数据绑定到 swiper 组件即可。最容易踩的坑是字段名对不上后端返回的是 goodsName前端写成 name页面就白屏。调试时先在 success 里加一行 console.log(res)先看清真实字段再写绑定。3.5 登录态与购物车code 换 token、POST 参数的常见传法登录有两种主流做法。账号密码登录最简单后端查用户表返回用户 id小程序把 id 存 Storage。微信授权登录复杂一点但演示效果更好小程序 wx.login 拿临时 code后端拿 code 去微信接口换 openid再给前端签发一个 token。wx.login({ success(res) { if (res.code) { request(/user/login, POST, { code: res.code }).then(token { wx.setStorageSync(token, token) }) } } })wx.login 不需要弹窗授权静默拿一个临时凭证有效期只有几分钟。后端拿这个 code 加上自己的 AppID、AppSecret 去微信接口换 openid存到用户表再生成一个自定义 token 存起来回给前端。之后购物车、下单这些请求都带上 token后端就能识别请求发自哪个用户。加购物车是典型的 POST 请求参数是 token、商品 id、数量。调用方式跟 GET 没有区别只是 method 和 data 变了。如果发现加购成功但购物车列表是空的先查 token 反解看看服务端能不能从 token 找回用户 id这个环节出错比 SQL 出错更隐蔽。3.6 顶部导航栏高度与 tabBar演示时最容易露怯的适配细节做首页别忽略胶囊按钮位置。不同手机的胶囊位置不一样顶部自定义导航栏如果写死高度到刘海屏手机上就会压住状态栏。常见做法是动态获取胶囊位置const menu wx.getMenuButtonBoundingClientRect() const navHeight menu.top menu.height (menu.top - wx.getStatusBarHeight())这段代码拿到胶囊按钮的上下位置再结合状态栏高度算出导航栏总高度不同机型渲染出来都是准的。tabBar 如果是自定义的还要在页面切换时手动维护选中态。这些细节不影响功能跑通但直接影响答辩演示时老师点开首页的第一观感。4. 本地跑通要过的四道关JDK、MySQL、Tomcat、开发者工具的配置顺序4.1 版本定死JDK 8、Tomcat 8.5、MySQL 5.7/8.0 的搭配逻辑跑这类老课设版本选择第一原则是稳而不是新。JDK 用 8 最稳妥Tomcat 用 8.5 或 9.0MySQL 用 5.7 或 8.0 都行但 JDBC 驱动必须跟数据库对应上MySQL 5.7 用 5.1.x 的驱动MySQL 8.0 用 8.0.x 的驱动。混着用就会出现各种莫名其妙的认证失败和时区报错。微信开发者工具建议用最新稳定版这个跟后端没冲突不用纠结。4.2 JAVA_HOME 与 PATH环境变量配置的两种姿势后端是 Java Web 项目JDK 装好之后第一步是配环境变量。Windows 上右键此电脑 → 属性 → 高级系统设置 → 环境变量新建 JAVA_HOME再把 bin 目录加进 PATH。JAVA_HOMEC:\Program Files\Java\jdk1.8.0_202 PATH%JAVA_HOME%\bin;%PATH%配完之后在命令行验证输入 java -version 能打印出版本号就说明成了。这里最常见的翻车点是装了 JDK 但 PATH 里还残留着旧版本的 JRE 路径命令行执行 java 版本跟 JAVA_HOME 对不上IDEA 里编译报错。验证时别只看 java还要执行 javac -version这两个输出一致才安全。4.3 导入数据库脚本与字段核对数据库层面要做的事就是把 sql 脚本灌进去顺序不能乱。mysql -uroot -p create database shop_db default charset utf8mb4; use shop_db; source /data/shop_db.sql;建库时带 charset utf8mb4 是必须的这个字符集才能完整支持中文。脚本执行完之后用 desc 抽查两张关键表确认商品表有 name、price、stock 字段购物车表有用户标识字段。这一步看起来多余实际很多接口 500的问题源头就是 sql 脚本某条语句报错中断导致缺了表或字段。4.4 db.properties四个参数和一个必查的时区后端连数据库的配置一般集中在 db.properties 或 jdbc.properties核心是四个参数。jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/shop_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai jdbc.usernameroot jdbc.password123456url 里必须带 characterEncodingutf8否则中文写入数据库就变问号。serverTimezoneAsia/Shanghai 是 MySQL 8 的硬性要求5.7 不加也能跑但统一加上没坏处。useSSLfalse 是为了关掉启动日志里那一大串 SSL 告警。改完参数先别启动 Tomcat写一个带 main 方法的类测一下连接确认能连上再进下一步。4.5 后端部署IDEA 内置 Tomcat 与外部 Tomcat 的走法有 IDEA 就简单。导入工程后把 Project SDK 选成 1.8配置 Tomcat Server 时注意 Deployment 标签页里有没有把工程加进去。很多人点完运行报 404就是 Deployment 里漏了这一步。没有 IDEA 也不影响把工程打成 WAR 包扔进 Tomcat 的 webapps 目录双击 bin/startup.bat 启动控制台出现 Server startup in xx ms 就说明后端活了。启动成功后立刻做一次接口验证浏览器直接访问 http://localhost:8080/shop/goods/list?page1size10能看到 JSON 数据说明后端到数据库这条链路已经通贯通。这个验证点是黄金标准接口通了再折腾小程序端。4.6 小程序连后端baseUrl、局域网 IP 与开发工具开关后端跑通只是上半场小程序连不上后端的现象在开发工具里最常见。先改 app.js 里的 baseUrl开发工具里用 localhost 没问题但真机预览必须换成电脑的局域网 IP否则手机上请求的其实是手机自己。// app.js module.exports { baseUrl: http://192.168.1.100:8080/shop }改完还要在微信开发者工具里做两件事。第一详情 → 本地设置勾选不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书第二真机预览时手机和电脑必须连同一个 WiFi。很多人在这一步折腾一晚上最后发现是手机和电脑不在同一网段或者电脑防火墙把 Tomcat 端口拦了。Win 下临时关防火墙测试最直接确认通了再决定要不要配入站规则。5. 避坑指南我在这套商城里翻过的五个车现象、原因、解决办法5.1 一启动就报 ClassNotFoundException: com.mysql.jdbc.Driver现象Tomcat 启动后访问接口控制台抛 java.lang.ClassNotFoundException: com.mysql.jdbc.Driver数据库连接直接初始化失败所有查询都白屏。原因JDBC 驱动 jar 包没放进 WEB-INF/lib 目录。课设工程拷给别人时jar 包默认不随源码走接收方如果没把 mysql-connector-java 放进去就启动必然报这个错。它跟代码没有半毛钱关系纯粹是环境问题。解决确认工程目录下有没有 lib 文件夹没有就新建把对应版本的 mysql-connector-java.jar 放进去。在 IDEA 里还要右键 jar → Add as Library确保编译期和运行期都能引用到。验证方法也很简单项目里搜一下 import com.mysql.jdbc.Driver能跳转到 jar 里的类就没问题了。5.2 MySQL 8 连不上时区报错和认证插件不兼容现象密码没错、库名没错但启动时报 The server time zone value Öйú±ê׼ʱ¼ä is unrecognized或者报 Public Key Retrieval is not allowed。原因MySQL 8 对时区参数敏感老课设的 jdbc url 里往往只写了 localhost:3306/shop_db少了 serverTimezone驱动拿默认配置读系统时区读出来的中文时区名它不认直接抛异常。认证插件那个报错则是 8.x 默认用 caching_sha2_password老驱动不兼容。解决url 后面统一补上 serverTimezoneAsia/Shanghai、useSSLfalse、allowPublicKeyRetrievaltrue 三个参数。如果驱动版本还是 5.x建议直接换 8.0.x 的驱动。改完重启 Tomcat这两个报错立刻消失。这类问题在 MySQL 8 普及之后成了课设复现的第一大坑没人告诉你时区参数你对着密码和用户名查半天都查不出所以然。5.3 接口通了中文全变问号现象接口能返回 JSON但中文内容全是 ??。下单后往数据库写收货地址存进去的也是乱码甚至把前端页面直接拉崩。原因编码问题叠加在三个位置MySQL 建表时用的字符集不对、JDBC 连接参数没带 characterEncoding、Tomcat 接收请求时用的编码不是 UTF-8。三个位置只要有一个没对齐乱码就不可避免。解决三层统一。数据库层执行 ALTER TABLE goods CONVERT TO CHARACTER SET utf8mb4把表字符集纠正过来连接参数补上 characterEncodingutf8Tomcat 的 server.xml 里给 Connector 加 URIEncodingUTF-8解决 GET 请求中文参数被错误解码的问题。改完重启后端清一下浏览器缓存再验证。这套组合基本能根治所有中文乱码不用再瞎试别的。5.4 小程序请求直接 fail连后端的影子都看不到现象小程序端 console 打印 errMsg:request:fail后端 Tomcat 控制台一条访问日志都没有请求压根没到后端。原因微信平台的合规限制。wx.request 的合法域名必须在小程序后台配置开发阶段如果用 http 而不是 https正式环境大部分域名都会被拦截。第一次跑这个项目的人不知道这个机制直接拿本地地址去请求自然被拦死。解决开发调试期在开发者工具右上角详情 → 本地设置里勾选不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书然后再跑。真机预览要额外确认手机和电脑在同网段、baseUrl 写的是电脑局域网 IP。这个开关纯工具层面的配置不涉及代码逻辑忘了就白折腾一个晚上。5.5 下单成功但库存变负数购物车数量也对不上现象反复加购同一件商品购物车数量偶尔翻倍或消失并发下单时一件商品能卖出去超过库存的数量数据库里库存变成负数。原因老课设的简化实现里购物车加购往往先查一遍该商品有没有记录有就更新数量没有就插入。两个请求同时进来都查到没有记录于是插入两行。库存扣减大概率也是先 select stock 再 update没有事务和行锁兜底并发一上来就出问题。解决加购在 CarAction 里加串行化处理或者给购物车表的用户 商品加唯一索引数据库层面把重复项拦掉。库存扣减包进事务改成一条条件更新语句UPDATE goods SET stock stock - 1 WHERE id ? AND stock 0;再检查受影响行数等于 0 说明库存不足直接回滚。这个改造量不大但答辩时你能主动讲出来主动修复了一个并发隐患比被老师问住强太多。6. 从能跑到高分答辩前的验证清单与两个最划算的改造点6.1 演示前 10 分钟必过的验证清单我把下面这份清单打印出来贴在显示器边上每次演示前从头到尾走一遍哪个环节有问题当场就能定位。检查项操作预期结果后端存活浏览器访问 /goods/list 接口页面返回 JSON数据库查询商品表中文正常、库存为正数小程序登录点击登录按钮Storage 中写入 token首页加载进入首页下拉刷新轮播图和商品列表可见加购下单走完整购物流程订单表出现新记录真机预览手机端完整跑一遍图片正常、请求不 fail这个清单的核心思路是先验证底层再验证上层。后端接口是根接口没通小程序端怎么调都是白费。数据库数据是第二层接口通了但数据乱码会很尴尬。最后才是前端交互保证演示时鼠标和手指点到哪里都有反馈。6.2 两个低成本的加分改造点第一个是商品搜索。在 GoodsAction 里加一个处理搜索的方法SQL 用 LIKE 模糊匹配商品名小程序首页顶部加一个搜索框把输入作为参数传给新接口。改造点集中在一个 Action 方法、一个 Dao 方法、一个小程序页面半天能完成但演示效果非常直观。String keyword req.getParameter(keyword); ListGoods list goodsService.searchByName(% keyword %); resp.setContentType(application/json;charsetutf-8);第二个是销量排行。给商品表加一个 sales 字段下单成功后 sales 加一商品列表接口按 sales 倒序排列。改动很小但它能自然引出下单、减库存、加销量要放在同一个事务里的讨论刚好呼应前面那个并发翻车现场。答辩老师最看重的不是功能花哨而是你能说清楚数据怎么流转、异常情况怎么兜底。从那以后我每次拿到课设资源第一件事就是先建环境、跑通接口再谈改代码。数据库脚本先备份一份改表结构前用 mysqldump 留好后悔药jdbc 配置的每次改动记录在文档里免得换台电脑又从头排一遍。这套微信小程序购物商城把 Java 后端、数据库脚本和文档一次性给齐按上面的顺序走顺利的话一个晚上就能从压缩包变成本地能跑的完整项目。希望帮到你。本文还有配套的精品资源点击获取