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

一、商品列表的业务逻辑

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

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

修改代码: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响应,在该模板文件中,需要使用变量firststypesListchaxunshaixuanpaixufenyepages进行数据渲染和展示。

修改代码: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 %}

三、总结

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

python动态输入10个商品价格 python输出商品列表_html