阅读量:0
嗨,大家好,我是兰若姐姐,今天手把手教大家搭建一个django+vue的前后端分离的自动化测试平台
一、前提条件
- 安装Python
- 安装Node.js和npm(或者yarn)
- 安装MySQL数据库
- 安装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. 访问
- 打开浏览器,访问 http://localhost:8080/testcases 查看前端页面。
- 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', ]
这组配置可以大致搭建起一个前后端分离、支持并发执行测试用例的自动化测试平台。根据具体需求和项目复杂度,可能还需要更多的定制化和优化。