Bagaimana untuk melaksanakan fungsi penyuntingan dalam pengurusan projek springboot vue depan dan belakang

Uji pembangunan platform berdasarkan springboot+vue

1 Buka halaman edit untuk memaparkan data

1 Butang Edit

Komponen jadual yang disalin sebelum ini mengandungi 2 butang , tukar salah satu daripadanya kepada butang [Edit].

Ikat acara klik handleUpdate(scope.row) Ini row ialah objek rekod semasa Anda boleh menambah konsol untuk mencetaknya.

2 Tulis kaedah handleUpdate untuk mengendalikan paparan data

Anda perlu menanyakan nama projek dan perihalan rekod semasa dan menyerahkannya kepada borang. untuk memaparkan data. Di sini anda perlu membuat pertanyaan berdasarkan id projek (keunikan).

Ubah suai antara muka senarai projek bahagian belakang untuk menyokong data pertanyaan berdasarkan id projek:

Panggil antara muka dalam handleKemas kini:

this.dialogFormVisible = true, mula-mula buka kotak dialog dan tambahkan id dalam objek projectQuery data untuk menghantar parameter ke antara muka. Kemudian tetapkan row.id id dalam setiap baris kepada this.projectQuery.id dan akhirnya minta antara muka hanya terdapat satu elemen dalam senarai yang dikembalikan Hanya berikan projectName dan description hasil ini.

Ujinya:

2 Simpan kandungan halaman yang diedit

1. Tambahkan antara muka kemas kini pada bahagian belakang

Borang edit halaman adalah sama dengan halaman baru, jadi tidak perlu menulis satu lagi. Oleh itu, beberapa pengubahsuaian perlu dibuat pada borang untuk memanggil API yang sepadan apabila membuat dan mengedit masing-masing.

Antara muka baharu sudah wujud Sekarang tambahkan antara muka yang dikemas kini dan teruskan menulis dalam ProjectService.

Terdapat juga pemproses pengawal luaran yang sepadan:

Uji sendiri antara muka kemas kini, ia berfungsi seperti biasa.

2. Pengubahsuaian halaman hadapan

Untuk membezakan sama ada ini borang baharu atau borang edit, anda perlu menambah medan pada data untuk mengenal pastinya: dialogStatus.

Ubah suai [Butang Simpan] dalam borang Apabila diklik, nilai dialogStatus digunakan untuk memutuskan sama ada untuk memanggil kaedah baharu atau dikemas kini:

Apabila dialogStatus sama dengan "create", ia ditambah, jika tidak, ia diubah suai.

Kemudian kaedah pemprosesan paparan data pada halaman edit handleUpdate juga diubah suai, dan nilai yang diberikan kepada dialogStatus ialah update:

TambahupdateDataKaedah untuk memanggil antara muka kemas kini bahagian belakang. Tetapi jangan lupa untuk menambah permintaan antara muka dalam fail js, dan kemudian mengimportnya ke dalam fail halaman vue.

Kemudian terus melengkapkan kod kaedah updateData:

Di sini kami juga mereka bentuk [Projek Baharu ] Perubahan butang, kerana butang [Edit] diklik, dialogStatus adalah sama dengan update, jadi secara semulajadi apabila anda mengklik untuk menambah, nilai mesti diberikan kepada create untuk memanggil kaedah add() .

Tetapi memandangkan butang [Tambah Item] sebelumnya telah diikat pada this.dialogFormVisible = true, kedua-duanya diekstrak dan ditulis ke dalam kaedah handleAdd:

Kemudian tambahkan kaedah mengikat butang baharu.

Akhir sekali, uji kefungsian.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penyuntingan dalam pengurusan projek springboot vue depan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!