Django 前後端分離實戰項目 生鮮超市（七）之Vue展示商品分類數據和搜索

Vue展示商品分類數據和搜索

前言

所有vue接口全部在src/api/api.js文件下

代碼已上傳至github：https://github.com/kalipoison/fresh-market

此項目僅學習用途

要求

Package Version

---

certifi 2020.4.5.1
chardet 3.0.4
coreapi 2.3.1
coreschema 0.0.4
Django 1.11.3
django-cors-headers 2.1.0
django-crispy-forms 1.6.1
django-filter 1.0.4
django-formtools 2.0
django-guardian 1.4.9
django-reversion 2.0.9
djangorestframework 3.6.3
future 0.16.0
httplib2 0.9.2
idna 2.9
itypes 1.2.0
Jinja2 2.11.2
Markdown 2.6.8
MarkupSafe 1.1.1
mysqlclient 1.3.10
olefile 0.46
Pillow 4.2.1
pip 20.0.2
pytz 2019.3
requests 2.23.0
setuptools 46.1.3
six 1.10.0
uritemplate 3.0.1
urllib3 1.25.9
wheel 0.34.2
XlsxWriter 0.9.8
xlwt 1.2.0

代碼已上傳至github：https://github.com/kalipoison/fresh-market

此項目僅學習用途

流程

修改api.js內容，修改商品類別獲取ip

將獲取商品列表做如下修改

運行vue代碼發現，發現全部商品分類下沒有一級目錄，一級目錄已改爲後端提供數據

前後端分離架構首先要解決跨域問題，當然npm也可以解決跨域問題，小編這裏採用服務器來解決跨域問題

安裝django-cors-headers：

pip install django-cors-headers==2.1.0

在settings.py的INSTALLED_APPS 中添加

    'corsheaders',

MIDDLEWARE中添加（儘可能靠前）

'corsheaders.middleware.CorsMiddleware',

並添加

CORS_ORIGIN_ALLOW_ALL = True

goods文件夾下serializers.py代碼如下：

serializers.py

from rest_framework import serializers
from django.db.models import Q

from goods.models import Goods, GoodsCategory,HotSearchWords

class CategorySerializer3(serializers.ModelSerializer):
    class Meta:
        model = GoodsCategory
        fields = "__all__"


class CategorySerializer2(serializers.ModelSerializer):
    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 GoodsSerializer(serializers.ModelSerializer):
    category = CategorySerializer()
    class Meta:
        model = Goods
        fields = "__all__"

class GoodCategorySerializer(serializers.ModelSerializer):
    '''
    商品類別序列化
    '''
    class Meta:
        model = Goods
        fields = "__all__"

class HotWordsSerializer(serializers.ModelSerializer):
    class Meta:
        model = HotSearchWords
        fields = "__all__"

goods文件夾下views.py代碼如下：

views.py

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import mixins
from rest_framework import generics
from rest_framework import filters
from rest_framework.pagination import PageNumberPagination
from django_filters.rest_framework import DjangoFilterBackend
from rest_framework import viewsets
from rest_framework.authentication import TokenAuthentication

from .models import Goods,GoodsCategory,HotSearchWords
from .serializers import GoodsSerializer,CategorySerializer,HotWordsSerializer
from .filters import GoodsFilter
# Create your views here.

class GoodsPagination(PageNumberPagination):
    page_size = 12
    page_size_query_param = 'page_size'
    page_query_param = "page"
    max_page_size = 100

class GoodsListViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
    """
    商品列表頁, 分頁， 搜索， 過濾， 排序
    """
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    pagination_class = GoodsPagination
    authentication_classes = (TokenAuthentication, )
    filter_backends = (DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter)
    filter_class = GoodsFilter
    search_fields = ('name', 'goods_brief', 'goods_desc')
    ordering_fields = ('sold_num', 'add_time')


class CategoryViewset(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
    """
    list:
        商品分類列表數據
    retrieve:
        獲取商品分類詳情
    """
    queryset = GoodsCategory.objects.filter(category_type=1)
    serializer_class = CategorySerializer


class HotSearchsViewset(mixins.ListModelMixin, viewsets.GenericViewSet):
    """
    獲取熱搜詞列表
    """
    queryset = HotSearchWords.objects.all().order_by("-index")
    serializer_class = HotWordsSerializer

url.py

from django.conf.urls import url,include
# from django.contrib import admin
import xadmin
from Mxshop.settings import MEDIA_ROOT
from django.views.static import serve
from rest_framework.documentation import include_docs_urls
from rest_framework.routers import DefaultRouter
from rest_framework.authtoken import views
from rest_framework_jwt.views import obtain_jwt_token
from goods.views import GoodsListViewSet,CategoryViewset,HotSearchsViewset


router = DefaultRouter()

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

#配置category的url
router.register(r'categorys', CategoryViewset, base_name="categorys")


router.register(r'hotsearchs', HotSearchsViewset, base_name="hotsearchs")


goods_list = GoodsListViewSet.as_view({
    'get': 'list',
})

urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),
    url(r'^media/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT}),

    url(r'^', include(router.urls)),

    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),

    url(r'docs/',include_docs_urls(title='GOHB生鮮')),

    # drf自帶的token認證模式
    url(r'^api-token-auth/', views.obtain_auth_token),

    # jwt的認證接口
    url(r'^login/', obtain_jwt_token),
]

運行django,發現全部商品分類下的一級目錄成功展示

進入xadmin後臺，任選一級類目的商品

將其設置爲導航，保存即可。

發現首頁的導航商品類別出現。

點擊導航商品類別，發現商品成功展出。