django任务列表

最新推荐文章于 2024-07-15 15:39:43 发布

阿方小厨神

最新推荐文章于 2024-07-15 15:39:43 发布

阅读量399

点赞数

本文链接：https://blog.csdn.net/fsj818077/article/details/81840926

版权

本文介绍了如何在Django中实现商品列表数据的获取，包括分页支持和按创建时间、价格、销量排序的功能。后端利用REST framework的分页配置和OrderingFilter过滤器，前端则需要对HTML和JS文件进行相应调整。

摘要由CSDN通过智能技术生成

获取商品列表数据

业务需求

需要对商品数据进行分页支持，并且可以按照创建时间（默认）、价格、销量（人气）进行排序。

后端接口设计

请求方式： GET /categories/(?P<category_id>\d+)/skus?page=xxx&page_size=xxx&ordering=xxx

请求参数：路径参数 + 查询字符串参数

参数	类型	是否必须	说明
categroy_id	int	是	类别id（第三级类别）
page	int	是	页数
page_size	int	否	每页数量
ordering	str	是	排序关键字（'create_time', 'price', 'sales'）

返回数据： JSON

{
    "count": 14,
    "next": "http://api.meiduo.site:8000/categories/115/skus/?page=2",
    "previous": null,
    "results": [
        {
            "id": 3,
            "name": "Apple iPhone 8 Plus (A1864) 64GB 金色 移动联通电信4G手机",
            "price": "6499.00",
            "default_image_url": "http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRZCqAUxp9AAFti6upbx41220032",
            "comments": 0
        },
        {
            "id": 4,
            "name": "Apple iPhone 8 Plus (A1864) 256GB 金色 移动联通电信4G手机",
            "price": "7988.00",
            "default_image_url": "http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRZa6ANO_sAAFti6upbx40753757",
            "comments": 0
        }
    ]
}

返回值	类型	是否必须	说明
count	int	是	数据总数
next	url	是	下一页的链接地址
previous	url	是	上一页的链接地址
results	sku[]	是	商品sku数据列表
id	int	否	商品sku 编号
name	str	否	商品名称
price	decimal	否	单价
default_image_url	str	否	默认图片
comments	int	否	评论量

后端实现

在meiduo_mall/utils中创建pagination.py文件，在其中创建分页配置类

from rest_framework.pagination import PageNumberPagination

class StandardResultsSetPagination(PageNumberPagination):
    page_size = 2
    page_size_query_param = 'page_size'
    max_page_size = 20

在配置文件中设置REST framework分页使用的分页类

REST_FRAMEWORK = {
    ...
    # 分页
    'DEFAULT_PAGINATION_CLASS': 'meiduo_mall.utils.pagination.StandardResultsSetPagination',
}

序列化器采用之前实现的SKUSerializer。

在goods/views.py中实现视图

from rest_framework.filters import OrderingFilter

class SKUListView(ListAPIView):
    """
    sku列表数据
    """
    serializer_class = SKUSerializer
    filter_backends = (OrderingFilter,)
    ordering_fields = ('create_time', 'price', 'sales')

    def get_queryset(self):
        category_id = self.kwargs['category_id']
        return SKU.objects.filter(category_id=category_id, is_launched=True)

说明：

REST framework提供了对于排序的支持，使用REST framework提供的OrderingFilter过滤器后端即可。

OrderingFilter过滤器要使用ordering_fields 属性来指明可以进行排序的字段有哪些。

前端实现

修改list.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" content="text/html;charset=UTF-8">
    <title>美多商城-商品列表</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
    <div id="app" v-cloak>
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到美多商城!</div>
            <div class="fr">
                <div v-if="username" class="login_btn fl">
                    欢迎您：<em>[[ username ]]</em>
                    <span>|</span>
                    <a @click="logout">退出</a>
                </div>
                <div v-else class="login_btn fl">
                    <a href="login.html">登录</a>
                    <span>|</span>
                    <a href="register.html">注册</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
                    <a href="user_center_info.html">用户中心</a>
                    <span>|</span>
                    <a href="cart.html">我的购物车</a>
                    <span>|</span>
                    <a href="user_center_order.html">我的订单</a>
                </div>
            </div>
        </div>        
    </div>

    <div class="search_bar clearfix">
        <a href="inde

最低0.47元/天解锁文章

阿方小厨神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
django任务列表

获取商品列表数据业务需求需要对商品数据进行分页支持，并且可以按照创建时间（默认）、价格、销量（人气）进行排序。后端接口设计请求方式： GET /categories/(?P&lt;category_id&gt;\d+)/skus?page=xxx&amp;page_size=xxx&amp;ordering=xxx请求参数：路径参数 + 查询字符串参数参数类型 ...
复制链接

扫一扫