聚惠星商城实战微信小程序电商 API 对接全流程【免费下载链接】dts-shop微信小程序小程序商城商城springboot框架vue管理系统java后台项目地址: https://gitcode.com/gh_mirrors/dt/dts-shop聚惠星商城DTS-SHOP是一套 SpringBoot Vue 微信小程序搭建的完整电商系统用户端是小程序、运营端是 Vue 管理后台用户认证、商品、购物车、订单、优惠券和团购这些模块都已内置。本文带你把它跑起来再沿一条业务主线把代码串一遍最后说几个最常踩的坑。技术栈与三端协作后端怎么拆的后端是 JDK 1.8 SpringBoot 2 MySQLMaven 多模块拆成四块理解这个拆分你就知道代码往哪找dts-wx-api小程序端 API入口类在同模块Application.java所有 Controller 集中在dts-wx-api/src/main/java/com/qiguliuxing/dts/wx/web/下dts-admin-api管理后台 API鉴权用的是 Shirodts-daoMyBatis 数据访问层Mapper、实体、Service 都在这里dts-core两端共用的能力包文件存储、短信/邮件/微信模板消息、快递查询、工具类。小程序端wx-mini-program/是原生小程序wxml/wxss/js管理端admin-ui/是 Vue 2 加 Element UI 的经典后台模板。小程序的每个请求都打到dts-wx-api的 8070 端口管理端打dts-admin-api两边共享数据层。三步跑通本地环境导入数据库、启动后端、改 API 地址第一步克隆仓库并准备数据库git clone https://gitcode.com/gh_mirrors/dt/dts-shopdoc/目录下的dts-shop-表结构和数据-20200326.sql包含表结构和演示数据直接导入。开发环境的数据源配置在dts-core/src/main/resources/application-dev.yml默认连本地 3306 的demo库账号密码按需修改。第二步启动后端根pom.xml定义了 dev / test-online / prod 三个 profiledev 默认激活。IDE 里直接运行dts-wx-api模块的Application.java即可或在该模块目录执行mvn spring-boot:run。启动后监听 8070 端口这里有个细节先记下dts-wx-api/src/main/resources/application.yml里context-path是/demo。管理端在admin-ui/下npm install后按标准 Vue 项目启动开发服务即可演示账号在 README 里写得明明白白。第三步改小程序端的 API 地址打开wx-mini-program/config/api.js第一行就是接口基地址var WxApiRoot http://localhost:8070/wx/;注意由于后端 context-path 是/demo本地直连时实际请求的应是http://localhost:8070/demo/wx/开头否则一路 404。另外微信开发者工具里记得勾选「不校验合法域名」不然本地请求会被拦下。从微信登录到提交订单一条链路怎么走下面挑「微信登录 → 浏览商品 → 加购物车 → 提交订单」这条主线走一遍每步告诉你代码在哪。微信登录在dts-wx-api/.../web/WxAuthController.java类上RequestMapping(/wx/auth)。小程序wx.login()拿到 code后端用它换 openid 和 session_key登录成功后由UserTokenManager签发 token。账号登录、注册、验证码、绑定手机号也在这个 Controller 里。浏览商品看WxGoodsController.java商品列表、详情、大家都在看的关联商品列表接口接收page、size两个分页参数底层用 PageHelper。加购物车是WxCartController.java加购、立即购买式的快速加购、改数量、勾选/取消、下单前确认都是独立方法对应wx-mini-program/config/api.js里的 Cart 系列接口。提交订单在WxOrderController.java提交订单、预支付会话微信支付、订单列表/详情、取消、退款、确认收货、物流跟踪下单到售后的完整生命周期都在这里。串起来看其实很顺小程序所有请求都经过wx-mini-program/utils/util.js里的request()封装发出去token 和 501 跳转登录页的处理也在这个文件里读一遍它就懂前端侧的约定了。聚惠星商城容易踩的几个坑Token 认证头到底怎么带不是标准Authorization: Bearer本项目小程序端用的是自定义头X-Dts-Token。后端在dts-wx-api的LoginUserHandlerMethodArgumentResolver里解析这个头带LoginUser注解的方法参数自动解析为当前用户 ID。用 Postman 调试时忘带这个头返回的就是 501。统一错误码去哪查dts-wx-api/.../util/WxResponseCode.java是个枚举errno 加中文描述。约定就一条重点errno 501表示未登录/登录态失效前端清掉本地 token 和 userInfo、跳登录页逻辑在utils/util.js的request()里。分页参数怎么传列表类接口统一收page从 1 开始和size返回 PageHelper 的 PageInfo 结构。你写新接口时照抄WxGoodsController的参数声明就行。本地跨域和 /demo 前缀跨域后端已经处理好了dts-core的CorsConfig.java注册了 CorsFilter本地开发不需要额外配代理。真正的坑还是前面提过的/demo前缀api.js里的WxApiRoot和后端 context-path 对不上时要么改基地址要么用 Nginx 做一层转发。图片上传小程序端上传走WxStorageController的/upload接口标准 multipart form 表单单文件上限 50MBapplication.yml里可调。底层存储在dts-core的 storage 包里七牛、腾讯云、阿里云、本地磁盘四个实现换对象存储只需换配置。二次开发与部署新接口加在哪、第三方服务配在哪加新接口照现有模式在dts-wx-api/.../web/新建Wx*ControllerController 只做参数解析和响应组装业务逻辑下沉到dts-dao的 service 层这个分层在现有代码里非常一致。营销模块扩展优惠券WxCouponController、团购WxBrokerageController是分销佣金WxGrouponController是拼团、专题、收藏足迹等都已就位想加新玩法找最接近的模块抄结构最快。第三方服务配置入口都在dts-core/src/main/resources/application-{profile}.yml微信小程序的 appid/secret对应WxConfig.java、WxProperties.java、短信、快递100 物流查询等。生产环境用mvn package -Pprod出包再把api.js的WxApiRoot切到线上域名微信支付的 notify 回调地址记得同步配置。README 里提到项目支持多店铺入驻模式想往这个方向做建议从dts-admin-api的店铺管理员角色和入驻审批流程AdminGoodsController、AdminOrderController附近读起。代码仓库在 https://gitcode.com/gh_mirrors/dt/dts-shop doc/目录里还有表结构 SQL 和模型域文件管理端演示入口见 README照着上面的链路走一遍这套代码的结构基本就装进脑子里了。【免费下载链接】dts-shop微信小程序小程序商城商城springboot框架vue管理系统java后台项目地址: https://gitcode.com/gh_mirrors/dt/dts-shop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 聚惠星商城实战：微信小程序电商 API 对接全流程
聚惠星商城实战微信小程序电商 API 对接全流程【免费下载链接】dts-shop微信小程序小程序商城商城springboot框架vue管理系统java后台项目地址: https://gitcode.com/gh_mirrors/dt/dts-shop聚惠星商城DTS-SHOP是一套 SpringBoot Vue 微信小程序搭建的完整电商系统用户端是小程序、运营端是 Vue 管理后台用户认证、商品、购物车、订单、优惠券和团购这些模块都已内置。本文带你把它跑起来再沿一条业务主线把代码串一遍最后说几个最常踩的坑。技术栈与三端协作后端怎么拆的后端是 JDK 1.8 SpringBoot 2 MySQLMaven 多模块拆成四块理解这个拆分你就知道代码往哪找dts-wx-api小程序端 API入口类在同模块Application.java所有 Controller 集中在dts-wx-api/src/main/java/com/qiguliuxing/dts/wx/web/下dts-admin-api管理后台 API鉴权用的是 Shirodts-daoMyBatis 数据访问层Mapper、实体、Service 都在这里dts-core两端共用的能力包文件存储、短信/邮件/微信模板消息、快递查询、工具类。小程序端wx-mini-program/是原生小程序wxml/wxss/js管理端admin-ui/是 Vue 2 加 Element UI 的经典后台模板。小程序的每个请求都打到dts-wx-api的 8070 端口管理端打dts-admin-api两边共享数据层。三步跑通本地环境导入数据库、启动后端、改 API 地址第一步克隆仓库并准备数据库git clone https://gitcode.com/gh_mirrors/dt/dts-shopdoc/目录下的dts-shop-表结构和数据-20200326.sql包含表结构和演示数据直接导入。开发环境的数据源配置在dts-core/src/main/resources/application-dev.yml默认连本地 3306 的demo库账号密码按需修改。第二步启动后端根pom.xml定义了 dev / test-online / prod 三个 profiledev 默认激活。IDE 里直接运行dts-wx-api模块的Application.java即可或在该模块目录执行mvn spring-boot:run。启动后监听 8070 端口这里有个细节先记下dts-wx-api/src/main/resources/application.yml里context-path是/demo。管理端在admin-ui/下npm install后按标准 Vue 项目启动开发服务即可演示账号在 README 里写得明明白白。第三步改小程序端的 API 地址打开wx-mini-program/config/api.js第一行就是接口基地址var WxApiRoot http://localhost:8070/wx/;注意由于后端 context-path 是/demo本地直连时实际请求的应是http://localhost:8070/demo/wx/开头否则一路 404。另外微信开发者工具里记得勾选「不校验合法域名」不然本地请求会被拦下。从微信登录到提交订单一条链路怎么走下面挑「微信登录 → 浏览商品 → 加购物车 → 提交订单」这条主线走一遍每步告诉你代码在哪。微信登录在dts-wx-api/.../web/WxAuthController.java类上RequestMapping(/wx/auth)。小程序wx.login()拿到 code后端用它换 openid 和 session_key登录成功后由UserTokenManager签发 token。账号登录、注册、验证码、绑定手机号也在这个 Controller 里。浏览商品看WxGoodsController.java商品列表、详情、大家都在看的关联商品列表接口接收page、size两个分页参数底层用 PageHelper。加购物车是WxCartController.java加购、立即购买式的快速加购、改数量、勾选/取消、下单前确认都是独立方法对应wx-mini-program/config/api.js里的 Cart 系列接口。提交订单在WxOrderController.java提交订单、预支付会话微信支付、订单列表/详情、取消、退款、确认收货、物流跟踪下单到售后的完整生命周期都在这里。串起来看其实很顺小程序所有请求都经过wx-mini-program/utils/util.js里的request()封装发出去token 和 501 跳转登录页的处理也在这个文件里读一遍它就懂前端侧的约定了。聚惠星商城容易踩的几个坑Token 认证头到底怎么带不是标准Authorization: Bearer本项目小程序端用的是自定义头X-Dts-Token。后端在dts-wx-api的LoginUserHandlerMethodArgumentResolver里解析这个头带LoginUser注解的方法参数自动解析为当前用户 ID。用 Postman 调试时忘带这个头返回的就是 501。统一错误码去哪查dts-wx-api/.../util/WxResponseCode.java是个枚举errno 加中文描述。约定就一条重点errno 501表示未登录/登录态失效前端清掉本地 token 和 userInfo、跳登录页逻辑在utils/util.js的request()里。分页参数怎么传列表类接口统一收page从 1 开始和size返回 PageHelper 的 PageInfo 结构。你写新接口时照抄WxGoodsController的参数声明就行。本地跨域和 /demo 前缀跨域后端已经处理好了dts-core的CorsConfig.java注册了 CorsFilter本地开发不需要额外配代理。真正的坑还是前面提过的/demo前缀api.js里的WxApiRoot和后端 context-path 对不上时要么改基地址要么用 Nginx 做一层转发。图片上传小程序端上传走WxStorageController的/upload接口标准 multipart form 表单单文件上限 50MBapplication.yml里可调。底层存储在dts-core的 storage 包里七牛、腾讯云、阿里云、本地磁盘四个实现换对象存储只需换配置。二次开发与部署新接口加在哪、第三方服务配在哪加新接口照现有模式在dts-wx-api/.../web/新建Wx*ControllerController 只做参数解析和响应组装业务逻辑下沉到dts-dao的 service 层这个分层在现有代码里非常一致。营销模块扩展优惠券WxCouponController、团购WxBrokerageController是分销佣金WxGrouponController是拼团、专题、收藏足迹等都已就位想加新玩法找最接近的模块抄结构最快。第三方服务配置入口都在dts-core/src/main/resources/application-{profile}.yml微信小程序的 appid/secret对应WxConfig.java、WxProperties.java、短信、快递100 物流查询等。生产环境用mvn package -Pprod出包再把api.js的WxApiRoot切到线上域名微信支付的 notify 回调地址记得同步配置。README 里提到项目支持多店铺入驻模式想往这个方向做建议从dts-admin-api的店铺管理员角色和入驻审批流程AdminGoodsController、AdminOrderController附近读起。代码仓库在 https://gitcode.com/gh_mirrors/dt/dts-shop doc/目录里还有表结构 SQL 和模型域文件管理端演示入口见 README照着上面的链路走一遍这套代码的结构基本就装进脑子里了。【免费下载链接】dts-shop微信小程序小程序商城商城springboot框架vue管理系统java后台项目地址: https://gitcode.com/gh_mirrors/dt/dts-shop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考