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

		                    ——————  学习周报 2019.2.3

---

---

掌握的技术：

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

---

---

完成情况：

• “ 商品类别数据和vue展示” 功能
  • 商品类别数据接口
  • vue 展示商品分类数据
  • vue 展示商品列表页数据
  • vue 的商品搜索功能

---

---

笔记：

1、商品类别数据接口

• 一类：在apps / goods / views.py:

class CategoryViewset(mixins.ListModelMixin, viewsets.GenericViewSet):
    """
    list:
        商品分类列表数据
    """
    queryset = GoodsCategory.objects.filter(category_type=1)
    serializer_class = CategorySerializer**

• 配置url：Category
  
• 二类：在apps / goods / Serializer.py嵌套：

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


class CategorySerializer(serializers.ModelSerializer):
    sub_cat = CategorySerializer2(many=True)

    class Meta:
        model = GoodsCategory
        fields = "__all__"

注意：many=True

• 三类： 在apps / goods / Serializer.py再嵌套：

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__"

• 详情信息显示，只需要在 CategoryViewset（）中增加： mixins.RetrieveModelMixin
• 在浏览器后面增加id就可以访问：
  

2、vue 展示商品分类数据

• 逐个接口进行调试，在online-store中的api.js中，声明一个本地的local_host，替换掉“商品类别”中的host

//获取商品类别信息
export const getCategory = params => {
  if('id' in params){
    return axios.get(`${local_host}/categorys/`+params.id+'/');
  }
  else {
    return axios.get(`${local_host}/categorys/`, params);
  }
};

• 设置跨域问题：—— 设置服务器完成跨域
  • github解决：https://github.com/ottoyiu/django-cors-headers
  • 进入虚拟环境安装： pip install django-cors-headers
    
  • 配置，详见github
    

3、vue 展示商品列表页数据

• 重写 filters.py: 查询第一类别下所有商品的所有数据

from django.db.models import Q

class GoodsFilter(django_filters.rest_framework.FilterSet):
    """
    商品的过滤类
    """
    price_min = django_filters.NumberFilter(field_name='shop_price', help_text="最低价格", lookup_expr='gte')
    price_max = django_filters.NumberFilter(field_name='shop_price', lookup_expr='lte')
    top_category = django_filters.NumberFilter(method='top_category_filter')

    def top_category_filter(self, queryset, name, value):
        return queryset.filter(Q(category_id=value) | Q(category__parent_category_id=value) |
                               Q(category__parent_category__parent_category_id=value))

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

• 梳理online-store实现流程
• 点击“生鲜食品”：
  
• 点击“酒水饮料”：
  

4、vue 的商品搜索功能

• online-store中vue实现搜索。
• 搜索栏输入： 牛奶
• 自动获取后台数据，显示在页面
  

---

---

下周计划：

• “用户登录与手机注册”
  • drf 的tock登录和原理
  • viewsets 配置认证类
  • json web token 的原理
  • json web token 方式完成用户认证
  • vue 和 jwt 接口调试
  • 云片网发送短信验证码