美多商城之商品(商品详情页)

六、商品详情页 6.1 商品详情页分析和准备

6.1.1. 商品详情页组成结构分析

1.商品频道分类

• 已经提前封装在contents.utils.py文件中，直接调用方法即可。

2.面包屑导航

• 已经提前封装在goods.utils.py文件中，直接调用方法即可。

3.热销排行

• 该接口已经在商品列表页中实现完毕，前端直接调用接口即可。

4.商品SKU信息(详情信息)

• 通过sku_id可以找到SKU信息，然后渲染模板即可。
• 使用Ajax实现局部刷新效果。

5.SKU规格信息

• 通过SKU可以找到SPU规格和SKU规格信息。

6.商品详情介绍、规格与包装、售后服务

• 通过SKU可以找到SPU信息，SPU中可以查询出商品详情介绍、规格与包装、售后服务。

7.商品评价

• 商品评价需要在生成了订单，对订单商品进行评价后再实现，商品评价信息是动态数据。
• 使用Ajax实现局部刷新效果。

6.1.2. 商品详情页接口设计和定义

1.请求方式

选项方案请求方法GET请求地址/detail/(?P\d+)/

    #  商品详情
    url(r'^detail/(?P\d+)/$', views.DetailView.as_view(), name='detail'),

2.请求参数：路径参数

参数名类型是否必传说明sku_idstring是商品SKU编号

3.响应结果：HTML

detail.html

4.接口定义

goods.views.py

class DetailView(View):
    """商品详情页"""

    def get(self, request, sku_id):
        """提供商品详情页"""
        return render(request, 'detail.html')

6.1.3. 商品详情页初步渲染

渲染商品频道分类、面包屑导航、商品热销排行

• 将原先在商品列表页实现的代码拷贝到商品详情页即可。
• 添加detail.js

class DetailView(View):
    """商品详情页"""

    def get(self, request, sku_id):
        """提供商品详情页"""
        # 获取当前sku的信息
        try:
            sku = models.SKU.objects.get(id=sku_id)
        except models.SKU.DoesNotExist:
            return render(request, '404.html')

        # 查询商品频道分类
        categories = get_categories()
        # 查询面包屑导航
        breadcrumb = get_breadcrumb(sku.category)

        # 渲染页面
        context = {
            'categories':categories,
            'breadcrumb':breadcrumb,
            'sku':sku,
        }
        return render(request, 'detail.html', context)

提示：为了让前端在获取商品热销排行数据时，能够拿到商品分类ID，我们将商品分类ID从模板传入到Vue.js

    let category_id = "{{ sku.category.id }}";

data: {
    category_id: category_id,
},

6.2 展示详情页数据 6.2.1. 查询和渲染SKU详情信息

# 渲染页面
context = {
    'categories':categories,
    'breadcrumb':breadcrumb,
    'sku':sku,
}
return render(request, 'detail.html', context)