欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)

 更新時(shí)間:2022年05月26日 15:39:16   作者:把蘋(píng)果咬哭的測(cè)試筆記  
這篇文章主要為大家介紹了springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jì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)文章!

相關(guān)文章

  • Vue3從0搭建Vite打包組件庫(kù)使用詳解

    Vue3從0搭建Vite打包組件庫(kù)使用詳解

    這篇文章主要為大家介紹了Vue3從0搭建Vite打包組件庫(kù)使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • 基于vue實(shí)現(xiàn)新聞自下往上滾動(dòng)效果(示例代碼)

    基于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-04
  • iview在vue-cli3如何按需加載的方法

    iview在vue-cli3如何按需加載的方法

    這篇文章主要介紹了iview在vue-cli3如何按需加載的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法

    Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法

    這篇文章主要介紹了Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下
    2020-11-11
  • 關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解

    關(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-07
  • vue3組件通信的方式總結(jié)及實(shí)例用法

    vue3組件通信的方式總結(jié)及實(shí)例用法

    在本篇文章里小編給大家整理的是一篇關(guān)于vue3組件通信的方式總結(jié)及實(shí)例用法,對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。
    2021-12-12
  • Vue2路由動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼

    Vue2路由動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼

    本篇文章主要介紹了Vue2路由動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼,可以根據(jù)不同的路徑去改變動(dòng)畫(huà)的效果,有興趣的可以了解一下
    2017-07-07
  • Vue瀏覽器緩存sessionStorage+localStorage+Cookie區(qū)別解析

    Vue瀏覽器緩存sessionStorage+localStorage+Cookie區(qū)別解析

    這篇文章主要介紹了Vue瀏覽器緩存sessionStorage+localStorage+Cookie區(qū)別解析,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09
  • element-ui配合node實(shí)現(xiàn)自定義上傳文件方式

    element-ui配合node實(shí)現(xiàn)自定義上傳文件方式

    這篇文章主要介紹了element-ui配合node實(shí)現(xiàn)自定義上傳文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue插件使用方法詳情分享

    Vue插件使用方法詳情分享

    這篇文章主要介紹了Vue插件使用方法詳情分享,使用插件之前顯示定義,下文通過(guò)js插件定義展開(kāi)詳細(xì)文章介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-03-03

最新評(píng)論