Tambahkan CSS dan JS ke Thymeleaf

1. Pengenalan

Dalam tutorial ringkas ini, kita akan belajar bagaimana menggunakan CSS dan JavaScript di templat Thymeleaf kami.

Pertama, kita akan melihat struktur folder yang diharapkan supaya kita tahu di mana meletakkan fail kita. Selepas itu, kita akan melihat apa yang perlu kita lakukan untuk mengakses fail tersebut dari templat Thymeleaf.

Kami akan memulakan dengan menambahkan gaya CSS ke halaman kami dan kemudian beralih ke menambahkan beberapa fungsi JavaScript.

2. Persediaan

Untuk menggunakan Thymeleaf dalam aplikasi kami, mari tambahkan Spring Boot Starter untuk Thymeleaf ke konfigurasi Maven kami:

 org.springframework.boot spring-boot-starter-thymeleaf 2.2.6.RELEASE 

3. Contoh Asas

3.1. Struktur Direktori

Kini, sebagai peringatan, Thymeleaf adalah perpustakaan templat yang dapat disatukan dengan mudah dengan aplikasi Spring Boot. Secara lalai, Thymeleaf mengharapkan kami meletakkan templat tersebut dalam folder src / main / resources / templat . Kita boleh membuat subfolder, jadi kita akan menggunakan subfolder yang disebut cssandjs untuk contoh ini.

Untuk fail CSS dan JavaScript, direktori lalai adalah src / main / resources / static . Mari buat folder statik / gaya / cssandjs dan statik / js / cssandjs untuk fail CSS dan JS kami.

3.2. Menambah CSS

Mari buat fail CSS ringkas bernama main.css dalam folder static / gaya / cssandjs kami dan tentukan beberapa gaya asas:

h2 { font-family: sans-serif; font-size: 1.5em; text-transform: uppercase; } strong { font-weight: 700; background-color: yellow; } p { font-family: sans-serif; }

Seterusnya, mari buat templat Thymeleaf bernama styledPage.html di folder templat / cssandjs kami untuk menggunakan gaya ini:

    Add CSS and JS to Thymeleaf    

Carefully Styled Heading

This is text on which we want to apply very special styling.

Kami memuatkan helaian gaya menggunakan tag pautan dengan atribut th: href khas Thymeleaf . Sekiranya kita telah menggunakan struktur direktori yang diharapkan, kita hanya perlu menentukan jalan di bawah src / main / resources / static . Dalam kes ini, itu adalah /styles/cssandjs/main.css . The @ {/ gaya / cssandjs / main.css} sintaks adalah cara Thymeleaf yang menjalankan URL menghubungkan.

Sekiranya kami menjalankan aplikasi kami, kami akan melihat bahawa gaya kami telah diterapkan:

3.3. Menggunakan JavaScript

Seterusnya, kita akan belajar bagaimana menambahkan fail JavaScript ke halaman Thymeleaf kami.

Mari mulakan dengan menambahkan beberapa JavaScript ke fail dalam src / main / resources / static / js / cssandjs / actions.js :

function showAlert() { alert("The button was clicked!"); }

Kemudian kami kembali ke templat Thymeleaf kami dan menambah a teg yang menunjukkan fail JavaScript kami:

Sekarang, kami memanggil kaedah kami dari templat kami:

Show Alert

Apabila kita menjalankan aplikasi kita dan mengklik butang Show Alert , kita akan melihat tetingkap amaran.

Sebelum kita menyelesaikan semuanya, mari kita bina contoh ini sedikit dengan belajar bagaimana menggunakan data dari pengawal Spring kami dalam JavaScript kami.

Mari mulakan dengan mengubah pengawal kami untuk memberikan nama ke halaman kami:

@GetMapping("/styled-page") public String getStyledPage(Model model) { model.addAttribute("name", "Baeldung Reader"); return "cssandjs/styledPage"; }

Seterusnya, mari kita tambahkan fungsi ke file actions.js kami untuk menggunakan nama ini dalam amaran:

function showName(name) { alert("Here's the name: " + name); }

Akhirnya, untuk memanggil fungsi kita dengan data dari pengawal kita, kita perlu menggunakan skrip sebaris. Oleh itu, mari letakkan nilai nama dalam pemboleh ubah JavaScript tempatan:

 var nameJs = /*[[${name}]]*/; 

Dengan melakukan ini, kami telah membuat pemboleh ubah JavaScript tempatan yang mengandungi nilai model nama dari kawalan kami yang kemudian dapat kami gunakan dalam JavaScript kami di seluruh halaman.

Sekarang setelah kami melakukannya, kami dapat memanggil fungsi JavaScript kami menggunakan pemboleh ubah nameJs :

Show Name

4. Kesimpulan

Dalam tutorial ringkas ini, kami belajar bagaimana menerapkan gaya CSS dan fungsi JavaScript luaran ke halaman Thymeleaf kami. Kami bermula dengan struktur direktori yang disyorkan dan berusaha untuk memanggil JavaScript dengan data yang disediakan di kelas pengawal Spring kami.

Seperti biasa, kodnya tersedia di GitHub.