“Vue展示商品列表页数据-2”的版本间的差异
来自CloudWiki
(→排序参数ordering(与前端一致)) |
|||
(未显示同一用户的6个中间版本) | |||
第69行: | 第69行: | ||
[[文件:bd20-6-30.png|600px]] | [[文件:bd20-6-30.png|600px]] | ||
+ | |||
+ | |||
+ | ==分页个数(与前端的适配)== | ||
+ | 前端 分页是12个一组,这里我们也显示12个一组。 | ||
+ | |||
+ | apps/goods/views.py: | ||
+ | |||
+ | <nowiki>class GoodsPagination(PageNumberPagination): | ||
+ | page_size = 12 | ||
+ | page_size_query_param = 'page_size' | ||
+ | page_query_param = "page" | ||
+ | max_page_size = 100 | ||
+ | </nowiki> | ||
+ | |||
+ | ==价格过滤:pricemin ,pricemax名称(与前端一致)== | ||
+ | 前端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,pricemin ,pricemax 都和这里的一致,因此不用改了。 | ||
+ | |||
+ | (page参数名称是在views.py中 GoodsPagination 中page_query_param去设置。) | ||
+ | <nowiki>filter.py: 中改动一下,增加对类别的过滤:top_category | ||
+ | |||
+ | <nowiki># -*- 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'] | ||
+ | </nowiki></nowiki> | ||
+ | |||
+ | [[文件:bd20-6-33.png|600px]] | ||
+ | |||
+ | ==排序参数ordering(与前端一致)== | ||
+ | |||
+ | 前端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> | ||
+ | |||
+ | 后端排序是在goods/view中定义; | ||
+ | |||
+ | <nowiki>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') | ||
+ | </nowiki> | ||
+ | |||
+ | 效果: | ||
+ | |||
+ | [[文件:bd20-6-34.png|600px]] | ||
+ | |||
+ | ==商品总数的显示== | ||
+ | [[文件: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> | ||
+ | |||
+ | 然后再将此参数传递到list-nav组件中: | ||
+ | |||
+ | <nowiki><list-nav :currentCategoryName="currentCategoryName" :cateMenu="cateMenu" :proNum="proNum" :isObject="isObject" @on-change="changeMenu"></list-nav></nowiki> |
2020年8月17日 (一) 07:34的最新版本
问题
现在商品列表页可以导出商品了,但是有一个问题
就是导出的商品品名所有品类都一样,没有过滤。
如图:
对类别的过滤
我们需要在后台 对类别进行过滤
后台商品列表的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接口中先试着查询一下:
然后再在网站上试:
分页个数(与前端的适配)
前端 分页是12个一组,这里我们也显示12个一组。
apps/goods/views.py:
class GoodsPagination(PageNumberPagination): page_size = 12 page_size_query_param = 'page_size' page_query_param = "page" max_page_size = 100
价格过滤:pricemin ,pricemax名称(与前端一致)
前端view/list/list.vue:
else { getGoods({ page: this.curPage, //当前页码 top_category: this.top_category, //商品类型 ordering: this.ordering, //排序类型 pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间 pricemax: this.pricemax // 价格最高 默认为‘’
后端参数 如page,pricemin ,pricemax 都和这里的一致,因此不用改了。
(page参数名称是在views.py中 GoodsPagination 中page_query_param去设置。)
filter.py: 中改动一下,增加对类别的过滤:top_category <nowiki># -*- 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'] </nowiki>
排序参数ordering(与前端一致)
前端view/list/list.vue:
else { getGoods({ page: this.curPage, //当前页码 top_category: this.top_category, //商品类型 ordering: this.ordering, //排序类型 pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间 pricemax: this.pricemax // 价格最高 默认为‘’
后端排序是在goods/view中定义;
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')
效果:
商品总数的显示
后端在返回值的时候用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); }); }
然后再将此参数传递到list-nav组件中:
<list-nav :currentCategoryName="currentCategoryName" :cateMenu="cateMenu" :proNum="proNum" :isObject="isObject" @on-change="changeMenu"></list-nav>