资讯专栏INFORMATION COLUMN

Django3商城项目 从0到1 【五】商品信息模块

Vixb / 2583人阅读

摘要:文章目录商品列表页逻辑代码商品列表页的数据渲染商品详细页实现商品收藏商品列表页逻辑代码的定义视图函数商品列表获取请求参数变量是商品搜索功能的关键字,它与模型的字段进行模糊匹配,因此查询条件为。

商品列表页逻辑代码

commodity的views.py定义视图函数commodityView

from django.core.paginator import Paginator, PageNotAnInteger,EmptyPagefrom django.http import HttpResponsefrom django.shortcuts import renderfrom .models import *def commodityView(request):    title = "商品列表"    classContent = "commoditys"    firsts = Types.objects.values("firsts").distinct()    typesList = Types.objects.all()    # 获取请求参数    t = request.GET.get("t","")    s = request.GET.get("s","sold")    p = request.GET.get("p",1)    n = request.GET.get("n","")    commodityInfos = CommodityInfos.objects.all()    if t:        types = Types.objects.filter(id=t).first()        commodityInfos = commodityInfos.filter(types=types.seconds)    if s:        commodityInfos = commodityInfos.order_by("-"+ s)    if n:        commodityInfos = commodityInfos.filter(name_contains=n)    pagintor = Paginator(commodityInfos,6)    try:        pages = pagintor.page(p)    except PageNotAnInteger:        pages = pagintor.page(1)    except EmptyPage:        pages = pagintor.page(pagintor.num_pages)    return render(request,"commodity.html",locals())

(1)变量n是商品搜索功能的关键字,它与模型CommodityInfos的字段name进行模糊匹配,因此查询条件为name__contains=n。
(2)变量t是查询某个分页的商品信息,它以整型格式表示,代表模型Type的主键id
(3)变量s是设置商品的排序方式,如果请求参数s为空,则默认变量s等于字符串sold
(4)变量p是设置商品信息的页数,默认变量p等于1

商品列表页的数据渲染

commodity.html

{% extends "base.html" %}{% load static %}{% 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 t in typesList %}                 {% if t.firsts == f.firsts %}                    <dd><a href="{% url "commodity:commodity" %}?t={{ t.id }}&n={{ n }}">{{ t.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 s or s == "sold" %}class="active" {% endif %} href="{% url "commodity:commodity" %}?t={{ t }}&s=sold&n={{ n }}">销量</a>              <a {% if s == "price" %}class="active" {% endif %} href="{% url "commodity:commodity" %}?t={{ t }}&s=price&n={{ n }}">价格</a>              <a {% if s == "created" %}class="active" {% endif %} href="{% url "commodity:commodity" %}?t={{ t }}&s=created&n={{ n }}">新品</a>              <a {% if s == "likes" %}class="active" {% endif %} href="{% url "commodity:commodity" %}?t={{ t }}&s=likes&n={{ n }}">收藏</a>            </div>            <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 p in pages.object_list %}              <div class="item">                <div class="img">                  <a href="{% url "commodity:detail" p.id %}">                  <img height="280" width="280" src="{{ p.img.url }}"></a>                </div>                <div class="text">                  <p class="title">{{ p.name }}</p>                  <p class="price">                    <span class="pri">{{ p.price|floatformat:"2" }}</span>                    <span class="nub">{{ p.sold }}付款</span>                  </p>                </div>              </div>              {% endfor %}            </div>          </div>        </div>      <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" %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ 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" %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ page }}">{{ page }}</a>                    {% endif %}                {% endfor %}                {% if pages.has_next %}                    <a href="{% url "commodity:commodity" %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ pages.pages.next_page_number }}" class="layui-laypage-next">下一页</a>                {% endif %}            </div>      </div>	  </div>    </div>{% endblock content %}  {% 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 %}

效果图

商品详细页

commodity的views.py定义视图函数detailView

def detailView(request, id):    title = "商品介绍"    classContent = "datails"    commoditys = CommodityInfos.objects.filter(id=id).first()    items = CommodityInfos.objects.exclude(id=id).order_by("-sold")[:5]    likesList = request.session.get("likes", [])    likes = True if id in likesList else False    return render(request, "details.html", locals())

details.html

{% extends "base.html" %}{% load static %}{% block content %}    <div class="data-cont-wrap w1200">      <div class="crumb">        <a href="{% url "index:index" %}">首页</a>        <span>></span>        <a href="{% url "commodity:commodity" %}">所有商品</a>        <span>></span>        <a href="javascript:;">产品详情</a>      </div>      <div class="product-intro layui-clear">        <div class="preview-wrap">          <img height="300" width="300" src="{{ commoditys.img.url }}">        </div>        <div class="itemInfo-wrap">          <div class="itemInfo">            <div class="title">              <h4>{{ commoditys.name }}</h4>                {% if likes %}              <span id="collect"><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>                {% else %}              <span id="collect"><i class="layui-icon layui-icon-rate"></i>收藏</span>                {% endif %}            </div>            <div class="summary">              <p class="reference"><span>参考价</span> <del>{{ commoditys.price|floatformat:"2" }}</del></p>              <p class="activity"><span>活动价</span><strong class="price"><i></i>{{ commoditys.discount|floatformat:"2" }}</strong></p>              <p class="address-box"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><strong class="address">广东&nbsp;&nbsp;广州&nbsp;&nbsp;天河区</strong></p>            </div>            <div class="choose-attrs">              <div class="color layui-clear"><span class="title">&nbsp;&nbsp;&nbsp;&nbsp;</span> <div class="color-cont"><span class="btn active">{{ commoditys.sezes }}</span></div></div>              <div class="number layui-clear"><span class="title">&nbsp;&nbsp;&nbsp;&nbsp;</span><div class="number-cont">                  <span class="cut btn">-</span>                  <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,"")}else{this.value=this.value.replace(//D/g,"")}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,"")}else{this.value=this.value.replace(//D/g,"")}" maxlength="4" type="" id="quantity" value="1">                  <span class="add btn">+</span></div></div>            </div>            <div class="choose-btns">              <a class="layui-btn  layui-btn-danger car-btn">                  <i class="layui-icon layui-icon-cart-simple"></i>加入购物车</a>            </div>          </div>        </div>      </div>      <div class="layui-clear">        <div class="aside">          <h4>热销推荐</h4>          <div class="item-list">            {% for item in items %}            <div class="item">              <a href="{% url "commodity:detail" item.id %}">              <img height="280" width="280" src="{{ item.img.url }}">              </a>              <p>                  <span title="{{ item.name }}">                      {% if item.name|length > 15 %}                        {{ item.name|slice:":15" }}...                      {% else %}                        {{ item.name|slice:":15" }}                      {% endif %}                  </span>                  <span class="pric">{{ item.discount|floatformat:"2" }}</span>              </p>            </div>            {% endfor %}          </div>        </div>        <div class="detail">          <h4>详情</h4>          <div class
            
                     
             
               

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/119071.html

相关文章

  • Django3商城项目 01 【四】数据渲染与展示

    摘要:文章目录基础模板设计首页模板设计和的定义相应的视图函数配置媒体资源的路由信息基础模板设计在项目的文件夹新建文件该文件用于存放每个网页顶部的代码母婴商城请输入需要的商品 ...

    qiangdada 评论0 收藏0
  • Java3y文章目录导航

    摘要:前言由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航。 前言 由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航。 由于更新比较频繁,因此隔一段时间才会更新目录导航哦~想要获取最新原创的技术文章欢迎关注我的公众号:Java3y Java3y文章目录导航 Java基础 泛型就这么简单 注解就这么简单 Druid数据库连接池...

    KevinYan 评论0 收藏0
  • 移动商城项目【总结】

    摘要:有必要建一个资源服务器存放静态资源。一些用户级别的数据轻量可以考虑存储在中。存储的是值,可以通过来对和对象之间的转换如果我们的数据是在后台传过去或者转换而成的,在前台上并没有做什么改变的话。 移动商城项目总结 移动商城项目是我第二个做得比较大的项目,该项目系统来源于传智Java168期,十天的视频课程(想要视频的同学关注我的公众号就可以直接获取了) 通过这次的项目又再次开阔了我的视野,...

    BlackHole1 评论0 收藏0
  • ❤️熬夜7天肝出5万字【禅道/缺陷报告/测试报告/接口测试及用例/Fildder】超详细总结❤️

    目录 一、禅道 一、测试工具背景 二、测试管理工具 三、测试工具介绍 四、禅道介绍 五、禅道操作 7. 创建发布 8. 测试团队 二、缺陷报告 三、测试报告 一、概要 二、测试过程 三、缺陷分析 四、测试总结 四、接口测试以及用例编写 五、Fiddler 好文推荐 一、禅道 一、测试工具背景 当测试环境搭建完成后,测试人员将在自己搭建的环境上执行测试用例,开展测试工作。测试人员在执行测试用例的过...

    oujie 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<