Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【愚公系列】2022年01月 Django商城项目 24-商品列表页功能实现

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

作者头像
愚公搬代码
发布于 2022-02-01 01:33:52
发布于 2022-02-01 01:33:52
30402
代码可运行
举报
文章被收录于专栏:历史专栏历史专栏
运行总次数:2
代码可运行

文章目录

一、商品列表页功能实现

1.后台查询代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
<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
代码运行次数:0
运行
AI代码解释
复制
<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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【愚公系列】2022年01月 Django商城项目 27-商品详情页功能实现
文章目录 一、商品详情页功能实现 1.后台查询代码 二、详情页面展示 1.前台html代码 2.实际效果 三、包装、规格、售后页面展示 1.前台html代码 2.实际效果 四、404页面 1.前台html代码 2.实际效果 一、商品详情页功能实现 1.后台查询代码 class DetailView(View): def get(self,request,sku_id): # 获取当前sku的信息 try: sku = SKU.objects
愚公搬代码
2022/02/02
3940
【愚公系列】2022年01月 Django商城项目 27-商品详情页功能实现
【愚公系列】2022年01月 Django商城项目 25-热销数据功能实现
文章目录 一、热销数据功能实现 1.后台查询代码 二、热销数据信息展示 1.前台html代码 2.实际效果 一、热销数据功能实现 1.后台查询代码 class HotView(View): def get(self,request,category_id): # 1.获取分类id # 2.查询是否有当前分类 try: category=GoodsCategory.objects.get(id=category_id)
愚公搬代码
2022/02/01
1660
【愚公系列】2022年01月 Django商城项目 25-热销数据功能实现
Django实战-生鲜电商-主页|商品
前面一小节完成了对登录、注册、激活的视图,需要注意的是,在逻辑处理上需要明确是采用何种方式实现浏览器的登录状态保存。
小团子
2019/07/18
5910
Django实战-生鲜电商-主页|商品
【愚公系列】2022年02月 Django商城项目 35-页面静态化功能实现
文章目录 前言 1.页面静态化 一、Django首页静态化 二、商品详情页静态化 前言 1.页面静态化 常说的页面静态化分为两种,一种是伪静态,即url 重写,一种是真静态化。 网页静态化优点: 加快页面打开浏览速度,静态页面无需连接数据库打开速度较动态页面有明显提高; 有利于搜索引擎优化SEO,Baidu、Google都会优先收录静态页面,不仅被收录的快还收录的全; 减轻服务器负担,浏览网页无需调用系统数据库; 网站更安全,HTML页面不会受php相关漏洞的影响; 观看一下大一点的网站基本全是静态页面,而
愚公搬代码
2022/02/07
3650
商城项目-商品详情
当用户搜索到商品,肯定会点击查看,就会进入商品详情页,接下来我们完成商品详情页的展示,
cwl_java
2020/02/11
2.1K0
【新星计划】【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-8商品详细页面与商品分类功能实现
商品详细页面需要展示的数据为, 商品分类和具体商品数据. 我们在 goods 应用的 views.py 模块中新增视图函数 detail, 用于处理商品详细信息显示. 代码实现如下:
天道Vax的时间宝藏
2021/08/11
7590
【愚公系列】2022年01月 Django商城项目 26-搜索引擎功能实现
搜索引擎进行全文检索时,会对数据库中的数据进行一遍预处理,单独建立起一份索引结构数据。
愚公搬代码
2022/02/02
5270
【愚公系列】2022年01月 Django商城项目 26-搜索引擎功能实现
【愚公系列】2022年02月 Django商城项目 32-订单页面设计
文章目录 一、订单页面设计 1.HTML 2.JS 3.后端业务逻辑 二、页面效果 一、订单页面设计 1.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http
愚公搬代码
2022/02/05
4420
【愚公系列】2022年02月 Django商城项目 32-订单页面设计
在线商城项目02-展示商品列表页面并抽取公共组件
step1:新增存放重构资源的目录 视频提供的重构有点问题,大家可以使用我上传在github上的重构资源。 在根目录下新建一个resources文件夹,用来存放重构的资源文件。如果公司或者团队有专门的重构工程师,可以将这个文件夹交给他们管理。
love丁酥酥
2018/08/27
1.3K0
在线商城项目02-展示商品列表页面并抽取公共组件
【愚公系列】2022年02月 Django商城项目 33-订单确认功能实现
文章目录 一、订单确认功能实现 1.后台处理逻辑 2.JS 二、订单支付成功页面 1.后台逻辑 2.页面设计 3.实际效果 一、订单确认功能实现 1.后台处理逻辑 class OrderView(LoginRequiredJSONMixin,View): def post(self,request): # 这里省略了很多操作,这些操作不需要事务 # 1.订单信息 # 1.1 获取用户信息 user = request.u
愚公搬代码
2022/02/07
4960
【愚公系列】2022年02月 Django商城项目 33-订单确认功能实现
【愚公系列】2022年01月 Django商城项目 30-购物车功能实现
文章目录 一、添加购物车 1.后端逻辑代码 2.前台请求接口代码 3.实际效果 二、获取购物车 1.后端逻辑代码 2.前台页面代码 3.实际效果 三、更新购物车 1.后端逻辑代码 2.前台页面代码 3.实际效果 四、删除购物车 1.后端逻辑代码 2.前台页面代码 五、合并购物车 一、添加购物车 1.后端逻辑代码 """ 一 前后端需求分析需求 前端需要收集: 商品id,商品数量, 选中是可选的(默认就是选中) 如果用户登陆了则请求携带session id
愚公搬代码
2022/02/04
5930
【愚公系列】2022年01月 Django商城项目 30-购物车功能实现
在线商城项目13-商品列表分页功能实现
设想一下,如果商品条目数量很多,假设有100条,如果我们一次性拉下来,是很影响性能的。所以我们需要为商品列表添加分页功能。本篇主要实现以下目的:
love丁酥酥
2018/08/27
1.4K0
在线商城项目13-商品列表分页功能实现
Django+Bootstrap+Mysql 搭建个人博客(三)
3.1.分页功能 (1)views.py from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger def make_paginator(objects, page, num=3): paginator = Paginator(objects, num) try: object_list = paginator.page(page) except PageNotAnInteger:
zhang_derek
2018/05/30
1.1K0
13.Django基础之django分页
  我们使用脚本批量创建一些测试数据(将下面的代码保存到bulk_create.py文件中放到Django项目的根目录,直接执行即可。):
changxin7
2019/10/14
9440
【愚公系列】2022年01月 Django商城项目 29-商品浏览历史记录功能实现
思路: 用户每次浏览商品时, 向后台发送请求, 携带商品ID, 然后在 Redis中存储: 用户ID和浏览的商品ID,以时间排序. 来实现存储用户浏览历史记录. 其比较复杂的是redis选用数据结构(有序Set)
愚公搬代码
2022/02/03
5600
【愚公系列】2022年01月 Django商城项目 29-商品浏览历史记录功能实现
Python进阶31-Django 分页器
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
1.6K0
Python进阶31-Django 分页器
【愚公系列】2022年01月 Django商城项目14-用户中心-界面设计
文章目录 一、HTML页面 二、js文件 三、页面效果 一、HTML页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type"
愚公搬代码
2022/01/21
2790
【愚公系列】2022年01月 Django商城项目14-用户中心-界面设计
基于django的个人博客网站建立(四)
今天主要添加了留言与评论在后台的管理和主页文章的分页显示,文章类别的具体展示以及之前预留链接的补充
py3study
2020/01/15
2K0
基于django的个人博客网站建立(四)
乐优项目:编写数据导入功能,实现基本搜索,实现页面分页,实现结果排序-(七)
上一次我们学习了Elasticsearch的基本应用。今天就学以致用,搭建搜索微服务,实现搜索功能。
用户4396583
2024/09/03
2040
商城项目-商品新增
我们刚刚在查询时,已经实现创建了MyGoodsForm.vue,并且已经在MyGoods中引入。
cwl_java
2020/02/11
3.6K0
推荐阅读
相关推荐
【愚公系列】2022年01月 Django商城项目 27-商品详情页功能实现
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验