springboot vue完成發(fā)送接口請(qǐng)求顯示響應(yīng)頭信息

更新時(shí)間：2022年05月26日 14:38:22 作者：把蘋果咬哭的測(cè)試筆記

這篇文章主要為大家介紹了springboot+vue完成發(fā)送接口請(qǐng)求顯示響應(yīng)頭信息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

基于 springboot+vue 的測(cè)試平臺(tái)

（練手項(xiàng)目）開發(fā)繼續(xù)更新。

在接口編輯頁(yè)中點(diǎn)擊發(fā)送接口請(qǐng)求，除了顯示響應(yīng)體外，還可以顯示響應(yīng)頭等輔助信息，今天完成這個(gè)功能的開發(fā)。

一、后端實(shí)現(xiàn)

后端主要是修改一下處理接口發(fā)送請(qǐng)求的方法apiTestRun，之前這個(gè)方法返回的直接就是一個(gè)響應(yīng)體，現(xiàn)在修改成返回更多的內(nèi)容。

如圖所示，注釋掉的部分是之前的返回。

在 hutool 的 http 客戶端中，httpResponse對(duì)象是包含了很多信息的，這里目前只先用這幾個(gè)：body、cookies、responseStatus、responseHeaders。獲取到之后放到一個(gè)新的對(duì)象里返回出去。

不過(guò)前端的頁(yè)面目前也只需要用body和responseHeaders這2個(gè)，前者是替換到之前的顯示，后者就是今天新增的功能所需要的。

二、前端實(shí)現(xiàn)

1. 返回的數(shù)據(jù)放到 vuex 中

在 vuex 中，我把接口返回的信息從接口請(qǐng)求對(duì)象中拿了出來(lái)，保存的時(shí)候就不做落庫(kù)了。

所以，現(xiàn)在發(fā)送請(qǐng)求成功后，要把獲取到的信息賦值給 vuex 中的對(duì)應(yīng)字段。因?yàn)榉祷貎?nèi)容改了，所以body的賦值也要重新改下，再加上新增的respHeaders賦值即可。

2. 從 vuex 中獲取數(shù)據(jù)并展示

新建一個(gè)組件ResponseHeaders，在這里獲取到 vuex 中的數(shù)據(jù)并展示出來(lái)。

<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>組件簡(jiǎn)單顯示出來(lái)即可。

最后，新建的這個(gè)組件ResponseHeaders放到一個(gè)父組件ResponseInfoBase中。

<template>
  <div>
    <el-divider content-position="left">響應(yīng)內(nèi)容</el-divider>
    <el-tabs v-model="activeName">
      <el-tab-pane label="響應(yīng)體" name="respBody">
        <ResponseBody />
      </el-tab-pane>
      <el-tab-pane label="響應(yīng)頭" 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>

這個(gè)父組件是集中存放關(guān)于接口響應(yīng)相關(guān)內(nèi)容的地方，另一個(gè)響應(yīng)體ResponseBody也是在這里，并且使用<el-tabs>來(lái)顯示。