一、商品列表页功能实现

1.后台查询代码

from django import http
from django.shortcuts import render

# Create your views here.
from django.views import View

from app.contents.utils import get_categories
from app.goods.models import SKU, GoodsCategory, GoodsVisitCount
from app.goods.utlis import get_breadcrumb
from utils.response_code import RETCODE

# Create your views here.
class ListView(View):

    def get(self,request,category_id,page_num):

        # 一.面包屑实现
        """
        我们需要根据当前的分类,来获取它的上级/下级信息

        """
        # ① 获取当前的分类
        try:
            category=GoodsCategory.objects.get(id=category_id)
        except Exception as e:
            logger.error(e)
            return render(request,'list.html',context={'errmsg':'没有此分类'})
        # ② 获取它的上级/下级
        # 如果是三级　３个信息
        # 如果是二级　２个信息
        # 如果是１级　１个信息
        breadcrumb=get_breadcrumb(category)

        # 二.列表数据

        # 1.如果有排序字段先排序
        sort = request.GET.get('sort')
        # sort = hot 人气 根据 销量排序
        # sort = price 价格 根据 价格排序
        # sort = default 默认 根据 create_time排序
        if sort == 'hot':
            order_filed = 'sales'
        elif sort == 'price':
            order_filed = 'price'
        else:
            order_filed='create_time'
            sort='default'

        # 2.根据分类id,把所有数据都查询出来
        skus = SKU.objects.filter(category_id=category_id, is_launched=True).order_by(order_filed)

        # 3.如果有分页字段再分页
        try:
            page_num=int(page_num)
        except Exception as e:
            page_num=0

        # 3.1 导入分页类
        from django.core.paginator import Paginator
        try:
            #3.2 创建分页实例
            paginator = Paginator(skus,per_page=5)
            #3.3 获取分页数据
            page_skus = paginator.page(page_num)
            #总页数
            total_page=paginator.num_pages
        except Exception as e:
            pass




        context = {
            'category':category,
            'breadcrumb':breadcrumb,
            'sort': sort,  # 排序字段
            'page_skus': page_skus,  # 分页后数据
            'total_page': total_page,  # 总页数
            'page_num': page_num,  # 当前页码
        }

        return render(request,'list.html',context=context)

二、面包屑信息展示

1.前台html代码

<div class="breadcrumb">
    <a href="javascript:;">{{ breadcrumb.cat1.name }}</a>
    <span>></span>
    <a href="javascript:;">{{ breadcrumb.cat2.name }}</a>
    <span>></span>
    <a href="javascript:;">{{ breadcrumb.cat3.name }}</a>
</div>

2.实际效果

三、列表页信息展示

1.前台html代码

<div class="r_wrap fr clearfix">
    <div class="sort_bar">
        <a href="{{ url('goods:list', args=(category.id, page_num)) }}?sort=default" {% if sort == 'default' %}class="active"{% endif %}>默认</a>
        <a href="{{ url('goods:list', args=(category.id, page_num)) }}?sort=price" {% if sort == 'price' %}class="active"{% endif %}>价格</a>
        <a href="{{ url('goods:list', args=(category.id, page_num)) }}?sort=hot" {% if sort == 'hot' %}class="active"{% endif %}>人气</a>
    </div>
    <ul class="goods_type_list clearfix">
        {% for sku in page_skus %}
        <li>
        <a href="detail.html"><img src="{{ sku.default_image.url }}"></a>
        <h4><a href="detail.html">{{ sku.name }}</a></h4>
        <div class="operate">
            <span class="price">￥{{ sku.price }}</span>
            <span class="unit">台</span>
            <a href="#" class="add_goods" title="加入购物车"></a>
        </div>
        </li>
        {% endfor %}
    </ul>

    <div class="pagenation">
        <div id="pagination" class="page"></div>
    </div>
</div>

2.实际效果