基于 springboot+vue 的測試平臺開發(fā)

繼續(xù)更新

目前已經進入到接口定義功能的開發(fā)階段，首先我還是直接在前段畫了個大概的頁面，先預覽下：

不過目前只是畫了這個頁面都主要功能，細節(jié)未盡事宜待具體開發(fā)的時候再進一步完善。

從上面動態(tài)圖上已經顯示了大概情況，主要是創(chuàng)建接口的功能，其中還支持發(fā)送調試。發(fā)送請求的功能就直接參考 postman，用起來習慣。

頁面實現

整個編輯頁面是放在一個對話框里 dialog，然后往里填充其他部分，3大塊：基礎信息、請求參數、響應內容。

這 3 塊分別有自己的重點地方：

基礎信息：因為要綁定到模塊，這里考慮增加一個模塊樹的選擇(暫時沒實現)。請求參數：這里要有個可以增刪表單的功能。響應內容：用于展示接口返回的 json 數據格式化。

1. 基礎信息部分

為了美化頁面，還新使用了分割線的組件。

這里選擇分割線+文字的樣式，直接使用：

兩行輸入表單，我是寫分開了，對應return里的字段要加加好。

2. 請求參數部分

請求參數部分首先是有幾個 tab 頁，然后在每個 tab 頁里有自己對應的內容。分別是：

• 請求頭
• query參數：用于url后問好?后的參數
• rest參數：用于restful風格的/后的參數
• 請求體：用于帶有請求body的接口

在 elementUI 找到組件，修改好對應的 tab 名稱即可。

接下來就是動態(tài)表單的部分，在 elementUI 里找到組件，復制代碼，放到其中的 tab 頁里。

接著還是修改代碼了，這里有3個字段：參數名、參數值、字段描述：

對應字段：

另外還有 2 個方法，增加和刪除：

這里暫時只把字段改改，其他先不動。

然后測試的時候發(fā)現一個優(yōu)化點：當只剩下一行輸入框的時候，不讓繼續(xù)刪除。

3. 響應內容部分

這里 elementUI 組件里就沒提供了，大奇提醒我之前他寫的項目代碼里有，我可直接用。不過后來我又找到一個可以支持展開的，感覺也不錯。

地址在這：http://m.fzitv.net/article/204565.htm

安裝：

npm install vue-json-viewer --save

在<script>標簽里導入，還記得要引用這個組件components: { JsonViewer }

:value="jsonData"綁定的數據直接寫死了一個看看效果。

這個組件還是支持不少功能的，詳見作者提供的說明：

可以根據自己實際需要使用這些屬性。

頁面暫時先畫到這，接下來進行后端的開發(fā)，更多關于springboot vue前端動態(tài)增刪表單的資料請關注腳本之家其它相關文章！

最新評論