• 【Django】网上蛋糕项目商城-商品分类

    概念

    上一文中，我们实现了首页的数据展示，本文讲解商品分类的商品展示，实现分页显示功能。

    点击商品分类中的各种分类，向服务器发送请求，获取数据库中对应该分类的所有商品并以分页的形式返回显示。

    商品分类步骤实现

    当点击商品分类中的某一项分类时，head.html头部页面中触发超链接点击事件，向服务器发送商品分类id

    在urls.py文件中定义获取该请求的地址

    path('goods_list/',views.goods_list),

    在views.py文件中定义goods_list函数，获取用户指定的分类id的商品信息，并进行分页处理

    1. # 处理商品列表的请求
    2. def goods_list(request):
    3.     # 读取分类id
    4.     try:
    5.         typeId = request.GET["typeid"]
    6.         request.session["typeId"]=typeId
    7.     except:
    8.         typeId = 0
    9.     # 读取分页页码
    10.     try:
    11.         ym=request.GET["ym"]
    12.     except:
    13.         ym=1
    14.  
    15.     if int(typeId) == 0:
    16.         t={"id":0,"name":"全部系列"}
    17.     # 根据分类id查询该分类的所有商品信息
    18.     if int(typeId)>0:
    19.         # 根据分类id获取分类信息
    20.         t = Type.objects.get(id=typeId)
    21.         goods = Goods.objects.filter(type_id=typeId)
    22.     else:
    23.         # 分类id为0，说明查询所有商品
    24.         goods=Goods.objects.all()
    25.     # 将该分类的商品信息进行分页处理,每页显示8条记录
    26.     pag=paginator.Paginator(goods,8)
    27.     # 根据当前页码获取当前分页信息
    28.     pageInfo=pag.get_page(ym)
    29.     # 获取当前页的商品列表信息
    30.     goodsList=pageInfo.object_list
    31.     # 获取总页码数
    32.     yms=pag.page_range
    33.  
    34.     return render(request,"goods_list.html",{"typeList":types,"t":t,"goodsList":goodsList,"page":pageInfo,"yms":yms})

    最后将查询的该分类的商品数据发送给goods_list.html商品列表页面显示

    1. html>
    2. <html>
    3. <head>
    4.     <title>商品列表title>
    5.     {% load static %}
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    8.     <link type="text/css" rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    9.     <link type="text/css" rel="stylesheet" href="{% static 'css/style.css' %}">
    10.     <script type="text/javascript" src="{% static 'js/jquery.min.js' %}">script>
    11.     <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}">script>
    12.     <script type="text/javascript" src="{% static 'layer/layer.js' %}">script>
    13.     <script type="text/javascript" src="{% static 'js/cart.js' %}">script>
    14.     <style>
    15.         #nav{
    16.             width: 100%;
    17.             height: 40px;
    18.             margin-top: 20px;
    19.             clear: left;
    20.         }
    21.         #nav a{
    22.             text-decoration: none;
    23.             margin: 3px;
    24.             background-color: cadetblue;
    25.         }
    26.         #nav a:hover{
    27.             background-color: #FF1719;
    28.         }
    29.  
    30.         #nav a.c_page{
    31.             background-color: #FF1719;
    32.         }
    33.         #nav a.up_page,#nav a.do_page{
    34.             width: 70px;
    35.             height: 30px;
    36.             padding: 5px 10px;
    37.             border-radius: 5px;
    38.             color: white;
    39.             display: inline-block;
    40.         }
    41.         #nav a.p_page{
    42.             width: 30px;
    43.             height: 30px;
    44.             padding: 5px;
    45.             border-radius: 5px;
    46.             color: white;
    47.             display: inline-block;
    48.         }
    49.     style>
    50.     <script>
    51.         //定义方法，用于处理分页导航栏的样式
    52.         function a_style() {
    53.             //通过class选择器获得分页导航栏对象
    54.             var aElements=document.getElementsByClassName("p_page");
    55.             for (var i = 0; i < aElements.length; i++) {
    56.                 var text=aElements.item(i).innerHTML;
    57.                 if (text<10){
    58.                     aElements.item(i).innerHTML="  "+text+"  ";
    59.                 }
    60.             }
    61.         }
    62.     script>
    63. head>
    64. <body>
    65.  
    66. {% include "header.html" with flag=2 typeList=typeList islogin=islogin %}
    67.  
    68. <div class="products">
    69.     <div class="container">
    70.         <h2>
    71.             {% if t %}
    72.                 {{t.name}}
    73.             {% else %}
    74.                 全部系列
    75.             {% endif %}
    76.             h2>
    77.  
    78.         <div class="col-md-12 product-model-sec">
    79.             {% for g in goodsList %}
    80.                 <div class="product-grid">
    81.                     <a href="/goods_detail/?id={{ g.id }}">
    82.                         <div class="more-product"><span> span>div>
    83.                         <div class="product-img b-link-stripe b-animate-go  thickbox">
    84.                             <img src="{% static g.cover %}" class="img-responsive" alt="{{ g.name }}" width="240" height="240">
    85.                             <div class="b-wrapper">
    86.                                 <h4 class="b-animate b-from-left  b-delay03">
    87.                                     <button href="/goods_detail/?id={{ g.id }}">查看详情button>
    88.                                 h4>
    89.                             div>
    90.                         div>
    91.                     a>
    92.                     <div class="product-info simpleCart_shelfItem">
    93.                         <div class="product-info-cust prt_name">
    94.                             <h4>{{ g.name }}h4>
    95.                             <span class="item_price">¥ {{ g.price }}span>
    96.                             <a href="/goods_buy/?id={{ g.id }}&url=list">
    97.                                 <input type="button" class="item_add items" value="加入购物车" >
    98.                             a>
    99.  
    100.                             <div class="clearfix"> div>
    101.                         div>
    102.                     div>
    103.                 div>
    104.             {% endfor %}
    105.  
    106.         div>
    107.  
    108.     
    109.         <div id="nav" align="center">
    110.             
    111.             
    112.             {% if page.has_previous %}
    113.                 <a href="/goods_list/?ym={{ page.previous_page_number }}&typeid={{ t.id }}" class="up_page">上一页a>
    114.             {% endif %}
    115.             
    116.             {% for ym in yms %}
    117.                 {% if page.number == ym %}
    118.                     <a href="/goods_list/?ym={{ ym }}&typeid={{ t.id }}" class="p_page c_page">{{ ym }}a>
    119.                 {% else %}
    120.                     <a href="/goods_list/?ym={{ ym }}&typeid={{ t.id }}" class="p_page">{{ ym }}a>
    121.                 {% endif %}
    122.             {% endfor %}
    123.  
    124.             
    125.             {% if page.has_next %}
    126.                 <a href="/goods_list/?ym={{ page.next_page_number }}&typeid={{ t.id }}" class="do_page">下一页a>
    127.             {% endif %}
    128.         div>
    129.  
    130.         div>
    131.     div>
    132. div>
    133.  
    134. {% include "footer.html" %}
    135.  
    136. body>
    137. html>

  • 相关阅读:
    安卓APK反编译详解（多图）
    什么是域名解析？如何进行域名解析设置？
    不想做CEO的程序员不是好码农？
    QFileInfo（文件信息）和临时文件
    HTML表格学习
    1.8.C++项目：仿muduo库实现并发服务器之eventloop模块的设计
    万字解析设计模式之桥接模式、外观模式
    认识 计算机语言Python 程序，pycharm编辑器编写，基本语法【注意：变量的命名（变量名只能由字母、数字和下划线组成，第一个字符不能是数字）】
    Nginx 学习 常用链接汇总
    C 语言教程
  • 原文地址：https://blog.csdn.net/u010321564/article/details/140042473