1. 소개

Thymeleaf 는 HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리하고 생성하기위한 Java 템플릿 엔진입니다. Thymeleaf 및 Spring에 대한 소개는 이 글을 참조하십시오 .

이 기사에서는 Thymeleaf 애플리케이션을 사용하는 Spring MVC에서 Thymeleaf 3.0의 새로운 기능에 대해 설명합니다. 버전 3에는 새로운 기능과 많은 개선 사항이 포함되어 있습니다. 좀 더 구체적으로 말하자면 자연 처리 및 자바 스크립트 인라인에 대한 주제를 다룰 것입니다.

Thymeleaf 3.0에는 각각 일반, JavaScript 및 CSS 템플릿을 처리하는 데 사용되는 TEXT , JAVASCRIPT 및 CSS의 세 가지 새로운 텍스트 템플릿 모드가 포함되어 있습니다.

2. Maven 의존성

먼저 Thymeleaf를 Spring과 통합하는 데 필요한 구성을 살펴 보겠습니다. thymeleaf-spring 라이브러리는 의존성에 필요합니다.

<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 . 최신 버전의 의존성은 여기 에서 찾을 수 있습니다 .

3. Java Thymeleaf 구성

먼저 새 템플릿 엔진,보기 및 템플릿 확인자를 구성해야합니다. 이를 위해 생성 된 Java 구성 클래스를 업데이트해야합니다.

이를 위해 여기 에 생성 된 Java 구성 클래스를 업데이트해야합니다 . 새로운 유형의 리졸버 외에도 템플릿은 Spring 인터페이스 ApplicationContextAware를 구현하고 있습니다 .

@Configuration
@EnableWebMvc
@ComponentScan({ "com.baeldung.thymeleaf" })
public class WebMVCConfig implements WebMvcConfigurer, ApplicationContextAware {

    private ApplicationContext applicationContext;

    // Java setter

    @Bean
    public ViewResolver htmlViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
        resolver.setContentType("text/html");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("*.html"));
        return resolver;
    }
    
    @Bean
    public ViewResolver javascriptViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
        resolver.setContentType("application/javascript");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("*.js"));
        return resolver;
    }
    
    @Bean
    public ViewResolver plainViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(plainTemplateResolver()));
        resolver.setContentType("text/plain");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("*.txt"));
        return resolver;
    }
}

위에서 살펴본 것처럼 HTML 뷰용, 자바 스크립트 파일 용, 일반 텍스트 파일 용의 세 가지 뷰 리졸버를 만들었습니다. Thymeleaf는 각각 .html , .js 및 .txt 파일 이름 확장자를 확인하여 구분합니다 .

뷰 이름이있는 필수 String [] 배열 을 만드는 array () 메서드를 사용하기 위해 정적 ArrayUtil 클래스 도 만들었습니다 .

이 클래스의 다음 부분에서는 템플릿 엔진을 구성해야합니다.

private ISpringTemplateEngine templateEngine(ITemplateResolver templateResolver) {
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

마지막으로 세 개의 별도 템플릿 리졸버를 만들어야합니다.

private ITemplateResolver htmlTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/views/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.HTML);
    return resolver;
}
    
private ITemplateResolver javascriptTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/js/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
    return resolver;
}
    
private ITemplateResolver plainTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/txt/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.TEXT);
    return resolver;
}

테스트를 위해 캐시되지 않은 템플릿을 사용하는 것이 더 낫기 때문에 setCacheable (false) 메서드 를 사용하는 것이 좋습니다 .

자바 스크립트 템플릿은 / WEB-INF / js / 폴더에, 일반 텍스트 파일은 / WEB-INF / txt / 폴더에 저장되며, 마지막으로 HTML 파일의 경로는 / WEB-INF / html 입니다.

4. 스프링 컨트롤러 구성

새로운 구성을 테스트하기 위해 다음과 같은 Spring 컨트롤러를 만들었습니다.

@Controller
public class InliningController {

    @RequestMapping(value = "/html", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("title", "Baeldung");
        model.addAttribute("description", "<strong>Thymeleaf</strong> tutorial");
        return "inliningExample.html";
    }
    
    @RequestMapping(value = "/js", method = RequestMethod.GET)
    public String getExampleJS(Model model) {
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentCheck.js";
    }
    
    @RequestMapping(value = "/plain", method = RequestMethod.GET)
    public String getExamplePlain(Model model) {
        model.addAttribute("username", SecurityContextHolder.getContext()
          .getAuthentication().getName());
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentsList.txt";
    }
}

HTML 파일 예제에서는 HTML 태그를 이스케이프하는 것과 사용하지 않고 새로운 인라인 기능을 사용하는 방법을 보여줍니다.

JS 예제의 경우 학생 정보가 포함 된 js 파일을로드하는 AJAX 요청을 생성합니다. 이 기사의 StudentUtils 클래스 내에서 간단한 buildStudents () 메서드를 사용하고 있습니다.

마지막으로 일반 텍스트 예제에서는 학생 정보를 텍스트 파일로 표시합니다. 일반 텍스트 템플릿 모드를 사용하는 일반적인 예는 일반 텍스트 전자 메일을 보내는 데 사용할 수 있습니다.

추가 기능으로 SecurityContextHolder 를 사용하여 로깅 된 사용자 이름을 얻습니다.

5. Html / Js / Text 예제 파일

이 사용방법(예제)의 마지막 부분은 세 가지 유형의 파일을 만들고 새로운 Thymeleaf 기능의 사용을 테스트하는 것입니다. HTML 파일부터 시작하겠습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Inlining example</title>
</head>
<body>
    <p>Title of tutorial: [[${title}]]</p>
    <p>Description: [(${description})]</p>
</body>
</html>

이 파일에서는 두 가지 접근 방식을 사용합니다. 제목을 표시하기 위해 이스케이프 구문을 사용하여 모든 HTML 태그를 제거하여 텍스트 만 표시합니다. 설명의 경우 HTML 태그를 유지하기 위해 이스케이프 처리되지 않은 구문을 사용합니다. 최종 결과는 다음과 같습니다.

<p>Title of tutorial: Baeldung</p>
<p>Description: <strong>Thymeleaf</strong> tutorial</p>

물론 Thymeleaf라는 단어를 굵은 스타일로 표시하여 브라우저에서 구문 분석합니다.

다음으로 js 템플릿 기능을 테스트합니다.

var count = [[${students.size()}]];
alert("Number of students in group: " + count);

JAVASCRIPT 템플릿 모드의 속성은 JavaScript가 이스케이프되지 않습니다. js 경고가 생성됩니다. listStudents.html 파일에서 jQuery AJAX를 사용하여이 경고를로드합니다.

<script>
    $(document).ready(function() {
        $.ajax({
            url : "/spring-thymeleaf/js",
            });
        });
</script>

테스트하려는 마지막 기능은 아니지만 일반 텍스트 파일 생성입니다. 다음 내용으로 studentsList.txt 파일을 만들었습니다.

Dear [(${username})],

This is the list of our students:
[# th:each="s : ${students}"]
   - [(${s.name})]. ID: [(${s.id})]
[/]
Thanks,
The Baeldung University

마크 업 템플릿 모드와 마찬가지로 표준 언어에는 처리 가능한 요소 ( [#…]) 와 처리 가능한 속성 집합 ( th : ​​text, th : utext, th : if, th : unless, th : each) 만 포함됩니다. 등). 결과는 섹션 3의 끝에서 언급했듯이 이메일에 사용할 수있는 텍스트 파일이됩니다.

테스트하는 방법? 우리의 제안은 먼저 브라우저로 플레이 한 다음 기존 JUnit 테스트도 확인하는 것입니다.

6.  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 파일은 리소스 / 템플릿  위치 에 있어야합니다 .

7. 결론

이 기사에서는 버전 3.0에 중점을두고 Thymeleaf 프레임 워크에 구현 된 새로운 기능에 대해 논의했습니다.

이 예제의 전체 구현은 GitHub 프로젝트 에서 찾을 수 있습니다. 이것은 모든 최신 인터넷 브라우저에서 쉽게 테스트 할 수있는 Eclipse 기반 프로젝트입니다.

마지막으로, 프로젝트를 버전 2에서이 최신 버전으로 마이그레이션 할 계획이라면 여기에서 마이그레이션 사용방법(예제)를 확인 하세요. 기존 Thymeleaf 템플릿은 Thymeleaf 3.0과 거의 100 % 호환되므로 구성에서 몇 가지 수정 만 수행하면됩니다.