“Vue展示商品列表页数据-2”的版本间的差异
来自CloudWiki
第82行: | 第82行: | ||
后端参数 如page,odrding,pricemin ,pricemax 都和这里的一致,因此不用改了。 | 后端参数 如page,odrding,pricemin ,pricemax 都和这里的一致,因此不用改了。 | ||
+ | |||
+ | ==商品总数的显示== | ||
+ | [[文件:bd20-6-32.png|600px]] | ||
+ | |||
+ | 后端在返回值的时候用count表示商品总数, | ||
+ | |||
+ | 这个总数在前端赋给proNum: | ||
+ | |||
+ | list/list.vue: | ||
+ | |||
+ | <nowiki> getListData() { | ||
+ | if(this.pageType=='search'){ | ||
+ | getGoods({ | ||
+ | search: this.searchWord, //搜索关键词 | ||
+ | }).then((response)=> { | ||
+ | this.listData = response.data.results; | ||
+ | this.proNum = response.data.count; | ||
+ | }).catch(function (error) { | ||
+ | console.log(error); | ||
+ | }); | ||
+ | }else { | ||
+ | getGoods({ | ||
+ | page: this.curPage, //当前页码 | ||
+ | top_category: this.top_category, //商品类型 | ||
+ | ordering: this.ordering, //排序类型 | ||
+ | pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间 | ||
+ | pricemax: this.pricemax // 价格最高 默认为‘’ | ||
+ | }).then((response)=> { | ||
+ | |||
+ | this.listData = response.data.results; | ||
+ | this.proNum = response.data.count; | ||
+ | }).catch(function (error) { | ||
+ | console.log(error); | ||
+ | }); | ||
+ | } | ||
+ | </nowiki> |
2020年8月17日 (一) 07:12的版本
问题
现在商品列表页可以导出商品了,但是有一个问题
就是导出的商品品名所有品类都一样,没有过滤。
如图:
对类别的过滤
我们需要在后台 对类别进行过滤
后台商品列表的view是GoodsListViewSet
apps/goods/views.py:
class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet): """ 商品列表页, 分页, 搜索, 过滤, 排序 """ queryset = Goods.objects.all() serializer_class = GoodsSerializer pagination_class = GoodsPagination filter_backends = (DjangoFilterBackend,filters.SearchFilter, filters.OrderingFilter) filter_class = GoodsFilter search_fields = ('name', 'goods_brief', 'goods_desc') ordering_fields = ('sold_num', 'shop_price')
在其中调用了GoodsFilter:
filter.py: 中改动一下,增加对类别的过滤:top_category
# -*- coding: utf-8 -*- __author__ = 'bobby' import django_filters from django.db.models import Q from django.db.models import Q from .models import Goods class GoodsFilter(django_filters.rest_framework.FilterSet): """ 商品的过滤类 """ pricemin = django_filters.NumberFilter(name='shop_price', help_text="最低价格",lookup_expr='gte') pricemax = django_filters.NumberFilter(name='shop_price', lookup_expr='lte') #name = django_filters.CharFilter(name='name', lookup_expr='icontains') top_category = django_filters.NumberFilter(method='top_category_filter') def top_category_filter(self, queryset, name, value): return queryset.filter(Q(category_id=value)|Q(category__parent_category_id=value)|Q(category__parent_category__parent_category_id=value)) class Meta: model = Goods fields = ['pricemin', 'pricemax','name']
在API接口中先试着查询一下:
然后再在网站上试:
检查其他参数(与前端是否一致)
前端view/list/list.vue:
else { getGoods({ page: this.curPage, //当前页码 top_category: this.top_category, //商品类型 ordering: this.ordering, //排序类型 pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间 pricemax: this.pricemax // 价格最高 默认为‘’
后端参数 如page,odrding,pricemin ,pricemax 都和这里的一致,因此不用改了。
商品总数的显示
后端在返回值的时候用count表示商品总数,
这个总数在前端赋给proNum:
list/list.vue:
getListData() { if(this.pageType=='search'){ getGoods({ search: this.searchWord, //搜索关键词 }).then((response)=> { this.listData = response.data.results; this.proNum = response.data.count; }).catch(function (error) { console.log(error); }); }else { getGoods({ page: this.curPage, //当前页码 top_category: this.top_category, //商品类型 ordering: this.ordering, //排序类型 pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间 pricemax: this.pricemax // 价格最高 默认为‘’ }).then((response)=> { this.listData = response.data.results; this.proNum = response.data.count; }).catch(function (error) { console.log(error); }); }