如何从零开始搭建一个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', ]  

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