Tambahkan CSS dan JS ke Thymeleaf

1. Perkenalan

Dalam tutorial singkat ini, kita akan belajar bagaimana menggunakan CSS dan JavaScript di template Thymeleaf kita.

Pertama, kita akan membahas struktur folder yang diharapkan sehingga kita tahu di mana harus meletakkan file kita. Setelah itu, kita akan melihat apa yang perlu kita lakukan untuk mengakses file-file tersebut dari template Thymeleaf.

Kami akan mulai dengan menambahkan gaya CSS ke halaman kami dan kemudian melanjutkan ke menambahkan beberapa fungsi JavaScript.

2. Penyiapan

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

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

3. Contoh Dasar

3.1. Struktur Direktori

Sekarang, sebagai pengingat, Thymeleaf adalah pustaka template yang dapat dengan mudah diintegrasikan dengan aplikasi Spring Boot. Secara default, Thymeleaf mengharapkan kita untuk menempatkan template tersebut di folder src / main / resources / templates . Kita bisa membuat subfolder, jadi kita akan menggunakan subfolder yang disebut cssandjs untuk contoh ini.

Untuk file CSS dan JavaScript, direktori defaultnya adalah src / main / resources / static . Mari buat folder static / styles / cssandjs dan static / js / cssandjs untuk file CSS dan JS kita.

3.2. Menambahkan CSS

Mari buat file CSS sederhana bernama main.css di folder static / styles / cssandjs dan tentukan beberapa gaya dasar:

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

Selanjutnya, mari buat template Thymeleaf bernama styledPage.html di folder templates / cssandjs 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 memuat stylesheet menggunakan tag tautan dengan atribut th: href khusus Thymeleaf . Jika kita telah menggunakan struktur direktori yang diharapkan, kita hanya perlu menentukan jalur di bawah src / main / resources / static . Dalam kasus ini, itu /styles/cssandjs/main.css . The @ {/ gaya / cssandjs / main.css} sintaks adalah cara Thymeleaf dalam melakukan URL menghubungkan.

Jika kita menjalankan aplikasi kita, kita akan melihat bahwa gaya kita telah diterapkan:

3.3. Menggunakan JavaScript

Selanjutnya, kita akan belajar cara menambahkan file JavaScript ke halaman Thymeleaf kita.

Mari kita mulai dengan menambahkan beberapa JavaScript ke file di src / main / resources / static / js / cssandjs / actions.js :

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

Kemudian kita kembali ke template Thymeleaf kita dan menambahkan file tag yang mengarah ke file JavaScript kami:

Sekarang, kami memanggil metode kami dari template kami:

Show Alert

Ketika kita menjalankan aplikasi kita dan mengklik tombol Show Alert , kita akan melihat jendela alert.

Sebelum kita menyelesaikan semuanya, mari kita buat contoh ini sedikit dengan mempelajari cara menggunakan data dari pengontrol Spring di JavaScript kita.

Mari kita mulai dengan memodifikasi pengontrol kita untuk memberi nama pada halaman kita:

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

Selanjutnya, mari tambahkan fungsi ke file actions.js kita untuk menggunakan nama ini dalam peringatan:

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

Finally, in order to call our function with the data from our controller, we need to use script inlining. So let's place the name value in a local JavaScript variable:

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

By doing this, we've created a local JavaScript variable that contains the name model value from our control that we can then use in our JavaScript on the rest of the page.

Now that we've done that, we can call our JavaScript function using the nameJs variable:

Show Name

4. Conclusion

In this short tutorial, we learned how to apply CSS styling and external JavaScript functionality to our Thymeleaf pages. We started with the recommended directory structure and worked our way up to calling JavaScript with data provided in our Spring controller class.

Seperti biasa, kode tersedia di GitHub.