快捷導(dǎo)航

springboot vue組件開(kāi)發(fā)實(shí)現(xiàn)接口斷言功能

更新時(shí)間：2022年05月26日 14:37:49 作者：把蘋(píng)果咬哭的測(cè)試筆記

這篇文章主要為大家介紹了springboot+vue組件開(kāi)發(fā)實(shí)現(xiàn)接口斷言功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

基于 springboot+vue 的測(cè)試平臺(tái)

（練手項(xiàng)目）開(kāi)發(fā)繼續(xù)更新。

接下來(lái)準(zhǔn)備開(kāi)發(fā)請(qǐng)求斷言功能。關(guān)于這個(gè)功能要實(shí)現(xiàn)哪些需求，長(zhǎng)什么樣子，我參考了下其他優(yōu)秀的業(yè)界工具，比如apifox、metersphere等。

于是決定還是先緊著最常用的來(lái)開(kāi)發(fā)：JSONPath、響應(yīng)時(shí)間、文本，而這些當(dāng)中，又以JSONPath為優(yōu)先。

老規(guī)矩，還是先看一下這個(gè)前端組件效果。

一、組件的關(guān)系

上面功能效果實(shí)際上由3個(gè)組件一起完成的。

在項(xiàng)目代碼中的位置如圖。

ApiAssertions：最外層的組件，主要是添加斷言的入口，以及集成不同類(lèi)型斷言子組件的地方。
ApiAssertionsEdit：不同的斷言組件都需要提供編輯功能，這里也作為集成不同類(lèi)型斷言編輯子組件的地方。
ApiAssertionJsonPath：這個(gè)組件就是對(duì)于JSONPath類(lèi)型的斷言，最底層的組件了。

這3個(gè)組件的包含關(guān)系就是：ApiAssertions -> ApiAssertionsEdit -> ApiAssertionJsonPath。

由于elementUI里并沒(méi)有一個(gè)現(xiàn)成的方案，所以還是需要利用零散的elementUI組件來(lái)組合，就像搭積木一樣。

盤(pán)點(diǎn)了一下，大概用了如下的elementUI組件，有興趣的童鞋可以自行針對(duì)性的去官網(wǎng)了解學(xué)習(xí)：

el-select 選擇器

el-row、el-col，這是 Layout 布局

el-input，輸入框

el-tooltip，tips提示

el-button，按鈕

剩下的就是組件開(kāi)發(fā)相關(guān)的知識(shí)了，在之前的文章中我也有過(guò)簡(jiǎn)單的整理。

二、組件的開(kāi)發(fā)

這部分大概介紹一下各個(gè)組件中的內(nèi)容和作用。

1. ApiAssertions

這里的作用就是提供添加斷言的入口，這里目前只有JSONPath是真實(shí)的，其他2個(gè)是假的。

然后添加按鈕做了個(gè)控制，就是在沒(méi)選擇類(lèi)型的時(shí)候是禁用的不讓點(diǎn)擊。

然后這里包含了子組件ApiAssertionJsonPath，這里用了v-if來(lái)判斷類(lèi)型，當(dāng)類(lèi)型值為JSON_PATH的時(shí)候才顯示該組件。

關(guān)于組件類(lèi)型，這些都屬于常亮，所以為了更規(guī)范一些，我把這些值提出去放到了一個(gè)單獨(dú)的ApiTestModel.js文件中：

export const ASSERTION_TYPE = {
  TEXT: 'Text',
  JSON_PATH: 'JSONPath',
  DURATION: 'Duration'
}

接著，還有一個(gè)編輯組件ApiAssertionsEdit也是它的子組件，因?yàn)辄c(diǎn)擊添加之后，要展示出對(duì)應(yīng)JSONPath的列表，而且是可以繼續(xù)編輯的。

注意到上面2個(gè)子組件都綁定了自定義的屬性assertions，這個(gè)屬性就是用來(lái)接收外部傳進(jìn)來(lái)的參數(shù)用的，所以在props中要先定義出來(lái)：

  props: {
    assertions: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

2. ApiAssertionsEdit

這個(gè)組件就是用于提供添加后的JSONPath的編輯功能，而且能提供斷言的列表展示效果。另外還有斷言的刪除以及禁用等功能。

列表展示這里就是使用v-for了，變量斷言里JSONPath列表，然后把里面的數(shù)據(jù)拿出來(lái)展示。

這里有一個(gè):edit="true"這個(gè)屬性是ApiAssertionJsonPath組件所需要的，作用在下面說(shuō)。

3. ApiAssertionJsonPath

這里就是最底層的組件了，大部分內(nèi)容也就在這里。

代碼里用不同的elementUI組件把每列的內(nèi)容定義好即可。

注意在上層組件傳來(lái)的edit，在這里是用來(lái)判斷當(dāng)前是否為編輯狀態(tài)的，是的話就顯示刪除和禁用的組件。

其他的代碼就不具體截圖了，有需要的童鞋可以獲取源碼對(duì)著看。

接下來(lái)就要開(kāi)發(fā)對(duì)應(yīng)的后端功能，就是如何把斷言數(shù)據(jù)落到數(shù)據(jù)庫(kù)里，也就是jsonpath這個(gè)對(duì)象里的這些字段。

    jsonPath: {
      type: Object,
      default: () => {
        return {
          type: ASSERTION_TYPE.JSON_PATH,
          expression: undefined,
          option: undefined,
          expect: undefined,
          description: undefined,
          enable: true
        }
      }
    },

前端暫時(shí)就到這里，完整代碼更新

前端：

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

后端

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

更多關(guān)于接口斷言前端vue組件開(kāi)發(fā)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: