springboot+vue元件開發實現介面斷言功能

2022-05-26 14:01:10

基於 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
        }
      }
    },

前端暫時就到這裡，完整程式碼更新

前端：

https://github.com/wessonlan/bloomtest-web

後端

https://github.com/wessonlan/bloomtest-backend

更多關於介面斷言前端vue元件開發的資料請關注it145.com其它相關文章！