完整电商项目--（六）商品模块（7）：商品详情页

商品详情页业务分析

• 1.商品频道分类（讲过）
• 2.面包屑导航（讲过）
• 3.热销排行（讲过）
• 4.商品SKU信息(详情信息)（查询）
• 5.SKU规格信息（讲过）
• 6.商品详情介绍、规格与包装、售后服务（查询）
• 7.商品评价（查询）
• 8.访问量统计
  其他的都没得说，我们主要讲解商品的详情页的 sku 规格展示
  

业务

spu商品规格查询

• 就是我们上面的图片中的框中的信息，我们还是说下，后面好接着理解。

第一步：明确这是商品详情页！

• 也就是具体的sku商品的信息
• 其中我们知道这个商品的id， 且展示规格的时候，可以发现，规格选项是选择好的这个商品的

第二步：查询规格选项信息

• 方法： 参考之前的模型（数据表）的关系讲解，其实很简单实现了。
• 通过 商品id，查询spu商品模型对象==》通过外键查询对应的sku模型对象==》之后外键查询出所有的对应的规格模型对象（比如尺寸，颜色，内存）==》再查询出来,每个规格 所对应的规格选项（比如颜色：蓝色，黑色，白色）
• 之后构造好数据结构即可，前端后端不分离很简单，直接返回查询对象即可。

规格选项上的链接构造：

**重点来了！

• ** 观察上图我们发现，版本选择的是 8G128GB的，当我们要换其他的配置时，是怎么确定 具体商品的链接的呢？然后实现跳转的？
  
• 可以发现每次更换配置选项，前端都会发送请求，返回当前的 sku商品的信息。
• 实现： 发现规律： 我们鼠标每次只能点击更换一个配置选项，也就是说，两个商品之间，唯一不同的只有一个配置选项不同！ 这就启发了我们，在上面传递 规格选项信息的时候，每个规格选项其实 都能根据当前的 sku商品信息去构建 确定的商品id， 也就是我们确定的将每个 商品规格信息，绑定一个 商品id值，发送给前端，当用户改变当前商品页的某个 规格选项时，前端就知道该向后端请求哪个详情的商品，因为每个规格绑定了一个 商品id信息。
• 也就是说：我们通过当前的商品，返回规格选项的时候，每次都要在每个规格选项后面绑定商品id。
• 数据结构构造：
  我们把上面讲的步骤都连起来看下：

# 获取商品对应的spu， 获取里面的信息
        spu = sku.spu
# 获取商品的规格信息(就是比如 颜色，配置，尺寸等抽象，规格)
        # sku==>spu==>specs(外键指定的属性名)
        specs = spu.specs.order_by('id')
# 通过最开始通过sku_id，查询到sku，再查询到spu，通过spu对应的外键，查询到 spu对应的所有sku商品
        skus = spu.skus.order_by('id')
# 下面是准备工作： 我们构造所有sku商品的信息
'''

        构造这段数据的目的就是： 通过这个字典，为下面每一个类型的商品添加一个 id，点击不同的类型，可以切换到不同的商品
                {
                    选项:sku_id     （选项就是一个元组，里面的值是对应的规格的 规格选项值id）
                }
                说明：键的元组中，规格的索引是固定的
                示例数据如下： 假设华为手机有两个配置，颜色和内存(元组中每个元素代表对应规格的选项，位置是固定的，比如第一个位置表示颜色，第二个位置标识配置的选项id)
                {
                    (1,3):1,        # 元组里：1表示颜色规格对应的选项值，假如是对应红色，  3代表内存规格对应的选项 加入128G， 后面的值，代表商品id
                    (2,3):2,
                    (1,4):3,
                    (2,4):4
                }
      # 注意，两种规格就是有四种具体 sku商品组合
        '''
# 获取上述结构数据
		sku_options= {}
        sku_option = []
        for sku1 in skus:
            infos = sku1.specs.order_by('spec_id')  # 通过外键获得sku商品的所有规格选项id， 然后将这些获得的规格选项按照 规格的顺序进行排序（规格在另外一张表中的id来排序）
            option_key = []
            for info in infos:
                option_key.append(info.option_id) # 获取选项的id，放到列表里面
                # 获取当前商品的规格信息，因为要默认选择的
                if sku.id == sku1.id:
                    sku_option.append(info.option_id)

            # 下面开始构造上面格式的数据，列表值是可变的不能作为字典的键，所以转换为元组
            sku_options[tuple(option_key)]=sku1.id  # 键的值就是商品的id

# 下面就是为当前商品为基础，为每个规格选项绑定具体的商品id了！ 要用的上面得出的数据
# 遍历当前的spu所有的规格
        specs_list = []
        for index, spec in enumerate(specs):  # enumerate(), 通过这个方法，可以遍历出来 列表的元素和对应的索引
            option_list = []
            for option in spec.options.all():
                # 如果当前的商品为蓝，64，则对应的列表为[2，3]
                # 当前商品的选项
                sku_option_temp = sku_option[:]
                # 替换对应索引的元素：规格的索引是固定的，这句代码就是关键！ 一次只能更改一个规格选项，从而确定 每个规格选项绑定的商品id
                sku_option_temp[index] = option.id  # 新的列表，代表一个具体新的 sku商品
                # 为选项添加sku_id属性，用于在html中输出链接，这里得选项时 选项对象。因为前后端不分离开发
                option.sku_id = sku_options.get(tuple(sku_option_temp), 0) # 默认值为0
                option_list.append(option)
            spec.option_list = option_list
            specs_list.append(spec)
这样 specs 就被代替为了 specs_list ,因为里面的选项对象，重新添加了 商品id属性

这一部分是最复杂的地方。但是仔细理解，其实也不难，抓住重点。