“Vue展示商品列表页数据-2”的版本间的差异
来自CloudWiki
第69行: | 第69行: | ||
[[文件:bd20-6-30.png|600px]] | [[文件:bd20-6-30.png|600px]] | ||
+ | |||
+ | ==检查其他参数(与前端是否一致)== | ||
+ | 前端view/list/list.vue: | ||
+ | |||
+ | <nowiki>else { | ||
+ | getGoods({ | ||
+ | page: this.curPage, //当前页码 | ||
+ | top_category: this.top_category, //商品类型 | ||
+ | ordering: this.ordering, //排序类型 | ||
+ | pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间 | ||
+ | pricemax: this.pricemax // 价格最高 默认为‘’</nowiki> | ||
+ | |||
+ | 后端参数 如page,odrding,pricemin ,pricemax 都和这里的一致,因此不用改了。 |
2020年8月17日 (一) 07:03的版本
问题
现在商品列表页可以导出商品了,但是有一个问题
就是导出的商品品名所有品类都一样,没有过滤。
如图:
对类别的过滤
我们需要在后台 对类别进行过滤
后台商品列表的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 都和这里的一致,因此不用改了。