SpringBoot-Integrate Thymeleaf template engine

1. Basic introduction

1. What is Thymeleaf

Thymeleaf is a new generation of Java template engine, similar to traditional Java template engines such as Velocity and FreeMarker .
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 it also allows the programmer to view the dynamic page effect with data on the server. This is because it supports html prototypes, and then adds additional attributes to html tags to achieve template + data display. When the browser interprets html, it ignores undefined tag attributes, so the thymeleaf template can run statically; when data is returned to the page, the Thymeleaf tag dynamically replaces the static content to make the page display dynamically.
Thymeleaf features out of the box. It provides two dialects, standard and spring standard, and can directly apply templates to achieve JSTL and OGNL expression effects, avoiding the trouble of setting templates, the jstl, and changing tags every day. At the same time, developers can also extend and create custom dialects
Thymeleaf is also the template engine officially recommended by Spring Boot . At the same time, Spring Boot also provides a complete automated configuration solution for Thymeleaf .

2. Basic grammar

(1) Commonly used expressions

${...} : Get the variable value.
*{...} : Select variable expression.
#{...} : Message text expression.
@{...} : Link expression.
#maps : Tool object expression.

(2) Commonly used labels

th:action : Define the path of the background controller.
th:each : loop statement.
th:field : form field binding.
th:id : The ID declaration in the div tag, similar to the attribution in the HTML tag.
th:if : conditional judgment statement.
th:href : define a hyperlink.
th:include : Layout tag, replace the content to the imported file.
th:src : The picture class address is introduced.
th:text : Display text.
th:fragment : Layout tag, which defines a code fragment for easy reference in other places.
th:object : Replace the object.
th:value : attribute assignment.

(3) Commonly used functions

#dates : Date functions.
#lists : List function.
#arrays : Array functions.
#objects : Object functions.
#bools : Logical functions
#strings : String functions.
#numbers : Number functions.
#calendars : Calendar function.

3. Add dependencies and configuration

(1) Add spring-boot-starter-web and spring-boot-starter-thymeleaf dependencies to the pom.xml file of the SpringBoot project

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

(2) Spring Boot provides default configuration for Thymeleaf . If you want to change the default configuration, just add configuration in application.properties . Here are some common configurations:

#是否开启缓存，开发时可以设置为 false，默认为 true
spring.thymeleaf.cache=true
#检查模版是否存在，默认为 true
spring.thymeleaf.check-template=true
#检查模版位置是否存在，默认为 true
spring.thymeleaf.check-template-location=true
#模版文件编码
spring.thymeleaf.encoding=UTF-8
#模版文件位置
spring.thymeleaf.prefix=classpath:/templates/
#Content-Type配置
spring.thymeleaf.servlet.content-type=text/html
#模版文件后缀
spring.thymeleaf.suffix=.html

The default related configuration properties provided by Spring Boot for Thymeleaf are in the ThymeleafProperties class

2. Example display

1. Write control class

(2), first create an entity class

public class Book {

    private String name;

    private String author;

    private Double price;

    public Book(String name, String author, Double price) {
        this.name = name;
        this.author = author;
        this.price = price;
    }
    // 省略 getter 和 setter 方法
}

(2) Create the BookController control class


@Controller
public class BookController {

    @GetMapping("/books")
    public ModelAndView boolInfo(){
        //创建返回数据
        List<Book> books = Arrays.asList(
                new Book("金瓶梅", "兰陵笑笑生", 100.0),
                new Book("红楼梦", "曹雪芹", 200.0),
                new Book("MySQL从入门到删库", "佚名", 200.0));

        // 创建返回的视图对象
        ModelAndView view = new ModelAndView();
        view.addObject("books", books);
        view.setViewName("index");
        return view;
    }
}

2. Create a view

(1) Create index.html in the classpath:/templates directory under the resources directory

<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table style="border: 1px; collapse: 0;">
      <tr>
          <th>书名</th>
          <th>作者</th>
          <th>价格</th>
      </tr>
      <tr th:each="book:${books}">
          <td th:text="${book.name}"></td>
          <td th:text="${book.author}"></td>
          <td th:text="${book.price}"></td>
      </tr>
  </table>
</body>
</html>

From the above, we can also know that you need to add in the html: <html xmlns:th="http://www.thymeleaf.org"> In this way, the following can correctly use tags in the form of th:*!

3. Start the project

Visit http://localhost:8080/books after starting the project