yudao-cloud 开发指南 yudao-cloud 开发指南
  • 萌新必读
  • 后端手册
  • 微服务手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
单体版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读
  • 后端手册
  • 微服务手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
单体版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读

    • 简介
    • 交流群
    • 视频教程
    • 功能列表
    • 快速启动(后端项目)
    • 快速启动(前端项目)
    • 接口文档
    • 技术选型
    • 项目结构
    • 代码热加载
    • 一键改包
    • 迁移模块(适合新项目)
    • 删除功能(以租户为例)
    • 表结构变更(版本升级)
    • 国产信创数据库(DM 达梦、大金、OpenGauss)
    • 内网穿透
    • 面试题、简历模版、简历优化
    • 项目外包
  • 后端手册

    • 新建服务
    • 代码生成【单表】(新增功能)
    • 代码生成【主子表】
    • 代码生成(树表)
    • 功能权限
    • 数据权限
    • 用户体系
    • 三方登录
    • OAuth 2.0(SSO 单点登录)
    • SaaS 多租户【字段隔离】
    • SaaS 多租户【数据库隔离】
    • WebSocket 实时通信
    • 异常处理(错误码)
    • 参数校验、时间传参
    • 分页实现
    • VO 对象转换、数据翻译
    • 文件存储(上传下载)
    • Excel 导入导出
    • 操作日志、访问日志、异常日志
    • MyBatis 数据库
    • MyBatis 联表&分页查询
    • 多数据源(读写分离)
    • Redis 缓存
    • 本地缓存
    • 异步任务
    • 分布式锁
    • 幂等性(防重复提交)
    • 请求限流(RateLimiter)
    • HTTP 接口签名(防篡改)
    • 单元测试
    • 验证码
    • 工具类 Util
    • 数据库文档
  • 微服务手册

    • 微服务调试(必读)
    • 注册中心 Nacos
    • 配置中心 Nacos
    • 服务网关 Spring Cloud Gateway
    • 服务调用 Feign
    • 定时任务 XXL Job
    • 消息队列(内存)
    • 消息队列(Redis)
    • 消息队列(RocketMQ)
    • 消息队列(RabbitMQ)
    • 消息队列(Kafka)
    • 消息队列(Cloud)
    • 分布式事务 Seata
    • 服务保障 Sentinel
  • 工作流手册

    • 工作流演示
    • 功能开启
    • 工作流(达梦适配)
    • 审批接入(流程表单)
    • 审批接入(业务表单)
    • 流程设计器(BPMN)
    • 流程设计器(钉钉、飞书)
    • 选择审批人、发起人自选
    • 会签、或签、依次审批
    • 流程发起、取消、重新发起
    • 审批通过、不通过、驳回
    • 审批加签、减签
    • 审批转办、委派、抄送
    • 执行监听器、任务监听器
    • 流程表达式
    • 流程审批通知
  • 大屏手册

    • 报表设计器
    • 大屏设计器
  • 支付手册

    • 功能开启
    • 支付宝支付接入
    • 微信公众号支付接入
    • 微信小程序支付接入
    • 支付宝、微信退款接入
    • 钱包充值、支付、退款
    • 模拟支付、退款
  • 会员手册

    • 功能开启
    • 微信公众号登录
    • 微信小程序登录
    • 微信小程序订阅消息
    • 微信小程序码
    • 会员用户、标签、分组
    • 会员等级、积分、签到
  • 商城手册

    • 商城演示
    • 功能开启
    • 商城装修
    • 在线客服
    • 【商品】商品分类
    • 【商品】商品属性
    • 【商品】商品 SPU 与 SKU
      • 1. 表结构
        • 1.1 商品 SKU
        • 1.2 商品 SPU
      • 2. 管理后台
        • 2.1 商品列表
        • 2.2 商品发布
      • 3. 移动端
        • 3.1 商品列表
        • 3.2 商品详情
    • 【商品】商品评价
    • 【交易】购物车
    • 【交易】交易订单
    • 【交易】售后退款
    • 【交易】快递发货
    • 【交易】门店自提
    • 【交易】分销返佣
    • 【营销】优惠劵
    • 【营销】积分商城
    • 【营销】拼团活动
    • 【营销】秒杀活动
    • 【营销】砍价活动
    • 【营销】满减送活动
    • 【营销】限时折扣
    • 【营销】内容管理
    • 【统计】会员、商品、交易统计
  • ERP手册

    • ERP 演示
    • 功能开启
    • 【产品】产品信息、分类、单位
    • 【库存】产品库存、库存明细
    • 【库存】其它入库、其它出库
    • 【库存】库存调拨、库存盘点
    • 【采购】采购订单、入库、退货
    • 【销售】销售订单、出库、退货
    • 【财务】采购付款、销售收款
  • CRM手册

    • CRM 演示
    • 功能开启
    • 【线索】线索管理
    • 【客户】客户管理、公海客户
    • 【商机】商机管理、商机状态
    • 【合同】合同管理、合同提醒
    • 【回款】回款管理、回款计划
    • 【产品】产品管理、产品分类
    • 【通用】数据权限
    • 【通用】跟进记录、待办事项
  • AI大模型手册

    • AI 大模型演示
    • 功能开启
    • AI 聊天对话
    • AI 绘画创作
    • AI 知识库
    • AI 音乐创作
    • AI 写作助手
    • AI 思维导图
    • AI 工具(function calling)
    • AI 工作流
    • Dify 工作流
    • FastGPT 工作流
    • Coze 智能体
    • 【模型接入】OpenAI
    • 【模型接入】通义千问
    • 【模型接入】DeepSeek
    • 【模型接入】字节豆包
    • 【模型接入】腾讯混元
    • 【模型接入】硅基流动
    • 【模型接入】MiniMax
    • 【模型接入】月之暗灭
    • 【模型接入】百川智能
    • 【模型接入】文心一言
    • 【模型接入】LLAMA
    • 【模型接入】智谱 GLM
    • 【模型接入】讯飞星火
    • 【模型接入】微软 OpenAI
    • 【模型接入】谷歌 Gemini
    • 【模型接入】Stable Diffusion
    • 【模型接入】Midjourney
    • 【模型接入】Suno
  • IoT物联网手册

    • 功能开启
  • 公众号手册

    • 功能开启
    • 公众号接入
    • 公众号粉丝
    • 公众号标签
    • 公众号消息
    • 自动回复
    • 公众号菜单
    • 公众号素材
    • 公众号图文
    • 公众号统计
  • 系统手册

    • 短信配置
    • 邮件配置
    • 站内信配置
    • 数据脱敏
    • 敏感词
    • 地区 & IP 库
  • 运维手册

    • 开发环境
    • Linux 部署
    • Docker 部署
    • Jenkins 部署
    • 宝塔部署
    • HTTPS 证书
    • 服务监控
  • 前端手册 Vue 3.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
    • CRUD 组件
    • 国际化
    • IDE 调试
    • 代码格式化
  • 前端手册 Vue 2.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
  • 更新日志

    • 【v2.5.0】开发中...
    • 【v2.4.2】2025-04-12
    • 【v2.4.1】2025-02-09
    • 【v2.4.0】2024-12-31
    • 【v2.3.0】2024-10-07
    • 【v2.2.0】2024-08-02
    • 【v2.1.0】2024-05-05
    • 【v2.0.1】2024-03-01
    • 【v2.0.0】2024-01-26
    • 【v1.9.0】2023-12-01
  • 开发指南
  • 商城手册
芋道源码
2024-01-14
目录

【商品】商品 SPU 与 SKU

参考 《产品 SKU 是什么意思?与之相关的还有哪些?》 (opens new window) 整理

# 1. 表结构

商品 SPU 与 SKU,由 yudao-module-product-biz 后端模块的 spu、sku 包实现,分成商品 SPU 和商品 SKU 两个表。

表结构

# 1.1 商品 SKU

SKU:Stock Keeping Unit

中文翻译为库存单位。SKU 从库存视角,以库存进出为单位,可以是件、瓶、箱等等。

例如,iPhone 手机,按照规格( 颜色 + 内存 )可以组合出如下多个 SKU :

SKU 颜色 内存
A 白色 16G
B 白色 64G
C 黑色 16G
D 黑色 64G

可以看出,颜色(白色、黑色)与内存(16G、64G)组合排列出四种 iPhone SKU。

最终 SKU 表结构如下:

省略 creator/create_time/updater/update_time/deleted/tenant_id 等通用字段

CREATE TABLE `product_sku` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  
  `spu_id` bigint NOT NULL COMMENT 'spu编号',
  
  `properties` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '属性数组,JSON 格式 [{propertId: , valueId: }, {propertId: , valueId: }]',
  
  `price` int NOT NULL DEFAULT '-1' COMMENT '商品价格,单位:分',
  `market_price` int DEFAULT NULL COMMENT '市场价,单位:分',
  `cost_price` int NOT NULL DEFAULT '-1' COMMENT '成本价,单位: 分',
  `bar_code` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'SKU 的条形码',
  `pic_url` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '图片地址',
  `stock` int DEFAULT NULL COMMENT '库存',
  `weight` double DEFAULT NULL COMMENT '商品重量,单位:kg 千克',
  `volume` double DEFAULT NULL COMMENT '商品体积,单位:m^3 平米',
  
  `first_brokerage_price` int DEFAULT NULL COMMENT '一级分销的佣金,单位:分',
  `second_brokerage_price` int DEFAULT NULL COMMENT '二级分销的佣金,单位:分',
  
  `sales_count` int DEFAULT NULL COMMENT '商品销量',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=30 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品sku';

① spu_id 字段:商品 SPU 的编号,关联 product_spu 表的 id 字段。

② properties 字段:商品属性,JSON 格式,例如:

SKU 信息

[
  {
    "propertyId": 1,
    "propertyName": "颜色",
    "valueId": 5,
    "valueName": "黑色"
  },
  {
    "propertyId": 3,
    "propertyName": "版本",
    "valueId": 8,
    "valueName": "CH510"
  }
]

很明显,property_id 对应 product_property 表的 id 字段,value_id 对应 product_property_value 表的 id 字段。

那么为什么要冗余 propertyName、valueName 字段呢?主要是为了方便查询,不用再关联 product_property、product_property_value 表,嘿嘿~

③ price、market_price、cost_price、bar_code、weight、volume、pic_url 字段,都是商品 SKU 的基本信息。

④ sales_count 字段:商品销量,每次用户下单时,更新该字段。

⑤ first_brokerage_price、second_brokerage_price 字段:一级分销、二级分销的佣金,可能未来会挪到【营销】模块下,目前不用特别关注。

# 1.2 商品 SPU

SPU:Standard Product Unit

中文翻译为标准产品单位。SPU 从产品视角,是产品信息聚合的最小单位,是一组可复用、易检索的标准化信息的集合,该集合描述了一个产品的特性。通俗点讲,属性值、特性相同的商品就可以被称为一个 SPU。

例如 iPhone 14 就是一个 SPU,iPhone 14 Plus 也是一个 SPU ,这个与商家无关,与颜色、款式、套餐等规格无关。

商家出售某个 SPU,那么这就是一个商品。商品在 SPU 之上,增加了销售价格、运费等等信息。另外,一个商品可以包含多个 SKU。

最终 SPU 表结构如下:

省略 creator/create_time/updater/update_time/deleted/tenant_id 等通用字段

CREATE TABLE `product_spu` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '商品 SPU 编号,自增',
  `name` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '商品名称',
  `keyword` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '关键字',
  `introduction` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '商品简介',
  `description` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci COMMENT '商品详情',
  `category_id` bigint NOT NULL COMMENT '商品分类编号',
  `brand_id` int DEFAULT NULL COMMENT '商品品牌编号',
  `pic_url` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '商品封面图',
  `slider_pic_urls` varchar(2000) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '商品轮播图地址\n 数组,以逗号分隔\n 最多上传15张',
  
  `status` tinyint NOT NULL COMMENT '商品状态: 0 上架(开启) 1 下架(禁用)-1 回收',
  
  `spec_type` bit(1) DEFAULT NULL COMMENT '规格类型:0 单规格 1 多规格',
  `price` int NOT NULL DEFAULT '-1' COMMENT '商品价格,单位使用:分',
  `market_price` int DEFAULT NULL COMMENT '市场价,单位使用:分',
  `cost_price` int NOT NULL DEFAULT '-1' COMMENT '成本价,单位: 分',
  `stock` int NOT NULL DEFAULT '0' COMMENT '库存',
  
  `delivery_types` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '配送方式数组',
  `delivery_template_id` bigint DEFAULT NULL COMMENT '物流配置模板编号',
  
  `give_integral` int NOT NULL DEFAULT '0' COMMENT '赠送积分',
  `sales_count` int DEFAULT '0' COMMENT '商品销量',
  `virtual_sales_count` int DEFAULT '0' COMMENT '虚拟销量',
  `browse_count` int DEFAULT '0' COMMENT '商品点击量',
  `sort` int NOT NULL DEFAULT '0' COMMENT '排序字段',

  `sub_commission_type` bit(1) DEFAULT NULL COMMENT '分销类型',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=640 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品spu';

① 【基础设置】name、keyword、introduction、description、category_id、brand_id、pic_url、slider_pic_urls 字段:商品 SPU 的基本信息。

基础设置

② status 字段:商品状态,1 上架(开启)、0 下架(禁用)、-1 回收,用户在 uni-app 看到的商品,只有 status 为 1 的商品。

③ 【库存价格】spec_type 字段:规格类型,false 单规格、true 多规格。要注意,即使是单规格,也会创建一个 SKU,这个 SKU 的 properties 字段为“默认”数组 [{"propertyId":0,"propertyName":"默认","valueId":0,"valueName":"默认"}]。

price、market_price、cost_price 字段:取对应 SKU 的最小值。stock 字段:取对应 SKU 库存的累加值。

库存价格

④ 【物流设置】delivery_types 字段:配送方式数组,目前有 1 快递发货、2 门店自提。

delivery_template_id 字段:物流配置模板编号,仅当 delivery_types 为 1 时,才会有值。

物流设置

⑤ 【其它设置】give_integral 字段:赠送积分,用户购买该商品,赠送的积分。

sales_count 字段:商品销量,每次用户下单时,更新该字段。virtual_sales_count 字段:虚拟销量,最终展示给用户的销量是 sales_count + virtual_sales_count 。

browse_count 字段:商品点击量,每次用户点击商品时,更新该字段。另外,也会往 product_browse_history 插入一条浏览记录。

其它设置

# 2. 管理后台

# 2.1 商品列表

对应 [商城系统 -> 商品中心 -> 商品列表] 菜单,对应 yudao-ui-admin-vue3 项目的 @/views/mall/product/spu 目录。

商品列表

# 2.2 商品发布

商品的新增、修改、详情界面,都对应 yudao-ui-admin-vue3 项目的 @/views/mall/product/spu/form 目录。

商品发布

考虑到前端代码的维护性,每个 Tab 对应一个组件,这样修改某个 Tab 的代码,不会影响到其它 Tab 的代码。如下图所示:

前端代码

  • 基础设置:views/mall/product/spu/form/InfoForm.vue
  • 库存价格:views/mall/product/spu/form/SkuForm.vue
  • 物流设置:views/mall/product/spu/form/DeliveryForm.vue
  • 商品描述:views/mall/product/spu/form/DescriptionForm.vue
  • 其它设置:views/mall/product/spu/form/OtherForm.vue

# 3. 移动端

商品在 uni-app 的代码,主要在 yudao-ui-uniapp 项目的 @/pages/goods 目录。如下图所示:

前端代码

# 3.1 商品列表

商品列表,对应 @/pages/goods/list.vue 文件。界面效果如下图所示:

商品列表

# 3.2 商品详情

商品详情,对应 @/pages/goods/index.vue 文件。界面效果如下图所示:

商品详情

考虑到商品详情界面的复杂性,所以将其拆分成多个组件,如下图所示:

商品详情

另外,如果你想看商品 SKU 选择的代码,可以看 /sheep/components/s-select-sku/s-select-sku.vue 文件。

注意,拼团、秒杀商品的界面展示不同,所以单独分别对应了 @/pages/goods/groupon.vue、@/pages/goods/seckill.vue 文件。

【商品】商品属性
【商品】商品评价

← 【商品】商品属性 【商品】商品评价→

Theme by Vdoing | Copyright © 2019-2025 芋道源码 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×