[SpringBoot] basic syntax and introduction of Thymeleaf

brief introduction

Thymeleaf is a modern server-side Java template engine suitable for Web and stand-alone environments.

Thymeleaf's main goal is to bring elegant natural templates to your development workflow - HTML can be displayed correctly in the browser or used as a static prototype, so as to achieve stronger collaboration among the development team.

With the modules of the Spring Framework, extensive integration with your favorite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern HTML5 JVM Web development - although it can do more.

Official website and tutorial

Official website: https://www.thymeleaf.org/index.html
Getting started: https://www.jianshu.com/p/8dc48fa74e7e
Practical tutorial: https://www.jianshu.com/p/908b48b10702

Official tutorial: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
1. Variable expression ${}
2. Select variable expression * {} recommended!
3. Link expression @{}
4. Fragment expression ~{}
5. Message expression #{}
6. Other expressions

Basic grammar

1. Variable expression ${}

Usage: directly use th:xx = "${}" to obtain object properties.

<form id="userForm">
    <input id="id" name="id" th:value="${user.id}"/>
    <input id="username" name="username" th:value="${user.username}"/>
    <input id="password" name="password" th:value="${user.password}"/>
</form>

<div th:text="hello"></div>

<div th:text="${user.username}"></div>

2. Select variable expression * {} recommended!

Usage: first obtain the object through th:object, and then use th:xx = "* {}" to obtain the object attribute.

<form id="userForm" th:object="${user}">
    <input id="id" name="id" th:value="*{id}"/>
    <input id="username" name="username" th:value="*{username}"/>
    <input id="password" name="password" th:value="*{password}"/>
</form>

3. Link expression @{}

Get the application path through the link expression @{} directly, and then splice the static resource path.

<script th:src="@{/webjars/jquery/jquery.js}"></script>
<link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">

4. Fragment expression ~{}

Fragment expression is one of the features of Thymeleaf. The fine granularity can reach the tag level, which JSP can't do.
Fragment expressions have three syntaxes:

~{viewName} indicates the introduction of a full page
~{VIEWNAME:: selector} means to find fragments on the specified page, where the selector can be fragment name, jquery selector, etc
~{:: selector} indicates to search in the current page

Usage: first customize the fragment through th:fragment, and then fill in the fragment path and fragment name through th:replace. For example:

<!-- /views/common/head.html-->
<head th:fragment="static">
        <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
</head>

<!-- /views/your.html -->
<div th:replace="~{common/head::static}"></div>

In practical use, we often use more concise expression, remove the expression shell and fill in the fragment name directly. For example:

<!-- your.html -->
<div th:replace="common/head::static"></div>

It is worth noting that do not add slashes at the beginning of the replacement path th:replace to avoid path errors during deployment and operation. (because the default splicing path is spring.thymeleaf.prefix = classpath:/templates /)

5. Message expression #{}

That is, the common internationalization attribute: #{msg} is used to obtain the translation value of international language. For example:

 <title th:text="#{user.title}"></title>

6. Other expressions

In the basic syntax, string connection, mathematical operation, Boolean logic and ternary operation are supported by default. For example:

<input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/>

Keywords: Java Spring Boot intellij-idea

Added by askbapi on Thu, 27 Jan 2022 23:25:26 +0200

Programming VIP