django任务列表

获取商品列表数据

业务需求

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

后端接口设计

请求方式： 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="index.html" class="logo fl"><img src="images/logo.png"></a>
        <div class="search_wrap fl">
            <form method="get" action="/search.html" class="search_con">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="button" class="input_btn fr" name="" value="搜索">
            </form>
            <ul class="search_suggest fl">
                <li><a href="#">索尼微单</a></li>
                <li><a href="#">优惠15元</a></li>
                <li><a href="#">美妆个护</a></li>
                <li><a href="#">买2免1</a></li>
            </ul>
        </div>

        <div @mouseenter="get_cart()" class="guest_cart fr">
            <a href="#" class="cart_name fl">我的购物车</a>
            <div class="goods_count fl" id="show_count">[[cart_total_count]]</div>

            <ul class="cart_goods_show">
                <li v-for="sku in cart">
                    <img :src="sku.default_image_url" alt="商品图片">
                    <h4>[[sku.name]]</h4>
                    <div>[[sku.count]]</div>
                </li>
            </ul>
        </div>

    </div>

    <div class="navbar_con">
        <div class="navbar">
            <div class="sub_menu_con fl">
                <h1 class="fl">商品分类</h1>
                <ul class="sub_menu">            
                    <li>
                        <div class="level1">
                            <a href="#">手机</a><a href="#">运营商</a><a href="#">数码</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">手机通讯 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="/list.html?cat=115">手机</a>
                                    <a href="#">对讲机</a>
                                    <a href="#">以旧换新</a>
                                    <a href="#">手机维修</a>
                                </div>                        
                            </div>
                            <div class="list_group">
                                <div class="group_name fl">运营商 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">合约机</a>
                                    <a href="#">选号码</a>
                                    <a href="#">固话宽带</a>
                                    <a href="#">办套餐</a>
                                    <a href="#">充话费/流量</a>
                                    <a href="#">中国电信</a>
                                    <a href="#">中国移动</a>
                                    <a href="#">中国联通</a>
                                    <a href="#">京东通信</a>
                                    <a href="#">170选号</a>
                                </div>                                                
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">电脑</a><a href="#">办公</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">电脑 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">曲面电视</a>
                                    <a href="#">超薄电视</a>
                                    <a href="#">HDR电视</a>
                                    <a href="#">OLED电视</a>
                                    <a href="#">4K超清电视</a>
                                    <a href="#">人工智能电视</a>
                                    <a href="#">55英寸</a>
                                    <a href="#">65英寸</a>                                    
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">家居</a><a href="#">家具</a><a href="#">家装</a><a href="#">厨具</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">家具 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">曲面电视</a>
                                    <a href="#">超薄电视</a>
                                    <a href="#">HDR电视</a>
                                    <a href="#">OLED电视</a>
                                    <a href="#">4K超清电视</a>
                                    <a href="#">人工智能电视</a>
                                    <a href="#">55英寸</a>
                                    <a href="#">65英寸</a>                                    
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">男装</a><a href="#">女装</a><a href="#">童装</a><a href="#">内衣</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">男装 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">男装</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">女鞋</a><a href="#">箱包</a><a href="#">钟表</a><a href="#">珠宝</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">女鞋 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">女鞋</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">男鞋</a><a href="#">运动</a><a href="#">户外</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">男鞋 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">男鞋</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">房产</a><a href="#">汽车</a><a href="#">汽车用品</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">汽车用品 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">汽车用品</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">母婴</a><a href="#">玩具乐器</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">玩具乐器 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">玩具乐器</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">食品</a><a href="#">酒类</a><a href="#">生鲜</a><a href="#">特产</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">食品 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">食品</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">图书</a><a href="#">音像</a><a href="#">电子书</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">图书 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">图书</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="level1">
                            <a href="#">机票</a><a href="#">酒店</a><a href="#">旅游</a><a href="#">生活</a>
                        </div>
                        <div class="level2">
                            <div class="list_group">
                                <div class="group_name fl">机票 &gt;</div>
                                <div class="group_detail fl">
                                    <a href="#">机票</a>                            
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>


            <ul class="navlist fl">
                <li><a href="">首页</a></li>
                <li class="interval">|</li>
                <li><a href="">真划算</a></li>
                <li class="interval">|</li>
                <li><a href="">抽奖</a></li>
            </ul>
        </div>
    </div>

    <div class="breadcrumb">
        <a :href="cat1.url">[[cat1.category.name]]</a>
        <span>></span>
        <span>[[cat2.name]]</span>
        <span>></span>
        <a href="#">[[cat3.name]]</a>
    </div>

    <div class="main_wrap clearfix">
        <div class="l_wrap fl clearfix">
            <div class="new_goods">
                <h3>热销排行</h3>
                <ul>
                    <li v-for="sku in hots">
                        <a :href="sku.url"><img :src="sku.default_image_url"></a>
                        <h4><a :href="sku.url">[[sku.name]]</a></h4>
                        <div class="prize">￥[[sku.price]]</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="r_wrap fr clearfix">
            <div class="sort_bar">
                <a @click="on_sort('-create_time')" :class="ordering=='-create_time'?'active':''">默认</a>
                <a @click="on_sort('price')" :class="ordering=='price'?'active':''">价格</a>
                <a @click="on_sort('sales')" :class="ordering=='sales'?'active':''">人气</a>
            </div>

            <ul class="goods_type_list clearfix">
                <li v-for="sku in skus">
                    <a :href="sku.url"><img :src="sku.default_image_url"></a>
                    <h4><a :href="sku.url">[[sku.name]]</a></h4>
                    <div class="operate">
                        <span class="prize">￥[[sku.price]]</span>
                        <span>[[sku.comments]]评价</span>
                    </div>
                </li>
            </ul>
            <!--<div v-if="skus.length==0"><p>暂时没有商品。</p></div>-->

            <div class="pagenation">
                <a v-show="previous" @click="on_page(previous)">上一页</a>
                <a v-for="num in page_nums" @click="on_page(num)" :class="num==page?'active':''">[[num]]</a>
                <a v-show="next" @click="on_page(next)">下一页></a>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>        
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
    </div>
    <script type="text/javascript" src="js/list.js"></script>
</body>
</html>

修改list.js文件

var vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
    data: {
        host: host,
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        cat: '', // 当前商品类别
        page: 1, // 当前页数
        page_size: 5, // 每页数量
        ordering: '-create_time', // 排序
        count: 0,  // 总数量
        skus: [], // 数据
        cat1: {url: '', category:{name:'', id:''}},  // 一级类别
        cat2: {name:''},  // 二级类别
        cat3: {name:''},  // 三级类别,
        cart_total_count: 0, // 购物车总数量
        cart: [], // 购物车数据
        hots: [], // 热销商品
    },
    computed: {
        total_page: function(){  // 总页数
            return Math.ceil(this.count/this.page_size);
        },
        next: function(){  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        previous: function(){  // 上一页
            if (this.page <= 0 ) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
        page_nums: function(){  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i=1; i<=this.total_page; i++){
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i=this.total_page; i>this.total_page-5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i=this.page-2; i<this.page+3; i++){
                    nums.push(i);
                }
            }
            return nums;
        }
    },
    mounted: function(){
        this.cat = this.get_query_string('cat');
        this.get_skus();
        axios.get(this.host+'/categories/'+this.cat+'/', {
                responseType:'json'
            })
            .then(response => {
                this.cat1 = response.data.cat1;
                this.cat2 = response.data.cat2;
                this.cat3 = response.data.cat3;
            })
            .catch(error => {
                console.log(error.response.data)
            });
        this.get_cart();
        this.get_hot_goods();
    },
    methods: {
        logout(){
            sessionStorage.clear();
            localStorage.clear();
            location.href = '/login.html';
        },
        // 获取url路径参数
        get_query_string: function(name){
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },
        // 请求商品数据
        get_skus: function(){
            axios.get(this.host+'/categories/'+this.cat+'/skus/', {
                    params: {
                        page: this.page,
                        page_size: this.page_size,
                        ordering: this.ordering
                    },
                    responseType: 'json'
                })
                .then(response => {
                    this.count = response.data.count;
                    this.skus = response.data.results;
                    for(var i=0; i<this.skus.length; i++){
                        this.skus[i].url = '/goods/' + this.skus[i].id + ".html";
                    }
                })
                .catch(error => {
                    console.log(error.response.data);
                })
        },
        // 点击页数
        on_page: function(num){
            if (num != this.page){
                this.page = num;
                this.get_skus();
            }
        },
        // 点击排序
        on_sort: function(ordering){
            if (ordering != this.ordering) {
                this.page = 1;
                this.ordering = ordering;
                this.get_skus();
            }
        },
        // 获取购物车数据
        get_cart: function(){
            axios.get(this.host+'/cart/', {
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    withCredentials: true
                })
                .then(response => {
                    this.cart = response.data;
                    this.cart_total_count = 0;
                    for(var i=0;i<this.cart.length;i++){
                        if (this.cart[i].name.length>25){
                            this.cart[i].name = this.cart[i].name.substring(0, 25) + '...';
                        }
                        this.cart_total_count += this.cart[i].count;

                    }
                })
                .catch(error => {
                    console.log(error.response.data);
                })
        },
        // 获取热销商品数据
        get_hot_goods: function(){
            axios.get(this.host+'/categories/'+this.cat+'/hotskus/', {
                    responseType: 'json'
                })
                .then(response => {
                    this.hots = response.data;
                    for(var i=0; i<this.hots.length; i++){
                        this.hots[i].url = '/goods/' + this.hots[i].id + '.html';
                    }
                })
                .catch(error => {
                    console.log(error.response.data);
                })
        }
    }
});

获取商品列表数据

业务需求

猜你喜欢