Let’s start by creating a Web project with SpringBoot that supports Thymeleaf

Adding Web Support

Add the Thymeleaf template engine

Once you’ve created the project, create a normal HTML file in the Templates directory and just write a controller to jump to the page

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello thymeleaf
</body>
</html>
Copy the code
package com.hzy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {
    @RequestMapping("test")
    public String test(a) {
        return "test"; }}Copy the code

This allows you to jump to the page, but thymeleaf isn’t doing anything yet. That is, you’re just writing HTML code. To use thymeleaf, you need to import a header file XMLNS :th=”www.thymeleaf.org”, So we can use thymeleaf’s syntax

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello thymeleaf
</body>
</html>
Copy the code

Thymeleaf operates on all HTML elements with th:, as demonstrated below

Get background data, ${}

package com.hzy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {
    @RequestMapping("test")
    public String test(Model model) {
        model.addAttribute("msg"."<h1>hello</h1>");
        return "test"; }}Copy the code
<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<! -- Do not escape strings -->
<div th:text="${msg}"></div>
<! -- Escape character turn -->
<div th:utext="${msg}"></div>
</body>
</html>
Copy the code

Loop over background data

The controller class

package com.hzy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class HelloController {
    @RequestMapping("test")
    public String test(Model model) {
        List<String> list = new ArrayList<>();
        list.add("abc");
        list.add("def");
        list.add("ghi");
        model.addAttribute("list",list);
        return "test"; }}Copy the code

test.html 

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:each="lis : ${list}" th:text="${lis}"></div>

</body>
</html>
Copy the code

Iterate over property values in the map

Thymeleaf extracts the common part

First we define a public part of the page, which is topped with header.html

Th :fragment=” fragment name “(myhead

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header th:fragment="myhead">
    <h1>This is the common part of the head</h1>
</header>
</body>
</html>
Copy the code

Insert =”~{page name :: fragment variable name}”, so you can fetch the public part directly

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:insert="~{header :: myhead}"></div>

</body>
</html>
Copy the code

Insert, replace, insert, replace, insert, replace, insert, replace

Th :insert: keeps its own primary label. Th :replace: does not keep its own primary label

<div th:insert="~{header :: myhead}"></div>
<div th:replace="~{header :: myhead}"></div>
Copy the code

As a result of

<div>
    <header th:fragment="myhead"><h1>This is the common part of the head</h1></header>
</div>

<header th:fragment="myhead"><h1>This is the common part of the head</h1></header>
Copy the code