基於 springboot+vue 的測試平臺（練手項目）開發繼續更新。
接下來準備開發請求斷言功能。關於這個功能要實現哪些需求，長什麼樣子，我參考了下其他優秀的業界工具，比如apifox、metersphere等。
於是決定還是先緊着最常用的來開發：JSONPath、響應時間、文本，而這些當中，又以JSONPath爲優先。
老規矩，還是先看一下這個前端組件效果。
一、組件的關係
上面功能效果實際上由3個組件一起完成的。
在項目代碼中的位置如圖。
- ApiAssertions：最外層的組件，主要是添加斷言的入口，以及集成不同類型斷言子組件的地方。
- ApiAssertionsEdit：不同的斷言組件都需要提供編輯功能，這裏也作爲集成不同類型斷言編輯子組件的地方。
- ApiAssertionJsonPath：這個組件就是對於JSONPath類型的斷言，最底層的組件了。
這3個組件的包含關係就是：ApiAssertions -> ApiAssertionsEdit -> ApiAssertionJsonPath。
由於elementUI裏並沒有一個現成的方案，所以還是需要利用零散的elementUI組件來組合，就像搭積木一樣。
盤點了一下，大概用瞭如下的elementUI組件，有興趣的童鞋可以自行鍼對性的去官網瞭解學習：
el-select選擇器el-row、el-col，這是 Layout 佈局el-input，輸入框el-tooltip，tips提示el-button，按鈕
剩下的就是組件開發相關的知識了，在之前的文章中我也有過簡單的整理。
二、組件的開發
這部分大概介紹一下各個組件中的內容和作用。
1. ApiAssertions
這裏的作用就是提供添加斷言的入口，這裏目前只有JSONPath是真實的，其他2個是假的。
然後添加按鈕做了個控制，就是在沒選擇類型的時候是禁用的不讓點擊。
然後這裏包含了子組件ApiAssertionJsonPath，這裏用了v-if來判斷類型，當類型值爲JSON_PATH的時候才顯示該組件。
關於組件類型，這些都屬於常亮，所以爲了更規範一些，我把這些值提出去放到了一個單獨的ApiTestModel.js文件中：
export const ASSERTION_TYPE = {
TEXT: 'Text',
JSON_PATH: 'JSONPath',
DURATION: 'Duration'
}
接着，還有一個編輯組件ApiAssertionsEdit也是它的子組件，因爲點擊添加之後，要展示出對應JSONPath的列表，而且是可以繼續編輯的。
注意到上面2個子組件都綁定了自定義的屬性assertions，這個屬性就是用來接收外部傳進來的參數用的，所以在props中要先定義出來：
props: {
assertions: {
type: Object,
default: () => {
return {}
}
}
},
2. ApiAssertionsEdit
這個組件就是用於提供添加後的JSONPath的編輯功能，而且能提供斷言的列表展示效果。另外還有斷言的刪除以及禁用等功能。
列表展示這裏就是使用v-for了，變量斷言裏JSONPath列表，然後把裏面的數據拿出來展示。
這裏有一個:edit="true"這個屬性是ApiAssertionJsonPath組件所需要的，作用在下面說。
3. ApiAssertionJsonPath
這裏就是最底層的組件了，大部分內容也就在這裏。
代碼裏用不同的elementUI組件把每列的內容定義好即可。
注意在上層組件傳來的edit，在這裏是用來判斷當前是否爲編輯狀態的，是的話就顯示刪除和禁用的組件。
其他的代碼就不具體截圖了，有需要的童鞋可以獲取源碼對着看。
接下來就要開發對應的後端功能，就是如何把斷言數據落到數據庫裏，也就是jsonpath這個對象裏的這些字段。
jsonPath: {
type: Object,
default: () => {
return {
type: ASSERTION_TYPE.JSON_PATH,
expression: undefined,
option: undefined,
expect: undefined,
description: undefined,
enable: true
}
}
},
前端暫時就到這裏，有需要的童鞋可以公衆號後臺回覆【測試平臺】，即可獲取git地址以及系列開發記錄文章。