Pembangunan platform ujian

(projek latihan) berdasarkan springboot+vue terus dikemas kini.

Seterusnya, sediakan untuk membangunkan fungsi penegasan permintaan. Berkenaan keperluan apa yang perlu dicapai oleh fungsi ini dan rupanya, saya merujuk kepada alat industri cemerlang lain, seperti apifox, metersphere, dsb.

Jadi kami memutuskan untuk membangunkan yang paling biasa digunakan dahulu: JSONPath, 響應(yīng)時(shí)間, 文本, dan antara ini, JSONPath diberi keutamaan.

Peraturan lama, mari kita lihat kesan komponen bahagian hadapan ini dahulu.

1. Hubungan antara komponen

Kesan fungsi di atas sebenarnya dilengkapkan oleh 3 komponen bersama. Lokasi

dalam kod projek adalah seperti yang ditunjukkan dalam rajah.

• ApiAssertions: Komponen paling luar, terutamanya pintu masuk untuk menambah penegasan, dan tempat untuk menyepadukan pelbagai jenis subkomponen penegasan.

• ApiAssertionsEdit: Komponen penegasan yang berbeza perlu menyediakan fungsi penyuntingan di sini juga di mana pelbagai jenis subkomponen pengeditan penegasan disepadukan.

• ApiAssertionJsonPath: Komponen ini ialah penegasan jenis JSONPath, komponen paling rendah.

Hubungan kemasukan antara ketiga-tiga komponen ini ialah: ApiAssertions -> ApiAssertionsEdit -> ApiAssertionJsonPath.

Memandangkan tiada penyelesaian siap pakai dalam elementUI, masih perlu menggunakan komponen elementUI bertaburan untuk memasangnya, sama seperti blok binaan.

Selepas mengambil stok, saya mungkin menggunakan komponen elementUI berikut. Kanak-kanak yang berminat boleh pergi ke tapak web rasmi untuk mengetahui lebih lanjut:

• el-select Pemilih

  <.>

• , el-row, ini ialah Reka Letak el-col

• , kotak input el-input

• , petua el-tooltip

• , butang el-button

Selebihnya adalah pengetahuan yang berkaitan dengan pembangunan komponen saya juga telah menyusunnya secara ringkas artikel sebelumnya.

2. Pembangunan komponen

Bahagian ini memperkenalkan secara ringkas kandungan dan fungsi setiap komponen.

1. ApiAssertions

Fungsi di sini adalah untuk menyediakan titik masuk untuk menambah penegasan pada masa ini, hanya JSONPath adalah benar dan dua yang lain adalah palsu.

Kemudian tambah butang untuk membuat kawalan, iaitu ia dinyahdayakan dan tidak membenarkan klik apabila jenis tidak dipilih.

Kemudian ini mengandungi subkomponen

, di mana ApiAssertionJsonPath digunakan untuk menentukan jenis dan komponen hanya dipaparkan apabila nilai jenis v-if. JSON_PATH

Mengenai jenis komponen, ini sentiasa dihidupkan, jadi untuk menjadi lebih piawai, saya mengekstrak nilai ini dan meletakkannya dalam fail

yang berasingan: ApiTestModel.js

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

Kemudian, terdapat komponen penyuntingan

yang juga merupakan sub-komponennya, kerana selepas mengklik Tambah, senarai JSONPath yang sepadan akan dipaparkan, dan ia boleh terus diedit. ApiAssertionsEdit

Perhatikan bahawa dua subkomponen di atas terikat pada atribut tersuai

Atribut ini digunakan untuk menerima parameter yang dihantar dari luar, jadi dalam assertions mesti ditakrifkan terlebih dahulu: props

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

2. ApiAssertionsEdit

Komponen ini digunakan untuk menyediakan fungsi penyuntingan JSONPath yang ditambah, dan boleh memberikan kesan paparan senarai penegasan. Di samping itu, terdapat fungsi seperti pemadaman dan melumpuhkan penegasan.

Paparan senarai menggunakan

di sini, senarai JSONPath dalam penegasan pembolehubah, dan kemudian mengeluarkan data di dalam dan memaparkannya. v-for

Terdapat atribut

yang diperlukan oleh komponen :edit="true" dan fungsinya diterangkan di bawah. ApiAssertionJsonPath

3. ApiAssertionJsonPath

Ini ialah komponen peringkat terendah, dan kebanyakan kandungan ada di sini.

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

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

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

接下來(lá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
        }
      }
    },

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penegasan antara muka dalam pembangunan komponen springboot+vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!