【測試平臺開發】21. 完成發送接口請求顯示響應頭信息

基於 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>來顯示。

最新代碼都已更新，如果也想動手的童鞋可以在公衆號回覆【測試平臺】，可以獲取 github 地址以及開發記錄系列文章。