基于 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ì)話(huà)框里 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àn)的組件。

這里選擇分割線(xiàn)+文字的樣式，直接使用：

兩行輸入表單，我是寫(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 名稱(chēng)即可。

接下來(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.fzitv.net/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)文章！

最新評(píng)論