路飞学城项目使用xadmin及首页轮播图接口

1、路飞项目使用xadmin

项目有前台(主站),也有后台,后台使用xadmin

1.1、安装：虚拟环境下

django2.x采用如下安装:
pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2

1.2、注册app：dev.py

INSTALLED_APPS = [
    # ...
    # xadmin主体模块
    'xadmin',
    # 渲染表格模块
    'crispy_forms',
    # 为模型通过版本控制，可以回滚数据
    'reversion',
]

1.3、xadmin：需要自己的数据库模型类，完成数据库迁移

python manage.py makemigrations
python manage.py migrate

1.4、设置主路由替换掉admin：主urls.py

# xadmin的依赖
import xadmin
xadmin.autodiscover()
# xversion模块自动注册需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()

urlpatterns = [
    # ...
    path('xadmin/', xadmin.site.urls),
]

1.5、创建超级用户

# 在项目根目录下的终端
python manage.py createsuperuser
# 账号密码设置：admin | Admin123

1.6、完成xadmin全局配置：新建home/adminx.py

# home/adminx.py
# xadmin全局配置
import xadmin
from xadmin import views

class GlobalSettings(object):
    """xadmin的全局配置"""
    site_title = "路飞学城"  # 设置站点标题
    site_footer = "路飞学城有限公司"  # 设置站点的页脚
    menu_style = "accordion"  # 设置菜单折叠

xadmin.site.register(views.CommAdminView, GlobalSettings)

1.7、在adminx.py中注册model：home/adminx.py

from . import models
# 注册
xadmin.site.register(models.Banner)

2、首页轮播图接口

2.1、表模型基础类搭建：utils/model_settings.py

from django.db import models


class BaseModel(models.Model):
    is_delete = models.BooleanField(default=False, verbose_name='是否删除')
    is_show = models.BooleanField(default=False, verbose_name='是否展示')
    create_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    order = models.IntegerField(verbose_name='顺序')

    # 基础表不在数据库中生成
    class Meta:
        abstract = True

2.2、轮播图表模型

from django.db import models

from utils.model_setting import BaseModel


class Banner(BaseModel):
    name = models.CharField(max_length=32, verbose_name='图片名')
    link = models.CharField(max_length=32, verbose_name='跳转地址')
    img = models.ImageField(upload_to='banner', blank=False, null=False, help_text='图片宽高必须固定', verbose_name='上传图片')

    def __str__(self):
        return self.name

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

2.3、adminx文件中注册轮播图模型

from .models import Banner
xadmin.site.register(Banner)

然后登录xadmin后台添加轮播图数据

2.4、轮播图序列化器

from rest_framework import serializers
from . import models

class BannerModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Banner
        fields = ('id', 'name', 'link', 'img')

2.5、轮播图视图

from rest_framework.mixins import ListModelMixin
from rest_framework.viewsets import GenericViewSet
from .serializer import BannerModelSerializer
from . import models
from django.conf import settings

class BannerView(GenericViewSet, ListModelMixin):
    queryset = models.Banner.objects.filter(is_show=True, is_delete=False).order_by('order')[:settings.BANNER_NUM]
    serializer_class = BannerModelSerializer


settings.BANNER_NUM在配置文件中定义,用于控制轮播图数量

2.6、路由配置

from django.urls import path
from rest_framework.routers import SimpleRouter
from . import views

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

urlpatterns = [
	# 方式一
    path('', include(router.urls)),
]
# 方式二
urlpatterns += router.urls

2.7、前端Banner.vue(前端对接数据接口)

<template>
    <div class="banner">
        <el-carousel height="400px">
            <el-carousel-item v-for="item in banner_list" :key="item.id">
                <router-link :to="item.link">
                    <img :src="item.img" :alt="item.name">
                </router-link>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

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

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

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