- xadmin部署
- xadmin管理数据
- 渲染前端页面数据
-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长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
代码语言：javascript复制pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2注册xadmin |
|---|
settings/dev.py
代码语言：javascript复制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自带数据表，所以我们需要做迁移
代码语言：javascript复制(luffy) bash-3.2$ python manage.py makemigrations
(luffy) bash-3.2$ python manage.py migrate配置xadmin路由 |
|---|
luffyapi/urls.py
代码语言：javascript复制# 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
代码语言：javascript复制import xadmin
from . import models
xadmin.site.register(models.Banner)

设置xadmin额外配置 |
|---|
apps/home/adminx.py
代码语言：javascript复制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
代码语言：javascript复制default_app_config = "home.apps.HomeConfig"home/apps.py
代码语言：javascript复制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>点击图片可以跳转哦~ 鼠标悬浮可以看到名字哦~

