如何从零开始搭建一个django+vue的前后端分离的自动化测试平台

嗨，大家好，我是兰若姐姐，今天手把手教大家搭建一个django+vue的前后端分离的自动化测试平台

一、前提条件

1. 安装Python
2. 安装Node.js和npm（或者yarn）
3. 安装MySQL数据库
4. 安装Git

二、目录结构

project-root/
    ├── backend/                   # Django 后端项目目录
    │   ├── manage.py              # Django 管理脚本
    │   ├── requirements.txt       # Python 包依赖
    │   └── mybackend/             # Django 应用目录
    │       ├── __init__.py
    │       ├── settings.py        # Django 配置文件
    │       ├── urls.py            # URL 配置
    │       ├── wsgi.py
    │       ├── asgi.py
    │       ├── testsuite/         # 测试套件模块
    │       │   ├── __init__.py
    │       │   ├── models.py      # 数据库模型
    │       │   ├── views.py       # 视图
    │       │   ├── serializers.py # 序列化器
    │       │   ├── urls.py        # 测试相关 URL 配置
    │       │   └── tasks.py       # 异步任务
    │       └── other_apps/        # 其它相关应用
    ├── frontend/                  # Vue 前端项目目录
    │   ├── public/
    │   ├── src/
    │   │   ├── api/              # 与后端的API调用相关
    │   │   ├── assets/
    │   │   ├── components/       # 公共组件
    │   │   ├── router/           # 路由配置
    │   │   ├── store/            # Vuex 状态管理
    │   │   ├── views/            # 视图组件
    │   │   ├── App.vue
    │   │   └── main.js
    │   ├── babel.config.js
    │   ├── package.json
    │   └── vue.config.js
    └── docker-compose.yml         # Docker 编排文件（可选）

三、步骤

1. 设置Django项目

mkdir backend && cd backend
django-admin startproject mybackend .
python manage.py startapp testsuite

backend/manage.py

# 默认无需修改

backend/mybackend/settings.py

# 数据库配置
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_database_user',
        'PASSWORD': 'your_database_password',
        'HOST': 'your_database_host',
        'PORT': 'your_database_port',
    }
}

# 注册应用
INSTALLED_APPS = [
    ...
    'rest_framework',
    'testsuite',
]

backend/mybackend/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('testsuite.urls')), # 添加测试套件路由
]

backend/testsuite/models.py

from django.db import models

class TestCase(models.Model):
    name = models.CharField(max_length=255)
    request_data = models.JSONField()
    expected_response = models.JSONField()
    project = models.CharField(max_length=255)

    def __str__(self):
        return self.name

backend/testsuite/serializers.py

from rest_framework import serializers
from .models import TestCase

class TestCaseSerializer(serializers.ModelSerializer):
    class Meta:
        model = TestCase
        fields = '__all__'

backend/testsuite/views.py

from rest_framework import viewsets
from .models import TestCase
from .serializers import TestCaseSerializer

class TestCaseViewSet(viewsets.ModelViewSet):
    queryset = TestCase.objects.all()
    serializer_class = TestCaseSerializer

backend/testsuite/urls.py

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TestCaseViewSet

router = DefaultRouter()
router.register(r'testcases', TestCaseViewSet)

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

2. 设置前端 Vue 项目

npx @vue/cli create frontend
cd frontend

frontend/src/api/index.js

import axios from 'axios';

const instance = axios.create({
    baseURL: '<http://localhost:8000/api/>',
    timeout: 1000,
});

// Example API call
export const fetchTestCases = () => instance.get('testcases/');

frontend/src/views/TestCaseList.vue

<template>
  <div>
    <h1>Test Cases</h1>
    <ul>
      <li v-for="testCase in testCases" :key="testCase.id">
        {{ testCase.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { fetchTestCases } from '../api';

export default {
  data() {
    return {
      testCases: [],
    };
  },
  created() {
    this.loadTestCases();
  },
  methods: {
    async loadTestCases() {
      try {
        const response = await fetchTestCases();
        this.testCases = response.data;
      } catch (error) {
        console.error('Error fetching test cases', error);
      }
    },
  },
};
</script>

frontend/src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import TestCaseList from '../views/TestCaseList.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/testcases',
    name: 'TestCaseList',
    component: TestCaseList,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

3. 整合

Docker 设置（可选）

编写 docker-compose.yml 来进行容器化部署。

version: '3.7'
services:
  web:
    build: ./backend
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - ./backend:/usr/src/app
    ports:
      - "8000:8000"
    depends_on:
      - db
  frontend:
    build: ./frontend
    command: npm run serve
    volumes:
      - ./frontend:/app
    ports:
      - "8080:8080"
  db:
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: 'your_database_name'
      MYSQL_USER: 'your_database_user'
      MYSQL_PASSWORD: 'your_database_password'
      MYSQL_ROOT_PASSWORD: 'your_root_password'
    ports:
      - "3306:3306"

4. 启动服务

启动 Django 后端服务

cd backend
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver

启动 Vue 前端服务

cd frontend
npm install
npm run serve

5. 访问

1. 打开浏览器，访问 http://localhost:8080/testcases 查看前端页面。
2. Django API 可以通过 http://localhost:8000/api/testcases/ 访问。

6. 项目并发执行

可借助 celery 和 django-celery-beat 来执行并发任务，如需进一步扩展，可以搭建 Celery 和其他分布式任务队列系统。

安装 Celery

pip install celery django-celery-beat

示例 backend/testsuite/tasks.py

from celery import shared_task

@shared_task
def run_test_case(test_case_id):
    # 编写你的测试执行逻辑
    pass

在设置中配置 Celery 和 Django-Celery-Beat

# settings.py
CELERY_BROKER_URL = 'redis://localhost:6379/0'
CELERY_RESULT_BACKEND = 'redis://localhost:6379/0'

INSTALLED_APPS += [
    'django_celery_beat',
]

这组配置可以大致搭建起一个前后端分离、支持并发执行测试用例的自动化测试平台。根据具体需求和项目复杂度，可能还需要更多的定制化和优化。