To prepare

  1. Introducing from Maven
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Copy the code
  1. Application. Yml/properties configuration

Actually org. Springframework. Boot. Autoconfigure. Thymeleaf. ThymeleafProperties have default configuration items, such as:

private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
Copy the code

So you can just use it and not worry about the configuration in ThymeleafProperties for now.

  1. HTML file location and namespace

  2. HTML files that use Thymeleaf will need to be placed in the templates directory shown below. I’ve already mentioned some of Thymeleaf’s default configurations, so there’s no need to change DEFAULT_PREFIX.

// org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties
public static final String DEFAULT_PREFIX = "classpath:/templates/";
Copy the code
+ -- -- -- the main Java | + -- -- - | | \ - com | | package | \ \ - XXX - resources | + -- -- -- the static | \ - templatesCopy the code
  1. htmlOf the filehtmlTags introducedxmlns:thNamespaces, which prevent the IDE from reporting missing namespace definitions, also have hints, such as useIDEA .
<! DOCTYPEhtml>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>Document</title>
</head>
Copy the code

Let’s look at some simple expressions

  • Simple expression
    • Variable expression: ${… }
    • Select variable expressions: *{… }
    • #{… }
    • Link URL expression: @{… }
    • Fragment expressions: ~{… }

The following use org. Springframework. UI. Model to pass data

The text

If the tag itself does not have a value attribute, such as P Li span, it is rendered with th:text. If the tag has a value attribute, it is rendered with th:value

judge

@GetMapping("judge")
public String books(Model model) {
    model.addAttribute("param"."xxx");
    return "/books";
}
Copy the code
<! -- use th:if -->
<div th:if="${param}">.</div>
Copy the code

When the variable is th:if evaluates to false and does not render the element

  1. Variable does not exist
  2. A value ofnull
  3. A value ofBooleanThe type offalse

cycle

  1. Simple loop
@GetMapping("books")
public String books(Model model) {
    List<String> list = Arrays.asList("Legend of Lu Xiaofeng".Sophie's World.."Selected Works of MAO Zedong");
    model.addAttribute("books", list);
    return "/books";
}
Copy the code
<ul>
    <li th:each="book :${books}">
        <span th:text="${book}"></span>
    </li>
</ul>
Copy the code
  1. A collection of objects
@Getter
@Setter
@AllArgsConstructor
public class UserObj {
    private Integer id;
    private String name;
    private Integer age;
}

@GetMapping("users")
public String users(Model model) {
    UserObj lily = new UserObj(1."Lily".22);
    UserObj jasmine = new UserObj(2."Jasmine".18);
    UserObj poppy = new UserObj(3."Poppy".6);
    List<UserObj> list = Arrays.asList(lily, jasmine, poppy);
    // model.addAllAttributes(list);
    model.addAttribute("users", list);
    return "/user";
}
Copy the code
<table th:if="${users}">
    <thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>AGE</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user,iterStat :${users}" th:class="${iterStat.odd}? 'odd'">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
    </tr>
    </tbody>
</table>
Copy the code

The second argument, iterStat, is an object that provides a mechanism for Thymeleaf to help track iteration status and has the following properties:

{index: 0 Index start from zero, count: index from the beginning, size: total number of data, current: com.xxx.UserObj@7684eac Object of the current loop, even/odd: Boolean attribute, is the current iteration even or odd first: is the Boolean attribute the first last: is the Boolean attribute the last}Copy the code

annotation

<! -- Plain HTML comments -->

<! --/* Not displayed after being parsed by Thymeleaf

<! --/*/ <div th:text="${... }"> </div> /*/-->
Copy the code

The template

Such as footer, header, menu and other parts of the template to embed in other pages.

making

For example, to create a header template, create a new header. HTML file in the /layout directory that looks like this. Since this is just a fragment embedded in other HTML, no
and other tags that are not needed.

<header xmlns:th="https://www.thymeleaf.org" th:fragment="header">.</header>Or you can declare it with an ID<header xmlns:th="https://www.thymeleaf.org" id="header">.</header>
Copy the code

use

<! DOCTYPEhtml>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>.</head>
<body>
    <div th:replace="~{/layout/header :: header}"></div>
    <! -- if id is used, add a # sign -->
    <div th:replace="~{/layout/header :: #header}"></div>
</body>
</html>
Copy the code

differences

Th :insert th:replace and th:include

3.0 Th :replace ❓ is not recommended

Take the above example

  1. th:insertSimplest: It will simply insert the specified fragment as a child label, i.e
<div>
    <header>.</header>
</div>
Copy the code
  1. th:replaceActually replaces its label with the referenced fragment,, that is
<header>.</header>
Copy the code
  1. th:includeSimilar to th:insert, but instead of inserting the segment, only the content of the segment is inserted, i.e
<div>.</div>
Copy the code

The appendix

Expression base object

expression-basic-objects

To be continued?