Python项目46-xadmin管理后台数据(强撸)

DriverZeng

发布于 2022-09-26 14:02:05

5590

发布于 2022-09-26 14:02:05

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

xadmin部署

安装xadmin

xadmin官网(GitHub)：TP

Django2安装xadmin

pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2

注册xadmin

settings/dev.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    ## 注册cors，解决跨域问题
    'corsheaders',
    # xamin主体模块
    'xadmin',
    # 渲染表格模块
    'crispy_forms',
    # 为模型通过版本控制，可以回滚数据
    'reversion',
    'user',
    'home',
]

xadmin数据库迁移

xadmin自带数据表，所以我们需要做迁移

(luffy) bash-3.2$ python manage.py makemigrations

(luffy) bash-3.2$ python manage.py migrate

配置xadmin路由

luffyapi/urls.py

# from django.contrib import admin
from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings

# xadmin的依赖
import xadmin

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

xversion.register_models()

urlpatterns = [
    path('xadmin/', xadmin.site.urls),
    ## 路由分发user模块
    path('user/', include('user.urls')),
    ## 路由分发home模块
    path('home/', include('home.urls')),
    ## 图片上传路径，必须是正则路由
    re_path('^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})
]

创建超级用户

(luffy) bash-3.2$ python manage.py createsuperuser
Username: zls_admin
Email address: 253097001@qq.com
Password:  zls_admin123
Password (again): zls_admin123
Superuser created successfully.

xadmin管理数据

轮播图表注册

需要在home目录下新建一个adminx的文件

apps/home/adminx.py

import xadmin
from . import models

xadmin.site.register(models.Banner)

设置xadmin额外配置

apps/home/adminx.py

import xadmin
from . import models
from xadmin import views

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

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

自定义首页名称

home/__init__.py

default_app_config = "home.apps.HomeConfig"

home/apps.py

from django.apps import AppConfig

class HomeConfig(AppConfig):
    name = 'home'
    verbose_name = '曾老湿首页'

添加数据

提交请求

前台可以拿到三个数据

渲染前端页面数据

修改Banner.vue

<template>
    <el-carousel height="620px" :interval="3000" arrow="always">
        <!--        <el-carousel-item>-->
        <!--            <img src="@/assets/img/banner1.png" alt="">-->
        <!--        </el-carousel-item>-->
        <!--        <el-carousel-item>-->
        <!--            <img src="@/assets/img/banner2.png" alt="">-->
        <!--        </el-carousel-item>-->
        <!--        <el-carousel-item>-->
        <!--            <img src="@/assets/img/banner3.png" alt="">-->
        <!--        </el-carousel-item>-->
        <el-carousel-item v-for="banner in  banner_list" :key="banner.name">
            <a :href="banner.link">
                <img :src="banner.image" alt="" :title="banner.note">
            </a>
        </el-carousel-item>
    </el-carousel>
</template>
<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list: []
            }
        },
        // 添加钩子，渲染页面的时候，axios与后台交互
        created() {
            this.$axios({
                url: this.$settings.base_url + '/home/banners/',
                method: 'get',
            }).then(response => {
                // console.log(response.data)
                this.banner_list = response.data
            }).catch((errors) => {
                console.log(errors)
            })
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-carousel__item img {
        text-align: center;
        height: 520px;
        margin: 0 auto;
        display: block;
    }
</style>

点击图片可以跳转哦~ 鼠标悬浮可以看到名字哦~