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后台,任选一级类目的商品
将其设置为导航,保存即可。
发现首页的导航商品类别出现。
点击导航商品类别,发现商品成功展出。