springboot+vue完成发送接口请求显示响应头信息

springboot+vue完成发送接口请求显示响应头信息

目录基于 springboot+vue 的测试平台一、后端实现二、前端实现1. 返回的数据放到 vuex 中2. 从 vuex 中获取数据并展示

基于 springboot+vue 的测试平台

（练手项目）开发继续更新。

在接口编辑页中点击发送接口请求，除了显示响应体外，还可以显示响应头等辅助信息，今天完成这个功能的开发。

一、后端实现

后端主要是修改一下处理接口发送请求的方法apiTestRun，之前这个方法返回的直接就是一个响应体，现在修改成返回更多的内容。

如图所示，注释掉的部分是之前的返回。

在 hutool 的 http 客户端中，httpResponse对象是包含了很多信息的，这里目前只先用这几个：body、cookies、responseStatus、responseHeaders。获取到之后放到一个新的对象里返回出去。

不过前端的页面目前也只需要用body和responseHeaders这2个，前者是替换到之前的显示，后者就是今天新增的功能所需要的。

二、前端实现

1. 返回的数据放到 vuex 中

在 vuex 中，我把接口返回的信息从接口请求对象中拿了出来，http://保存的时候就不做落库了。

所以，现在发送请求成功后，要把获取到的信息赋值给 vuex 中的对应字段。因为返回内容改了，所以body的赋值也要重新改下，再加上新增的respHeaders赋值即可。

2. 从 vuex 中获取数据并展示

新建一个组件Responsehttp://Headers，在这里获取到 vuex 中的数据并展示出来。

{{ v + '：' + i }}

这里直接使gMGlQt用 elementui 中的组件简单显示出来即可。

最后，新建的这个组件ResponseHeaders放到一个父组件ResponseInfoBase中。

响应内容

这个父组件是集中存放关于接口响应相关内容的地方，另一个响应体ResponseBody也是在这里，并且使用来显示。

最新代码都已更新

前端：

https://github.com/wessonlan/bloomtest-web

后端

https://github.com/wessonlan/bloomtest-backend

以上就是springboot+vue完成发送接口请求显示响应头信息的详细内容，更多关于springboot vue接口发送响应头显示的资料请关注我们其它相关文章！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。