Introduction to thymeleaf of springboot

Posted by Jay2391 on Sat, 25 Sep 2021 11:06:56 +0200

Introduction to thymeleaf of springboot

Because JSP cannot be parsed in the compressed package, spring boot does not support JSP by default. Therefore, we need to use a third-party template engine, such as thymeleaf we introduced this time

Official website address: https://www.thymeleaf.org/

What is thymeleaf

thymeleaf is a template engine for modern Java server. Its syntax is simple and similar to JSP. However, the performance is average and is not suitable for high concurrency scenarios.

Using thymeleaf

  1. In the pom.xml file, import the thymeleaf initiator dependency of spring boot

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

  2. Create an index.html in resources/templates. The content is as follows. Note that the th namespace needs to be introduced

    <!DOCTYPE html>
<!-- introduce th Namespace -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <!-- obtain model Medium content，As label content, the default content will be overwritten -->
  <h1 th:text="${content}">Hello</h1>
</body>
</html>

  3. Write a controller. When the browser accesses the controller, it will return the index string. spring boot will help us find the returned value of the corresponding page

    @Controller
public class ViewController {

    @GetMapping("/")
    public String index(Model model){
        model.addAttribute("content", "Hello");
        return "index";
    }
}

  4. visit http://127.0.0.1:8080/ , you can see "hello"

thymeleaf syntax

expression

Expression namegrammarpurpose
Variable value${}Get request domain, session, object, etc
Select variable*{}Get context object value
news#{}Get international equivalent
connect@{}Turn it into a link and spell the project access path
Fragment Expression~{}Bring in public pages

Literal

  • Text values: "one text",'another one! '
  • Number: 0.34
  • Boolean: true, false
  • Null value: nulll
  • Variables: one, two. Variables cannot have spaces

operator

Mathematical operation:+ - * / %
Boolean operation: and or ! not
 Comparison operation:> < >= <= == !=
Conditional operation:
If-then: (if) ? (then)
If-then-else: (if) ? (then): (else)
Default: (value) ?: (defaultvalue)

Set attribute value

There are two ways to write

<input type="text" th:value="${defaultValue}">
<input type="text" th:attr="value=${defaultValue}">

Set label content

There are two ways to write

<h1>[[${content}]]</h1>
<h1 th:text="${content}"></h1>

If you need to splice strings, write them as follows:

<h1>[[${content}]]Splicing content</h1>
<h1 th:text="${content}+Splicing content"></h1>

Introducing common components

The pages we develop often have some public components, such as jquery, navigation bar, etc. if we write them in each page, it will be very troublesome and redundant when we need to modify them. We can write the public components in a separate page, and other pages can be introduced when necessary.

Suppose we have a copyright notice that needs to be used on all pages, we can write the copyright notice in footer.html, as follows

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
  
    <div th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </div>
  
  </body>
</html>

The introduction can be used where necessary, as shown below

<body>
  <div th:insert="footer :: copy"></div>  
</body>

Of which:

  • th:fragment: indicates the name of the component
  • th:insert: indicates the component to be imported. The format is template name:: component. The component can use either the component name specified by th:fragment or a selector, such as footer:: #copy, etc.

Similar to th:insert are th:replace and th:include (th:include is not recommended after 3.0). The effects of their introduction are different. For example, when you use these three to introduce, they are as follows:

<body>

  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>
  
</body>

The effect is

<body>
  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

  <div>
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>
  
</body>

Loop traversal

When we want to generate a list based on objects, we need to use the loop th:each. The specific usage is as follows

<table>
    <thead>
    <tr>
      <th>#</th>
      <th>user name</th>
      <th>password</th>
    </tr>
    </thead>

    <tbody>
      <!--   ergodic users，Put each of these elements into user In, the state of each traversal is stats in   -->
      <tr th:each="user,stats:${users}">
        <!--Serial number, count Starting from 1, index It starts at 0-->
        <td th:text="${stats.count}"></td>
        <!--Gets the properties of the traversal object-->
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
      </tr>
    </tbody>
  </table>

Topics: Java Spring Boot

Hot Topics

©2024 Programmer Think