springboot vue完成發(fā)送接口請求顯示響應(yīng)頭信息
基于 springboot+vue 的測試平臺
(練手項目)開發(fā)繼續(xù)更新。
在接口編輯頁中點擊發(fā)送接口請求,除了顯示響應(yīng)體外,還可以顯示響應(yīng)頭等輔助信息,今天完成這個功能的開發(fā)。
一、后端實現(xiàn)
后端主要是修改一下處理接口發(fā)送請求的方法apiTestRun
,之前這個方法返回的直接就是一個響應(yīng)體,現(xiàn)在修改成返回更多的內(nèi)容。
如圖所示,注釋掉的部分是之前的返回。
在 hutool 的 http 客戶端中,httpResponse
對象是包含了很多信息的,這里目前只先用這幾個:body
、cookies
、responseStatus
、responseHeaders
。獲取到之后放到一個新的對象里返回出去。
不過前端的頁面目前也只需要用body
和responseHeaders
這2個,前者是替換到之前的顯示,后者就是今天新增的功能所需要的。
二、前端實現(xiàn)
1. 返回的數(shù)據(jù)放到 vuex 中
在 vuex 中,我把接口返回的信息從接口請求對象中拿了出來,保存的時候就不做落庫了。
所以,現(xiàn)在發(fā)送請求成功后,要把獲取到的信息賦值給 vuex 中的對應(yīng)字段。因為返回內(nèi)容改了,所以body
的賦值也要重新改下,再加上新增的respHeaders
賦值即可。
2. 從 vuex 中獲取數(shù)據(jù)并展示
新建一個組件ResponseHeaders
,在這里獲取到 vuex 中的數(shù)據(jù)并展示出來。
<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">響應(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>
這個父組件是集中存放關(guān)于接口響應(yīng)相關(guān)內(nèi)容的地方,另一個響應(yīng)體ResponseBody
也是在這里,并且使用<el-tabs>
來顯示。
最新代碼都已更新
前端:
https://github.com/wessonlan/bloomtest-web
后端
https://github.com/wessonlan/bloomtest-backend
以上就是springboot+vue完成發(fā)送接口請求顯示響應(yīng)頭信息的詳細(xì)內(nèi)容,更多關(guān)于springboot vue接口發(fā)送響應(yīng)頭顯示的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解使用@RequestBody取POST方式的json字符串
這篇文章主要介紹了詳解使用@RequestBody取POST方式的json字符串,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Java對象以Hash結(jié)構(gòu)存入Redis詳解
這篇文章主要介紹了Java對象以Hash結(jié)構(gòu)存入Redis詳解,和Java中的對象非常相似,卻不能按照J(rèn)ava對象的結(jié)構(gòu)直接存儲進(jìn)Redis的hash中,因為Java對象中的field是可以嵌套的,而Redis的Hash結(jié)構(gòu)不支持嵌套結(jié)構(gòu),需要的朋友可以參考下2023-08-08sentinel?整合spring?cloud限流的過程解析
這篇文章主要介紹了sentinel?整合spring?cloud限流,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03SpringBoot讀取properties或者application.yml配置文件中的數(shù)據(jù)
這篇文章主要介紹了SpringBoot讀取properties或者application.yml配置文件中的數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06