Rumah > Java > javaTutorial > teks badan

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

PHPz
Lepaskan: 2023-05-18 11:13:45
ke hadapan
1243 orang telah melayarinya

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].

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

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

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

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:

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

Panggil antara muka dalam handleKemas kini:

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

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:

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

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.

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

Terdapat juga pemproses pengawal luaran yang sepadan:

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

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

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

2. Pengubahsuaian halaman hadapan

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

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

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

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

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:

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

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.

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

Kemudian terus melengkapkan kod kaedah updateData:

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

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:

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

Kemudian tambahkan kaedah mengikat butang baharu.

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

Akhir sekali, uji kefungsian.

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

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!

Label berkaitan:
sumber:yisu.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!