(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.
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
, di mana ApiAssertionJsonPath
digunakan untuk menentukan jenis dan komponen hanya dipaparkan apabila nilai jenis v-if
. JSON_PATH
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
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
yang diperlukan oleh komponen :edit="true"
dan fungsinya diterangkan di bawah. ApiAssertionJsonPath
代码里用不同的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!