Vue展示商品列表页数据-2

来自CloudWiki
Cloud17讨论 | 贡献2020年8月17日 (一) 07:03的版本
跳转至: 导航搜索

问题

现在商品列表页可以导出商品了,但是有一个问题

就是导出的商品品名所有品类都一样,没有过滤。

如图:

Bd20-6-29.png

对类别的过滤

我们需要在后台 对类别进行过滤

后台商品列表的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接口中先试着查询一下:

Bd20-6-31.png

然后再在网站上试:

Bd20-6-30.png

检查其他参数(与前端是否一致)

前端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 都和这里的一致,因此不用改了。