ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

B2B2C多端商城源码拆解:从环境搭建到订单分账实战

B2B2C多端商城源码拆解:从环境搭建到订单分账实战 简介小玄猪商城是一套基于前后端分离架构的B2B2C商城系统面向中小型电商团队、二次开发者和新零售创业者解决多端商城快速搭建与多商户运营的问题。系统同时支持微信小程序、支付宝小程序、H5商城与APP商城覆盖直播商城、社交电商、团购拼团、秒杀砍价、活动报名、客户管理、知识付费、积分商城、抽奖、会员卡、权益卡、成长值、预售与任务中心等业务场景采用TP6、VUE、element-vue-admin与uniapp技术栈代码简洁便于二次开发与功能扩展。资源包共2000个文件约42.39MB以715个PHP后端逻辑、284个Vue前端页面、209个JS脚本为主另含Java、Go、SQL、JSON、Markdown及PNG、SVG等图片资源覆盖前后端、数据库与文档说明。目前已有534人学习下载适合希望研究多端商城架构、快速搭建B2B2C平台或进行二次开发的开发者参考。1. 小玄猪商城拆包一套 B2B2C 多端商城到底能跑通哪些业务第一次拿到小玄猪商城的源码包我下意识先翻目录结构而不是急着跑npm install。原因很简单B2B2C 和普通 B2C 最大的区别不在前端页面而在「平台—商户—用户」三层角色的数据隔离。这套系统基于前后端分离架构前端覆盖微信小程序、支付宝小程序、H5 和 APP 四个端后端统一提供 API。如果你正在接商城类外包、做新零售建站或者需要一套能同时跑多端的底座它值得花时间拆一遍。我见过太多团队在「多端复用」上翻车——小程序一套代码、H5 又写一套最后维护成本爆炸。这套系统的价值就在于把多端收敛到同一套接口协议下让你改一次业务逻辑四个端同时生效。接下来我按实际拆包顺序把环境搭建、多端配置、B2B2C 核心链路和踩坑点逐个讲清楚。2. 环境搭建与前后端分离架构落地从 clone 到第一个接口通2.1 先看清目录结构再动手前后端分离项目实战里最常见的翻车就是拿到包直接装依赖结果后端跑在 8080、前端代理指向 3000跨域报错查半天。小玄猪商城的典型目录分两块后端服务通常基于 Java Spring Boot 或 PHP ThinkPHP具体以你拿到的版本为准和前端多端工程uni-app 或原生小程序 Vue H5。我一般会先执行一次目录扫描把关键配置文件位置记下来。# 查看顶层结构确认前后端分界 ls -la # 常见输出 # admin/ 平台管理后台 # merchant/ 商户端后台 # api/ 后端服务 # uniapp/ 多端前端工程 # h5/ H5 独立工程部分版本逻辑说明admin和merchant是两个独立后台别混在一起部署。参数说明如果你拿到的版本后端是api目录先找application.yml或.env数据库、Redis、端口都在这。这一步不做后面连数据库都连不上。2.2 后端启动与数据库初始化后端是整个商城的心脏B2B2C 的角色权限、订单分账、商户结算全在这里。启动前先确认三件事数据库版本、Redis 是否可用、文件存储路径。# 1. 导入数据库以 MySQL 为例 mysql -u root -p xuanzhu_mall sql/xuanzhu_mall.sql # 2. 修改后端配置 vim api/application.yml # 重点改这几项 # datasource.url: jdbc:mysql://127.0.0.1:3306/xuanzhu_mall # datasource.username / password # redis.host: 127.0.0.1 # redis.port: 6379 # 3. 启动后端 cd api mvn spring-boot:run # 或 php think runThinkPHP 版本逻辑说明先导库再改配置顺序反了会连空库启动报「表不存在」。参数说明Redis 必须开商城的购物车、验证码、token 都依赖它不开会报连接超时。常见做法是把application.yml里的profiles.active改成dev日志级别调成debug方便看 SQL。2.3 前端多端配置与代理前端这块是重头戏。微信小程序、支付宝小程序、H5、APP 四端如果各写各的那这套系统就没意义了。小玄猪商城用的是 uni-app 条件编译一套代码通过manifest.json和pages.json区分端。// uniapp/config/index.js 常见接口配置 const config { // 开发环境走本地代理生产环境走正式域名 baseUrl: process.env.NODE_ENV development ? http://127.0.0.1:8080/api : https://your-domain.com/api, // 微信小程序 appid wxAppId: wx1234567890abcdef, // 支付宝小程序 appid aliAppId: 2021000000000000 } export default config逻辑说明baseUrl必须区分环境否则打包上线后接口还指向 localhost。参数说明wxAppId和aliAppId要换成你自己在对应平台申请的真实 ID用示例 ID 编译能过但登录会失败。H5 端还需要在vue.config.js里配devServer.proxy解决跨域。// vue.config.js 代理配置 module.exports { devServer: { proxy: { /api: { target: http://127.0.0.1:8080, changeOrigin: true, pathRewrite: { ^/api: /api } } } } }逻辑说明changeOrigin: true让后端以为是同源请求绕过浏览器跨域限制。参数说明pathRewrite按你后端实际路由前缀调整有的版本后端不带/api前缀那就把^/api: 。2.4 多端编译命令对照不同端编译命令不一样这是新手最容易懵的地方。我整理了一张对照表端编译命令产物目录注意事项微信小程序npm run dev:mp-weixindist/dev/mp-weixin用微信开发者工具导入该目录支付宝小程序npm run dev:mp-alipaydist/dev/mp-alipay支付宝开发者工具导入H5npm run dev:h5浏览器直接访问注意代理是否生效APPnpm run dev:app-plusdist/dev/app-plus需 HBuilderX 打包逻辑说明dev:是开发模式build:是生产模式上线前必须用build。参数说明微信小程序导入的是dist/dev/mp-weixin这个编译产物目录不是源码根目录导错了会提示找不到app.json。3. B2B2C 核心链路拆解商户入驻、商品分发与订单分账3.1 平台、商户、用户三层角色怎么隔离B2B2C 和 B2C 的本质区别是多了「商户」这一层。平台管规则商户管自己的商品和订单用户在前台买。数据隔离做不好商户 A 能看到商户 B 的订单那就是事故。小玄猪商城一般用merchant_id字段贯穿商品表、订单表、结算表。-- 商品表关键字段示意 CREATE TABLE goods ( id int NOT NULL AUTO_INCREMENT, merchant_id int NOT NULL COMMENT 所属商户, goods_name varchar(255) NOT NULL, price decimal(10,2) NOT NULL, stock int NOT NULL DEFAULT 0, status tinyint DEFAULT 1 COMMENT 1上架 0下架, PRIMARY KEY (id), KEY idx_merchant (merchant_id) );逻辑说明merchant_id加索引因为商户后台查商品列表时高频按此过滤。参数说明status控制上下架平台可以强制下架违规商品商户只能操作自己的。常见做法是在后端加一层全局 Scope自动给查询拼上merchant_id条件避免每个接口手写。3.2 商户入驻流程与审核状态机商户入驻不是填个表就完事涉及资质审核、店铺开通、结算账户绑定。状态机设计错了会出现「审核中还能上架商品」这种玄学问题。// 商户状态流转示意 const MERCHANT_STATUS { PENDING: 0, // 待审核 APPROVED: 1, // 已通过 REJECTED: 2, // 已驳回 DISABLED: 3 // 已禁用 } // 只有 APPROVED 状态才允许上架商品 function canPublishGoods(status) { return status MERCHANT_STATUS.APPROVED }逻辑说明状态判断要前置在商品发布接口入口就拦截。参数说明PENDING和REJECTED都返回「店铺未开通」别给用户看技术错误码。我一般会在数据库加audit_time和audit_admin_id方便追溯是谁审的。3.3 订单分账与结算逻辑这是 B2B2C 最绕的地方。用户付 100 块平台抽 5%商户拿 95但还要考虑退款、佣金、运费。分账算错商户直接找上门。# 分账计算示意 def calculate_settlement(order_amount, commission_rate, shipping_fee): order_amount: 订单商品总额 commission_rate: 平台佣金比例如 0.05 shipping_fee: 运费归商户 commission round(order_amount * commission_rate, 2) merchant_income round(order_amount - commission shipping_fee, 2) return { platform_commission: commission, merchant_income: merchant_income } # 调用 result calculate_settlement(100.00, 0.05, 10.00) # platform_commission: 5.00 # merchant_income: 105.00逻辑说明佣金按商品额算运费全额给商户这是常见规则。参数说明commission_rate建议存数据库按商户配置别写死在代码里不同商户费率可能不同。退款时要反向冲销先退用户再扣回商户结算顺序反了会出负数。3.4 多端登录态同步微信小程序登录获取手机号、支付宝授权、H5 账号密码三套登录方式最后要落到同一个用户体系。常见做法是后端统一发 token各端存本地。// 微信小程序登录换取 token wx.login({ success: (res) { wx.request({ url: config.baseUrl /auth/wxLogin, method: POST, data: { code: res.code }, success: (resp) { // 存 token后续请求带在 header wx.setStorageSync(token, resp.data.token) } }) } })逻辑说明code只能用一次换到 token 后存本地。参数说明后续请求在header里带Authorization: Bearer token后端拦截器校验。H5 端存localStorageAPP 端存plus.storage逻辑一致。4. 多端适配避坑小程序、H5、APP 那些血泪经验4.1 微信小程序顶部导航栏高度不一致现象自定义导航栏在 iOS 和 Android 上高度不一样内容被顶下去或压住。原因微信小程序顶部导航栏高度 状态栏高度 标题栏高度状态栏高度各机型不同。解决用wx.getSystemInfoSync()动态获取。const systemInfo wx.getSystemInfoSync() const statusBarHeight systemInfo.statusBarHeight // 状态栏高度 const navBarHeight 44 // 标题栏一般 44px const totalHeight statusBarHeight navBarHeight // 把这个高度设给自定义导航栏容器逻辑说明statusBarHeight是变量navBarHeight在微信里基本固定 44px。参数说明支付宝小程序获取方式不同用my.getSystemInfoSync()字段名一样。4.2 uniapp 打包微信小程序体积超 2MB现象npm run build:mp-weixin报source size exceed max limit 2mb。原因主包体积超限微信限制主包 2MB。解决分包 图片走 CDN。// pages.json 配置分包 { subPackages: [ { root: pages/merchant, pages: [ { path: index, style: { navigationBarTitleText: 商户中心 } } ] } ] }逻辑说明把商户端、个人中心等非首屏页面拆到分包。参数说明分包后主包只留首页、分类、购物车能省出几百 KB。图片别放本地全传 CDN这是最有效的瘦身手段。4.3 H5 端跨域与 cookie 丢失现象H5 调接口 401但小程序正常。原因H5 跨域时cookie不自动带且token存localStorage后请求头没带上。解决请求拦截器统一加 header。// axios 拦截器 axios.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config })逻辑说明所有请求统一走拦截器别每个接口手写。参数说明后端要允许Authorization头CORS 配置里allowedHeaders加上它。4.4 支付宝小程序与微信小程序 API 差异现象同一段代码微信能跑支付宝报错。原因wx.和my.前缀不同部分 API 参数也不一样。解决用 uni-app 的条件编译。// #ifdef MP-WEIXIN wx.requestPayment({ ... }) // #endif // #ifdef MP-ALIPAY my.tradePay({ ... }) // #endif逻辑说明条件编译在打包时只保留对应端代码。参数说明支付参数结构不同微信是timeStamp/nonceStr/package支付宝是tradeNO别混用。5. 二次开发与验证怎么确认这套系统真能跑起来5.1 用一条完整链路验证系统健康度别只看首页能不能打开那说明不了问题。我一般走一条完整链路注册用户 → 浏览商品 → 加购物车 → 下单 → 支付沙箱→ 商户后台看订单 → 平台后台看分账。这条链路通了系统才算真跑起来。# 后端日志实时观察确认每个环节接口被调用 tail -f api/logs/spring.log | grep -E order|pay|settle逻辑说明grep过滤关键词看订单、支付、结算是否依次触发。参数说明日志路径按你实际配置改ThinkPHP 版本在runtime/log。5.2 商户端与平台端权限交叉验证用商户 A 的账号登录尝试访问商户 B 的订单接口看是否返回 403。这是验证数据隔离是否到位的最直接方法。# 用 curl 模拟越权请求 curl -H Authorization: Bearer 商户A的token \ http://127.0.0.1:8080/api/merchant/order/detail?orderId商户B的订单ID # 预期返回{code:403,msg:无权访问}逻辑说明如果返回了订单详情说明隔离没做这是严重漏洞。参数说明orderId换成别的商户的token 用自己商户的构造越权场景。5.3 多端一致性检查清单检查项微信小程序支付宝小程序H5APP登录wx.loginmy.getAuthCode账号密码账号密码支付wx.requestPaymentmy.tradePay跳转收银台原生支付导航栏自定义动态高度同微信浏览器默认原生导航存储wx.setStorageSyncmy.setStorageSynclocalStorageplus.storage逻辑说明这张表是我每次交付前必过的清单少一项就可能在某端翻车。参数说明支付环节沙箱环境测试别用真实金额。5.4 我踩过的一个坑有次改完商户结算逻辑微信小程序和 H5 都正常唯独支付宝小程序订单金额显示不对。查了两小时发现是支付宝端Number精度处理和微信不同0.1 0.2结果不一样。从那以后我每次涉及金额计算都强制走一遍toFixed(2)再转Number四个端都验一遍才敢提交。希望帮到你。本文还有配套的精品资源点击获取
返回列表