Thymeleaf is a template engine for rendering XML/XHTML/HTML5 content, similar to JSP, Velocity, FreeMaker, etc. It can also be easily integrated with Web frameworks such as Spring MVC as a template engine for Web applications.

Thymeleaf can run in both networked and non-networked environments, that is, it allows artists to view the static effect of the page in the browser, and allows programmers to view the dynamic page effect with data on the server. This is because it supports html prototypes, and then adds additional attributes in html tags to achieve template + data display. When the browser interprets html, it will ignore undefined tag attributes, so the template of thymeleaf can run statically; when some data is returned to the page, the Thymeleaf tag will dynamically replace the static content, so that the page can be displayed dynamically.
Thymeleaf features out of the box. It provides standard and spring standard dialects, and can directly apply templates to achieve JSTL and OGNL expression effects, avoiding the troubles of setting templates, changing jstl, and changing labels every day. At the same time, developers can also extend and create custom dialects.

1. Introduction

Introduce the thymeleaf namespace in the html page, that is, at this time, the dynamic attributes in the html template file are modified with the th: namespace

<html lang="en" xmlns:th="http://www.thymeleaf.org">

Import pom dependencies

<!--thymeleaf-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Simple expression:

${…} variable expression
*{…} selection variable expressions
#{…} message expression
@{…} link url expression

2. Test

Test 1:
1. Modify the test request and increase data transmission;

@RequestMapping("/t1")
public String test1(Model model){
    
    
    //存入数据
    model.addAttribute("msg","Hello,Thymeleaf");
    //classpath:/templates/test.html
    return "test";
}

2. Let's write the front-end page

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>狂神说</title>
</head>
<body>
<h1>测试页面</h1>

<!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

Test 2:

@RequestMapping("/t2")
public String test2(Map<String,Object> map){
    
    
    //存入数据
    map.put("msg","<h1>Hello</h1>");
    map.put("users", Arrays.asList("qinjiang","kuangshen"));
    //classpath:/templates/test.html
    return "test";
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>狂神说</title>
</head>
<body>
<h1>测试页面</h1>

<div th:text="${msg}"></div>
<!--不转义-->
<div th:utext="${msg}"></div>

<!--遍历数据-->
<!--th:each每次遍历都会生成当前这个标签：官网#9-->
<h4 th:each="user :${users}" th:text="${user}"></h4>

<h4>
    <!--行内写法：官网#12-->
    <span th:each="user:${users}">[[${user}]]</span>
</h4>

</body>
</html>

SpringBoot: Thymeleaf template engine

1. Introduction

2. Test

Guess you like