如果直接阅读本文，您可能有些不知所云，这是因为我用很多篇幅讲了一个事情，如果想知道上下文，那么建议您从本专栏第21章看起：Python3开发–21–了解Django框架

一、商品列表的业务逻辑

商品列表页将所有产品以一定的规则排序展示，用户可以从销量、价格、上架时间、收藏数量设置商品的排序方式，并且在页面的左侧设置分类列表，选择某一分类可以筛选出相应的商品信息。

商品列表页需要实现商品关键字查询、商品分类筛选、商品排序设置、分页显示等查询方式，这四种查询方式可以任意组合并且互不干扰。数据查询适合使用HTTP的GET请求实现，因此，我们为这四种查询方式分别设置请求参数chaxun、shaixuan、paixu、fenye。

修改代码：commodity/views.py

from django.shortcuts import render from django.core.paginator import Paginator from django.core.paginator import EmptyPage from django.core.paginator import PageNotAnInteger from .models import * def commodityView(request): # 对应模板base.html的模板变量title和classContent title = '商品列表' classContent = 'commoditys' # 根据模型Types生成商品分类列表 firsts = Types.objects.values('firsts').distinct() typesList = Types.objects.all() # 获取请求参数 # shaixuan是某个分页商品的信息，以整型格式表现 shaixuan = request.GET.get('shaixuan', '') # paixu是设置商品的排序方式 paixu = request.GET.get('paixu', 'sold') # fenye是设置商品信息的页数，默认页数等于1 fenye = request.GET.get('fenye', 1) # chaxun是商品搜索功能的关键字 chaxun = request.GET.get('chaxun', '') # 根据请求参数查询商品信息 commodityInfos = CommodityInfos.objects.all() if shaixuan: types = Types.objects.filter(id=shaixuan).first() commodityInfos = commodityInfos.filter(types=types.seconds) if paixu: commodityInfos = commodityInfos.order_by('-' + paixu) if chaxun: commodityInfos = commodityInfos.filter(name__contains=chaxun) # 分页功能 paginator = Paginator(commodityInfos, 6) try: pages = paginator.page(fenye) except PageNotAnInteger: pages = paginator.page(1) except EmptyPage: pages = paginator.page(paginator.num_pages) return render(request, 'commodity.html', locals())

二、商品列表的数据渲染

从视图函数commodityView看到，视图函数最终使用模板文件commodity.html作为HTTP响应，在该模板文件中，需要使用变量firsts、typesList、chaxun、shaixuan、paixu、fenye、pages进行数据渲染和展示。

修改代码：templates/commodity.html

<!-- 调用共用模板文件base.html，使base.html和commodity.html产生关联 --> {% extends 'base.html' %} <!-- 读取静态资源 --> {% load static %} <!-- 重写content接口 --> {% block content %} <div class="commod-cont-wrap"> <div class="commod-cont w1200 layui-clear"> <div class="left-nav"> <div class="title">所有分类</div> <div class="list-box"> {% for f in firsts %} <dl> <dt>{{ f.firsts }}</dt> {% for shaixuan in typesList %} {% if shaixuan.firsts == f.firsts %} <dd><a href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan.id }}&chaxun={{ chaxun }}">{{ shaixuan.seconds }}</a></dd> {% endif %} {% endfor %} </dl> {% endfor %} </div> </div> <!-- 设置了商品的排序方式，分别有销量、价格、新品、收藏 --> <div class="right-cont-wrap"> <div class="right-cont"> <div class="sort layui-clear"> <a {% if not paixu or paixu == 'sold' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan }}&paixu=sold&chaxun={{ chaxun }}">销量</a> <a {% if paixu == 'price' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan }}&paixu=price&chaxun={{ chaxun }}">价格</a> <a {% if paixu == 'created' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan }}&paixu=created&chaxun={{ chaxun }}">新品</a> <a {% if paixu == 'likes' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan }}&paixu=likes&chaxun={{ chaxun }}">收藏</a> </div> <!-- 遍历pages的object_list方法生成商品列表 --> <div class="prod-number"> <a href="javascript:;">商品列表</a> <span>></span> <a href="javascript:;">共{{ commodityInfos|length }}件商品</a> </div> <div class="cont-list layui-clear" id="list-cont"> {% for fenye in pages.object_list %} <div class="item"> <div class="img"> <a href="{% url 'commodity:detail' fenye.id %}"> <img height="280" width="280" src="{{ fenye.img.url }}"></a> </div> <div class="text"> <p class="title">{{ fenye.name }}</p> <p class="price"> <span class="pri">￥{{ fenye.price|floatformat:'2' }}</span> <span class="nub">{{ fenye.sold }}付款</span> </p> </div> </div> {% endfor %} </div> </div> </div> <!-- 使用变量pages的方法实现分页功能列表 --> <div id="demo0" style="text-align: center;"> <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"> {% if pages.has_previous %} <a href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan }}&paixu={{ paixu }}&chaxun={{ chaxun }}&fenye={{ pages.previous_page_number }}" class="layui-laypage-prev">上一页</a> {% endif %} {% for page in pages.paginator.page_range %} {% if pages.number == page %} <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>{{ page }}</em></span> {% elif pages.number|add:'-1' == page or pages.number|add:'1' == page %} <a href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan }}&paixu={{ paixu }}&chaxun={{ chaxun }}&fenye={{ page }}">{{ page }}</a> {% endif %} {% endfor %} {% if pages.has_next %} <a href="{% url 'commodity:commodity' %}?shaixuan={{ shaixuan }}&paixu={{ paixu }}&chaxun={{ chaxun }}&fenye={{ pages.pages.next_page_number }}" class="layui-laypage-next">下一页</a> {% endif %} </div> </div> </div> </div> {% endblock content %} <!-- 重写base.html的接口script，该脚本是实现商品分类列表的动态缩放效果 --> {% block script %} layui.config({ base: '{% static 'js/' %}' }).use(['mm','laypage','jquery'],function(){ var laypage = layui.laypage,$ = layui.$, mm = layui.mm; $('.list-box dt').on('click',function(){ if($(this).attr('off')){ $(this).removeClass('active').siblings('dd').show() $(this).attr('off','') }else{ $(this).addClass('active').siblings('dd').hide() $(this).attr('off',true) } }) }); {% endblock script %}

三、总结

看看本节我们动过哪些代码文件：

随 亦 认证博客专家 安全博客专家 甲方安全部负责人，坐标杭州，欢迎猎挖。擅长安全架构、web渗透、移动安全、代码审计、隐私合规、安全开发、安全运营