使用django为后端vbenadmin为前端做一个自动化平台

好的，那我来给你介绍一下如何使用 Django 和 vbenadmin 来搭建一个自动化平台。

1. 安装 Django 和 vbenadmin

首先需要安装 Django 和 vbenadmin，可以使用 pip 进行安装：

pip install Django
pip install django-vben-admin

2. 创建 Django 项目

使用 Django 的命令行工具创建一个新的项目：

django-admin startproject myproject

其中 myproject 是你的项目名称，可以根据实际情况进行修改。

3. 创建 Django 应用

在项目目录下创建一个新的应用：

cd myproject
python manage.py startapp myapp

其中 myapp 是你的应用名称，可以根据实际情况进行修改。

4. 配置数据库

在 myproject/settings.py 文件中配置数据库信息，例如使用 SQLite：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

5. 配置 vbenadmin

在 myproject/settings.py 文件中添加 vbenadmin 的配置：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'vben_admin',
    'myapp',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'

LOGIN_URL = '/admin/login/'

VUE_ADMIN_CONFIG = {
    'site_title': 'My Site',
    'site_logo': '/static/logo.png',
    'menu': [
        {
            'text': 'Dashboard',
            'icon': 'el-icon-s-home',
            'link': '/admin/dashboard/',
        },
    ],
}

其中 VUE_ADMIN_CONFIG 是 vbenadmin 的配置，包括站点标题、站点 Logo、菜单等。

6. 创建数据库表

使用 Django 的命令行工具创建数据库表：

python manage.py migrate

7. 创建超级用户

使用 Django 的命令行工具创建超级用户：

python manage.py createsuperuser

根据提示输入用户名、邮箱和密码即可。

8. 创建模型

在 myapp/models.py 文件中定义数据模型，例如：

from django.db import models

class Server(models.Model):
    name = models.CharField(max_length=50)
    ip = models.CharField(max_length=15)
    username = models.CharField(max_length=50)
    password = models.CharField(max_length=50)
    description = models.TextField(blank=True)

    def __str__(self):
        return self.name

9. 注册模型

在 myapp/admin.py 文件中注册数据模型：

from django.contrib import admin
from .models import Server

admin.site.register(Server)

10. 运行服务器

使用 Django 的命令行工具运行服务器：

python manage.py runserver

现在可以通过浏览器访问 http://127.0.0.1:8000/admin/ 进入后台管理界面，使用刚才创建的超级用户登录。

11. 创建前端页面

可以使用 vbenadmin 的组件来创建前端页面，例如创建一个服务器列表页面：

<template>
  <v-card>
    <v-table :data="servers" :columns="columns" />
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      servers: [],
      columns: [
        { title: '名称', key: 'name' },
        { title: 'IP地址', key: 'ip' },
        { title: '用户名', key: 'username' },
        { title: '描述', key: 'description' },
      ],
    };
  },
  created() {
    this.getServers();
  },
  methods: {
    getServers() {
      this.$axios.get('/api/servers/').then((response) => {
        this.servers = response.data;
      });
    },
  },
};
</script>

其中 v-table 是 vbenadmin 的表格组件，$axios 是 vbenadmin 封装的请求库，/api/servers/ 是后台接口地址。

12. 创建后台接口

在 myapp/views.py 文件中定义后台接口，例如：

from rest_framework import viewsets
from .models import Server
from .serializers import ServerSerializer

class ServerViewSet(viewsets.ModelViewSet):
    queryset = Server.objects.all()
    serializer_class = ServerSerializer

其中 ServerViewSet 继承自 rest_framework 的 viewsets.ModelViewSet，queryset 指定了数据源，serializer_class 指定了数据序列化器。

在 myapp/urls.py 文件中定义后台接口路由，例如：

from django.urls import path, include
from rest_framework import routers
from .views import ServerViewSet

router = routers.DefaultRouter()
router.register(r'servers', ServerViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

其中 routers.DefaultRouter 自动生成了 CRUD 操作的路由。

现在可以通过浏览器访问 http://127.0.0.1:8000/api/servers/ 获取服务器数据。

13. 集成前后端

在 myproject/settings.py 文件中配置静态文件目录：

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

在 static 目录下创建 index.html 文件，引入前面创建的前端页面：

<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
  <link rel="stylesheet" href="/static/css/app.css">
  <script src="/static/js/app.js"></script>
</head>
<body>
  <div id="app">
    <server-list />
  </div>
</body>
</html>

其中 /static/css/app.css 和 /static/js/app.js 是 vbenadmin 编译后的静态文件，<server-list /> 是前面创建的前端页面组件。

在 myproject/urls.py 文件中配置路由：

from django.urls import path, include
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', include('vben_admin.urls')),
    path('', TemplateView.as_view(template_name='index.html')),
]

其中 /admin/ 是 vbenadmin 的路由，'' 是首页路由，使用 TemplateView.as_view(template_name='index.html') 渲染 index.html 文件。

现在可以通过浏览器访问 http://127.0.0.1:8000/ 查看自动化平台了。

以上是使用 Django 和 vbenadmin 搭建自动化平台的基本步骤，根据实际需求可以进行进一步的开发和优化。