Vue + Django 2.0.6 学习笔记 8.1 商品详情页的API接口

第一步：

# 在GoodsListViewset中添加一个RetrieveModelMixin继承类

class GoodsListViewset(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):

urls.py中不用去动它

第二步  建立商品图片的Serializer

# goods.py / serializers.py / GoodsImageSerializer

class GoodsImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = GoodsImage
        fields = ('image',)

第三步 将图片的Serializer嵌套到GoodsSerializer中

class GoodsSerializer(serializers.ModelSerializer):
    # 嵌套序列化 外键
    category = CategorySerializer()
    # 这里 添加images字段关联过去  many表示此字段会关联到多个图片字段数据（1对多）
    images = GoodsImageSerializer(many = True)
    class Meta:
        model = Goods
        fields = "__all__"

这样就可以了 

数据显示：

vue中需要把全局地址变量改成local_host

// src/api/api.js


//商品详情
export const getGoodsDetail = goodId => {
  return axios.get(`${local_host}/goods/${goodId}` + '/')
}

完结