springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
基于 springboot+vue 的測(cè)試平臺(tái)開(kāi)發(fā)
繼續(xù)更新
目前已經(jīng)進(jìn)入到接口定義功能的開(kāi)發(fā)階段,首先我還是直接在前段畫(huà)了個(gè)大概的頁(yè)面,先預(yù)覽下:
不過(guò)目前只是畫(huà)了這個(gè)頁(yè)面都主要功能,細(xì)節(jié)未盡事宜待具體開(kāi)發(fā)的時(shí)候再進(jìn)一步完善。
從上面動(dòng)態(tài)圖上已經(jīng)顯示了大概情況,主要是創(chuàng)建接口的功能,其中還支持發(fā)送調(diào)試。發(fā)送請(qǐng)求的功能就直接參考 postman,用起來(lái)習(xí)慣。
頁(yè)面實(shí)現(xiàn)
整個(gè)編輯頁(yè)面是放在一個(gè)對(duì)話框里 dialog,然后往里填充其他部分,3大塊:基礎(chǔ)信息、請(qǐng)求參數(shù)、響應(yīng)內(nèi)容。
這 3 塊分別有自己的重點(diǎn)地方:
基礎(chǔ)信息:因?yàn)橐壎ǖ侥K,這里考慮增加一個(gè)模塊樹(shù)的選擇(暫時(shí)沒(méi)實(shí)現(xiàn))。請(qǐng)求參數(shù):這里要有個(gè)可以增刪表單的功能。響應(yīng)內(nèi)容:用于展示接口返回的 json 數(shù)據(jù)格式化。
1. 基礎(chǔ)信息部分
為了美化頁(yè)面,還新使用了分割線的組件。
這里選擇分割線+文字的樣式,直接使用:
兩行輸入表單,我是寫(xiě)分開(kāi)了,對(duì)應(yīng)return
里的字段要加加好。
2. 請(qǐng)求參數(shù)部分
請(qǐng)求參數(shù)部分首先是有幾個(gè) tab 頁(yè),然后在每個(gè) tab 頁(yè)里有自己對(duì)應(yīng)的內(nèi)容。分別是:
- 請(qǐng)求頭
- query參數(shù):用于url后問(wèn)好
?
后的參數(shù) - rest參數(shù):用于restful風(fēng)格的
/
后的參數(shù) - 請(qǐng)求體:用于帶有請(qǐng)求body的接口
在 elementUI 找到組件,修改好對(duì)應(yīng)的 tab 名稱即可。
接下來(lái)就是動(dòng)態(tài)表單的部分,在 elementUI 里找到組件,復(fù)制代碼,放到其中的 tab 頁(yè)里。
接著還是修改代碼了,這里有3個(gè)字段:參數(shù)名、參數(shù)值、字段描述:
對(duì)應(yīng)字段:
另外還有 2 個(gè)方法,增加和刪除:
這里暫時(shí)只把字段改改,其他先不動(dòng)。
然后測(cè)試的時(shí)候發(fā)現(xiàn)一個(gè)優(yōu)化點(diǎn):當(dāng)只剩下一行輸入框的時(shí)候,不讓繼續(xù)刪除。
3. 響應(yīng)內(nèi)容部分
這里 elementUI 組件里就沒(méi)提供了,大奇提醒我之前他寫(xiě)的項(xiàng)目代碼里有,我可直接用。不過(guò)后來(lái)我又找到一個(gè)可以支持展開(kāi)的,感覺(jué)也不錯(cuò)。
地址在這:http://www.dbjr.com.cn/article/204565.htm
安裝:
npm install vue-json-viewer --save
在<script>
標(biāo)簽里導(dǎo)入,還記得要引用這個(gè)組件components: { JsonViewer }
:value="jsonData"
綁定的數(shù)據(jù)直接寫(xiě)死了一個(gè)看看效果。
這個(gè)組件還是支持不少功能的,詳見(jiàn)作者提供的說(shuō)明:
可以根據(jù)自己實(shí)際需要使用這些屬性。
頁(yè)面暫時(shí)先畫(huà)到這,接下來(lái)進(jìn)行后端的開(kāi)發(fā),更多關(guān)于springboot vue前端動(dòng)態(tài)增刪表單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- SpringBoot如何獲取Get請(qǐng)求參數(shù)詳解
- springBoot 過(guò)濾器去除請(qǐng)求參數(shù)前后空格實(shí)例詳解
- SpringBoot通過(guò)JSON傳遞請(qǐng)求參數(shù)的實(shí)例詳解
- springboot如何設(shè)置請(qǐng)求參數(shù)長(zhǎng)度和文件大小限制
- SpringBoot常見(jiàn)get/post請(qǐng)求參數(shù)處理、參數(shù)注解校驗(yàn)及參數(shù)自定義注解校驗(yàn)詳解
- SpringBoot之自定義Filter獲取請(qǐng)求參數(shù)與響應(yīng)結(jié)果案例詳解
- springboot?vue接口測(cè)試HutoolUtil?TreeUtil處理樹(shù)形結(jié)構(gòu)
- springboot?vue接口測(cè)試前后端實(shí)現(xiàn)模塊樹(shù)列表功能
- springboot?vue接口測(cè)試前后端樹(shù)節(jié)點(diǎn)編輯刪除功能
- springboot3請(qǐng)求參數(shù)種類及接口測(cè)試案例小結(jié)
相關(guān)文章
基于vue實(shí)現(xiàn)新聞自下往上滾動(dòng)效果(示例代碼)
這篇文章主要介紹了vue新聞自下往上滾動(dòng)效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動(dòng),鼠標(biāo)移出繼續(xù)滾動(dòng),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法
這篇文章主要介紹了Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下2020-11-11關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-07-07Vue2路由動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue2路由動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼,可以根據(jù)不同的路徑去改變動(dòng)畫(huà)的效果,有興趣的可以了解一下2017-07-07Vue瀏覽器緩存sessionStorage+localStorage+Cookie區(qū)別解析
這篇文章主要介紹了Vue瀏覽器緩存sessionStorage+localStorage+Cookie區(qū)別解析,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09element-ui配合node實(shí)現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實(shí)現(xiàn)自定義上傳文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09