轮播图的实现

目录

• 轮播图：
  • 前端：
    • 配置
    • banner.vue样式:
  • 后端：
    • views.py:
    • urls.py路由：
    • models.py:
    • serializers.py:

轮播图：

前端：

配置

前端项目目录下的终端：
    cnpm install vue-cookies

    cnpm install axios

    cnpm install element-ui

    cnpm install jquery
    cnpm install bootstrap@3

 配置jquery：vue.config.js：
 const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

在main.vue文件 配置：
    import axios from 'axios'
    Vue.prototype.$axios = axios;

    import cookies from 'vue-cookies'
    Vue.prototype.$cookies = cookies;

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'

banner.vue样式:

<template>
    <div class="banner">
        <el-carousel height="400px">
            <!--<el-carousel-item>- 前端图片展示->
                <!--<router-link to="/">-->
                    <!--<img src="../assets/img/banner1.png" alt="">-->
                <!--</router-link>-->
            <!--</el-carousel-item>-->

            <el-carousel-item v-for="banner in banner_list" :key="banner.title">
                <!--<a :href="banner.link">    后端数据页面展示 跳出本地页面-->
                    <!--<img :src="banner.image" alt="" :title="banner.title">-->
                <!--</a>-->
                <router-link :to="banner.link">
                    <img :src="banner.image" alt="" :title="banner.title">
                </router-link>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list: []  /* 接收数据*/
            }
        },
        create() {
            
            // 直接发送get请求
            // this.$axios.get(this.$settings.base_url + '/home/banners').then(response => {
            //     // console.log(response)
            //     this.banner_list = response.data
            // })
            
            /* 前端发送请求方式--》 后端*/
            this.$axios({
                url: this.$settings.base_url + '/home/banners',
                method: 'get',
                params: {},  /* 参数 ？ 数据包*/
                data: {}
            }).themn(response=> {
                this.banner_list = response.data
            }).catch(error => {
                console.log(error.response.data)
            })
        }
    }
</script>

<style scoped>  /*  scoped 独属于改文件的样式配置*/
    .banner {
        height: 400px;
    }

    .banner a {
        display: block;
    }

    .banner img {
        height: 400px;
        /*  设置一个默认的长度 进行页面居中展示 */
        margin-left: calc(50% - 1920px / 2);
    }

    .el-carousel__item {
        /* 设置默认值*/
        min-width: 1200px;
    }

</style>

后端：

views.py:

from rest_framework.viewsets import GenericViewSet
from rest_framework import mixins
from django.conf import settings
from utils.response import Response
from  . import models, serializers

class BannerListViewSet(mixins.ListModelMixin, GenericViewSet):
    queryset = models.Banner.objects.filter(is_delete=False, is_show=True).order_by('-orders').all()[:settings.BANNER_COUNT]
    serializer_class = serializers.BannerModelSerializer

    # 自定义响应结果的格式
    # def list(self, request, *args, **kwargs):
    #     response = super().list(request, *args, **kwargs)
    #     return APIResponse(results=response.data)

urls.py路由：

#子路由：
from django.urls import path,re_path,include
from utils.router import router
from . import views

router.register('banners',views.BannerListViewSet,basename='banner')
urlpatterns = [
    re_path(r'',include(router.urls))
]

import xadmin
xadmin.autodiscover()
from xadmin.plugins import xversion
xversion.register_models()
urlpatterns = [
    path('xadmin/', xadmin.site.urls),

    path('user/', include('user.urls')),
    path('home/', include('home.urls')),

    re_path('^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})
]

models.py:

from django.db import models

from utils.model import BaseModel
class Banner(BaseModel):
    title = models.CharField(max_length=64,verbose_name='标题')
    link = models.CharField(max_length=64, verbose_name='链接')
    image = models.ImageField(upload_to='banner', verbose_name='图片')

    class Meta:
        db_table = 'luffy_banner'
        verbose_name_plural = '轮播图'

    def __str__(self):
        return self.title


    
#基表创建： utils/model.py

from django.db import models

class BaseModel(models.Model):
    is_delete = models.BooleanField(default=False, verbose_name='是否删除')
    is_show = models.BooleanField(default=True, verbose_name='是否上线')
    orders = models.IntegerField(default=0, verbose_name='排序顺序')
    created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    update_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')

    class Meta:
        abstract = True

serializers.py:

from rest_framework import serializers
from . import models
class BannerModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Banner
        fields = ('title','link','image')

来源：https://www.cnblogs.com/shaozheng/p/12158600.html