查看“Vue展示商品列表页数据-2”的源代码
←
Vue展示商品列表页数据-2
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==问题== 现在商品列表页可以导出商品了,但是有一个问题 就是导出的商品品名所有品类都一样,没有过滤。 如图: [[文件:bd20-6-29.png|600px]] ==对类别的过滤== 我们需要在后台 对类别进行过滤 后台商品列表的view是GoodsListViewSet apps/goods/views.py: <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> 在其中调用了GoodsFilter: 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> 在API接口中先试着查询一下: [[文件:bd20-6-31.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>
返回至
Vue展示商品列表页数据-2
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息