1. Gambaran keseluruhan
Dalam tutorial ini, kita akan menunjukkan cara mengakses objek Spring MVC dalam paparan Thymeleaf yang mengandungi kod JavaScript. Kami akan menggunakan mesin Spring Boot dan templat Thymeleaf dalam contoh kami, tetapi idea itu juga sesuai untuk mesin templat lain.
Kami akan menerangkan dua kes: ketika kod JavaScript disisipkan atau dalaman ke laman web yang dihasilkan oleh mesin, dan ketika ia berada di luar halaman - misalnya, dalam file JavaScript yang terpisah.
2. Persediaan
Mari kita anggap bahawa kita sudah mengkonfigurasi aplikasi web Spring Boot yang menggunakan mesin templat Thymeleaf. Jika tidak, anda mungkin menganggap tutorial ini berguna untuk bermula:
- Bootstrap a Simple Application - mengenai cara membuat aplikasi Spring Boot dari awal
- Spring MVC + Thymeleaf 3.0: Ciri Baru - mengenai cara menggunakan sintaks Thymeleaf
Selanjutnya, anggaplah bahawa aplikasi kita mempunyai pengawal yang sesuai dengan titik akhir / indeks yang membuat paparan dari templat bernama index.html . Templat ini mungkin merangkumi kod JavaScript luaran atau eksternal, katakan script.js .
Tujuan kami adalah untuk dapat mengakses parameter Spring MVC dari kod JavaScript (JS) tertanam atau luaran.
3. Akses Parameter
Pertama sekali, kita perlu membuat pemboleh ubah model yang ingin kita gunakan dari kod JS.
Di Spring MVC, terdapat pelbagai cara untuk melakukan ini. Mari gunakan pendekatan ModelAndView :
@RequestMapping("/index") public ModelAndView thymeleafView(Map model) { model.put("number", 1234); model.put("message", "Hello from Spring MVC"); return new ModelAndView("thymeleaf/index"); } Kami dapat mencari kemungkinan lain dalam tutorial kami mengenai Model , ModelMap , dan ModelView di Spring MVC.
4. Kod JS Terbenam
Kod JS terbenam tidak lain adalah bahagian dari file index.html yang terletak di dalamunsur. Kita boleh menyampaikan pemboleh ubah Spring MVC di sana dengan mudah:
var number = [[${number}]]; var message = "[[${message}]]"; Mesin templat Thymeleaf menggantikan setiap ungkapan dengan nilai yang tersedia dalam skop pelaksanaan semasa. Ini bermaksud bahawa mesin templat mengubah kod yang disebutkan di atas menjadi kod HTML berikut:
var number = 1234; var message = "Hello from Spring MVC!"; 5. Kod JS Luaran
Katakan bahawa kod JS luaran kami disertakan dalam fail index.html menggunakan yang samatag, di mana kita menentukan atribut src :
Sekarang, jika kita ingin menggunakan parameter Spring MVC dari script.js , kita harus:
- tentukan pemboleh ubah JS dalam kod JS tertanam seperti yang kita lakukan di bahagian sebelumnya
- mengakses pemboleh ubah ini dari fail script.js
Perhatikan bahawa kod JS luaran harus dipanggil setelah inisialisasi pemboleh ubah kod JS tertanam .
Ini dapat dicapai dengan dua cara: dengan menentukan urutan pelaksanaan kod JS atau dengan menggunakan pelaksanaan kod JS asinkron.
5.1. Nyatakan Perintah Pelaksanaan
Kita boleh melakukan ini dengan menyatakan kod JS luaran setelah tertanam dalam index.html :
var number = [[${number}]]; var message = "[[${message}]]"; 5.2. Pelaksanaan Kod Asinkron
Dalam kes ini, urutan di mana kita menyatakan kod JS luaran dan tertanam dalam index.html tidak penting, tetapi kita harus meletakkan kod dari script.js ke dalam pembungkus biasa yang dimuat di halaman:
window.onload = function() { // JS code };Walaupun kesederhanaan kod ini, amalan yang paling biasa adalah menggunakan jQuery . Kami memasukkan perpustakaan ini sebagai yang pertamaelemen dalam fail index.html :
... ... Sekarang, kita boleh meletakkan kod JS di dalam pembungkus jQuery berikut :
$(function () { // JS code });Dengan pembungkus ini, kita dapat menjamin bahawa kod JS dijalankan hanya apabila seluruh isi halaman, dan oleh itu semua kod JS tertanam yang lain, dimuat sepenuhnya.
6. Sedikit Penjelasan
Pada Spring MVC, mesin templat Thymeleaf hanya menguraikan fail templat ( index.html dalam kes kami) dan mengubahnya menjadi fail HTML. Fail ini, pada gilirannya, mungkin termasuk rujukan ke sumber lain yang berada di luar ruang lingkup mesin templat. Penyemak imbas pengguna inilah yang menguraikan sumber tersebut dan membuat paparan HTML.
Oleh itu, sumber daya tersebut tidak dihurai oleh mesin templat, dan kami mungkin memasukkan pemboleh ubah yang ditentukan dalam pengawal hanya ke dalam kod JS tertanam yang kemudian tersedia untuk kod JS luaran.
7. Kesimpulannya
Dalam tutorial ini, kami telah mempelajari cara mengakses parameter Spring MVC di dalam kod JavaScript.
Seperti biasa, contoh kod lengkap terdapat di repositori GitHub kami.