springbootvue完成发送接口请求显示响应头信息

2022-11-13 08:11:58 请求 响应 接口

基于 springboot+vue 的测试平台

(练手项目开发继续更新。

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

一、后端实现

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

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

在 hutool 的 Http 客户端中,httpResponse对象是包含了很多信息的,这里目前只先用这几个:bodycookiesresponseStatusresponseHeaders。获取到之后放到一个新的对象里返回出去。

不过前端的页面目前也只需要用bodyresponseHeaders这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

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

相关文章