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 / GoodsImageSerializerclass 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 + Django 2.0.6 学习笔记 8.1 商品详情页的API接口
文章图片

vue中需要把全局地址变量改成local_host
// src/api/api.js//商品详情 export const getGoodsDetail = goodId => { return axios.get(`${local_host}/goods/${goodId}` + '/') }

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

    推荐阅读