（项目）生鲜超市（五）

六、商品类别数据展示

1、商品类别数据接口

　　商品分类有两个接口，一种是全部分类，一级二级三级：

　　另一种是某一类的分类及商品的展示：

　　首先在serializers.py编写类别的序列化：

class CategorySerializer3(serializers.ModelSerializer):
    '''三级分类'''

    class Meta:
        model = GoodsCategory
        fields = "__all__"


class CategorySerializer2(serializers.ModelSerializer):
    '''二级分类'''

    # 在parent_category字段中定义的related_name="sub_cat"
    sub_cat = CategorySerializer3(many=True)

    class Meta:
        model = GoodsCategory
        fields = "__all__"


class CategorySerializer(serializers.ModelSerializer):
    """一级类别"""

    sub_cat = CategorySerializer2(many=True)

    class Meta:
        model = GoodsCategory
        fields = "__all__"

　　然后编写商品类别接口：

class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
    """
    list:
        商品分类列表数据
    """

    queryset = GoodsCategory.objects.filter(category_type=1)
    serializer_class = CategorySerializer

• 注释的内容在后面生成drf文档的时候会显示出来，所以要写清楚
• RetrieveModelMixin，获取某一个商品的详情的时候，继承这个类就可以了

　　然后在router中注册url：

router.register(r'categorys', CategoryViewSet, base_name='categorys')  # 商品类别

2、Vue展示商品分类数据

　　Vue接口的相关代码都放在src/api/api.js里面，调试接口的时候我们首先需要新建一个自己的host，然后替换要调试的host，现在修改Vue中的接口代码：

let host = 'http://127.0.0.1:8000';

　　然后替换商品类别接口中默认的host：

//获取商品类别信息
export const getCategory = params => {
  if('id' in params){
    return axios.get(`${host}/categorys/`+params.id+'/');
  }
  else {
    return axios.get(`${host}/categorys/`, params);
  }
};

　　现在访问http://127.0.0.1:8080/#/app/home/index，发现商品类别的数据不见了：

　　这是因为涉及到了跨域的问题，解决办法如下：

　　　　后端服务器解决跨域问题，安装模块pip install django-cors-headers，然后在INSTALLED_APPS 中注册'coreschema'，然后添加中间件CorsMiddleware

　　　　这些英文的意思就是要放到CsrfViewMiddleware之前，那我们直接放在第一个位置就好了：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

　　　　然后设置CORS_ORIGIN_ALLOW_ALL = True

　　现在访问http://127.0.0.1:8080/#/app/home/index：

　　在后台中将一级分类中的类别设置是否导航：

3、Vue展示商品列表页数据

　　商品列表页面会判断是search还是getGoods：

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);
                  });
                }

            },

　　这段代码中，pag是分页，后端的分页信息要与前端保持一致：

class GoodsPagination(PageNumberPagination):
    """商品自定义分页"""

    page_size = 12  # 每页显示个数
    page_size_query_param = 'page_size'  # 动态改变每页显示的个数
    page_query_param = 'page'  # 页码参数
    max_page_size = 100  # 最多显示页数

　　top_category是商品的一级分类，需要传入参数：一级分类的id，pricemin和pricemax与前端保持一致，然后完善过滤的代码：

class GoodsFilter(django_filters.rest_framework.FilterSet):
    """商品过滤"""

    # name是要过滤的字段，lookup是执行的行为
    pricemin = django_filters.NumberFilter(field_name="shop_price", lookup_expr='gte')
    pricemax = django_filters.NumberFilter(field_name="shop_price", lookup_expr='lte')
    top_category = django_filters.NumberFilter(field_name="category", 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']

　　后端的GoodsListViewSet中ording与前端要一致：

class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
    """商品列表页面"""

    pagination_class = GoodsPagination
    queryset = Goods.objects.all().order_by('id')  # 必须定义一个默认的排序，否则会报错
    serializer_class = GoodsSerializer
    filter_backends = (DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter)

    # 自定义过滤类
    filter_class = GoodsFilter

    # 搜索，=name表示精确搜索，也可以使用正则
    search_fields = ('name', 'goods_brief', 'goods_desc')

    # 排序
    ordering_fields = ('sold_num', 'shop_price')

　　将Vue中的获取商品列表接口的host修改：

//获取商品列表
export const getGoods = params => { return axios.get(`${host}/goods/`, { params: params }) }

　　现在就可以从后台获取商品的数据了：