1. Pengenalan
Thymeleaf adalah mesin templat Java untuk memproses dan membuat HTML, XML, JavaScript, CSS, dan teks.
Dalam artikel ini, kita akan membincangkan cara menggunakan Thymeleaf dengan Spring bersama dengan beberapa kes penggunaan asas pada lapisan pandangan aplikasi Spring MVC.
Perpustakaan ini sangat luas dan kemampuan templat semula jadi memastikan templat dapat diprototip tanpa back-end - yang menjadikan pengembangan sangat cepat jika dibandingkan dengan mesin templat popular lain seperti JSP.
2. Mengintegrasikan Thymeleaf Dengan Spring
Pertama, mari kita lihat konfigurasi yang diperlukan untuk disatukan dengan Spring. The thymeleaf-spring perpustakaan diperlukan untuk integrasi.
Tambahkan kebergantungan berikut ke fail Maven POM anda:
org.thymeleaf thymeleaf 3.0.11.RELEASE org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE Perhatikan bahawa, untuk projek Spring 4, perpustakaan thymeleaf-spring4 mesti digunakan dan bukannya thymeleaf-spring5 .
The SpringTemplateEngine kelas menjalankan semua langkah-langkah konfigurasi. Anda boleh mengkonfigurasi kelas ini sebagai kacang dalam fail 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 yang melihat laman dalam webapp direktori dan sambungan nama fail mereka, masing-masing.
Antara muka ViewResolver pada Spring MVC memetakan nama pandangan yang dikembalikan oleh pengawal ke objek pandangan sebenar. ThymeleafViewResolver menerapkan antara muka ViewResolver dan digunakan untuk menentukan paparan Thymeleaf mana yang akan diberikan, diberi nama pandangan.
Langkah terakhir dalam penyatuan adalah dengan 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 automatik untuk Thymeleaf dengan menambahkan pergantungan spring-boot-starter-thymeleaf :
org.springframework.boot spring-boot-starter-thymeleaf 2.3.3.RELEASE Tidak perlu konfigurasi eksplisit. Secara lalai, fail HTML harus diletakkan di lokasi sumber / templat .
4. Menampilkan Nilai dari Sumber Mesej (Fail Properti)
Yang ke: Teks = "# {utama}" atribut tag boleh digunakan untuk nilai paparan dari fail harta. Untuk berfungsi, fail harta tanah mesti dikonfigurasikan sebagai messageSource bean:
@Bean @Description("Spring Message Resolver") public ResourceBundleMessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasename("messages"); return messageSource; }Berikut adalah kod Thymeleaf HTML untuk memaparkan nilai yang berkaitan dengan kunci welcome.message :
5. Mempamerkan Atribut Model
5.1. Atribut Sederhana
Yang ke: Teks = "$ {NamaAtribut}" atribut tag boleh digunakan untuk memaparkan nilai atribut model. Mari tambahkan atribut model dengan nama serverTime di kelas pengawal:
model.addAttribute("serverTime", dateFormat.format(new Date()));Kod HTML untuk memaparkan nilai atribut serverTime :
Current time is 5.2. Atribut Pengumpulan
Jika atribut model adalah kumpulan objek, atribut : th: setiap tag dapat digunakan untuk mengulanginya. Mari tentukan kelas model Pelajar dengan dua bidang, id , dan nama :
public class Student implements Serializable { private Integer id; private String name; // standard getters and setters }Sekarang kita akan menambahkan senarai pelajar sebagai atribut model di kelas pengawal:
List students = new ArrayList(); // logic to build student data model.addAttribute("students", students);Akhirnya, kita dapat menggunakan kod templat Thymeleaf untuk mengulangi senarai pelajar dan memaparkan semua nilai bidang:
6. Penilaian Bersyarat
6.1. sekiranya dan kecuali
Yang ke: jika = "$ {keadaan}" atribut digunakan untuk memaparkan bahagian berpendapat jika keadaan ini dipenuhi. Yang ke: kecuali = "$ {keadaan}" atribut digunakan untuk memaparkan bahagian berpendapat jika keadaan ini tidak dipenuhi.
Tambahkan bidang jantina pada model Pelajar :
public class Student implements Serializable { private Integer id; private String name; private Character gender; // standard getters and setters }Katakan bidang ini mempunyai dua nilai yang mungkin (M atau F) untuk menunjukkan jantina pelajar. Sekiranya kita ingin memaparkan kata-kata "Lelaki" atau "Perempuan" dan bukannya watak tunggal, kita dapat melakukannya dengan menggunakan kod Thymeleaf berikut:
6.2. suis dan kes
Yang ke: suis dan th: kes sifat-sifat yang digunakan untuk memaparkan kandungan bersyarat menggunakan struktur kenyataan suis.
Kod sebelumnya boleh ditulis semula menggunakan atribut th: switch dan th: case :
7. Mengendalikan 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 utiliti juga boleh digunakan untuk menukar objek untuk paparan. Sintaks untuk fungsi utiliti adalah # konversi.convert (Objek, Kelas) di mana Objek ditukar menjadi jenis Kelas .
Untuk memaparkan bidang peratusan objek pelajar dengan bahagian pecahan dikeluarkan:
10. Kesimpulannya
Dalam tutorial ini, kita telah melihat cara mengintegrasikan dan menggunakan Thymeleaf dalam aplikasi Spring MVC.
Kami juga telah melihat contoh bagaimana menampilkan bidang, menerima input, kesalahan pengesahan paparan, dan mengubah data untuk ditampilkan. Versi berfungsi dari kod yang ditunjukkan dalam artikel ini terdapat di repositori GitHub.