springboot vue完成發(fā)送接口請(qǐng)求顯示響應(yīng)頭信息
基于 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)顯示。
最新代碼都已更新
前端:
https://github.com/wessonlan/bloomtest-web
后端
https://github.com/wessonlan/bloomtest-backend
以上就是springboot+vue完成發(fā)送接口請(qǐng)求顯示響應(yīng)頭信息的詳細(xì)內(nèi)容,更多關(guān)于springboot vue接口發(fā)送響應(yīng)頭顯示的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- SpringBoot3 響應(yīng)式網(wǎng)絡(luò)請(qǐng)求客戶端的實(shí)現(xiàn)
- SpringBoot接收與響應(yīng)xml報(bào)文請(qǐng)求的實(shí)現(xiàn)
- springboot如何實(shí)現(xiàn)異步響應(yīng)請(qǐng)求(前端請(qǐng)求超時(shí)的問(wèn)題解決)
- SpringBoot請(qǐng)求發(fā)送與信息響應(yīng)匹配實(shí)現(xiàn)方法介紹
- SpringBoot之自定義Filter獲取請(qǐng)求參數(shù)與響應(yīng)結(jié)果案例詳解
- SpringBoot請(qǐng)求響應(yīng)方式示例詳解
相關(guān)文章
詳解使用@RequestBody取POST方式的json字符串
這篇文章主要介紹了詳解使用@RequestBody取POST方式的json字符串,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Java對(duì)象以Hash結(jié)構(gòu)存入Redis詳解
這篇文章主要介紹了Java對(duì)象以Hash結(jié)構(gòu)存入Redis詳解,和Java中的對(duì)象非常相似,卻不能按照J(rèn)ava對(duì)象的結(jié)構(gòu)直接存儲(chǔ)進(jìn)Redis的hash中,因?yàn)镴ava對(duì)象中的field是可以嵌套的,而Redis的Hash結(jié)構(gòu)不支持嵌套結(jié)構(gòu),需要的朋友可以參考下2023-08-08sentinel?整合spring?cloud限流的過(guò)程解析
這篇文章主要介紹了sentinel?整合spring?cloud限流,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03詳解springboot中各個(gè)版本的redis配置問(wèn)題
這篇文章主要介紹了詳解springboot中各個(gè)版本的redis配置問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04SpringBoot讀取properties或者application.yml配置文件中的數(shù)據(jù)
這篇文章主要介紹了SpringBoot讀取properties或者application.yml配置文件中的數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06java實(shí)現(xiàn)客戶信息管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了java實(shí)現(xiàn)客戶信息管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02Java線程啟動(dòng)為什么要用start()而不是run()?
這篇文章主要介紹了線程啟動(dòng)為什么要用start()而不是run()?下面文章圍繞start()與run()的相關(guān)資料展開詳細(xì)內(nèi)容,具有一定的參考價(jià)值,西藥的小火熬版可以參考一下,希望對(duì)你有所幫助2021-12-12