05-商品類別數據和VUE展示

本文轉載自查看原文 2019-11-20 22:09 487 項目實戰/ Django前后端分離

一、商品類別數據和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 Q

from .models import Goods


class 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"]