cnpm run dev
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/fb8751c62f3140ff8c04b35ddd4076e5.jpg)
文章图片
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/d58aedba3c7d4d03a871ee30484479e8.jpg)
文章图片
【REST|11-1 轮播图接口实现和vue调试】现在开发轮播图
需要把 解释器设置为本地 虚拟环境,之前是因为支付需要服务器上的解释器
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/f2e21e57e1a54028b2e04e75b63ebb5d.jpg)
文章图片
选择为本地之后。
需要去验证一下是不是设置成功,
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/925b6b70b10c40b3ba04ba9ff070eb7c.jpg)
文章图片
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/15cb745a71284cda9e457dc1aae01656.jpg)
文章图片
不是 设置为本地
==========
设置为本地数据库
'HOST': 'localhost',
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/60b7c1aecff44c9eaad1e4a2b4f6ddb5.jpg)
文章图片
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/104f33694aad4ff8ad9febd711741c4d.jpg)
文章图片
安装包
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/3f3e19a9586a4c199e2683a5b606f338.jpg)
文章图片
运行
访问:
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/6a7f4819da034922807c678f0d354745.jpg)
文章图片
class BannerViewset(mixins.ListModelMixin, viewsets.GenericViewSet):
"""
获取轮播图列表
"""
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/2db365f87f6a466d8f5f9884347446a8.jpg)
文章图片
class BannerSerializer(serializers.ModelSerializer):class Meta:
model = Banner
fields = '__all__'
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/c3045afddc7e4a048b910149aa757ec5.jpg)
文章图片
class BannerViewset(mixins.ListModelMixin, viewsets.GenericViewSet):
"""
获取轮播图列表
"""
queryset = Banner.objects.all().order_by("index")
serializer_class = BannerSerializer
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/f7386a4cc741453895c87b6b13fd1de1.jpg)
文章图片
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/6fe74ed13aea4c729f09dbbb08d056ce.jpg)
文章图片
启动,访问:
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/24829c86e8874749b08f9ee66399c093.jpg)
文章图片
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/70d5fc9c46c7432d92c016f6fac2180c.jpg)
文章图片
然后再添加2个。
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/6ce48b69a76c445088167746badd9930.jpg)
文章图片
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/fceca09b2c864e9a808bcbff438c0fcf.jpg)
文章图片
效果:
![REST|11-1 轮播图接口实现和vue调试](https://img.it610.com/image/info8/a4c58aa207f3414e836160434257ef04.jpg)
文章图片