Bagaimana untuk melaksanakan fungsi penegasan antara muka dalam pembangunan komponen springboot+vue

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, 响应时间, 文本, 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组件把每列的内容定义好即可。

注意在上层组件传来的edit，在这里是用来判断当前是否为编辑状态的，是的话就显示删除和禁用的组件。

其他的代码就不具体截图了，有需要的童鞋可以获取源码对着看。

接下来就要开发对应的后端功能，就是如何把断言数据落到数据库里，也就是jsonpath这个对象里的这些字段。

    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!