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

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

• 安装Python
  
• 安装Node.js和npm（大概yarn）
  
• 安装MySQL数据库
  
• 安装Git
  

二、目录结构

1. project-root/
2.     ├── backend/                   # Django 后端项目目录
3.     │   ├── manage.py              # Django 管理脚本
4.     │   ├── requirements.txt       # Python 包依赖
5.     │   └── mybackend/             # Django 应用目录
6.     │       ├── __init__.py
7.     │       ├── settings.py        # Django 配置文件
8.     │       ├── urls.py            # URL 配置
9.     │       ├── wsgi.py
10.     │       ├── asgi.py
11.     │       ├── testsuite/         # 测试套件模块
12.     │       │   ├── __init__.py
13.     │       │   ├── models.py      # 数据库模型
14.     │       │   ├── views.py       # 视图
15.     │       │   ├── serializers.py # 序列化器
16.     │       │   ├── urls.py        # 测试相关 URL 配置
17.     │       │   └── tasks.py       # 异步任务
18.     │       └── other_apps/        # 其它相关应用
19.     ├── frontend/                  # Vue 前端项目目录
20.     │   ├── public/
21.     │   ├── src/
22.     │   │   ├── api/              # 与后端的API调用相关
23.     │   │   ├── assets/
24.     │   │   ├── components/       # 公共组件
25.     │   │   ├── router/           # 路由配置
26.     │   │   ├── store/            # Vuex 状态管理
27.     │   │   ├── views/            # 视图组件
28.     │   │   ├── App.vue
29.     │   │   └── main.js
30.     │   ├── babel.config.js
31.     │   ├── package.json
32.     │   └── vue.config.js
33.     └── docker-compose.yml         # Docker 编排文件（可选）

复制代码

三、步调

1. 设置Django项目

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

复制代码

backend/manage.py

1. # 默认无需修改

复制代码

backend/mybackend/settings.py

1. # 数据库配置
2. DATABASES = {
3.     'default': {
4.         'ENGINE': 'django.db.backends.mysql',
5.         'NAME': 'your_database_name',
6.         'USER': 'your_database_user',
7.         'PASSWORD': 'your_database_password',
8.         'HOST': 'your_database_host',
9.         'PORT': 'your_database_port',
10.     }
11. }
13. # 注册应用
14. INSTALLED_APPS = [
15.     ...
16.     'rest_framework',
17.     'testsuite',
18. ]

复制代码

backend/mybackend/urls.py

1. from django.contrib import admin
2. from django.urls import path, include
4. urlpatterns = [
5.     path('admin/', admin.site.urls),
6.     path('api/', include('testsuite.urls')), # 添加测试套件路由
7. ]

复制代码

backend/testsuite/models.py

1. from django.db import models
3. class TestCase(models.Model):
4.     name = models.CharField(max_length=255)
5.     request_data = models.JSONField()
6.     expected_response = models.JSONField()
7.     project = models.CharField(max_length=255)
9.     def __str__(self):
10.         return self.name

复制代码

backend/testsuite/serializers.py

1. from rest_framework import serializers
2. from .models import TestCase
4. class TestCaseSerializer(serializers.ModelSerializer):
5.     class Meta:
6.         model = TestCase
7.         fields = '__all__'

复制代码

backend/testsuite/views.py

1. from rest_framework import viewsets
2. from .models import TestCase
3. from .serializers import TestCaseSerializer
5. class TestCaseViewSet(viewsets.ModelViewSet):
6.     queryset = TestCase.objects.all()
7.     serializer_class = TestCaseSerializer

复制代码

backend/testsuite/urls.py

1. from django.urls import path, include
2. from rest_framework.routers import DefaultRouter
3. from .views import TestCaseViewSet
5. router = DefaultRouter()
6. router.register(r'testcases', TestCaseViewSet)
8. urlpatterns = [
9.     path('', include(router.urls)),
10. ]

复制代码

2. 设置前端 Vue 项目

1. npx @vue/cli create frontend
2. cd frontend

复制代码

frontend/src/api/index.js

1. import axios from 'axios';
3. const instance = axios.create({
4.     baseURL: '<http://localhost:8000/api/>',
5.     timeout: 1000,
6. });
8. // Example API call
9. export const fetchTestCases = () => instance.get('testcases/');

复制代码

frontend/src/views/TestCaseList.vue

1. <template>
2.   <div>
3.     <h1>Test Cases</h1>
4.     <ul>
5.       <li v-for="testCase in testCases" :key="testCase.id">
6.         {{ testCase.name }}
7.       </li>
8.     </ul>
9.   </div>
10. </template>
12. <script>
13. import { fetchTestCases } from '../api';
15. export default {
16.   data() {
17.     return {
18.       testCases: [],
19.     };
20.   },
21.   created() {
22.     this.loadTestCases();
23.   },
24.   methods: {
25.     async loadTestCases() {
26.       try {
27.         const response = await fetchTestCases();
28.         this.testCases = response.data;
29.       } catch (error) {
30.         console.error('Error fetching test cases', error);
31.       }
32.     },
33.   },
34. };
35. </script>

复制代码

frontend/src/router/index.js

1. import Vue from 'vue';
2. import VueRouter from 'vue-router';
3. import TestCaseList from '../views/TestCaseList.vue';
5. Vue.use(VueRouter);
7. const routes = [
8.   {
9.     path: '/testcases',
10.     name: 'TestCaseList',
11.     component: TestCaseList,
12.   },
13. ];
15. const router = new VueRouter({
16.   routes,
17. });
19. export default router;

复制代码

3. 整合

Docker 设置（可选）

编写 docker-compose.yml 来进行容器化摆设。

1. version: '3.7'
2. services:
3.   web:
4.     build: ./backend
5.     command: python manage.py runserver 0.0.0.0:8000
6.     volumes:
7.       - ./backend:/usr/src/app
8.     ports:
9.       - "8000:8000"
10.     depends_on:
11.       - db
12.   frontend:
13.     build: ./frontend
14.     command: npm run serve
15.     volumes:
16.       - ./frontend:/app
17.     ports:
18.       - "8080:8080"
19.   db:
20.     image: mysql:5.7
21.     environment:
22.       MYSQL_DATABASE: 'your_database_name'
23.       MYSQL_USER: 'your_database_user'
24.       MYSQL_PASSWORD: 'your_database_password'
25.       MYSQL_ROOT_PASSWORD: 'your_root_password'
26.     ports:
27.       - "3306:3306"

复制代码

4. 启动服务

启动 Django 后端服务

1. cd backend
2. pip install -r requirements.txt
3. python manage.py migrate
4. python manage.py runserver

复制代码

启动 Vue 前端服务

1. cd frontend
2. npm install
3. npm run serve

复制代码

5. 访问

• 打开浏览器，访问 http://localhost:8080/testcases 检察前端页面。
  
• Django API 可以通过 http://localhost:8000/api/testcases/ 访问。
  

6. 项目并发执行

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

1. pip install celery django-celery-beat

复制代码

示例 backend/testsuite/tasks.py

1. from celery import shared_task
3. @shared_task
4. def run_test_case(test_case_id):
5.     # 编写你的测试执行逻辑
6.     pass

复制代码

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

1. # settings.py
2. CELERY_BROKER_URL = 'redis://localhost:6379/0'
3. CELERY_RESULT_BACKEND = 'redis://localhost:6379/0'
5. INSTALLED_APPS += [
6.     'django_celery_beat',
7. ]

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。