嗨，大家好，我是兰若姐姐，今天手把手教大家搭建一个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, includeurlpatterns = [path('admin/', admin.site.urls),path('api/', include('testsuite.urls')), # 添加测试套件路由
]

backend/testsuite/models.py

from django.db import modelsclass 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 TestCaseclass TestCaseSerializer(serializers.ModelSerializer):class Meta:model = TestCasefields = '__all__'

backend/testsuite/views.py

from rest_framework import viewsets
from .models import TestCase
from .serializers import TestCaseSerializerclass 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 TestCaseViewSetrouter = 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: ./backendcommand: python manage.py runserver 0.0.0.0:8000volumes:- ./backend:/usr/src/appports:- "8000:8000"depends_on:- dbfrontend:build: ./frontendcommand: npm run servevolumes:- ./frontend:/appports:- "8080:8080"db:image: mysql:5.7environment: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',
]

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