Vue + drf 打造前后端分离的生鲜电商平台 —— 周报 2

		                    ——————  学习周报 2019.1.27

掌握的技术：

Vue + Django REST framework 前后端分离技术
restful api 开发流程
Django REST framework 的功能实现和核心源码分析
Sentry 完成线上系统的错误日志的监控和警告
第三方登录和支付宝支付的集成
本地调试远程服务器代码技巧

完成情况：

完成“ 商品列表页” 功能
- Django 的 view 实现商品列表页
- Django 的 serializer 序列化 model
- apiview 方式实现商品列表页
- drf 的 modelserializer 实现商品列表页功能
- GenericView 方式实现列表页和分页功能详解
- viewsets 和 router 完成商品列表页
- drf 的 Apiview、GenericView、Viewset 和 router的原理分析
- drf 的 request 和 response
- drf 的过滤
- drf 的搜索和排序

笔记：

以下功能都基于 drf 的文档：drf 文档

多种方法实现商品列表页： Django 的 view、apiview、GenericView、viewsets 和 router

1、Django 的 view 实现商品列表页

在apps / goods / 新建 view_base.py： class GoodsListView(View):

class GoodsListView(View):
    def get(self, request):
        """
        通过django的view实现商品列表页
        :param request:
        :return:
        """
        json_list = []
        goods = Goods.objects.all()[:10]
        for good in goods:
            json_dict = {}
            json_dict["name"] = good.name
            json_dict["category"] = good.category.name
            json_dict["market_price"] = good.market_price
            json_list.append(json_dict)

        from django.http import HttpResponse
        import json
        return HttpResponse(json.dumps(json_list), content_type="application/json")

配置url：url(r'^goods/$', GoodsListView.as_view(), name="goods-list")
浏览器访问：127.0.0.1:8080/goods
很乱，为了格式化显示json ：下载 json view插件：
- 具体安装配置看我另一篇博客：jsonview 插件安装
安装完成后：格式化显示
json的缺点：书写view代码量太大，不可序列化等，所以后面采用REST framework

2、Django 的 serializer 序列化 model

在apps / goods / 更改 view_base.py： class GoodsListView(View):

class GoodsListView(View):
    def get(self, request):
        goods = Goods.objects.all()[:10]
        import json
        from django.core import serializers
        json_data = serializers.serialize('json', goods)
        json_data = json.loads(json_data)

        from django.http import JsonResponse
        return JsonResponse(json_data, safe=False)

一般做api接口或者json返回时用 JsonResponse

访问： 127.0.0.1：8080/goods/

3、apiview 方式实现商品列表页

具体更多细节配置看drf官方文档：drf文档

为了使用drf提供的文档，安装drf的相关包： pip install django-guardian pip install coreapi
生成drf文档的配置：
- url(r'docs/', include_docs_urls(title="Taotao生鲜")),
- url(r'^api-auth/', include('rest_framework.urls')),
在settings.py中INSTALLED_APPS = 加入’rest_framework’,
重要：

在apps / goods / views.py下编写class:

class GoodsListView(APIView):
	"""
	List all goods
	"""
	def get(self, request, format=None):
		goods = Goods.objects.all()[:10]
		goods_serializer = GoodsSerializer(goods, many=True)
		return Response(goods_serializer.data)

	def post(self, request, format=None):
		serializer = GoodsSerializer(data=request.data)
		if serializer.is_valid():
			serializer.save()
			return Response(serializer.data, status=status.HTTP_201_CREATED)
		return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

在apps / goods / 新建serializers.py下编写class:

class GoodsSerializer(serializers.Serializer):
    name = serializers.CharField(required=True, max_length=100)
    click_num = serializers.IntegerField(default=0)
    goods_front_image = serializers.ImageField()

    def create(self, validated_data):
        """
        Create and return a new `goods instance, given the validated data.
        """
        return Goods.objects.create(**validated_data)

问题：drf的 apiview方式实现上来列表页浏览器访问出错：‘CSRFCheck’ object has no attribute ‘process_request’ 报错

解决方法：在settings.py中加入：
REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': [ ] }

访问： 127.0.0.1：8080/goods/:

4、drf 的 modelserializer 实现商品列表页功能

在apps / goods / views.py下修改class:—— 代码更加精简

class GoodsListView(APIView):
	"""
	List all goods
	"""
	def get(self, request, format=None):
		goods = Goods.objects.all()[:10]
		goods_serializer = GoodsSerializer(goods, many=True)
		return Response(goods_serializer.data)

在apps / goods / serializers.py下修改class: —— 代码更加精简，所有字段都序列化出来

class GoodsSerializer(serializers.ModelSerializer):
    class Meta:
        model = Goods
        fields = "__all__"

访问： 127.0.0.1：8080/goods/，所有字段都序列化出来
还可以实现序列化的嵌套。

5、GenericView 方式实现列表页和分页功能详解

5.1 GenericView 方式实现列表页
- 在apps / goods / views.py下修改class: —— 代码更加精简
  学会在项目下看源码，了解到一个class可以被继承，实现所要的功能。

class GoodsListView(generics.ListAPIView):
	"""
	商品列表页
	"""
	queryset = Goods.objects.all()
	serializer_class = GoodsSerializer

访问： 127.0.0.1：8080/goods/，所有字段都序列化出来

5.1 列表页分页：
- 在settings.py最后配置：

REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
    'PAGE_SIZE': 10,
}

在这里插入图片描述

6、viewsets 和 router 完成商品列表页（重要！！！）

6.1 viewsets 完成商品列表页

在apps / goods / views.py下修改class继承： class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
url配置：# 商品列表页 url(r'^goods/$', goods_list, name="goods-list"),

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

访问： 127.0.0.1：8080/goods/

6.2 router 完成商品列表页

url配置： url(r'^', include(router.urls)), （去掉原来的商品列表页url、goods_list =）

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

访问： 127.0.0.1：8080/goods/

7、drf 的 Apiview、GenericView、Viewset 和 router的原理分析

7.1 优先级： —— 由高到低
- GenericViewSet —— drf
- GenericAPIView —— drf
- APIView —— drf
- View —— Django
7.2mixin:
- CreatModelMixin
- ListModelMixin
- UpdateModelMixin
- REtrieModelMixin
- DestoryModelMixin

8、drf 的 request 和 response

具体描述

9、drf 的过滤

具体描述
在apps / goods / views.py下修改class

class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
	"""
	商品列表页
	"""
	queryset = Goods.objects.all()
	serializer_class = GoodsSerializer
	pagination_class = GoodsPagination

	filter_backends = (DjangoFilterBackend,)
	filter_fields = ('name','shop_price')

在这里插入图片描述

缺点：不可做模糊搜索，必须是精确搜索。

django filter:官方文档
在apps / goods 下新建filters.py文件：定义自己的filter类：

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

    class Meta:
        model = Goods
        fields = ['price_min', 'price_max']

在apps / goods / views.py下修改class：

class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
	"""
	商品列表页
	"""
	queryset = Goods.objects.all()
	serializer_class = GoodsSerializer
	pagination_class = GoodsPagination

	filter_backends = (DjangoFilterBackend,)
	filter_class = GoodsFilter

自定义过滤器之后：

10、drf 的搜索和排序

利用drf的Search filtrer实现搜索
在apps / goods / views.py下修改class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet): 配置saerchFiltersearch_fields = ('name', 'goods_brief', 'goods_desc')
利用drf的 orderingFiltrer实现排序：

在apps / goods / views.py下修改class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet): 配置OrderingFilterordering_fields = ('sold_num', 'shop_price')

下周计划：

学习《git团队协作》
“ 商品类别数据和vue展示” 功能
- 商品类别数据接口
- vue 展示商品分类数据
- vue 展示商品列表页数据
- vue 的商品搜索功能
“用户登录与手机注册”
- drf 的tock登录和原理
- viewsets 配置认证类
- json web token 的原理
- json web token 方式完成用户认证
- vue 和 jwt 接口调试