Banner.vue

<template>
    <div class="banner">
        <el-carousel :interval="5000" arrow="always" height="400px">
            <el-carousel-item v-for="item in banner_list">
                <img :src="item.image" alt="">
            </el-carousel-item>
        </el-carousel
 
>
    </div>
</template>

<script>

    export default {
        name: "Banner",
        data(){
            return {
                banner_list:[]
            }
        },
        created() {
            this.$axios.get(this.$settings.base_url+'home/banner/').then(res=>{
                
 
if(res.data.status==100){
                    this.banner_list=res.data.result
                    console.log(this.banner_list)
                }
            })
        }
    }
</script>

<style scoped>


    el-carousel-item {
        height: 400px;
        min-width: 1200px;
    }

    .el-carousel__item img 
 
{
        height: 400px;
        margin-left: calc(50% - 1920px / 2);
    }
</style>

　　settings.js

export default {
    base_url: "http://127.0.0.1:8000/api/v1/"
}

後端urls.py

from django.views.static import serve
from django.conf import settings

urlpatterns = [# 開啟emdia的訪問
    path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
]

 後端自定義配置

　　第一步

# 在setting資料夾下新建 user_settings.py
# 使用者自己的配置，單獨放到另一個py檔案中
BANNER_COUNT=3

　　第二步

# 在dev.py中匯入
# 匯入使用者自定義的配置
from .user_settings import *

　　檢視類

from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from .models import Banner
from .serializer import BannerSerializer
from utils.response import APIResponse
from django.conf import settings

class BannerView(GenericViewSet, ListModelMixin):
    queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
    serializer_class = BannerSerializer

    def list(self, request, *args, **kwargs):
        res = super().list(request, *args, **kwargs)
        return APIResponse(result=res.data)