前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【愚公系列】2022年01月 Django商城项目 24-商品列表页功能实现

【愚公系列】2022年01月 Django商城项目 24-商品列表页功能实现

作者头像
愚公搬代码
发布2022-02-01 09:33:52
2740
发布2022-02-01 09:33:52
举报
文章被收录于专栏:历史专栏

文章目录

一、商品列表页功能实现

1.后台查询代码

代码语言:javascript
复制
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':'没有此分类'})
        # ② 获取它的上级/下级
        # 如果是三级 3个信息
        # 如果是二级 2个信息
        # 如果是1级 1个信息
        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代码

代码语言:javascript
复制
<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代码

代码语言:javascript
复制
<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.实际效果

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022/01/31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、商品列表页功能实现
    • 1.后台查询代码
    • 二、面包屑信息展示
      • 1.前台html代码
        • 2.实际效果
        • 三、列表页信息展示
          • 1.前台html代码
            • 2.实际效果
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档