前言
本章主要讲述【测试用例/测试计划】页面的实现
- ps:这玩意太多了,到时候我直接上传github
github代码链接包含前后端:https://github.com/Burden1/Mikasa_autotest_platform
环境
-
前端框架:Vue
-
node.js V16.15.0
下载地址:https://nodejs.org/dist/
一、功能项目概览
二、具体代码实现
1、新增api文件夹
- 该文件下维护所有的axios接口调用
1.1、api.js
- 该文件即配置所有api入口
/**
* 所有接口的入口,相当于目录
*
* **/
import testcase from './testcase'
import plan from './plan'
import build from './build'
const api = {
testcase,
plan,
build
}
export default api
1.2、http.js
/**
* 完成 http 请求的基本配置
*
* **/
// 1、导入 axios
import axios from 'axios'
// 2、创建 axios 实例
var instance = axios.create({
// 3、设置请求头
headers: {
'Content-Type': 'application/json'
},
// 4、设置超时时间
timeout: 2500,
// 5、设置基础 url,接口服务地址 ,写你后端启动的地址
baseURL: 'http://192.168.1.110:8888/'
})
export default instance
1.3、testcase.js
/**
* 测试用例接口管理
*
* **/
// 导入已经配置好的 axios 实例
import axios from './http'
const testcase = {
// 1、查询测试用例
getTestcase(params){
return axios({
method: "GET",
url: "/testcase",
// 如果是传递拼接在 url 中的参数,要使用 params
params: params
})
},
// 2、添加测试用例
addTestcase(data) {
return axios({
method: "POST",
url: "/testcase",
// 如果是传递请求体,要使用 data
data: data
})
},
// 3、删除测试用例
deleteTestcase(data){
return axios({
method: "DELETE",
url: "/testcase",
data: data
})
},
// 4、修改用例
updateTestcase(data) {
return axios({
method: "PUT",
url: "/testcase",
data: data
})
}
}
// 导出
export default testcase
1.4、plan.js
/**
* 测试计划接口管理
*
* **/
// 1、导入已经配置好的 axios 实例
import axios from './http'
const plan = {
// 1、查询测试计划
get(params){
return axios({
method: "GET",
url: "/plan",
// 注意:如果是传递拼接在 url 中的参数,要使用 params
params: params
})
},
// 2、添加测试计划
add(data) {
return axios({
method: "POST",
url: "/plan",
// 注意:如果是传递请求体,要使用 data
data: data
})
},
}
// 导出
export default plan
1.5、build.js
/**
* 构建记录接口管理
*
* **/
// 导入已经配置好的 axios 实例
import axios from './http'
const build = {
// 1、查询构建记录
get(params){
return axios({
method: "GET",
url: "/build",
// 如果是传递拼接在 url 中的参数,要使用 params
params: params
})
},
}
// 导出
export default build
2、路由配置(router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/LayOut.vue'
import TestCase from '../views/TestCase.vue'
import TestPlan from '../views/TestPlan.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/layout/testcase'
},
{
path: '/layout',
name: 'Layout',
component: Layout,
children: [
{
path: 'testcase',
name: 'TestCase',
component: TestCase
},
{
path: 'plan',
name: 'TestPlan',
component: TestPlan
},
]
}
]
const router = new VueRouter({
routes
})
export default router
3、页面(views)
3.1、LayOut.vue
<!-- 布局页面 -->
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="text-h6">
Mikasa测试平台
</v-list-item-title>
<v-list-item-subtitle>
Mikasa
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list
dense
nav
>
<v-list-item
v-for="item in items"
:key="item.title"
link
:href="item.link"
>
<v-list-item