乐优商场开发第九天笔记

最新推荐文章于 2023-12-26 14:17:07 发布

浪里小菜鸟

最新推荐文章于 2023-12-26 14:17:07 发布

阅读量1.1k

点赞数

分类专栏： leyou

本文链接：https://blog.csdn.net/wwg18895736195/article/details/83180059

版权

0.学习目标

了解商品规格数据结构设计思路
实现商品规格查询
了解SPU和SKU数据结构设计思路
实现商品查询
了解商品新增的页面实现
独立编写商品新增后台功能

1.商品规格数据结构

乐优商城是一个全品类的电商网站，因此商品的种类繁多，每一件商品，其属性又有差别。为了更准确描述商品及细分差别，抽象出两个概念：SPU和SKU，了解一下：

1.1.SPU和SKU

SPU：Standard Product Unit （标准产品单位），一组具有共同属性的商品集

SKU：Stock Keeping Unit（库存量单位），SPU商品集因具体特性不同而细分的每个商品

以图为例来看：

1526085541996

本页的华为Mate10 就是一个商品集（SPU）
因为颜色、内存等不同，而细分出不同的Mate10，如亮黑色128G版。（SKU）

可以看出：

SPU是一个抽象的商品集概念，为了方便后台的管理。
SKU才是具体要销售的商品，每一个SKU的价格、库存可能会不一样，用户购买的是SKU而不是SPU

1.2.数据库设计分析

1.2.1.思考并发现问题

弄清楚了SPU和SKU的概念区分，接下来我们一起思考一下该如何设计数据库表。

首先来看SPU，大家一起思考下SPU应该有哪些字段来描述？

id:主键
title：标题
description：描述
specification：规格
packaging_list：包装
after_service：售后服务
comment：评价
category_id：商品分类
brand_id：品牌

似乎并不复杂，但是大家仔细思考一下，商品的规格字段你如何填写？

1526086539789

不同商品的规格不一定相同，数据库中要如何保存？

再看下SKU，大家觉得应该有什么字段？

id：主键
spu_id：关联的spu
price：价格
images：图片
stock：库存
颜色？
内存？
硬盘？

碰到难题了，不同的商品分类，可能属性是不一样的，比如手机有内存，衣服有尺码，我们是全品类的电商网站，这些不同的商品的不同属性，如何设计到一张表中？

1.2.2.分析规格参数

仔细查看每一种商品的规格你会发现：

虽然商品规格千变万化，但是同一类商品（如手机）的规格是统一的，有图为证：

华为的规格：

1526087063700

三星的规格：

1526087142454

也就是说，商品的规格参数应该是与分类绑定的。每一个分类都有统一的规格参数模板，但不同商品其参数值可能不同。

如下图所示：

1526088168565

1.2.3.SKU的特有属性

SPU中会有一些特殊属性，用来区分不同的SKU，我们称为SKU特有属性。如华为META10的颜色、内存属性。

不同种类的商品，一个手机，一个衣服，其SKU属性不相同。

同一种类的商品，比如都是衣服，SKU属性基本是一样的，都是颜色、尺码等。

这样说起来，似乎SKU的特有属性也是与分类相关的？事实上，仔细观察你会发现，SKU的特有属性是商品规格参数的一部分：

1526088981953

也就是说，我们没必要单独对SKU的特有属性进行设计，它可以看做是规格参数中的一部分。这样规格参数中的属性可以标记成两部分：

所有sku共享的规格属性（称为全局属性）
每个sku不同的规格属性（称为特有属性）

1526089506566

1.2.4.搜索属性

打开一个搜索页，我们来看看过滤的条件：

1526090072535

你会发现，过滤条件中的屏幕尺寸、运行内存、网路、机身内存、电池容量、CPU核数等，在规格参数中都能找到：

1526090228171

也就是说，规格参数中的数据，将来会有一部分作为搜索条件来使用。我们可以在设计时，将这部分属性标记出来，将来做搜索的时候，作为过滤条件。要注意的是，无论是SPU的全局属性，还是SKU的特有属性，都有可能作为搜索过滤条件的，并不冲突，而是有一个交集：

1526091216124

1.3.规格参数表

1.3.1.表结构

我们看下规格参数的格式：

1526092179381

可以看到规格参数是分组的，每一组都有多个参数键值对。不过对于规格参数的模板而言，其值现在是不确定的，不同的商品值肯定不同，模板中只要保存组信息、组内参数信息即可。

因此我们设计了两张表：

tb_spec_group：组，与商品分类关联
tb_spec_param：参数名，与组关联，一对多

1.3.2.规格组

规格参数分组表：tb_spec_group

CREATE TABLE `tb_spec_group` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `cid` bigint(20) NOT NULL COMMENT '商品分类id，一个分类下有多个规格组',
  `name` varchar(50) NOT NULL COMMENT '规格组的名称',
  PRIMARY KEY (`id`),
  KEY `key_category` (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8 COMMENT='规格参数的分组表，每个商品分类下有多个规格参数组';

规格组有3个字段：

id：主键
cid：商品分类id，一个分类下有多个模板
name：该规格组的名称。

1.3.2.规格参数

规格参数表：tb_spec_param

CREATE TABLE `tb_spec_param` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `cid` bigint(20) NOT NULL COMMENT '商品分类id',
  `group_id` bigint(20) NOT NULL,
  `name` varchar(255) NOT NULL COMMENT '参数名',
  `numeric` tinyint(1) NOT NULL COMMENT '是否是数字类型参数，true或false',
  `unit` varchar(255) DEFAULT '' COMMENT '数字类型参数的单位，非数字类型可以为空',
  `generic` tinyint(1) NOT NULL COMMENT '是否是sku通用属性，true或false',
  `searching` tinyint(1) NOT NULL COMMENT '是否用于搜索过滤，true或false',
  `segments` varchar(1000) DEFAULT '' COMMENT '数值类型参数，如果需要搜索，则添加分段间隔值，如CPU频率间隔：0.5-1.0',
  PRIMARY KEY (`id`),
  KEY `key_group` (`group_id`),
  KEY `key_category` (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8 COMMENT='规格参数组下的参数名';

按道理来说，我们的规格参数就只需要记录参数名、组id、商品分类id即可。但是这里却多出了很多字段，为什么？

还记得我们之前的分析吧，规格参数中有一部分是 SKU的通用属性，一部分是SKU的特有属性，而且其中会有一些将来用作搜索过滤，这些信息都需要标记出来。

通用属性

用一个布尔类型字段来标记是否为通用：

generic来标记是否为通用属性：
- true：代表通用属性
- false：代表sku特有属性

搜索过滤

与搜索相关的有两个字段：

searching：标记是否用作过滤
- true：用于过滤搜索
- false：不用于过滤
segments：某些数值类型的参数，在搜索时需要按区间划分，这里提前确定好划分区间
- 比如电池容量，0_{2000mAh，2000mAh}3000mAh，3000mAh~4000mAh

数值类型

某些规格参数可能为数值类型，这样的数据才需要划分区间，我们有两个字段来描述：

numberic：是否为数值类型
- true：数值类型
- false：不是数值类型
unit：参数的单位

2.商品规格参数管理

2.1.页面布局

2.1.1.整体布局

打开规格参数页面，看到如下内容：

1529549099049

商品分类树我们之前已经做过，所以这里可以直接展示出来。

因为规格是跟商品分类绑定的，因此首先会展现商品分类树，并且提示你要选择商品分类，才能看到规格参数的模板。一起了解下页面的实现：

1529549521623

页面结构：

1528423299102

这里使用了v-layout来完成页面布局，并且添加了row属性，代表接下来的内容是行布局（左右）。

可以看出页面分成2个部分：

<v-flex xs3>：左侧，内部又分上下两部分：商品分类树及标题
- v-card-title：标题部分，这里是提示信息，告诉用户要先选择分类，才能看到模板
- v-tree：这里用到的是我们之前讲过的树组件，展示商品分类树，
<v-flex xs9 class="px-1">：右侧：内部是规格参数展示

2.1.2.右侧规格

当我们点击一个分类时，最终要达到的效果：

1529550402376

可以看到右侧分为上下两部分：

上部：面包屑，显示当前选中的分类
下部：table，显示规格参数信息

页面实现：

1529550694218

可以看到右侧并不是我们熟悉的 v-data-table，而是一个spec-group组件（规格组）和spec-param组件（规格参数），这是我们定义的独立组件：

1529550775415

在SpecGroup中定义了表格：

1528427514717

2.2.规格组的查询

2.2.1.树节点的点击事件

当我们点击树节点时，要将v-dialog打开，因此必须绑定一个点击事件：

1528428028513

我们来看下handleClick方法：

1528428221957

点击事件发生时，发生了两件事：

记录当前选中的节点，选中的就是商品分类
showGroup被置为true，则规格组就会显示了。

同时，我们把被选中的节点（商品分类）的id传递给了SpecGroup组件：

1528428308113

2.2.2.页面查询规格组

来看下SpecGroup.vue中的实现：

1528428617046

我们查看页面控制台，可以看到请求已经发出：

1528428699027

2.2.3.后端代码

实体类

在leyou-item-interface中添加实体类：

1528429029149

内容：

@Table(name = "tb_spec_group")
public class SpecGroup {
   

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private Long cid;

    private String name;

    @Transient
    private List<SpecParam> params;

   // getter和setter省略
}

@Table(name = "tb_spec_param")
public class SpecParam {
   
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private Long cid;
    private Long groupId;
    private

最低0.47元/天解锁文章

浪里小菜鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
乐优商场开发第九天笔记

0.学习目标了解商品规格数据结构设计思路实现商品规格查询了解SPU和SKU数据结构设计思路实现商品查询了解商品新增的页面实现独立编写商品新增后台功能1.商品规格数据结构乐优商城是一个全品类的电商网站，因此商品的种类繁多，每一件商品，其属性又有差别。为了更准确描述商品及细分差别，抽象出两个概念：SPU和SKU，了解一下：1.1.SPU和SKUSPU：Standard Prod...
复制链接

扫一扫

专栏目录