11-1 轮播图接口实现和vue调试

 

 

cnpm run dev

11-1 轮播图接口实现和vue调试_第1张图片

 

11-1 轮播图接口实现和vue调试_第2张图片

 

 

现在开发轮播图

需要把 解释器设置为本地 虚拟环境,之前是因为支付需要服务器上的解释器

11-1 轮播图接口实现和vue调试_第3张图片

 

选择为本地之后。

需要去验证一下是不是设置成功,

11-1 轮播图接口实现和vue调试_第4张图片

11-1 轮播图接口实现和vue调试_第5张图片

 

不是 设置为本地

==========

设置为本地数据库

        'HOST': 'localhost',

11-1 轮播图接口实现和vue调试_第6张图片

 

11-1 轮播图接口实现和vue调试_第7张图片

 

安装包

11-1 轮播图接口实现和vue调试_第8张图片

 

运行

访问:

11-1 轮播图接口实现和vue调试_第9张图片

 

class BannerViewset(mixins.ListModelMixin, viewsets.GenericViewSet):
    """
    获取轮播图列表
    """

11-1 轮播图接口实现和vue调试_第10张图片

 

class BannerSerializer(serializers.ModelSerializer):

    class Meta:
        model = Banner
        fields = '__all__'

 

11-1 轮播图接口实现和vue调试_第11张图片

 

class BannerViewset(mixins.ListModelMixin, viewsets.GenericViewSet):
    """
    获取轮播图列表
    """
    queryset = Banner.objects.all().order_by("index")
    serializer_class = BannerSerializer

 

11-1 轮播图接口实现和vue调试_第12张图片

 

 

11-1 轮播图接口实现和vue调试_第13张图片

 

 

启动,访问:

11-1 轮播图接口实现和vue调试_第14张图片

 

 

11-1 轮播图接口实现和vue调试_第15张图片

 

然后再添加2个。

11-1 轮播图接口实现和vue调试_第16张图片

 

11-1 轮播图接口实现和vue调试_第17张图片

效果:

11-1 轮播图接口实现和vue调试_第18张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(REST,f)