First, simply say Themeleaf, which is a page template rendering engine. If you've used jsp, you're probably familiar with it.Both thymeleaf and JSP work similarly, and they are a process that the system uses to render and supplement the page and finally present.So if you want, you can call your page xxx.html instead of xxxx.page, xxxx.xxx, and configure the end in propertites or yml.But it's all HTML pages in nature, just a little bit polished.There are many similar template languages, such as velocity.

Then talk about this configuration.One point about thymeleaf's configuration is that it requires the H5 specification.Therefore, if you are not familiar with the previous development, or the project transformation is not enough to make large-scale standardization modifications, you need to restrict the rules of H5 to weak restrictions.The configuration is as follows:

pom.xml:

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

And configure it in yml

spring.thymeleaf.mode=LEGACYHTML5

This opens the H5 Lack of Strictness check.

In addition, some basic configurations of Thymeleaf:

Next, grammar:

Writing of post request:

@RequestMapping("/test")
public String messages(User user) {
     ...
    return "redirect:/post/path";   //Jump to the controller processing where path is located
}

<form th:action="@{/test}" th:object="${user}" th:method="post" >
    <input  type="text" th:filed="*{name}" />  //filed see below
    <input type="submit" />
</form>

Assign values to js variables:

public String messages(Model model) {
    model.addAttribute("message", "hello");
    return "index";
    }

<script th:inline="javascript">
    var message = [[${message}]];
    console.log(message);
</script>

Operate on the entire po object:

<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}" />
//perhaps
<div th:object="${user}">
    <input  th:id="*{name}"   />
    <input  th:id="*{age}"   />
</div>

Format time display:

 <input  th:id="*{#dates.format(mytime,'yyyy-MM-dd HH:mm:ss')}"   />

Loop through a collection:

<tr th:each="user:${users}">  //user as base unit
    <td th:text="${user.name}"></td>
    <td th:text="${user.age}"></td>
</tr>

Reference the configuration variables of yml and make a filter:

roles.properties file:
roles.manage=b
roles.superadmin=c

<div th:switch="${user.name}">
    <p th:case=" 'a' "> This is A </p>
    <p th:case="${roles.manage}"> This is manage </p>
    <p th:case=" ${roles.superadmin} "> This is admin </p>
     <p th:case="*"> This is the other </p>
</div>

Text and Rich Text:

<div th:utext="${ha}"></div>is when you write a <a>label, it will be displayed as a label
 <div th:text="${ha}"></div>is when you write a label but display it as text

filed variable:

 <input  type="text" th:filed="*{name}" /> 
 Equivalent to
  <input  type="text" th:id="*{name}" th:name="*{name}" th:value="*{name}" /> 

Judgment:

<div  th:if="${user.age} == 18"  > 18</div>
<div  th:if="${user.age} gt 18"  > 18+</div>
<div  th:if="${user.age} lt 18"  > 18-</div>
<div  th:if="${user.age} ge 18"  > 18+=</div>
<div  th:if="${user.age} le 18"  > 18-+</div>
//Show only qualified

Choice:

<select> 
<option th:selectde="${user.name eq 'sss'}"> sss </option>
<option th:selectde="${user.name eq 'xxx'}"> sss </option>
</select>
//Will default to sss