07 后台主页模块设计

07 后台主页模块设计

一、Banner数据表model设计

1、utils/model.py

from django.db import models


# 因为考虑后期课程表，轮播图都会用到这些字段
class BaseModel(models.Model):
    create_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    update_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
    is_delete = models.BooleanField(default=False, verbose_name='是否删除')
    is_show = models.BooleanField(default=True, verbose_name='是否展示')
    display = models.IntegerField(verbose_name='优先级')

    class Meta:
        abstract = True  # 创建一张虚拟表

2、home/models.py

from django.db import models
from luffy.utils.models import BaseModel


class Banner(BaseModel):
    title = models.CharField(max_length=16, unique=True, verbose_name='标题名称')
    image = models.ImageField(upload_to='banner', verbose_name='图片')
    link = models.CharField(max_length=64, verbose_name='跳转链接')
    info = models.TextField(verbose_name='详情')  # 也可以用详情表，宽高出处

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

    def __str__(self):
        return self.title

3、数据库迁移

>: python manage.py makemigrations
>: python manage.py migrate

4、注册app：dev.py

INSTALLED_APPS = [
    # ...
    'rest_framework',
    'home',
]

二、设计Banner数据接口

1、home/views.py

from rest_framework.viewsets import ModelViewSet
from rest_framework.mixins import ListModelMixin
from .models import Banner
from . import serializers
from django.conf import settings


class BannerViewSet(ModelViewSet, ListModelMixin):
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True)[:settings.BANNER_COUNT]  # 通过切片值只显示几张图片
    serializer_class = serializers.BannerSerializer

2、home/serializers.py

from rest_framework import serializers
from . import models


class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Banner
        fields = ['title', 'image', 'link']

3、home/urls.py

from django.urls import path
from luffyapi.apps.home import views
from rest_framework.routers import SimpleRouter

router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')

urlpatterns = [
    path('home/', views.TextView.as_view())

]
urlpatterns += router.urls

4、自定义轮播图显示页数

# settings/const.py
# 首页轮播图显示的张数
BANNER_COUNT = 2

# settings/dev.py
# 首页轮播图设置
from luffyapi.settings.const import *

在home/views.py中添加
class BannerView(GenericViewSet, ListModelMixin):
    serializer_class = BannerSerializer
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True)[:settings.BANNER_COUNT]  # 通过切片值只显示几张图片

4、接口

http://127.0.0.1:8000/home/banner/

四、轮播图前端：点图片跳转

1、components/Banner.vue

<template>
    <div class="banner">
        <el-carousel height="400px">
            <el-carousel-item v-for="item in banner_list">
<!--                <img src="../assets/img/python-8days-camp.png" alt="">-->
                <router-link :to="item.link">
                    <img :src="item.image" :alt="item.name">
                </router-link>

            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list: []
            }
        },
        created() {
            // 当banner组件一创建就向后端发请求
            this.$axios.get(this.$settings.base_url + '/home/banner/').then(response => {
                console.log(response.data)
                this.banner_list=response.data
            }).catch(error => {

            })
        }
    }
</script>

<style scoped>
    .el-carousel__item {
        height: 400px;
        min-width: 1200px;
    }

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

2、router/index.js：增加路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

// 新增的三个组件
import ActualCourse from "../views/ActualCourse";
import FreeCourse from "../views/FreeCourse";
import LightCourse from "../views/LightCourse";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/free-course',
        name: 'FreeCourse',
        component: FreeCourse
    },
       {
        path: '/light-course',
        name: 'LightCourse',
        component: LightCourse
    },
           {
        path: '/actual-course',
        name: 'ActualCourse',
        component: ActualCourse
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

3、assets/js/settings.js

export default {
    base_url: 'http://127.0.0.1:8000'
}

4、main.js

import settings from "./assets/js/settings";  # 赋值到$settings
Vue.prototype.$settings=settings