测试平台(三)前端开发(2)具体代码实现

前言

本章主要讲述【测试用例/测试计划】页面的实现

• ps：这玩意太多了，到时候我直接上传github
  github代码链接包含前后端：https://github.com/Burden1/Mikasa_autotest_platform

---

环境

• 前端框架：Vue

• node.js V16.15.0
  下载地址：https://nodejs.org/dist/

• VSCode：https://code.visualstudio.com/Download

---

---

一、功能项目概览

---

---

二、具体代码实现

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-icon