当前位置：首页 > news >正文

Vue接口平台学习九——接口用例页面1

news 来源：原创 2025/4/30 11:38:05

前序准备

前面完成了测试环境，测试接口，接口的调试运行。现在开始新的一个模块内容——接口用例。这里先完成接口的显示以及该接口下包含的用例列表。然后下个文章再完成单个用例详情

一个新的页面，

需要先创建一个view文件，然后在路由中声明
菜单栏中绑定路径名字做页面跳转

一、实现效果图及简介

在这里插入图片描述
左边循环显示接口和该接口下包含的用例。数据都在prostore中存储有。直接拿来用就行了。然后每个接口下可以新增接口用例。

右侧就用来显示单个用例的详情，下篇文章再来完成。

二、页面内容实现

整体布局

先做出整体布局，也是一个盒子分左右，左边显示列表，右边显示接口编辑（下章再来处理）

标题及tab

左边上面一个标题，然后是2个tab，点击对应的tab再展示对应的接口数据

<div class=" main_box"><div class="card left_box"><!-- 标题 --><div class="title_box"><img src="@/assets/icons/icon-api-a.png" width="25"><div class="name">接口测试</div></div><el-tabs stretch v-model='activaTab'><el-tab-pane label="项目接口" name="api1"></el-tab-pane><el-tab-pane label="第三方接口" name="api2"></el-tab-pane></el-tabs></div><div class="card right_box"></div></div>

<style lang="scss" scoped>
.main_box {height: calc(100% - 42px);display: flex;// 左侧样式.left_box {width: 230px;// 左侧标题栏样式.title_box {width: 100%;display: flex;height: 40px;align-items: center;justify-content: center;border-bottom: solid 1px #6a6a6a;.name {font-weight: bold;margin-left: 5px;}}}// 右侧样式.right_box {flex: 1;padding: 10px;}
}
</style>

在这里插入图片描述

接口数据

项目接口和三方接口，除了数据外，其他内容都是一致的，完成一个，另一个复制就好了。

先看看pinia中存储的接口数据结构
在这里插入图片描述
采用v-for循环展示这些数据。

<el-menu><el-sub-menu :index="inter.id.toString()" v-for='inter in pstore.interfaces1' :key='inter.id'><template #title><img src="@/assets/icons/icon-api-a.png" width="20"><el-tag class="method_tag" size="small">{{ inter.method }}</el-tag><span style="text-overflow: ellipsis; overflow: hidden; max-width:100%; display: inline-block;":title="inter.name">{{ inter.name }}</span></template><el-menu-item @click='selectCase(_case.id)' :index="_case.id.toString()"v-for='_case in inter.cases' key='_case.id' style="height: 35px;line-height: 35px;"><img src="@/assets/icons/case.png" width="20"><span style="margin: 0 5px;">{{ _case.title }}</span></el-menu-item></el-sub-menu>
</el-menu>

在这里插入图片描述
稍微优化一下页面，给不同的请求方法标签加一个颜色

 <el-tag v-if='inter.method==="get"' class="method_tag" size="small" type="info">GET</el-tag><el-tag v-else-if='inter.method==="post"' class="method_tag" size="small" type="success">POST</el-tag><el-tag v-else-if='inter.method==="patch"' class="method_tag" size="small" type="warning">PATCH</el-tag><el-tag v-else-if='inter.method==="put"' class="method_tag" size="small" type="">PUT</el-tag><el-tag v-else-if='inter.method==="delete"' class="method_tag" size="small" type="danger">DELETE</el-tag>

在这里插入图片描述

添加接口用例

在每一个接口下面增加一个按钮，点击触发一个抽屉弹窗，用于填写新增用例的名字

.... <el-menu-item @click='clickAddCase(inter.id)' :index="inter.id+'add'"style="height: 35px;line-height: 35px;"><img src="@/assets/icons/add-sub.png" width="20"><span style="margin: 0 5px;color: #17abe3;">添加用例</span></el-menu-item></el-sub-menu></el-menu>
</el-tab-pane>....<el-drawer v-model="isShowDrawer"><template #header><b>添加用例</b></template><template #default><!-- 添加的表单 --><el-input v-model="newCase.title"/></template><template #footer><div style="flex: auto"><el-button @click="isShowDrawer=false">取消</el-button><el-button @click='addCase' type="primary">确定</el-button></div></template></el-drawer>

let isShowDrawer = ref(false)
let newCase = reactive({title: "",interface: null,headers: {"Authorization": "${{token}}"} //这里想着每个新增的用例都默认在接口添加一个请求头，token；不然每次都要自己去手动加，麻烦。
})

根据后端接口文档封装前端接口

在这里插入图片描述

在页面中调用，点击添加，弹出弹窗，在弹窗中编辑title，然后点击确定创建一个用例。
这里省略了其他内容的填写，只创建了一个有名字的用例，不包含其他内容，其他内容，准备在右侧编辑保存。

// 点击添加用例
function clickAddCase(interId) {// 显示窗口isShowDrawer.value = truenewCase.interface = interId
}// 发送添加用例的请求
async function addCase() {const response = await http.pro.createCaseApi(newCase)if (response.status === 201) {// 弹出提示ElNotification({title: '添加成功',type: 'success',})// 更新页面数据await pstore.getInterFaceList()// 选中新的用例selectCase(response.data.id)// 关闭窗口isShowDrawer.value = false}
}