（1）商品分类有两个接口：

一种是全部分类：一级二级三级

 

 

  一种是某一类的分类以及商品详细信息：

 

 开始写商品分类的接口

（2）序列化

给分类添加三级分类的serializer

 goods/serializers.py

  1. from rest_framework import serializers
  2. from .models import Goods,GoodsCategory
  5. class CategorySerializer3(serializers.ModelSerializer):
  6.     '''三级分类'''
  7.     class Meta:
  8.         model = GoodsCategory
  9.         fields = "__all__"
  10.  
  11.  
  12. class CategorySerializer2(serializers.ModelSerializer):
  13.     '''
  14.     二级分类
  15.     '''
  16.     #在parent_category字段中定义的related_name="sub_cat" 
  17.     sub_cat = CategorySerializer3(many=True)
  18.     class Meta:
  19.         model = GoodsCategory
  20.         fields = "__all__"
  21.  
  22.  
  23. class CategorySerializer(serializers.ModelSerializer):
  24.     """
  25.     商品一级类别序列化
  26.     """
  27.     sub_cat = CategorySerializer2(many=True)
  28.     class Meta:
  29.         model = GoodsCategory
  30.         fields = "__all__"

（3）views.py

  1. class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
  2.     '''
  3.     list:
  4.         商品分类列表数据
  5.     '''
  7.     queryset = GoodsCategory.objects.filter(category_type=1)
  1. serializer_class = CategorySerializer

说明：

  • 注释的内容，在后面生成drf文档的时候会显示出来，所有要写清楚
  • 要想获取某一个商品的详情的时候，继承 mixins.RetrieveModelMixin  就可以了

 （4）url配置

  1. # 配置Category的url
  2. router.register(r'categorys', CategoryViewSet, base_name="categorys")

 

 接口相关代码都放在src/api/api.js里面，调试接口的时候我们首先需要新建一个自己的host，然后替换要调试的host

（1）新建local_host

  1. let local_host = 'http://127.0.0.1:8000'

（2）替换商品类别默认的host

  1. //获取商品类别信息
  2. export const getCategory = params => {
  3.   if('id' in params){
  4.     return axios.get(`${local_host}/categorys/`+params.id+'/');
  5.   }
  6.   else {
  7.     return axios.get(`${local_host}/categorys/`, params);
  8.   }
  9. };

这个时候访问 http://127.0.0.1:8080/#/app/home/index

发现不显示商品分类了，是因为这涉及到了跨域问题，接下来就解决跨域的问题

 

drf跨域问题

后端服务器解决跨域问题的方法

（1）安装模块

  1. pip install django-cors-headers

django-cors-headers 使用说明：https://github.com/ottoyiu/django-cors-headers

 （2）添加到INSTALL_APPS中

  1. INSTALLED_APPS = (
  2.     ...
  3.     'corsheaders',
  4.     ...
  5. )

（3）添加中间件

下面添加中间件的说明：

CorsMiddleware should be placed as high as possible, especially before any middleware that can generate responses such as Django’s CommonMiddleware or Whitenoise’s WhiteNoiseMiddleware. If it is not before, it will not be able to add the CORS headers to these responses.

Also if you are using CORS_REPLACE_HTTPS_REFERER it should be placed before Django’s CsrfViewMiddleware (see more below).

意思就是 要放的尽可能靠前，必须在CsrfViewMiddleware之前。我们直接放在第一个位置就好了

  1. MIDDLEWARE = [
  2.     'corsheaders.middleware.CorsMiddleware',
  3.     'django.middleware.security.SecurityMiddleware',
  4.     'django.contrib.sessions.middleware.SessionMiddleware',
  5.     'django.middleware.common.CommonMiddleware',
  6.     'django.middleware.csrf.CsrfViewMiddleware',
  7.     'django.contrib.auth.middleware.AuthenticationMiddleware',
  8.     'django.contrib.messages.middleware.MessageMiddleware',
  9.     'django.middleware.clickjacking.XFrameOptionsMiddleware',
  10. ]

（4）设置为True

  1. CORS_ORIGIN_ALLOW_ALL = True

现在再访问 http://127.0.0.1:8080/#/app/home/index   数据就可以填充进来了

 

 在一级分类中设置为True

 

 

 商品列表页会判断我们是serach还是getGoods

  1. getListData() {
  2.                 if(this.pageType=='search'){
  3.                   getGoods({
  4.                     search: this.searchWord, //搜索关键词
  5.                   }).then((response)=> {
  6.                     this.listData = response.data.results;
  7.                     this.proNum = response.data.count;
  8.                   }).catch(function (error) {
  9.                     console.log(error);
  10.                   });
  11.                 }else {
  12.                   getGoods({
  13.                     page: this.curPage, //当前页码
  14.                     top_category: this.top_category, //商品类型
  15.                     ordering: this.ordering, //排序类型
  16.                     pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间
  17.                     pricemax: this.pricemax // 价格最高 默认为‘’
  18.                   }).then((response)=> {
  20.                     this.listData = response.data.results;
  21.                     this.proNum = response.data.count;
  22.                   }).catch(function (error) {
  23.                     console.log(error);
  24.                   });
  25.                 }
  27.             },

说明：

（1）page分页

  1. class GoodsPagination(PageNumberPagination):
  2.     '''
  3.     商品列表自定义分页
  4.     '''
  5.     #默认每页显示的个数
  6.     page_size = 12
  7.     #可以动态改变每页显示的个数
  8.     page_size_query_param = 'page_size'
  9.     #页码参数
  10.     page_query_param = 'page'
  11.     #最多能显示多少页
  12.     max_page_size = 100

（2）过滤

top_category是商品的一级分类，需要传入参数：一级分类的id

pricemin和pricemax与前端保持一致

获取一级分类下的所有商品

  1. # goods/filters.py
  2.  
  3. import django_filters
  5. from .models import Goods
  6. from django.db.models import Q
  8. class GoodsFilter(django_filters.rest_framework.FilterSet):
  9.     '''
  10.     商品过滤的类
  11.     '''
  12.     #两个参数，name是要过滤的字段，lookup是执行的行为，‘小与等于本店价格’
  13.     pricemin = django_filters.NumberFilter(name="shop_price", lookup_expr='gte')
  14.     pricemax = django_filters.NumberFilter(name="shop_price", lookup_expr='lte')
  15.     top_category = django_filters.NumberFilter(name="category", method='top_category_filter')
  17.     def top_category_filter(self, queryset, name, value):
  18.         # 不管当前点击的是一级分类二级分类还是三级分类，都能找到。
  19.         return queryset.filter(Q(category_id=value) | Q(category__parent_category_id=value) | Q(
  20.             category__parent_category__parent_category_id=value))
  22.     class Meta:
  23.         model = Goods
  24.         fields = ['pricemin', 'pricemax']

（3）排序

  1. GoodsListViewSet中ording与前端要一致

  1. 　　 #排序
  2.     ordering_fields = ('sold_num', 'shop_price')

 （4）替换为local_host

  1. //获取商品列表
  2. export const getGoods = params => { return axios.get(`${local_host}/goods/`, { params: params }) }

（5）搜索

  1.  　　#搜索
  2.     search_fields = ('name', 'goods_brief', 'goods_desc')

 

现在就可以从后台获取商品的数据了，主要功能

  • 分类过滤
  • 价格区间过滤
  • 显示商品数量
  • 分页
  • 搜索

 

 

所有代码：

  1. # MxShop/urls.py
  2. __author__ = 'derek'
  3.  
  4.  
  5. from django.urls import path,include,re_path
  6. import xadmin
  7. from django.views.static import serve
  8. from MxShop.settings import MEDIA_ROOT
  9. # from goods.view_base import GoodsListView
  10.  
  11. from rest_framework.documentation import include_docs_urls
  12. from goods.views import GoodsListViewSet,CategoryViewSet
  13. from rest_framework.routers import DefaultRouter
  15. router = DefaultRouter()
  17. #配置goods的url
  18. router.register(r'goods', GoodsListViewSet,base_name='goods')
  19. # 配置Category的url
  20. router.register(r'categorys', CategoryViewSet, base_name="categorys")
  23. urlpatterns = [
  24.     path('xadmin/', xadmin.site.urls),
  25.     path('api-auth/',include('rest_framework.urls')),
  26.     path('ueditor/',include('DjangoUeditor.urls' )),
  27.     #文件
  28.     path('media/<path:path>',serve,{'document_root':MEDIA_ROOT}),
  29.     #drf文档，title自定义
  30.     path('docs',include_docs_urls(title='仙剑奇侠传')),
  31.     #商品列表页
  32.     re_path('^', include(router.urls)),
  33. ]

MxShop/urls.py 

  1. # goods/filters.py
  2.  
  3. import django_filters
  5. from .models import Goods
  6. from django.db.models import Q
  8. class GoodsFilter(django_filters.rest_framework.FilterSet):
  9.     '''
  10.     商品过滤的类
  11.     '''
  12.     #两个参数，name是要过滤的字段，lookup是执行的行为，‘小与等于本店价格’
  13.     pricemin = django_filters.NumberFilter(name="shop_price", lookup_expr='gte')
  14.     pricemax = django_filters.NumberFilter(name="shop_price", lookup_expr='lte')
  15.     top_category = django_filters.NumberFilter(name="category", method='top_category_filter')
  17.     def top_category_filter(self, queryset, name, value):
  18.         # 不管当前点击的是一级分类二级分类还是三级分类，都能找到。
  19.         return queryset.filter(Q(category_id=value) | Q(category__parent_category_id=value) | Q(
  20.             category__parent_category__parent_category_id=value))
  22.     class Meta:
  23.         model = Goods
  24.         fields = ['pricemin', 'pricemax']

goods/filters.py 

  1. # goods/serializers.py
  2.  
  3. from rest_framework import serializers
  4. from .models import Goods,GoodsCategory
  7. class CategorySerializer3(serializers.ModelSerializer):
  8.     '''三级分类'''
  9.     class Meta:
  10.         model = GoodsCategory
  11.         fields = "__all__"
  12.  
  13.  
  14. class CategorySerializer2(serializers.ModelSerializer):
  15.     '''
  16.     二级分类
  17.     '''
  18.     #在parent_category字段中定义的related_name="sub_cat"
  19.     sub_cat = CategorySerializer3(many=True)
  20.     class Meta:
  21.         model = GoodsCategory
  22.         fields = "__all__"
  23.  
  24.  
  25. class CategorySerializer(serializers.ModelSerializer):
  26.     """
  27.     商品一级类别序列化
  28.     """
  29.     sub_cat = CategorySerializer2(many=True)
  30.     class Meta:
  31.         model = GoodsCategory
  32.         fields = "__all__"
  33.  
  34.  
  35. #ModelSerializer实现商品列表页
  36. class GoodsSerializer(serializers.ModelSerializer):
  37.     #覆盖外键字段
  38.     category = CategorySerializer()
  39.     class Meta:
  40.         model = Goods
  41.         fields = '__all__'

goods/serializers.py 

  1. # googd/views.py
  2.  
  3. from rest_framework.views import APIView
  4. from goods.serializers import GoodsSerializer,CategorySerializer
  5. from .models import Goods,GoodsCategory
  6. from rest_framework.response import Response
  7. from rest_framework import mixins
  8. from rest_framework import generics
  9. from rest_framework.pagination import PageNumberPagination
  10. from rest_framework import viewsets
  11. from .filters import GoodsFilter
  12. from django_filters.rest_framework import DjangoFilterBackend
  13. from rest_framework import filters
  16. class GoodsPagination(PageNumberPagination):
  17.     '''
  18.     商品列表自定义分页
  19.     '''
  20.     #默认每页显示的个数
  21.     page_size = 12
  22.     #可以动态改变每页显示的个数
  23.     page_size_query_param = 'page_size'
  24.     #页码参数
  25.     page_query_param = 'page'
  26.     #最多能显示多少页
  27.     max_page_size = 100
  28.  
  29.  
  30. class GoodsListViewSet(mixins.ListModelMixin,viewsets.GenericViewSet):
  31.     '''
  32.     商品列表，分页，搜索，过滤，排序
  33.     '''
  34.  
  35.     #这里必须要定义一个默认的排序,否则会报错
  36.     queryset = Goods.objects.all()
  37.     # 分页
  38.     pagination_class = GoodsPagination
  39.     #序列化
  40.     serializer_class = GoodsSerializer
  41.     filter_backends = (DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter)
  43.     # 设置filter的类为我们自定义的类
  44.     #过滤
  45.     filter_class = GoodsFilter
  46.     #搜索
  47.     search_fields = ('name', 'goods_brief', 'goods_desc')
  48.     #排序
  49.     ordering_fields = ('sold_num', 'shop_price')
  52. class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
  53.     '''
  54.     list:
  55.         商品分类列表数据
  56.     '''
  58.     queryset = GoodsCategory.objects.filter(category_type=1)
  59.     serializer_class = CategorySerializer

goods/views.py 

  1. """
  2. Django settings for MxShop project.
  4. Generated by 'django-admin startproject' using Django 2.0.2.
  6. For more information on this file, see
  7. https://docs.djangoproject.com/en/2.0/topics/settings/
  9. For the full list of settings and their values, see
  10. https://docs.djangoproject.com/en/2.0/ref/settings/
  11. """
  12.  
  13. import os, sys
  15. # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
  16. BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  17. sys.path.insert(0, BASE_DIR)
  18. sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))
  19. sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))
  22. # Quick-start development settings - unsuitable for production
  23. # See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/
  24.  
  25. # SECURITY WARNING: keep the secret key used in production secret!
  26. SECRET_KEY = '#r@h(x*x2jc5o^-y#9=9w)o7iiv7jd^zxp@1s5*nj-n*s)v#o*'
  27.  
  28. # SECURITY WARNING: don't run with debug turned on in production!
  29. DEBUG = True
  31. ALLOWED_HOSTS = []
  33. #重载系统的用户，让UserProfile生效
  34. AUTH_USER_MODEL = 'users.UserProfile'
  35.  
  36. # Application definition
  38. INSTALLED_APPS = [
  39.     'django.contrib.admin',
  40.     'django.contrib.auth',
  41.     'django.contrib.contenttypes',
  42.     'django.contrib.sessions',
  43.     'django.contrib.messages',
  44.     'django.contrib.staticfiles',
  45.     'users',
  46.     'goods',
  47.     'trade',
  48.     'user_operation',
  49.     'rest_framework',
  50.     'xadmin',
  51.     'crispy_forms',
  52.     'DjangoUeditor',
  53.     'django_filters',
  54.     'reversion',
  55.     'corsheaders',
  56. ]
  59. MIDDLEWARE = [
  60.     'corsheaders.middleware.CorsMiddleware',
  61.     'django.middleware.security.SecurityMiddleware',
  62.     'django.contrib.sessions.middleware.SessionMiddleware',
  63.     'django.middleware.common.CommonMiddleware',
  64.     'django.middleware.csrf.CsrfViewMiddleware',
  65.     'django.contrib.auth.middleware.AuthenticationMiddleware',
  66.     'django.contrib.messages.middleware.MessageMiddleware',
  67.     'django.middleware.clickjacking.XFrameOptionsMiddleware',
  68. ]
  69. CORS_ORIGIN_ALLOW_ALL = True
  72. ROOT_URLCONF = 'MxShop.urls'
  74. TEMPLATES = [
  75.     {
  76.         'BACKEND': 'django.template.backends.django.DjangoTemplates',
  77.         'DIRS': [os.path.join(BASE_DIR, 'templates')]
  78.         ,
  79.         'APP_DIRS': True,
  80.         'OPTIONS': {
  81.             'context_processors': [
  82.                 'django.template.context_processors.debug',
  83.                 'django.template.context_processors.request',
  84.                 'django.contrib.auth.context_processors.auth',
  85.                 'django.contrib.messages.context_processors.messages',
  86.             ],
  87.         },
  88.     },
  89. ]
  91. WSGI_APPLICATION = 'MxShop.wsgi.application'
  92.  
  93.  
  94. # Database
  95. # https://docs.djangoproject.com/en/2.0/ref/settings/#databases
  96. #
  97. # DATABASES = {
  98. #     'default': {
  99. #         'ENGINE': 'django.db.backends.sqlite3',
  100. #         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
  101. #     }
  102. # }
  104. DATABASES = {
  105.     'default': {
  106.         'ENGINE': 'django.db.backends.mysql',
  107.         'NAME': 'mxshop',        #数据库名字
  108.         'USER': 'root',          #账号
  109.         'PASSWORD': '123456',    #密码
  110.         'HOST': '127.0.0.1',     #IP
  111.         'PORT': '3306',          #端口
  112.         #这里引擎用innodb（默认myisam）
  113.         #因为后面第三方登录时，要求引擎为INNODB
  114.         # 'OPTIONS':{'init_command': 'SET storage_engine=INNODB'},    #按照课程会报错，改为
  115.         "OPTIONS":{"init_command":"SET default_storage_engine=INNODB;"}
  116.     }
  117. }
  120. # Password validation
  121. # https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators
  123. AUTH_PASSWORD_VALIDATORS = [
  124.     {
  125.         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
  126.     },
  127.     {
  128.         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
  129.     },
  130.     {
  131.         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
  132.     },
  133.     {
  134.         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
  135.     },
  136. ]
  139. # Internationalization
  140. # https://docs.djangoproject.com/en/2.0/topics/i18n/
  142. LANGUAGE_CODE = 'zh-hans'
  144. TIME_ZONE = 'Asia/Shanghai'
  146. USE_I18N = True
  148. USE_L10N = True
  150. USE_TZ = False
  153. # Static files (CSS, JavaScript, Images)
  154. # https://docs.djangoproject.com/en/2.0/howto/static-files/
  156. STATIC_URL = '/static/'
  157.  
  158. # 设置上传文件的路径
  159. MEDIA_URL="/media/"
  160. MEDIA_ROOT=os.path.join(BASE_DIR,"media")
  162. #
  163. # REST_FRAMEWORK = {
  164. #     #分页
  165. #     'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
  166. #     #每页显示的个数
  167. #     'PAGE_SIZE': 10,
  168. # }

settings.py

 

Django REST framework+Vue 打造生鲜超市（四）

Django REST framework+Vue 打造生鲜超市（三）

Django REST framework+Vue 打造生鲜超市（二）

Django REST framework+Vue 打造生鲜超市（一）

 

posted on 2018-04-13 00:30 zhang_derek 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为derek1184405959原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/derek1184405959/p/8810591.html