Vue接口平台学习十——接口用例页面2

效果图及简单说明

在这里插入图片描述
左边选择用例，右侧就显示该用例的详细信息。
使用el-collapse折叠组件，将请求到的用例详情数据展示到页面中。
所有数据内容，绑定到caseData中

// 页面绑定的用例编辑数据
const caseData = reactive({title: "",interface: {method: "get",url: ""},headers: '',request: {json: '{}',data: '{}',params: '{}'},file: [],setup_script: '',teardown_script: ''
})

页面内容实现

1. 请求API信息

<el-collapse-item name="1"><template #title><img src="@/assets/icons/icon-api-a.png" width="20"><b>API信息</b></template><el-input v-model="caseData.interface.url" readonly><template #prepend><el-select v-model="caseData.interface.method" placeholder="选择请求方法" style="width: 115px"><el-option label="GET" value="get"/><el-option label="POST" value="post"/><el-option label="PUT" value="put"/><el-option label="PATCH" value="patch"/><el-option label="DELETE" value="delete"/></el-select></template></el-input></el-collapse-item>

一个下拉选择（请求方法） + 一个只读的input框
在这里插入图片描述

2.用例title

<el-collapse-item name="2"><template #title><img src="@/assets/icons/case.png" width="20"><b>用例名称</b></template><el-input v-model="caseData.title"><template #prepend><span>用例名称</span></template></el-input></el-collapse-item>

一个带前缀的input输入框
在这里插入图片描述

3. 前置脚本

前置脚本是一个python代码编辑器

<div class="code"><Editor v-model="caseData.setup_script" lang="python" height='300px' class="scriptEdit"></Editor>
</div>

但是，可以准备一些预制脚本，方便使用。
可以创建编辑一些脚本保存在数据库，然后读取。这里没有选择那么复杂的内容，直接写死在了前端页面点击添加。

<div class='script_code'><div class="code"><Editor v-model="caseData.setup_script" lang="python" height='300px' class="scriptEdit"></Editor></div><div class='mod'><div class="add_code"><el-button @click='addSetupScript("func")' plain size="small">调用全局工具函数</el-button></div><div class="add_code"><el-button @click='addSetupScript("global")' plain size="small">设置全局变量</el-button></div><div class="add_code"><el-button @click='addSetupScript("env")' plain size="small">设置局部变量</el-button></div><div class="add_code"><el-button @click='addSetupScript("sql")' plain size="small">执行sql查询</el-button></div></div>
</div>

// 生成前置脚本
function addSetupScript(item) {if (item === "func") {caseData.setup_script += '# 调用全局工具函数random_mobile随机生成一个手机号码\nmobile = global_func.random_mobile()\n'} else if (item === "global") {caseData.setup_script += '# 设置局部变量\ntest.save_global_variable("变量名","变量值")\n'} else if (item === "env") {caseData.setup_script += '# 设置局部变量\ntest.save_env_variable("变量名","变量值")\n'} else if (item === "sql") {caseData.setup_script +='# ----执行sql语句(需要在环境中配置数据库连接信息)----\n # db.连接名.execute_all(sql语句) \nsql = "SELECT count(*) as count FROM futureloan.member"\nres = db.hwyun.execute_all(sql)\n'}
}

在这里插入图片描述

4. 请求头

同样代码编辑器

<el-collapse-item name="4"><template #title><img src="@/assets/icons/keyhole.png" width="20"><b>请求头</b></template><Editor lang="json" v-model="caseData.headers"></Editor>
</el-collapse-item>

在这里插入图片描述

5.查询参数

<el-collapse-item name="5"><template #title><img src="@/assets/icons/API_api.png" width="20"><b>查询参数</b></template><Editor lang="json" v-model="caseData.request.params"></Editor></el-collapse-item>

在这里插入图片描述

6. 请求体（Get请求不可点击）

get请求禁用了，然后如果是文件类型数据，复用之前的FormData组件

<el-collapse-item name="6" :disabled="caseData.interface.method=='get'"><template #title><img src="@/assets/icons/body.png" width="20"><b>请求体</b></template><el-radio-group v-model="bodyType"><el-radio-button label="json">Json</el-radio-button><el-radio-button label="data">X-www-form-urlencoded</el-radio-button><el-radio-button label="form-data">Form-data</el-radio-button></el-radio-group><!-- json参数 --><div v-if='bodyType==="json"'><Editor lang="json" v-model="caseData.request.json"></Editor></div><div v-else-if='bodyType==="data"'><Editor lang="json" v-model="caseData.request.data"></Editor></div><div v-else><FromData v-model="file"></FromData></div>
</el-collapse-item>

在这里插入图片描述

7.后置脚本（同前置脚本）

<el-collapse-item name="7"><template #title><img src="@/assets/icons/instruction.png" width="20"><b>后置断言脚本</b></template><div class='script_code'><div class="code"><Editor v-model="caseData.teardown_script" lang="python" height='300px' ></Editor></div><div class='mod'><el-scrollbar height="300px"><div class="add_code"><el-button @click="addTearDownCodeMod('getBody')" plain size="small">获取响应体</el-button></div><div class="add_code"><el-button @click="addTearDownCodeMod('http')" plain size="small">HTTP状态码断言</el-button></div>    <div class="add_code"><el-button @click="addTearDownCodeMod('contain')" plain size="small">断言包含</el-button><!-- 省略 ....	--></div></el-scrollbar></div></div>
</el-collapse-item>

在这里插入图片描述

8.悬浮操作按钮

与测试环境页面一样，使用 Affix 固钉 组件

https://element-plus.org/zh-CN/component/affix.html#affix-%E5%9B%BA%E9%92%89

<el-affix :offset="40" position="bottom"><div class="btns"><el-button @click='runCase' type="primary" plain size="small" icon='Promotion'>运行</el-button><el-button @click='copyCase' type="primary" plain size="small" icon='DocumentCopy'>复制</el-button><el-button @click='saveCase' type="primary" plain size="small" icon='FolderChecked'>保存</el-button><el-button @click='clickDelete' type="danger" plain size="small" icon='Delete'>删除</el-button></div>
</el-affix>

页面功能实现

1. 点击获取接口用例详情

在之前一节，左侧显示了用例列表。并且点击某个用例，实现了点击方法@click='selectCase(_case.id)'，也就是function selectCase(id) { activeCase.value = id }将activeCase 赋值了。
而在右侧，显示用例详情页，把activeCase值传给了CaseEditor这个组件

<div class="card right_box"><CaseEditor :case_id='activeCase'></CaseEditor>
</div>

然后在CaseEditor组件定义props接收传递的值，然后监听这个值变化，就请求获取用例详情。

const props = defineProps({case_id: ""
})// 侦听case_id的变化
watch(() => props.case_id, (val) => {if (val !== '') {getCaseInfo(val)}
})if (props.case_id != undefined) {getCaseInfo(props.case_id)
}// 调用获取详情的接口
async function getCaseInfo(id) {// console.log("获取详情："+id)const response = await http.pro.getCaseInfoAPi(id)if (response.status === 200) {// 保存用例对象caseObj = response.data// 把用例数据绑定到编辑页面caseData.title = caseObj.titlecaseData.interface = caseObj.interfacecaseData.setup_script = caseObj.setup_scriptcaseData.file = caseObj.filecaseData.teardown_script = caseObj.teardown_scriptcaseData.headers = JSON.stringify(caseObj.headers, 0, 4)caseData.request.json = JSON.stringify(caseObj.request.json || {}, 0, 4)caseData.request.data = JSON.stringify(caseObj.request.data || {}, 0, 4)caseData.request.params = JSON.stringify(caseObj.request.params || {}, 0, 4)file.value = caseObj.file}// get请求默认不展示请求体，其他默认自动展开if (caseData.interface.method == 'get') {activeNames.value = ['1', '2']} else {activeNames.value = ['1', '2', '6']}// console.log(activeNames)// 根据请求体信息，默认选中对应的拦if (caseData.request.json != '{}') {bodyType.value = 'json'} else if (caseData.request.data != '{}') {bodyType.value = 'data'} else if (caseData.file.length != 0) {bodyType.value = 'form-data'}
}

2.保存用例

编辑好数据后，都是双向绑定的，直接组成参数调用api就行了。

// 保存用例
async function saveCase() {if (caseData.headers == '') {caseData.headers = '{}'} else if (caseData.request.params == '') {caseData.request.params = '{}'} else if (caseData.request.json == '') {caseData.request.json = '{}'} else if (caseData.request.data == '') {caseData.request.data = '{}'}// 准备参数const params = {title: caseData.title,headers: JSON.parse(caseData.headers),request: {params: JSON.parse(caseData.request.params),},setup_script: caseData.setup_script,teardown_script: caseData.teardown_script,}if (caseData.interface.method != 'get') {// console.log('!get')if (bodyType.value === 'json') {params.request.json = JSON.parse(caseData.request.json)} else if (bodyType.value === 'data') {params.request.data = JSON.parse(caseData.request.data)} else {params.file = file.value}}// 调用修改用例的接口const response = await api.updateCaseApi(props.case_id, params)if (response.status === 200) {ElNotification({title: '保存成功',type: 'success',})// 刷新页面数据pstore.getInterFaceList()}
}

3. 删除用例

和之前的删除方法没有什么区别，有个二次确认弹窗。然后删除过后，把页面数据清空。

// 删除测试用例的方法
function clickDelete() {ElMessageBox.confirm('删除操作不可恢复，请确认是否要删除该测试用例?','提示', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(async () => {// 调用后端接口进行删除const response = await http.pro.deleteCaseApi(props.case_id)if (response.status === 204) {ElNotification({title: '删除成功',type: 'success',})// 刷新页面数据pstore.getInterFaceList()resetData()}}).catch(() => {ElNotification({type: 'info',title: '已取消删除操作',})})
}function resetData() {// 清空页面编辑的数据caseData.title = ''caseData.interface = {method: "get",url: ""}caseData.setup_script = ''caseData.file = []caseData.teardown_script = ''caseData.headers = ''caseData.request.json = "{}"caseData.request.data = "{}"caseData.request.params = "{}"caseObj = {}
}

4. 复制用例

与新增测试环境一样，在名字后面+copy，其他内容都保持不变

// 复制用例
async function copyCase() {const response = await http.pro.createCaseApi({title: caseObj.title + '-COPY',interface: caseObj.interface.id})if (response.status === 201) {ElNotification({title: '复制成功',type: 'success',})// 刷新页面数据pstore.getInterFaceList()}
}

5. 运行用例

运行结果用抽屉组件展示，展示内容就是之前调试运行时的Result组件

  <!-- 测试用例运行的结果 --><el-drawer v-model="isShowDrawer" size="50%"><template #header><b>运行结果</b></template><template #default><Result :result='responseData'></Result></template></el-drawer>

// 保存用例运行的结果
let responseData = ref({})
// 是否显示结果的窗口
let isShowDrawer = ref(false)async function runCase() {// 准备参数const params = {env: pstore.env,cases: {title: caseData.title,interface: caseData.interface,headers: JSON.parse(caseData.headers),request: {params: JSON.parse(caseData.request.params),},setup_script: caseData.setup_script,teardown_script: caseData.teardown_script,}}// console.log(params.cases.interface.method)if (params.cases.interface.method != 'get') {if (bodyType.value === 'json') {params.cases.request.json = JSON.parse(caseData.request.json)} else if (bodyType.value === 'data') {params.cases.request.data = JSON.parse(caseData.request.data)} else {params.cases.file = caseData.file}}// console.log(params.cases.request)// 调用运行用例的接口const response = await http.run.runInterFaceCaseApi(params)if (response.status === 200) {// console.log('运行成功')responseData.value = response.data// 展示执行结果isShowDrawer.value = true}
}

在这里插入图片描述
到此页面功能实现完成。

小优化，增加loading

刚才运行时，受网络问题，一直没结果。所以，就增加一个loading效果
同样使用了element的loading组件

https://element-plus.org/zh-CN/component/loading.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%A0%E8%BD%BD%E4%B8%AD%E7%BB%84%E4%BB%B6%E5%86%85%E5%AE%B9

给页面绑定loading相关数据

<el-collapse v-model="activeNames" v-loading="scrennLoading" element-loading-text="运行中..."  element-loading-background="rgba(122, 122, 122, 0.8)">

然后运行时，显示loading，运行结束再隐藏loading

const scrennLoading = ref(false)async function runCase() {// 显示loadingscrennLoading.value = true。。。// 隐藏loadingscrennLoading.value = false
}

在这里插入图片描述

总结

复用之前的组件以减少开发量。所以一个经常会用到的组件，最好单独抽出来。以便后续使用。
然后用了cursor，没次数了。又尝试了一下Trae，也是挺不错的。遇到问题向Ai求助真是泰裤辣！
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/77852.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

服务器数据迁移指南

服务器数据迁移指南

服务器数据迁移是将数据从一台服务器转移到另一台服务器的过程&#xff0c;可能是为了硬件升级、云迁移、数据中心搬迁或服务整合。 以下是数据迁移的关键步骤和注意事项&#xff1a; 迁移前准备 制定迁移计划 确定迁移范围(全量/增量) 评估数据量和网络带宽 制定时间表和回…
阅读更多...
25.解决中医知识问答删除历史对话功能后端处理请求时抛出异常

25.解决中医知识问答删除历史对话功能后端处理请求时抛出异常

ChatTest.vue:176 DELETE http://localhost:8080/api/chat/conversations/20 500 (Internal Server Error) deleteConversation ChatTest.vue:176 onClick ChatTest.vue:22 ChatTest.vue:185 删除失败 AxiosError {message: Request failed with status code 500, name: Axio…
阅读更多...
记录seatunnel排查重复数据的案例分析

记录seatunnel排查重复数据的案例分析

文章目录 背景分析检查现象检查B集群是否有异常&#xff0c;导致重复消费的分析同步任务 修复问题发现flink job 一直报异常修复问题 背景 使用seatunnel 同步数据从A 集群kafka 同步到B集群kafka,现象是发现两边数据不一致&#xff0c;每天10w级别会多几十条数据 分析 检查…
阅读更多...
VSCode远程图形化GDB

VSCode远程图形化GDB

VSCode远程图形化GDB 摘要一、安装VSCode1、使用.exe安装包安装VSCode2、VSCode 插件安装3、VSCode建立远程连接 二、core dump找bug1、开启core文件2、永久生效的方法3、编写测试程序4、运行结果5、查看core段错误位置6、在程序中开启core dump并二者core文件大小 三、gdbserv…
阅读更多...
Android 中实现 GIF 图片动画

Android 中实现 GIF 图片动画

在 Android 中&#xff0c;ImageView 从 Android 9.0&#xff08;API 级别 28&#xff09; 开始原生支持 GIF 动画&#xff0c;通过 AnimatedImageDrawable 类实现。在之前的版本中&#xff0c;ImageView 并不支持直接播放 GIF 动画&#xff0c;只能显示 GIF 的第一帧。 一、 …
阅读更多...
【c语言】指针进阶

【c语言】指针进阶

目录 1.字符指针 2.指针数组 3.数组指针 3.1 数组指针的定义 3.2 数组指针的使用 4.数组参数&#xff0c;指针参数 4.1 一维数组传参 4.2 二维数组传参 4.3 一级指针传参 4.4 二级指针传参 5.函数指针 6.函数指针数组 6.1函数指针数组的定义 6.2 函数指针数组…
阅读更多...
极狐GitLab 项目 API 的速率限制如何设置？

极狐GitLab 项目 API 的速率限制如何设置？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 项目 API 的速率限制 (BASIC SELF) 引入于 15.10 版本&#xff0c;功能标志为rate_limit_for_unauthenticated_projects_api_…
阅读更多...
【xlog日志文件】怎么删除里面包含某些字符串的行(使用excel)

【xlog日志文件】怎么删除里面包含某些字符串的行(使用excel)

将log日志,复制到单独一行 B列&#xff08;可能一行很长&#xff0c;所以将整合后的放在A列&#xff09; 使用公式可以筛选出 包含某些字符串的行 为true&#xff0c;将这些行直接删除 IF(COUNT(FIND("MediaMuxterThreadRussia",B2,1))>0,"包含",&quo…
阅读更多...
STM32提高篇: CAN通讯

STM32提高篇: CAN通讯

STM32提高篇: CAN通讯 一.CAN通讯介绍1.物理层2.协议层二.STM32CAN外设1.CAN控制器的3种工作模式2.CAN控制器的3种测试模式3.功能框图三.CAN的寄存器介绍1.环回静默模式测试2.双击互发测试四.CAN的HAL代码解读一.CAN通讯介绍 CAN（Controller Area Network 控制器局域网，简称…
阅读更多...
Java写数据结构：栈

Java写数据结构：栈

1.概念&#xff1a; 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#xff1a;栈的插…
阅读更多...
单页面应用的特点,什么是路由,VueRouter的下载,安装和使用,路由的封装抽离,声明式导航的介绍和使用

单页面应用的特点,什么是路由,VueRouter的下载,安装和使用,路由的封装抽离,声明式导航的介绍和使用

文章目录 一.什么是单页面应用?二.什么是路由?生活中的路由和Vue中的路由 三.VueRouter(重点)0.引出1.介绍2.下载与使用(5个基本步骤2个核心步骤)2.1 五个基本步骤2.2 两个核心步骤 四.路由的封装抽离五.声明式导航1.导航链接特点一:能跳转特点二:能高亮 2.两个高亮类名2.1.区…
阅读更多...
【C++】模板2.0

【C++】模板2.0

最近学习了一些模板的知识&#xff0c;速写本博客作为学习笔记&#xff0c;若有兴趣&#xff0c;欢迎垂阅读&#xff01; 1.非类型模板参数 模板参数分类类型形参与非类型形参。 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名…
阅读更多...
目标检测中的损失函数(二) | BIoU RIoU α-IoU

目标检测中的损失函数(二) | BIoU RIoU α-IoU

BIoU来自发表在2018年CVPR上的文章&#xff1a;《Improving Object Localization With Fitness NMS and Bounded IoU Loss》 论文针对现有目标检测方法只关注“足够好”的定位&#xff0c;而非“最优”的框&#xff0c;提出了一种考虑定位质量的NMS策略和BIoU loss。 这里不赘…
阅读更多...
如何在 Amazon EC2 上部署 Java（Spring Boot 版）

如何在 Amazon EC2 上部署 Java（Spring Boot 版）

让我们学习如何将 Java Spring Boot Web 服务器部署到 Amazon EC2。每月只需 3 美元。 使用 Azure&#xff0c;您可能不知道要花费多少钱。 Spring Boot 项目示例 在本教程中&#xff0c;我们将重点介绍如何将 Java Spring Boot 服务器部署到 Amazon EC2&#xff0c;因此我们不…
阅读更多...
Git常用命令分类汇总

Git常用命令分类汇总

Git常用命令分类汇总 一、基础操作 初始化仓库git init添加文件到暂存区git add file_name # 添加单个文件 git add . # 添加所有修改提交更改git commit -m "提交描述"查看仓库状态git status二、分支管理 创建/切换分支git branch branch_name …
阅读更多...
mysql——基础知识

mysql——基础知识

关键字大小写不敏感 查看表结构中的 desc describe 描述 降序中的 desc descend 1. 数据库的操作 1. 创建数据库 create database 数据库名;为防止创建的数据库重复 CREATE DATABASE IF NOT EXISTS 数据库名;手动设置数据库采用的字符集 character set 字符集名;chars…
阅读更多...
Redis 哨兵与集群脑裂问题详解及解决方案

Redis 哨兵与集群脑裂问题详解及解决方案

Redis 哨兵与集群脑裂问题详解及解决方案 本文将深入探讨Redis在哨兵模式和集群模式下可能出现的脑裂问题&#xff0c;包括其发生场景、原因以及有效的解决策略。同时&#xff0c;我们还将提供相应的代码示例和配置方案来帮助读者理解和实施。 一、脑裂问题概述 脑裂&#x…
阅读更多...
国内网络设备厂商名单（List of Domestic Network Equipment Manufacturers）

国内网络设备厂商名单（List of Domestic Network Equipment Manufacturers）

国内网络设备厂商名单 运维工程师必须广泛熟悉国内外各大厂商的设备&#xff0c;深入掌握其应用场景、功能特点及优势。这不仅有助于在故障排查时迅速定位问题&#xff0c;还能在系统设计、优化与升级中做出更合理的决策。对设备特性的精准把握&#xff0c;能够显著提升运维效…
阅读更多...
2、SpringAI接入ChatGPT与微服务整合

2、SpringAI接入ChatGPT与微服务整合

2、SpringAI接入ChatGPT与微服务整合 小薛博客AI 大模型资料 1、SpringAI简介 https://spring.io/projects/spring-ai Spring AI是一个人工智能工程的应用框架。其目标是将Spring生态系统的设计原则&#xff08;如可移植性和模块化设计&#xff09;应用于人工智能领域&#…
阅读更多...
基于ubuntu24.10安装NACOS2.5.1的简介

基于ubuntu24.10安装NACOS2.5.1的简介

基于ubuntu24.10安装NACOS2.5.1的简介 官方网站地址&#xff1a; https://nacos.io 可访问nacos站点 https://nacos.io/zh-cn/ 2025年04月记录发布 V2.5.1 版本 一、环境预准备 64 bit JDK 1.8&#xff1b; sudo apt update sudo apt install openjdk-8-jdk sudo apt upda…
阅读更多...
最新文章

Copyright @ 2022~2023