Pengantar Menggunakan Thymeleaf di Musim Semi

1. Perkenalan

Thymeleaf adalah mesin template Java untuk memproses dan membuat HTML, XML, JavaScript, CSS, dan teks.

Pada artikel ini, kita akan membahas cara menggunakan Thymeleaf dengan Spring bersama dengan beberapa kasus penggunaan dasar di lapisan tampilan aplikasi MVC Spring.

Pustaka ini sangat dapat diperluas dan kemampuan templatnya yang alami memastikan templat dapat dibuat prototipe tanpa back-end - yang membuat pengembangan sangat cepat jika dibandingkan dengan mesin templat populer lainnya seperti JSP.

2. Mengintegrasikan Thymeleaf Dengan Spring

Pertama mari kita lihat konfigurasi yang diperlukan untuk berintegrasi dengan Spring. The thymeleaf-semi perpustakaan diperlukan untuk integrasi.

Tambahkan dependensi berikut ke file POM Maven Anda:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Perhatikan bahwa, untuk proyek Spring 4, perpustakaan thymeleaf-spring4 harus digunakan sebagai ganti thymeleaf-spring5 .

Kelas SpringTemplateEngine melakukan semua langkah konfigurasi. Anda dapat mengkonfigurasi kelas ini sebagai kacang di file konfigurasi Java:

@Bean @Description("Thymeleaf Template Resolver") public ServletContextTemplateResolver templateResolver() { ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(); templateResolver.setPrefix("/WEB-INF/views/"); templateResolver.setSuffix(".html"); templateResolver.setTemplateMode("HTML5"); return templateResolver; } @Bean @Description("Thymeleaf Template Engine") public SpringTemplateEngine templateEngine() { SpringTemplateEngine templateEngine = new SpringTemplateEngine(); templateEngine.setTemplateResolver(templateResolver()); templateEngine.setTemplateEngineMessageSource(messageSource()); return templateEngine; }

The templateResolver sifat kacang awalan dan akhiran menunjukkan lokasi dari halaman tampilan dalam webapp direktori dan ekstensi nama file mereka, masing-masing.

The ViewResolver interface dalam Spring MVC memetakan nama tampilan dikembalikan oleh controller untuk melihat objek yang sebenarnya. ThymeleafViewResolver mengimplementasikan antarmuka ViewResolver dan digunakan untuk menentukan tampilan Thymeleaf mana yang akan dirender, dengan diberi nama tampilan.

Langkah terakhir dalam integrasi adalah menambahkan ThymeleafViewResolver sebagai kacang:

@Bean @Description("Thymeleaf View Resolver") public ThymeleafViewResolver viewResolver() { ThymeleafViewResolver viewResolver = new ThymeleafViewResolver(); viewResolver.setTemplateEngine(templateEngine()); viewResolver.setOrder(1); return viewResolver; }

3. Thymeleaf di Spring Boot

Spring Boot menyediakan konfigurasi otomatis untuk Thymeleaf dengan menambahkan dependensi spring-boot-starter-thymeleaf :

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

Tidak diperlukan konfigurasi eksplisit. Secara default, file HTML harus ditempatkan di lokasi resource / template .

4. Menampilkan Nilai dari Sumber Pesan (File Properti)

The th: text =”# {key}” atribut tag dapat digunakan untuk nilai-nilai tampilan dari file properti. Untuk bekerja, file properti harus dikonfigurasi sebagai kacang messageSource :

@Bean @Description("Spring Message Resolver") public ResourceBundleMessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasename("messages"); return messageSource; }

Berikut adalah kode HTML Thymeleaf untuk menampilkan nilai yang terkait dengan kunci welcome.message :

5. Menampilkan Atribut Model

5.1. Atribut Sederhana

The th: text =”$ {AttributeName}” tag atribut dapat digunakan untuk menampilkan nilai atribut Model. Mari tambahkan atribut model dengan name serverTime di kelas controller:

model.addAttribute("serverTime", dateFormat.format(new Date()));

Kode HTML untuk menampilkan nilai atribut serverTime :

Current time is 

5.2. Atribut Koleksi

Jika atribut model adalah kumpulan objek, th: setiap atribut tag dapat digunakan untuk mengulanginya. Mari kita tentukan kelas model Student dengan dua field, id , dan name :

public class Student implements Serializable { private Integer id; private String name; // standard getters and setters }

Sekarang kita akan menambahkan daftar siswa sebagai atribut model di kelas pengontrol:

List students = new ArrayList(); // logic to build student data model.addAttribute("students", students);

Terakhir, kita dapat menggunakan kode template Thymeleaf untuk mengulang daftar siswa dan menampilkan semua nilai bidang:

6. Evaluasi Bersyarat

6.1. jika dan kecuali

The th: jika =”$ {kondisi}” atribut digunakan untuk menampilkan bagian dari pandangan jika kondisi terpenuhi. The th: kecuali =”$ {kondisi}” atribut digunakan untuk menampilkan bagian dari pandangan jika kondisi tidak terpenuhi.

Tambahkan bidang gender ke model Siswa :

public class Student implements Serializable { private Integer id; private String name; private Character gender; // standard getters and setters }

Misalkan bidang ini memiliki dua kemungkinan nilai (M atau F) untuk menunjukkan jenis kelamin siswa. Jika kami ingin menampilkan kata "Pria" atau "Wanita" sebagai ganti karakter tunggal, kami dapat melakukannya dengan menggunakan kode Timeleaf berikut:

6.2. saklar dan casing

The th: switch dan th: kasus atribut yang digunakan untuk menampilkan konten kondisional menggunakan struktur pernyataan switch.

Kode sebelumnya dapat ditulis ulang menggunakan atribut th: switch dan th: case :

7. Menangani Input Pengguna

Form input can be handled using the th:action=”@{url}” and th:object=”${object}” attributes. The th:action is used to provide the form action URL and th:object is used to specify an object to which the submitted form data will be bound. Individual fields are mapped using the th:field=”*{name}” attribute, where the name is the matching property of the object.

For the Student class, we can create an input form:


    

In the above code, /saveStudent is the form action URL and a student is the object that holds the form data submitted.

The StudentController class handles the form submission:

@Controller public class StudentController { @RequestMapping(value = "/saveStudent", method = RequestMethod.POST) public String saveStudent(@ModelAttribute Student student, BindingResult errors, Model model) { // logic to process input data } }

In the code above, the @RequestMapping annotation maps the controller method with URL provided in the form. The annotated method saveStudent() performs the required processing for the submitted form. The @ModelAttribute annotation binds the form fields to the student object.

8. Displaying Validation Errors

The #fields.hasErrors() function can be used to check if a field has any validation errors. The #fields.errors() function can be used to display errors for a particular field. The field name is the input parameter for both these functions.

HTML code to iterate and display the errors for each of the fields in the form:


    

Instead of field name the above functions accept the wild card character * or the constant all to indicate all fields. The th:each attribute is used to iterate the multiple errors that may be present for each of the fields.

The previous HTML code re-written using the wildcard *:


    

or using the constant all:


    

Similarly, global errors in Spring can be displayed using the global constant.

The HTML code to display global errors:


    

The th:errors attribute can also be used to display error messages. The previous code to display errors in the form can be re-written using th:errors attribute:


    

9. Using Conversions

The double bracket syntax {{}} is used to format data for display. This makes use of the formatters configured for that type of field in the conversionService bean of the context file.

The name field in the Student class is formatted:

The above code uses the NameFormatter class, configured by overriding the addFormatters() method from the WebMvcConfigurer interface. For this purpose, our @Configuration class overrides the WebMvcConfigurerAdapter class:

@Configuration public class WebMVCConfig extends WebMvcConfigurerAdapter { // ... @Override @Description("Custom Conversion Service") public void addFormatters(FormatterRegistry registry) { registry.addFormatter(new NameFormatter()); } }

The NameFormatter class implements the Spring Formatter interface.

The #conversions utilitas juga dapat digunakan untuk mengkonversi objek untuk display. Sintaks untuk fungsi utilitas adalah # conversion.convert (Object, Class) di mana Object diubah menjadi tipe Class .

Untuk menampilkan bidang persentase objek siswa dengan bagian pecahan dihapus:

10. Kesimpulan

Dalam tutorial ini, kita telah melihat bagaimana mengintegrasikan dan menggunakan Thymeleaf dalam aplikasi Spring MVC.

Kami juga telah melihat contoh bagaimana menampilkan bidang, menerima input, menampilkan kesalahan validasi, dan mengubah data untuk ditampilkan. Versi yang berfungsi dari kode yang ditunjukkan di artikel ini tersedia di repositori GitHub.