當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue一级分类和耳机分类_【Vue+DRF生鲜电商】10.商品分类层级获取，Vue跨域请求商品分类...

發布時間：2025/3/19 vue 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue一级分类和耳机分类_【Vue+DRF生鲜电商】10.商品分类层级获取，Vue跨域请求商品分类... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

歡迎訪問我的博客專題

源碼可訪問 Github 查看

DRF實現商品分類獲取

實現商品分類層級結構顯示

商品類別ViewSet

在商品類別中，不需要對類別進行分頁，因為類別的數據量不大，只要在數據量很大的時候才能分頁，所以前面需要去掉全局分頁配置，否則會影響這兒的結果。

修改 views.py 增加分類的視圖

class CategoryViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):

# 注釋很有用，在drf文檔中，可以自動提取出來

"""

list:

商品分類列表

"""

queryset = GoodsCategory.objects.all() # 取出所有分類，沒必要分頁，因為分類數據量不大

serializer_class = CategorySerializer # 使用商品類別序列化類，寫商品的分類外鍵已有，直接調用

該序列化類可以直接使用之前商品列表分類外鍵已經創建好的，不用再新建，下方是已有的代碼內容

class CategorySerializer(serializers.ModelSerializer):

class Meta:

model = GoodsCategory

fields = '__all__'

商品類別URL配置

修改主 urls.py ，在router中注冊分類的url

from rest_framework.routers import DefaultRouter

from goods.views import GoodsListView, GoodsListViewSet, CategoryViewSet

# 創建一個路由器并注冊我們的視圖集

router = DefaultRouter()

router.register(r'goods', GoodsListViewSet, base_name='goods') # 配置goods的url

router.register(r'categories', CategoryViewSet, base_name='categories') # 配置分類的url

urlpatterns = [

path('admin/', admin.site.urls),

path('api-auth/', include('rest_framework.urls')), # drf 認證url

path('ckeditor/', include('ckeditor_uploader.urls')), # 配置富文本編輯器url

path('', include(router.urls)), # API url現在由路由器自動確定。

# DRF文檔

path('docs/', include_docs_urls(title='DRF文檔')),

]

image.png

但是，這些分類數據都是一起顯示出來的，沒有層次結構。

層次化商品類別

首先訪問 http://127.0.0.1:8000/goods/ 記錄下每一種商品的分類外鍵數據，因為之后要修改分類的序列化類，可以做下對比

image.png

分析：在前端頁面上，拿分類數據時，首先是拿到一類分類，二級分類是在一級分類下面的，三級分類是二級分類下面的，可以看出，分類數據是有個層次結構的。

image.png

ViewSet只獲取一級分類

既然這樣，我們就可以在視圖中指定只獲取一級分類數據。

修改 views.py

class CategoryViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):

# 注釋很有用，在drf文檔中

"""

list:

商品分類列表

"""

# queryset = GoodsCategory.objects.all() # 取出所有分類，沒必要分頁，因為分類數據量不大

queryset = GoodsCategory.objects.filter(category_type=1) # 只獲取一級分類數據

serializer_class = CategorySerializer # 使用商品類別序列化類，寫商品的分類外鍵已有，直接調用

image.png

那怎么才能通過一級分類獲取到二級分類數據呢？之前寫商品列表需要顯示分類外鍵內容時，通過覆寫category自定義序列化類實現。

序列化二級分類

在分類模型中，有個parent_category = models.ForeignKey('self', null=True, blank=True, verbose_name='父級目錄', help_text='父級目錄', on_delete=models.CASCADE, related_name='sub_category')字段，也就是可以通過sub_category字段獲取子類對象。序列化類的字段也需要和這個字段保持一樣。

修改 serializers.py

class CategorySerializer2(serializers.ModelSerializer):

class Meta:

model = GoodsCategory

fields = '__all__'

class CategorySerializer(serializers.ModelSerializer):

sub_category = CategorySerializer2(many=True) # 通過一級分類獲取到二級分類，由于一級分類下有多個二級分類，需要設置many=True

class Meta:

model = GoodsCategory

fields = '__all__'

image.png

序列化三級分類

三級分類也是使用一樣的辦法，因為分類數據的格式都是一樣的

修改 serializers.py ，增加三級分類序列化

class CategorySerializer3(serializers.ModelSerializer):

class Meta:

model = GoodsCategory

fields = '__all__'

class CategorySerializer2(serializers.ModelSerializer):

sub_category = CategorySerializer3(many=True) # 通過二級分類獲取三級分類

class Meta:

model = GoodsCategory

fields = '__all__'

class CategorySerializer(serializers.ModelSerializer):

sub_category = CategorySerializer2(many=True) # 通過一級分類獲取到二級分類，由于一級分類下有多個二級分類，需要設置many=True

class Meta:

model = GoodsCategory

fields = '__all__'

image.png

通過以上修改后，商品列表頁也會跟著發生變化，顯示的商品分類，會增加子類的顯示

image.png

顯示某個分類詳情(包含其子類)

類似于獲取詳情頁

修改視圖，增加mixins.RetrieveModelMixin這樣一個mixins

class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):

# 注釋很有用，在drf文檔中

"""

list:

商品分類列表

"""

# queryset = GoodsCategory.objects.all() # 取出所有分類，沒必要分頁，因為分類數據量不大

queryset = GoodsCategory.objects.filter(category_type=1) # 只獲取一級分類數據

serializer_class = CategorySerializer # 使用商品類別序列化類，寫商品的分類外鍵已有，直接調用

這個繼承主要是獲取某個對象的詳情，且這只需要這樣寫即可。

Restful Api規范中要獲取某個對象的詳情，只需要在其后面添加某個對象的ID即可。

DRF已經做好了，不需要手動配置獲取詳情的URL，只需要在ViewSe中繼承mixins.RetrieveModelMixin即可，其他什么都不需要

image.png

在Vue中獲取分類API顯示前端

vue中存放分類菜單的位置在 src/views/head/head.vue 中

沒有數據，按 F12 打開打開Console可以看到錯誤內容

Access to XMLHttpRequest at 'http://localhost:8000/categories/' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

也就是不允許跨域請求。因為服務器啟動的端口是8000，而Vue啟動的是8080端口。就需要配置服務器的跨域(前端也可以配置跨域)。

跨域處理django-cors-headers

解決辦法：查看 https://github.com/ottoyiu/django-cors-headers (Django應用程序處理跨源資源共享(CORS)所需的服務器頭)，下方有說明使用方法

使用pip安裝包，pip install django-cors-headers

將corsheaders應用添加到APPS中

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

# 添加drf應用

'rest_framework',

'django_filters',

# Django跨域解決

'corsheaders',

# 注冊富文本編輯器ckeditor

'ckeditor',

# 注冊富文本上傳圖片ckeditor_uploader

'ckeditor_uploader',

'users.apps.UsersConfig',

'goods.apps.GoodsConfig',

'trade.apps.TradeConfig',

'user_operation.apps.UserOperationConfig'

]

還需要添加一個中間件類來監聽響應：

MIDDLEWARE = [

'corsheaders.middleware.CorsMiddleware', # corsheaders跨域

'django.middleware.common.CommonMiddleware', # corsheaders跨域

'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',

]

CorsMiddleware應該放在盡可能前面的位置，尤其是在任何能夠生成響應的中間件之前，比如Django的CommonMiddleware或Whitenoise的WhiteNoiseMiddleware。如果不在這之前，它將不能將CORS頭添加到這些響應中。

另外，如果正在使用CORS_REPLACE_HTTPS_REFERER，那么它應該放在Django的CsrfViewMiddleware之前。

全局配置：

Django設置中配置中間件的行為。必須將允許執行跨站點請求的主機添加到CORS_ORIGIN_WHITELIST，或者將CORS_ORIGIN_ALLOW_ALL設置為True以允許所有主機。

CORS_ORIGIN_ALLOW_ALL：如果是True，白名單將不被使用，所有的連接將被接受。默認值為False。

CORS_ORIGIN_WHITELIST：授權發出跨站點HTTP請求的源主機名列表。值“null”也可以出現在這個列表中，并將與“隱私敏感上下文”中使用的Origin: null頭匹配，例如當客戶機從file:// domain運行時。默認為[]。

修改 settings.py ，增加CORS配置

# 跨域CORS設置

# CORS_ORIGIN_ALLOW_ALL = False # 默認為False，如果為True則允許所有連接

CORS_ORIGIN_WHITELIST = ( # 配置允許訪問的白名單

'localhost:8080',

'127.0.0.1:8080',

)

image.png

Vue顯示分類菜單流程分析

使用axios請求分類數據的api： src/api/api.js

//獲取商品類別信息

export const getCategory = params => {

if ('id' in params) {

return axios.get(`${local_host}/categories/` + params.id + '/');

}

else {

return axios.get(`${local_host}/categories/`, params);

}

};

在這個代碼中，如果沒有獲取到id，則請求所有的分類，否則請求指定分類id的詳情。

從getCategory拿到數據之后，取results的值(也就是Django Api的是數據部分)賦值給，allMenuLabel，默認為[]， head/head.vue

getMenu() {//獲取菜單

getCategory({

params: {}

}).then((response) => {

console.log('輸出分類列表請求結果：');

console.log(response.data);

this.allMenuLabel = response.data.results

})

.catch(function (error) {

console.log(error);

});

image.png

進行allMenuLabel在vue中 for循環的遍歷，顯示類別的name

全部商品分類



{{item.name}}
{{second_item.name}}
{{third_item.name}}

遍歷三級，顯示每一級的分類信息。

分類顯示到導航

到目前為止，分類可以正常顯示，但是上方的tab沒有顯示一項，就只有首頁，對應源碼如下， head/head.vue

首頁
{{item.name}}

在后臺中，所有的分類對象is_tab字段都是為False，默認不顯示在導航中。在Django Admin中設置一些一級分類is_tab為True

修改 goods/admin.py ，設置商品類別后臺

from django.contrib import admin

from .models import GoodsCategory, Goods

from django.apps import apps

@admin.register(GoodsCategory)

class GoodsCategoryAdmin(admin.ModelAdmin):

list_display = ['name', 'category_type', 'is_tab', 'parent_category'] # 列表頁顯示

list_display_links = ('name'， 'parent_category',) # 列表頁外鍵鏈接，字段需在list_display中

list_editable = ('is_tab',) # 列表頁可編輯

list_filter = ('category_type',) # 列表頁可篩選

search_fields = ('name', 'desc') # 列表頁可搜索

all_models = apps.get_app_config('goods').get_models()

for model in all_models:

try:

admin.site.register(model)

except:

pass

image.png

總結

以上是生活随笔為你收集整理的vue一级分类和耳机分类_【Vue+DRF生鲜电商】10.商品分类层级获取，Vue跨域请求商品分类...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python财务预算分析_财码Pytho
下一篇： bdphp在线订购是真的么_《瑞评》33