1. 소개

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

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

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

2. Thymeleaf를 Spring과 통합

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

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

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

스프링 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 인터페이스는 컨트롤러가 반환 한 뷰 이름을 실제 뷰 객체에 매핑합니다. ThymeleafViewResolver 는 ViewResolver 인터페이스를 구현하고 뷰 이름이 주어지면 렌더링 할 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 Boot 는 spring-boot-starter-thymeleaf 의존성 을 추가하여 Thymeleaf 에 대한 자동 구성을 제공합니다 .

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.3.3.RELEASE</version>
</dependency>

명시적인 구성이 필요하지 않습니다. 기본적으로 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 코드입니다 .

<span th:text="#{welcome.message}" />

5. 모델 속성 표시

5.1. 간단한 속성

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

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

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

Current time is <span th:text="${serverTime}" />

5.2. 컬렉션 속성

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

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

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

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

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

<tbody>
    <tr th:each="student: ${students}">
        <td th:text="${student.id}" />
        <td th:text="${student.name}" />
    </tr>
</tbody>

6. 조건부 평가

6.1. 경우 와 하지 않는 한

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

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

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

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

<td>
    <span th:if="${student.gender} == 'M'" th:text="Male" /> 
    <span th:unless="${student.gender} == 'M'" th:text="Female" />
</td>

6.2. 스위치 및 케이스

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

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

<td th:switch="${student.gender}">
    <span th:case="'M'" th:text="Male" /> 
    <span th:case="'F'" th:text="Female" />
</td>

7. 사용자 입력 처리

양식 입력은 th : ​​action =”@ {url}” 및 th : ​​object =”$ {object}” 속성을 사용하여 처리 할 수 ​​있습니다 . 일 : 액션은 양식 조치 URL을 제공하는 데 사용되며, 일 : 객체는 제출 된 폼 데이터가 바인딩 될 수있는 객체를 지정하는 데 사용됩니다. 개별 필드는 th : ​​field =”* {name}” 속성을 사용하여 매핑됩니다. 여기서 이름 은 개체의 일치하는 속성입니다.

를 들어 학생 클래스, 우리는 입력 양식을 만들 수 있습니다 :

<form action="#" th:action="@{/saveStudent}" th:object="${student}" method="post">
    <table border="1">
        <tr>
            <td><label th:text="#{msg.id}" /></td>
            <td><input type="number" th:field="*{id}" /></td>
        </tr>
        <tr>
            <td><label th:text="#{msg.name}" /></td>
            <td><input type="text" th:field="*{name}" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

위 코드에서 / saveStudent 는 양식 작업 URL이고 student 는 제출 된 양식 데이터를 보유하는 개체입니다.

StudentController의 클래스는 양식 제출을 처리합니다 :

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

위 코드에서 @RequestMapping 어노테이션은 양식에 제공된 URL로 컨트롤러 메서드를 매핑합니다. 어노테이션이있는 메소드 saveStudent () 는 제출 된 양식에 필요한 처리를 수행합니다. @ModelAttribute의 어노테이션은에 양식 필드 결합 학생 개체를.

8. 유효성 검사 오류 표시

#의 fields.hasErrors () 함수는 필드 유효성 검사 오류가 있는지 확인하는 데 사용할 수 있습니다. #의 fields.errors () 함수는 특정 필드에 디스플레이 오류를 이용할 수있다. 필드 이름은이 두 기능에 대한 입력 매개 변수입니다.

양식의 각 필드에 대한 오류를 반복하고 표시하는 HTML 코드 :

<ul>
    <li th:each="err : ${#fields.errors('id')}" th:text="${err}" />
    <li th:each="err : ${#fields.errors('name')}" th:text="${err}" />
</ul>

필드 이름 대신 위의 함수는 와일드 카드 문자 * 또는 상수 all 을 허용하여 모든 필드를 나타냅니다. 번째의 각 특성은 반복 필드들 각각에 대해 존재할 수있는 다수의 오차가 이용된다.

이전 HTML 코드는 와일드 카드 * 사용하여 다시 작성되었습니다 .

<ul>
    <li th:each="err : ${#fields.errors('*')}" th:text="${err}" />
</ul>

또는 상수 all 사용 :

<ul>
    <li th:each="err : ${#fields.errors('all')}" th:text="${err}" />
</ul>

마찬가지로 Spring의 전역 오류는 전역 상수를 사용하여 표시 할 수 있습니다 .

전역 오류를 표시하는 HTML 코드 :

<ul>
    <li th:each="err : ${#fields.errors('global')}" th:text="${err}" />
</ul>

일 : 오류의 속성은 오류 메시지를 표시 할 수 있습니다. 양식에 오류를 표시하는 이전 코드는 th : ​​errors 속성을 사용하여 다시 작성할 수 있습니다 .

<ul>
    <li th:errors="*{id}" />
    <li th:errors="*{name}" />
</ul>

9. 변환 사용

이중 대괄호 구문 {{}} 은 표시 할 데이터의 형식을 지정하는 데 사용됩니다. 이는 컨텍스트 파일 의 conversionService 빈 에서 해당 유형의 필드에 대해 구성된 포맷터 를 사용 합니다.

학생 클래스 의 이름 필드 형식은 다음과 같습니다.

<tr th:each="student: ${students}">
    <td th:text="${{student.name}}" />
</tr>

위의 코드는 WebMvcConfigurer 인터페이스 에서 addFormatters () 메서드를 재정 의하여 구성된 NameFormatter 클래스를 사용합니다 . 이를 위해 @Configuration 클래스가 WebMvcConfigurerAdapter 클래스를 재정의합니다 .

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

NameFormatter의 클래스는 Spring 구현 포맷터 인터페이스를.

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

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

<tr th:each="student: ${students}">
    <td th:text="${#conversions.convert(student.percentage, 'Integer')}" />
</tr>

10. 결론

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

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