springboot vue完成編輯頁面發(fā)送接口請求功能

更新時間：2022年05月26日 14:38:55 作者：把蘋果咬哭的測試筆記

這篇文章主要為大家介紹了springboot+vue完成編輯頁發(fā)送接口請求功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

基于 springboot+vue 的測試平臺(練手項目)開發(fā)繼續(xù)更新。

今天終于把已做的功能都重構(gòu)完成了。

其中前端又做了個小調(diào)整，就是入?yún)討B(tài)增刪的控件，本來我是3個tab復(fù)用一個組件，后來不斷發(fā)現(xiàn)一些問題，最后我決定還是分開寫吧。

今天另一個重點(diǎn)是重做了編輯頁發(fā)送接口請求的后端功能。這個功能重構(gòu)之前是有的，但是現(xiàn)在我覺得之前那些做兼容不夠。

因為我最近在工作中接入飛書的一些開放API，發(fā)現(xiàn)存在一些接口的入?yún)⑹墙M合來的，比如 post 請求中，既有查詢參數(shù)，也有請求體。

于是我重新梳理一下，盡量支持了各種參數(shù)組合：

不帶任何參數(shù)
只有 param 查詢參數(shù)
只有 rest 路徑參數(shù)
只有 body 參數(shù)
同時 param + body
同時 rest + body

請求方法的話，暫時還是先支持 get 與 post 這2種最常見的。最后，把各種判斷情況分支都走了一遍，確認(rèn)沒啥問題。

功能實現(xiàn)

接下來記錄下功能的實現(xiàn)。思路很簡單：

一些必要參數(shù)的獲取與處理不同請求方法的判斷進(jìn)一步判斷不同的參數(shù)組合情況，來進(jìn)行發(fā)送http接口的處理。

用的 http 客戶端是hutool框架的，代碼位置在項目的這里，93行往后。

首先，主方法前面處理一些必要的入?yún)⑿畔ⅲ热?method、header、以及獲取表單里的參數(shù)。

接下來進(jìn)入到請求方法的判斷，然后進(jìn)一步判斷目前前端提交過來的各種類型的參數(shù)情況，這里抽出去寫了 2 個判空的方法。

以 get 方法為例，現(xiàn)在我可以判斷出實際提交來的參數(shù)都有誰。

判斷出參數(shù)類型，就可以針對性處理了，這里最麻煩的就是 rest 路徑參數(shù)的處理，我前端提交來的路徑參數(shù)是用花括號包著的{name}，所以要對url重新處理一下。

拼接完成后，就可以直接發(fā)起請求了。

這里要注意的是，在hutool的 http 客戶端中，我入?yún)⑹褂?code>body()的時候會把form()的參數(shù)覆蓋掉，所以在處理請求體參數(shù)組合的情況下，只能把查詢參數(shù)或者路徑參數(shù)，都處理在請求 url 上。比如，這里是為了處理param+body的組合，手動把param參數(shù)拼接到 url 上。