05-商品类别数据和VUE展示

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、商品类别数据和VUE展示

1、商品类别数据接口

将商品类别数据展示出来，视图(views.py)代码如下：

class CategoryViewset(mixins.ListModelMixin,viewsets.GenericViewSet):
"""
list:
商品分类列表数据
"""
queryset = GoodsCategory.objects.all()
serializer_class = GoodsCategorySerializer

序列化器里的代码为：

class GoodsCategorySerializer(serializers.ModelSerializer):
"""
商品类别序列化
"""
class Meta:
model = GoodsCategory # 指明model
fields = "__all__" # 将全部字段显示出来

路由配置(urls.py)：

#配置Category的url
router.register(r"categorys",CategoryViewset)

这样就可以访问到类别啦，但是我们还想要访问类别下的商品信息，那么我们提供的接口：

视图的代码：

#mixins.RetrieveModelMixin获取具体详情页
class CategoryViewset(mixins.ListModelMixin,mixins.RetrieveModelMixin,viewsets.GenericViewSet):
"""
list:
商品分类列表数据
"""
queryset = GoodsCategory.objects.all()
serializer_class = GoodsCategorySerializer

序列化器中的代码为：

class GoodsCategorySerializer3(serializers.ModelSerializer):
"""
商品类别序列化
"""
class Meta:
model = GoodsCategory # 指明model
fields = "__all__" # 将全部字段显示出来class GoodsCategorySerializer2(serializers.ModelSerializer):
"""
商品类别序列化
"""
sub_cat = GoodsCategorySerializer3(many=True)
class Meta:
model = GoodsCategory # 指明model
fields = "__all__" # 将全部字段显示出来class GoodsCategorySerializer(serializers.ModelSerializer):
"""
商品类别序列化
"""
sub_cat = GoodsCategorySerializer2(many=True)
class Meta:
model = GoodsCategory # 指明model
fields = "__all__" # 将全部字段显示出来

将每一级别的都嵌套进来，这样就可以访问到每一个类别下的具体信息，sub_cat是外键声明的关系，嵌套进来以后，就可以访问啦，还可以直接访问到具体的商品细节，因为视图中继承mixins.RetrieveModelMixin，viewsets.GenericViewSet又将路由中的ID都配置好了，这样省去很多麻烦，大大提高了开发效率。

2、VUE展示商品分类数据

将Category和VUE要进行调试，在进行调试之前，需要解决掉跨域的问题，跨域问题在前后端分离开发当中非常的常见，

编辑VUE项目将类别展示的地址改为本地地址，其他地址不要改动，这样就可以实现我们的那部分区域：

按F12检查，发现一个端口是8080，另一个端口是8000，浏览器是不允许跨域的，因此我们应该在服务器设置DRF跨域，跨域有两种解决方式，一是服务器解决，另一种前端解决。

安装完成后，根据Django-cors-headers官方文档完成服务端的配置，

第一步

第二步：and then add it to your installed apps:

INSTALLED_APPS = [
...
'corsheaders',
...
]

第三步：Also if you are using CORS_REPLACE_HTTPS_REFERER it should be placed before Django's CsrfViewMiddleware (see more below).

必须将中间件放在Csrf中间件之前。

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',#官方文档要求必须放在CSRF之前
'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',
]

看这样就能继续后面的开发啦，遇到错误，首先要学会看懂英文错误说明，然后根据报错异常一步一步排除，最终实现debug。现在我们需要做的就是将一级类目显示在导航栏上。

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

因此我们要去后端过滤信息，过滤商品信息，将一类的子类或者子类的父类都要过滤出来。

添加过滤器的代码为：

import django_filters
from django.db.models import Qfrom .models import Goodsclass GoodsFilter(django_filters.rest_framework.FilterSet):
"""
商品过滤器
"""
price_min = django_filters.NumberFilter(field_name="shop_price",lookup_expr="gte")
price_max = django_filters.NumberFilter(field_name="shop_price", lookup_expr="lte")
name = django_filters.CharFilter(field_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 = ["price_min","price_max","name","top_category"]