美多商城之商品(商品列表页)

四、商品列表页 4.1 商品列表页分析

4.1.1. 商品列表页组成结构分析

1.商品频道分类

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

2.面包屑导航

• 可以使用三级分类ID，查询出该类型商品的三级分类数据。

3.排序和分页

• 无论如何排序和分页，商品的分类不能变。
• 排序时需要知道当前排序方式。
• 分页时需要知道当前分页的页码，且每页五条商品记录。

4.热销排行

• 热销排行中的商品分类要和排序、分页的商品分类一致。
• 热销排行是查询出指定分类商品销量前二的商品。
• 热销排行使用Ajax实现局部刷新的效果。

4.1.2. 商品列表页接口设计和定义

1.请求方式

选项方案请求方法GET请求地址/list/(?P\d+)/(?P\d+)/?sort=排序方式

# 按照商品创建时间排序
http://www.meiduo.site:8000/list/115/1/?sort=default
# 按照商品价格由低到高排序
http://www.meiduo.site:8000/list/115/1/?sort=price
# 按照商品销量由高到低排序
http://www.meiduo.site:8000/list/115/1/?sort=hot

总路由：

 子路由：

from django.conf.urls import url
from . import views

urlpatterns = [
    #  商品列表
    url(r'^list/(?P\d+)/(?P\d+)/$', views.ListView.as_view(), name='list'),

]

2.请求参数：路径参数 和 查询参数

参数名类型是否必传说明category_idstring是商品分类ID，第三级分类page_numstring是当前页码sortstring否排序方式

3.响应结果：HTML

list.html

【把list.html和list.js文件复制到项目中】

4.接口定义

goods.views.py

from django.shortcuts import render
from django.views import View


# Create your views here.
class ListView(View):
    """商品列表页"""

    def get(self, request, category_id, page_num):
        """提供商品列表页"""
        return render(request, 'list.html')

4.2 列表页面包屑导航

重要提示：路径参数category_id是商品第三级分类

4.2.1. 查询列表页面包屑导航数据

提示： 对包屑导航数据的查询进行封装，方便后续直接使用。

goods.utils.py

def get_breadcrumb(category):
    """
    获取面包屑导航
    :param category: 商品类别
    :return: 面包屑导航字典
    """
    breadcrumb = dict(
        cat1='',
        cat2='',
        cat3=''
    )
    if category.parent is None:
        # 当前类别为一级类别
        breadcrumb['cat1'] = category
    elif category.subs.count() == 0:  # 此时若没有子集，则为3级
        # 当前类别为三级
        breadcrumb['cat3'] = category
        cat2 = category.parent
        breadcrumb['cat2'] = cat2
        breadcrumb['cat1'] = cat2.parent
    else:
        # 当前类别为二级
        breadcrumb['cat2'] = category
        breadcrumb['cat1'] = category.parent

    return breadcrumb

views.py

from goods.models import GoodsCategory, SKU
from django import http
from contents.utils import get_categories
from goods.utils import get_breadcrumb

class ListView(View):
    """商品列表页"""

    def get(self, request, category_id, page_num):
        """提供商品列表页"""
        # 判断category_id是否正确
        try:
            category = models.GoodsCategory.objects.get(id=category_id)
        except models.GoodsCategory.DoesNotExist:
            return http.HttpResponseNotFound('GoodsCategory does not exist')

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

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

4.2.2. 渲染列表页面包屑导航数据

list.html