获取商品列表数据
业务需求
需要对商品数据进行分页支持，并且可以按照创建时间（默认）、价格、销量（人气）进行排序。
后端接口设计
请求方式： 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 PageNumberPaginationclass StandardResultsSetPagination(PageNumberPagination):page_size = 2page_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 OrderingFilterclass SKUListView(ListAPIView):"""sku列表数据"""serializer_class = SKUSerializerfilter_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">手机通讯 ></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">运营商 ></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">电脑 ></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">家具 ></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">男装 ></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">女鞋 ></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">男鞋 ></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">汽车用品 ></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">玩具乐器 ></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">食品 ></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">图书 ></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">机票 ></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);})}}
});
