基於 springboot+vue 的測試平臺開發繼續更新。

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

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

從上面動態圖上已經顯示了大概情況，主要是建立介面的功能，其中還支援傳送除錯。傳送請求的功能就直接參考 postman，用起來習慣。

頁面實現

整個編輯頁面是放在一個對話方塊裡 dialog，然後往裡填充其他部分，3大塊：基礎資訊、請求引數、響應內容。

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

• 基礎資訊：因為要繫結到模組，這裡考慮增加一個模組樹的選擇（暫時沒實現）。
• 請求引數：這裡要有個可以增刪表單的功能。
• 響應內容：用於展示介面返回的 json 資料格式化。

1. 基礎資訊部分

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

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

兩行輸入表單，我是寫分開了，對應return裡的欄位要加加好。

2. 請求引數部分

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

• 請求頭
• query引數：用於url後問好?後的引數
• rest引數：用於restful風格的/後的引數
• 請求體：用於帶有請求body的介面

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

接下來就是動態表單的部分，在 elementUI 裡找到元件，複製程式碼，放到其中的 tab 頁裡。

接著還是修改程式碼了，這裡有3個欄位：引數名、引數值、欄位描述：

對應欄位：

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

這裡暫時只把欄位改改，其他先不動。

然後測試的時候發現一個優化點：當只剩下一行輸入框的時候，不讓繼續刪除。

3. 響應內容部分

這裡 elementUI 元件裡就沒提供了，大奇提醒我之前他寫的專案程式碼裡有，我可直接用。不過後來我又在 github 上找到一個可以支援展開的，感覺也不錯。

地址在這：https://github.com/chenfengjw163/vue-json-viewer/blob/master

安裝：

npm install vue-json-viewer --save
 

在<script>標籤裡匯入，還記得要引用這個元件components: { JsonViewer }

:value="jsonData"繫結的資料直接寫死了一個看看效果。

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

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

頁面暫時先畫到這，接下來進行後端的開發。