springboot vue完成发送接口请求显示响应头信息
作者:把苹果咬哭的测试笔记 发布时间:2023-06-05 02:45:34
基于 springboot+vue 的测试平台
(练手项目)开发继续更新。
在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等辅助信息,今天完成这个功能的开发。
一、后端实现
后端主要是修改一下处理接口发送请求的方法apiTestRun
,之前这个方法返回的直接就是一个响应体,现在修改成返回更多的内容。
如图所示,注释掉的部分是之前的返回。
在 hutool 的 http 客户端中,httpResponse
对象是包含了很多信息的,这里目前只先用这几个:body
、cookies
、responseStatus
、responseHeaders
。获取到之后放到一个新的对象里返回出去。
不过前端的页面目前也只需要用body
和responseHeaders
这2个,前者是替换到之前的显示,后者就是今天新增的功能所需要的。
二、前端实现
1. 返回的数据放到 vuex 中
在 vuex 中,我把接口返回的信息从接口请求对象中拿了出来,保存的时候就不做落库了。
所以,现在发送请求成功后,要把获取到的信息赋值给 vuex 中的对应字段。因为返回内容改了,所以body
的赋值也要重新改下,再加上新增的respHeaders
赋值即可。
2. 从 vuex 中获取数据并展示
新建一个组件ResponseHeaders
,在这里获取到 vuex 中的数据并展示出来。
<template>
<el-card class="box-card">
<div v-for="(i, v) in headersObj" :key="v" class="text item">
{{ v + ':' + i }}
</div>
</el-card>
</template>
<script>
export default {
name: 'ResponseHeaders',
data() {
return {
headersObj: {}
}
},
computed: {
respHeaders() {
return this.$store.state.apiDefinition.responseInfo.respHeaders
}
},
watch: {
respHeaders: {
handler() {
this.headersObj = this.respHeaders[0]
},
immediate: true,
deep: true
}
}
}
</script>
这里直接使用 elementui 中的<el-card>
组件简单显示出来即可。
最后,新建的这个组件ResponseHeaders
放到一个父组件ResponseInfoBase
中。
<template>
<div>
<el-divider content-position="left">响应内容</el-divider>
<el-tabs v-model="activeName">
<el-tab-pane label="响应体" name="respBody">
<ResponseBody />
</el-tab-pane>
<el-tab-pane label="响应头" name="respHeaders">
<ResponseHeaders />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import ResponseBody from '@/views/apiManagement/definition/responseContent/ResponseBody'
import ResponseHeaders from '@/views/apiManagement/definition/responseContent/ResponseHeaders'
export default {
name: 'ResponseInfoBase',
components: { ResponseBody, ResponseHeaders },
data() {
return {
activeName: 'respBody'
}
}
}
</script>
这个父组件是集中存放关于接口响应相关内容的地方,另一个响应体ResponseBody
也是在这里,并且使用<el-tabs>
来显示。
最新代码都已更新
前端:
https://github.com/wessonlan/bloomtest-web
后端
https://github.com/wessonlan/bloomtest-backend
来源:https://www.cnblogs.com/pingguo-softwaretesting/p/16280271.html
猜你喜欢
- 前言尽管可以通过不同的方式组合IO流类,但我们可能也就只用到其中的几种组合。下面的例子可以作为典型的IO用法的基本参考。在这些示例中,异常处
- 这是入门的第三天了,从简单的hello spring开始,已经慢慢接近web的样子。接下来当然是读取简单的对象属性了。于是按照网上各位大神教
- 泛型与类型擦除泛型,JDK 1.5新特性,本质是参数化类型(Parametersized Type) 的应用,即所操作的数据类型被指定为一个
- J2ee 高并 * 况下 * 实例详解引言:在高并发下限制最大并发次数,在web.xml中用过滤器设置参数(最大并发数),并设置其他相关参数。
- 在使用多线程过程中,可能会遇到在一些情况下必须等待子线程全部执行结束后主线程才进行下一步,做法如下: //在使用多线程过程中,可能会遇到在一
- using System;using System.Collections.Generic;using System.ComponentMo
- @ModelAttribute在父类、子类的执行顺序被 @ModelAttribute 注解的方法会在Controller每个方法执行之前都
- 在Spring4之后,要使用注解开发,必须要保证aop的包导入了使用注解需要导入context约束,增加注解的支持!<?xml ver
- 前言小小知识,不值一提,了解了也不能让你提高身价,但是不了解你就是比别人少知道点!事儿就是这么个事儿,直接正题吧! 直接看代码演示优先级当方
- 概述:@ResponseBody @RequestMapping(value="/download/{fileName:[a-zA
- 之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家:系
- 一、Filter(过滤器)Filter接口定义在javax.servlet包中,是Servlet规范定义的,作用于Request/Respo
- 常用的对数组进行的操作1、求数组中最大值,最小值思路:假设下标为0的元素是最大值,遍历数组,依次跟max进行比较,如果有元素比这个max还大
- 前言现在的项目一般是拆分成一个个独立的模块,当在其他项目中想要使用独立出来的这些模块,只需要在其pom.xml使用<dependenc
- 复合语句Java的复合语句是以整个区块为单位的语句,由{}以及{}内包含的内容组成对于复合语句来说,复合语句创建了一个局部变量的作用域,该作
- 本文实例讲述了C#创建临时文件的方法。分享给大家供大家参考。具体分析如下:C#可以通过Path.GetTempFileName获得一个临时文
- 废话不多说,上代码public String getRelativeTimeSpanStringForIphone(long time,lo
- /** * 进行BigDecimal对象的加减乘除,四舍五入等运算的工具类 * * @author Marydon * @createTi
- 使用范围: 只能作用在方法和构造函数之上@SneakyThrows注解的作用得从java的异常设计体系说起。java中常见的异常有两种:Ex
- 这篇文章主要介绍了Spring Bean初始化及销毁多种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值