Spring에서의 Thymeleaf 사용 소개

1. 소개

Thymeleaf는 HTML, XML, JavaScript, CSS 및 텍스트를 처리하고 생성하기위한 Java 템플릿 엔진입니다.

이 기사에서는 Spring MVC 애플리케이션의 뷰 레이어에서 몇 가지 기본 사용 사례와 함께 Spring 과 함께 Thymeleaf를 사용하는 방법에 대해 설명 합니다.

라이브러리는 매우 확장 가능하며 자연스러운 템플릿 기능을 통해 템플릿을 백엔드없이 프로토 타입화할 수 있으므로 JSP와 같은 다른 인기있는 템플릿 엔진과 비교할 때 개발 속도가 매우 빠릅니다.

2. Thymeleaf를 Spring과 통합

먼저 Spring과 통합하는 데 필요한 구성을 살펴 보겠습니다. thymeleaf 스프링 라이브러리는 통합을 위해 필요합니다.

Maven POM 파일에 다음 종속성을 추가하십시오.

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

스프링 4 프로젝트는, 그 주 thymeleaf - spring4의 라이브러리는 대신 사용해야합니다 thymeleaf-spring5 .

SpringTemplateEngine의 클래스는 구성 단계를 모두 수행합니다. Java 구성 파일에서이 클래스를 Bean으로 구성 할 수 있습니다.

@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; }

templateResolver의 빈 속성 접두사접미사 하여 내보기 페이지의 위치 표시 웹 애플리케이션 각각 디렉토리와 그 파일 이름 확장자를.

Spring MVC 의 ViewResolver 인터페이스는 컨트롤러가 반환 한 뷰 이름을 실제 뷰 객체에 매핑합니다. ThymeleafViewResolverViewResolver 인터페이스를 구현 하며 뷰 이름이 주어지면 렌더링 할 Thymeleaf 뷰를 결정하는 데 사용됩니다.

통합의 마지막 단계는 ThymeleafViewResolver 를 빈으로 추가하는 것입니다 .

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

3. Spring Boot의 Thymeleaf

Spring Bootspring-boot-starter-thymeleaf 종속성 을 추가하여 Thymeleaf 에 대한 자동 구성을 제공합니다 .

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

명시적인 구성이 필요하지 않습니다. 기본적으로 HTML 파일은 리소스 / 템플릿 위치 에 있어야합니다 .

4. 메시지 소스 (등록 정보 파일)의 값 표시

일 : 텍스트 = "# {키}" 태그의 속성은 속성 파일에서 값을 표시하는 데 사용할 수 있습니다. 이 작업을 수행하려면 특성 파일을 messageSource Bean 으로 구성해야합니다 .

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

다음은 welcome.message 키와 관련된 값을 표시하는 Thymeleaf HTML 코드입니다 .

5. 모델 속성 표시

5.1. 간단한 속성

일 : 텍스트 = "$ {에 attributename}" 태그의 속성은 모델 속성의 값을 표시하는 데 사용할 수 있습니다. 컨트롤러 클래스에 이름이 serverTime 인 모델 속성을 추가해 보겠습니다 .

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

serverTime 속성 의 값을 표시하는 HTML 코드 :

Current time is 

5.2. 컬렉션 속성

모델 속성이 객체 모음 인 경우 th : ​​each 태그 속성을 사용하여 반복 할 수 있습니다. 두 개의 필드, idname 으로 Student 모델 클래스를 정의 해 보겠습니다 .

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

이제 컨트롤러 클래스의 모델 속성으로 학생 목록을 추가합니다.

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

마지막으로 Thymeleaf 템플릿 코드를 사용하여 학생 목록을 반복하고 모든 필드 값을 표시 할 수 있습니다.

6. 조건부 평가

6.1. 경우하지 않는 한

번째 = "$ {} 조건"만일 속성이 조건이 충족되는 경우 도면의 단면을 표시하는 데 사용된다. 일 : = "$ {조건}"하지 않는 속성이 조건이 충족되지 않은 경우 뷰의 섹션을 표시하는 데 사용됩니다.

학생 모델에 성별 필드를 추가합니다 .

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

이 필드에 학생의 성별을 나타내는 두 가지 가능한 값 (M 또는 F)이 있다고 가정합니다. 단일 문자 대신 "남성"또는 "여성"이라는 단어를 표시하려면 다음 Thymeleaf 코드를 사용하여이를 수행 할 수 있습니다.

6.2. 스위치케이스

일 : 스위치일 : 경우 속성은 조건부로 switch 문 구조를 사용하여 콘텐츠를 표시하는 데 사용됩니다.

th : ​​switchth : ​​case 속성을 사용하여 이전 코드를 다시 작성할 수 있습니다 .

7. 사용자 입력 처리

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.

#conversions의 유틸리티는 표시 객체를 변환 할 수 있습니다. 유틸리티 함수의 구문은 # conversions.convert (Object, Class) 이며 여기서 ObjectClass 유형으로 변환됩니다 .

분수 부분이 제거 된 학생 개체 백분율 필드 를 표시하려면 :

10. 결론

이 튜토리얼에서는 Spring MVC 애플리케이션에서 Thymeleaf를 통합하고 사용하는 방법을 보았습니다.

또한 필드를 표시하고, 입력을 받아들이고, 유효성 검사 오류를 표시하고, 표시 할 데이터를 변환하는 방법에 대한 예제도 보았습니다. 이 문서에 표시된 코드의 작동 버전은 GitHub 저장소에서 사용할 수 있습니다.