Tutorial ini memperincikan bagaimana untuk menguruskan hubungan yang banyak-banyak dalam antara muka pengguna (UI), menggunakan "pengguna dan tapak" sebagai contoh. Kami akan membincangkan reka bentuk struktur jadual pangkalan data, pelaksanaan kawalan multi-pilih depan, dan bagaimana back-end menggunakan pertanyaan SQL, perbandingan, dan pemprosesan urus niaga untuk mengemas kini jadual yang berkaitan dengan serentak (seperti `userSyardsLink`) untuk memastikan konsistensi dan integriti data.

Memahami banyak hubungan dan model pangkalan data mereka

Dalam banyak senario perniagaan, terdapat banyak hubungan antara entiti. Sebagai contoh, pengguna boleh dikaitkan dengan pelbagai tempat, dan tempat juga boleh dikaitkan dengan pelbagai pengguna. Untuk mewakili hubungan ini dengan tepat dalam pangkalan data relasi, jadual perantaraan biasanya diperkenalkan, juga dipanggil jadual hubungan atau jadual gabungan.

Mengambil "pengguna dan tapak" sebagai contoh, kita memerlukan tiga jadual:

1. Jadual Pengguna : Menyimpan maklumat pengguna asas, termasuk UserID (Kunci Utama) dan atribut pengguna lain.
2. Jadual Jadual : Menyimpan maklumat tapak asas, termasuk Yardid (kunci utama) dan atribut tapak lain.
3. Jadual UserSyardsLink : Ini adalah jadual persatuan teras, yang mengandungi userId dan yardid sebagai kunci utama komposit (atau kunci utama bebas ditambah dua kunci asing), menunjuk ke jadual pengguna dan jadual meter masing -masing. Jadual ini merekodkan hubungan khusus antara setiap pengguna dan setiap tapak.

Reka bentuk ini memastikan normalisasi data, mengelakkan redundansi, dan membolehkan pertanyaan dan pengurusan data yang berkaitan.

Reka bentuk antara muka pengguna depan

Dalam antara muka pengeditan pengguna (seperti halaman butiran pengguna), kita perlu menyediakan cara yang intuitif untuk pengguna memilih atau melepaskan pelbagai tempat yang berkaitan. Kawalan pelbagai pilihan biasa termasuk:

1. Senarai Kotak Semak : Cara yang paling langsung, menyenaraikan semua tempat yang ada, dengan kotak semak bersebelahan dengan setiap tempat. Pengguna boleh menyemak atau menyahtanda.
2. Dropdown Multi-Select : Sesuai untuk situasi di mana terdapat sejumlah besar tempat. Ia menyediakan menu drop-down dan pengguna boleh menahan kekunci Ctrl/Cmd untuk memilih pelbagai pilihan.

Tidak kira yang mengawal yang anda pilih, kunci adalah:

• Tunjukkan semua pilihan yang tersedia : Akhir depan perlu mendapatkan semua maklumat meter dari pangkalan data.
• Pilihan yang berkaitan dengan pra-pilih : Apabila menyunting pengguna yang sedia ada, UI harus menyemak atau memilih tempat yang sepadan berdasarkan hubungan persatuan pengguna yang sedia ada dalam jadual UserSyardsLink.

Contoh struktur HTML (menggunakan senarai kotak semak) :

Dalam aplikasi sebenar, [jika yardid adalah x dan dikaitkan, kemudian tambahkan bahagian yang diperiksa] perlu dijana secara dinamik apabila backend menjadikan templat.

Logik pemprosesan data backend

Apabila pengguna mengemukakan borang, perkhidmatan backend akan menerima ID pengguna dan array yang mengandungi ID semua tempat yang dipilih (contohnya, SelectedIlyd []). Seterusnya, backend perlu melaksanakan langkah -langkah berikut untuk mengemas kini Jadual UserSyardsLink:

1. Dapatkan data berkaitan yang dikemukakan oleh pengguna : Ekstrak ID Pengguna Semasa dan senarai semua yardid yang baru dipilih oleh pengguna dari data borang.
2. Dapatkan data berkaitan yang ada sekarang : Menurut ID Pengguna semasa, tanya senarai semua Yardids yang berkaitan dengan pengguna dari Jadual UserSyardsLink.
3. Perbandingan dan Analisis Perbezaan : Ini adalah langkah teras yang digunakan untuk menentukan persatuan yang perlu ditambah dan yang perlu dipadamkan.
   • Persatuan yang akan ditambah (tambahan) : Bandingkan senarai Yardid yang dikemukakan oleh pengguna dengan senarai Yardid yang ada sekarang, dan cari Yardid yang ada dalam senarai yang dikemukakan tetapi tidak dalam senarai semasa.
   • Persatuan yang akan dipadam (penghapusan) : Cari Yardids yang ada dalam senarai semasa tetapi tidak dalam senarai penyerahan.
4. Lakukan operasi pangkalan data :
   • Untuk semua yardid yang akan ditambah, masukkan rekod baru ke dalam jadual UserSyardsLink.
   • Untuk semua halaman yang akan dipadam, padamkan rekod yang sepadan dari jadual UserSyardsLink.
5. Pemprosesan Transaksi : Untuk memastikan konsistensi data, semua operasi memasukkan dan memadam hendaklah dilakukan dalam transaksi pangkalan data. Jika sebarang langkah operasi gagal, keseluruhan transaksi harus dilancarkan kembali untuk mengelakkan meninggalkan data dalam keadaan yang tidak lengkap.

Operasi dan contoh SQL

Anggapkan bahawa ID pengguna semasa ialah 101, ID tempat yang dipilih yang dikemukakan oleh pengguna adalah [1, 3, 5], dan ID tempat yang kini dikaitkan dengan pengguna dalam pangkalan data ialah [1, 2, 4].

Langkah 1 & 2: Dapatkan data

 - Dapatkan ID tempat yang berkaitan dengan pengguna semasa
Pilih Yardid dari UserSyardsLink di mana userId = 101;
- Keputusan: [1, 2, 4]

-ID tempat yang dipilih yang dikemukakan oleh pengguna: [1, 3, 5]

Langkah 3: Analisis Perbandingan dan Perbezaan (contoh pseudocode)

 current_yard_ids = {1, 2, 4} # Hasil pertanyaan dari pangkalan data yang diserahkan_yard_ids = {1, 3, 5} # Hantar data dari borang yards_to_add = diserahkan_yard_ids - current_yard_ids # hasil: {3, 5}
yard_to_delete = current_yard_ids - Dihantar_yard_ids # hasil: {2, 4}

Langkah 4: Lakukan operasi pangkalan data

 Memulakan transaksi;

- Padam item yang tidak lagi dikaitkan Padam dari UserSyardsLink
Di mana userId = 101 dan Yardid dalam (2, 4); - sepadan dengan yard_to_delete

- Masukkan persatuan baru masuk ke UserSyardsLink (UserId, Yardid)
Nilai
    (101, 3), - sepadan dengan yard_to_add
    (101, 5);

Komit; - Jika semua operasi berjaya- rollback; - Sekiranya ralat berlaku

Amalan dan pertimbangan terbaik

1. Pengoptimuman Prestasi : Untuk sistem dengan sejumlah besar tempat atau pengguna, memuat semua tempat ke hujung depan sekaligus boleh menyebabkan masalah prestasi. Pertimbangkan untuk menggunakan penomboran, penapisan carian, atau pemuatan atas permintaan (seperti melalui Ajax) untuk mengoptimumkan pengalaman pengguna.
2. Keselamatan : Sentiasa gunakan pertanyaan parameter atau penyataan yang disediakan untuk melaksanakan operasi SQL untuk mencegah serangan suntikan SQL. Semua data yang dikemukakan oleh pengguna harus dianggap sebagai tidak dipercayai dan tertakluk kepada pengesahan dan sanitisasi yang ketat.
3. Pengalaman Pengguna :
   • Menyediakan status pemuatan dan maklum balas operasi yang jelas.
   • Jika bilangan tempat adalah besar, senarai kotak semak mungkin tidak sesuai, dan dropdown pelbagai pilihan atau pemilih tag dengan fungsi carian akan menjadi pilihan yang lebih baik.
   • Pastikan mekanisme pengendalian ralat teguh dan memberikan petunjuk jelas kepada pengguna apabila menyimpan gagal.
4. Menggunakan Rangka Kerja ORM : Rangka Kerja Pembangunan Web yang paling moden (seperti Django, Laravel, Spring Boot, dan lain-lain) Menyediakan alat pemetaan objek-relasi (ORM). ORM dapat memudahkan penyelenggaraan banyak hubungan. Biasanya anda hanya perlu mengendalikan objek model, dan rangka kerja secara automatik akan mengendalikan sisipan SQL, penghapusan dan pengurusan transaksi secara automatik. Ini sangat mengurangkan kerumitan pembangunan dan meningkatkan kebolehbacaan kod. Sebagai contoh, dalam banyak Orms, anda hanya memerlukan kod seperti user.yards.set ([yard_obj_1, yard_obj_3, yard_obj_5]) untuk menyelesaikan semua kemas kini yang berkaitan.
5. Operasi batch : Di peringkat SQL, masukkan dan padam operasi hendaklah dalam bentuk batch (seperti memasukkan ke dalam ... nilai (...), (...); atau padam ... di mana dalam (...);) bukannya gelung operasi tunggal untuk mengurangkan bilangan pangkalan data pusingan pangkalan data dan meningkatkan kecekapan.

Meringkaskan

Menguruskan banyak hubungan dalam UI memerlukan kerjasama rapat antara reka bentuk antara muka depan, pemprosesan logik back-end, dan operasi pangkalan data. Melalui jadual persatuan yang direka dengan teliti, kawalan multi-pilih depan intuitif, dan analisis perbandingan back-end data sedia ada dan dikemukakan, digabungkan dengan pemprosesan transaksi, kami dapat memastikan bahawa banyak hubungan banyak dikemas kini dengan tepat, cekap, dan selamat. Menggunakan rangka kerja ORM moden dapat memudahkan proses ini, membolehkan pemaju memberi tumpuan lebih kepada pelaksanaan logik perniagaan.

Atas ialah kandungan terperinci Menguruskan banyak hubungan di UI: Tutorial mengenai cara mengaitkan pengguna dengan tempat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!