2025最新修复版多端精品商城系统源码 多端支持H5、公众号、小程序、APP

源码7可
69 阅读6分钟

2025020323033836.png

一、顶层架构设计

1. 全渠道架构图

text

      +-------------------------------------------------------------------+
      |                       客户端 (uni-app)                            |
      |   +-------------+  +-----------------+  +---------------------+   |
      |   |     H5      |  |  微信小程序     |  |        App          |   |
      |   | (PC/移动浏览器) | (微信环境)       |  | (iOS/Android)       |   |
      |   +-------------+  +-----------------+  +---------------------+   |
      +-------------------------------------------------------------------+
                                      |
                              (HTTP/HTTPS + JSON API)
                                      |
      +-------------------------------------------------------------------+
      |                       接入层                                      |
      |   +---------------------------+  +-----------------------------+   |
      |   |        API 网关           |  |          Nginx              |   |
      |   | (路由、负载均衡、限流、鉴权) |  | (反向代理、静态资源服务)      |   |
      |   +---------------------------+  +-----------------------------+   |
      +-------------------------------------------------------------------+
                                      |
      +-------------------------------------------------------------------+
      |                       业务层 (ThinkPHP)                          |
      |   +-----------+  +-----------+  +-----------+  +-----------+     |
      |   | 用户服务   |  | 商品服务   |  | 订单服务   |  | 支付服务   | ... |
      |   | (User)    |  | (Product) |  | (Order)   |  | (Payment) |     |
      |   +-----------+  +-----------+  +-----------+  +-----------+     |
      +-------------------------------------------------------------------+
                                      |
      +-------------------------------------------------------------------+
      |                       基础服务层                                  |
      |   +-----------+  +-----------+  +-----------+  +-----------+     |
      |   |  消息队列  |  |  缓存层    |  |  搜索引擎  |  |  文件存储  |     |
      |   | (RabbitMQ)|  | (Redis)   |  | (ES)      |  | (OSS/COS) |     |
      |   +-----------+  +-----------+  +-----------+  +-----------+     |
      +-------------------------------------------------------------------+
                                      |
      +-------------------------------------------------------------------+
      |                       数据持久层                                  |
      |   +-------------------+  +-----------------------------------+   |
      |   |      MySQL        |  |          其他数据库                |   |
      |   | (主业务数据)        |  | (如MongoDB用于日志)               |   |
      |   +-------------------+  +-----------------------------------+   |
      +-------------------------------------------------------------------+

2. 技术栈详解

层级组件选型职责
客户端前端框架uni-app使用Vue语法编写一套代码，多端发布
UI框架uView UI / uni-ui提供丰富的跨端UI组件
状态管理Vuex管理跨组件、跨页面的应用状态
接入层Web服务器Nginx反向代理、负载均衡、静态资源服务
API网关ThinkPHP Gateway/自研统一入口、鉴权、限流、日志
业务层后端框架ThinkPHP 6.x+MVC架构，提供RESTful API
API认证JWT (JSON Web Token)无状态的身份验证
任务调度ThinkPHP Command执行定时任务（如关闭超时订单）
基础服务缓存Redis会话存储、热点数据缓存、秒杀库存
消息队列RabbitMQ / Redis Stream异步化任务（邮件、短信、日志）
搜索引擎Elasticsearch商品搜索、日志分析
对象存储阿里云OSS/腾讯云COS存储用户上传的图片、文件等
数据层关系数据库MySQL 8.0+存储核心业务数据（用户、商品、订单）
数据库工具ThinkPHP ORM提供优雅的数据模型和查询

2025020323034845.png

二、核心功能模块解析

1. 用户中心模块

功能点：  注册、登录（密码/短信/第三方）、个人信息管理、收货地址管理。

  • ThinkPHP设计：

    • user 表：id, username, password_hash, mobile, avatar, openid(小程序), unionid等。

    • 安全：  密码使用 password_hash() 加密存储。

    • 小程序登录流程：

      1. uni-app调用 uni.login() 获取 code。
      2. 将 code 发送至后端 /api/user/wxLogin。
      3. 后端用 appid + appsecret + code 请求微信接口换 openid 和 session_key。
      4. 后端根据 openid 查询或创建用户，并生成JWT Token返回。

  • uni-app实现：  使用Vuex全局管理用户状态，登录后持久化Token至 uni.setStorageSync()。

2. 商品系统模块

功能点：  商品分类、商品列表、商品详情、搜索、SKU管理。

  • 数据库设计：

    • product 表：基础信息（名称、价格、主图等）。
    • product_sku 表：SKU具体信息（规格组合、库存、价格）。
    • category 表：树状结构分类。

  • 高性能实现：

    • 列表缓存：  ThinkPHP将热门分类的商品列表结果缓存到Redis，设置短过期时间。
    • 详情缓存：  商品详情页是读多写少的典型场景，使用Redis将商品详情序列化存储，Key如 product:detail:{id}。
    • 搜索：  使用Elasticsearch建立商品索引，实现分词、拼音、模糊匹配和高亮。

3. 购物车模块

功能点：  增删改查、数量变更、价格实时计算。

  • 两种模式：

    1. 未登录状态：  数据存储在uni-app的Vuex和本地存储中。
    2. 登录状态：  同步本地购物车数据到后端，数据存储在MySQL的 cart 表中，同时也在Redis中缓存一份（cart:user:{uid}）以提升读取速度。

  • 数据结构：

    json

    // Redis Hash结构
Key: `cart:user:1`
Field: `sku_123` // 字段名为SKU ID
Value: '{"num": 2, "selected": true}' // 商品数量和选中状态

4. 订单与支付模块 (核心复杂度所在)

功能点：  下单、库存校验、支付、回调、退款。

  • 下单流程（最关键的分布式事务）：

    1. 请求下单API：  uni-app提交商品、地址等信息。
    2. 验证与计算：  ThinkPHP验证价格、优惠券、收货地址。
    3. 库存预扣减（防超卖核心）：  在Redis中使用原子操作（DECRBY）预扣减库存（stock:sku:{id}）。先扣缓存，再落订单。
    4. 创建订单：  写入 order 表和 order_item 表，状态为「待支付」。
    5. 准备支付：  调用支付服务（微信/支付宝）获取支付参数。
    6. 返回支付参数：  给uni-app，客户端调用 uni.requestPayment()。

  • 支付回调（幂等性）：

    1. 支付成功后，支付平台异步通知后端 api/order/notify。
    2. 验证签名、查询本地订单状态（防止重复回调）。
    3. 更新订单状态为「已支付」。
    4. 异步任务（MQ）更新商品销量、清理购物车、发送通知。

  • 库存管理：

    • Redis库存：  用于秒杀和高并发下的预扣减，保证性能。
    • MySQL库存：  是真实库存。在支付回调成功后，再进行最终扣减。通过定时任务校对Redis和MySQL的库存数据。

5. 秒杀/高并发场景专项设计

  • 思路：  限流、削峰、异步、内存操作。

  • 具体措施：

    1. 独立秒杀服务：  从主业务中剥离，减少复杂性。
    2. 流量隔离：  使用API网关对秒杀入口进行限流（如每秒1000次请求）。
    3. 前置验证：  在入口层验证用户权限和活动是否开始/结束。
    4. 请求入队：  将通过验证的请求发送到RabbitMQ队列中，告知用户「排队中」。
    5. 异步下单：  后台Worker从队列消费消息，执行上述「库存预扣减」和「创建订单」流程。成功后再通过WebSocket或uni-app的推送通知用户结果。

2025020323035761.png

三、数据模型设计核心 (部分)

sql

-- 用户表
CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) DEFAULT NULL COMMENT '用户名',
  `password_hash` varchar(255) NOT NULL COMMENT '加密密码',
  `mobile` varchar(20) DEFAULT NULL COMMENT '手机号',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像',
  `openid_wx` varchar(50) DEFAULT NULL COMMENT '微信OpenID',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `mobile` (`mobile`),
  UNIQUE KEY `openid_wx` (`openid_wx`)
) ENGINE=InnoDB COMMENT='用户表';

-- 商品SKU表
CREATE TABLE `product_sku` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL COMMENT '商品ID',
  `sku_code` varchar(100) NOT NULL COMMENT 'SKU编码',
  `price` decimal(10,2) NOT NULL COMMENT '价格',
  `stock` int(11) NOT NULL DEFAULT '0' COMMENT '库存',
  `attrs` varchar(500) DEFAULT NULL COMMENT '销售属性JSON',
  PRIMARY KEY (`id`),
  KEY `product_id` (`product_id`)
) ENGINE=InnoDB COMMENT='商品SKU表';

-- 订单主表
CREATE TABLE `order` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `order_sn` varchar(30) NOT NULL COMMENT '订单号',
  `user_id` int(11) NOT NULL,
  `total_amount` decimal(10,2) NOT NULL COMMENT '订单总额',
  `pay_amount` decimal(10,2) NOT NULL COMMENT '实付总额',
  `status` tinyint(4) NOT NULL DEFAULT '0' COMMENT '状态(0:待支付,1:已支付,2:已发货...)',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  `pay_time` datetime DEFAULT NULL COMMENT '支付时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `order_sn` (`order_sn`),
  KEY `user_id` (`user_id`),
  KEY `create_time` (`create_time`)
) ENGINE=InnoDB COMMENT='订单表';

总结

构建这样一个平台，是业务复杂性和技术挑战的结合。

  • ThinkPHP侧 需要关注：API设计的规范性、数据库与缓存的一致性、支付与回调的安全与幂等、在高并发下的稳定性。
  • uni-app侧 需要关注：跨端兼容性、极致的用户体验（如流畅的动画）、本地数据管理和与原生能力的交互。

建议采用敏捷开发模式，分阶段实施：

  1. MVP阶段 (1.0)：  实现核心链路（用户->商品->购物车->订单->支付）。
  2. 增长阶段 (2.0)：  完善营销工具（优惠券、拼团）、售后、数据统计。
  3. 扩展阶段 (3.0)：  引入微服务化、大数据分析、AI推荐等高级功能。

这套架构已经过大量项目验证，具备了支撑一个中型全渠道电商平台的能力。

avatar
文章
阅读
粉丝