前後端打通以及後端自定義配置
阿新 • • 發佈:2022-04-21
<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)