Thymeleaf expressions
This section introduces various expressions of Thymeleaf, and demonstrates the expressions and usage of Thymeleaf through some simple examples.
1. Variable expression
A variable expression is an expression to obtain background variables. Use ${} to get the value of a variable, for example:
<p th:text="${name}">hello</p>
In the above example, ${name} is used to get the attributes of the model returned by the background. The th:text attribute in the tag is used to fill the content of the tag.
If the object is returned in the background, use the variable name. attribute name method to obtain it, which is the same as the EL expression.
<p th:text="${user.memo}">备注</p>
In the above example, use ${user.memo} to get the memo property of the user object in the model.
2. Select or star expression
A selection expression is similar to a variable expression, but it executes *{name} with a preselected object instead of the context variable container (map). What are pre-selected objects? is the value of the parent tag. The sample code is as follows:
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
<p>Nationality: <span th: text="*{nationality}">Saturn</span>.</p>
</div>
// 等价于<div>
<p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>
In the above example, we pre-defined the object variable with th:object ${session.user}, and then used the asterisk （*）to get the various attributes in the user variable. For example, *{firstName}is equivalent to ${session.user.firstName}. The difference between the two usages is as follows:
1) There is no difference between the two, regardless of context, except that the asterisk syntax evaluation is expressed on the selected object, not the entire context.
2) Dollar sign ($) and asterisk (*) syntax can be mixed.
3. URL expressions
URL occupies a very important position in Web applications, such as referencing static resource files, processing URL links, and so on. Thymeleaf processes URL expressions through @{…} syntax, mainly using th:href, th:src and other attributes to refer to static resource files such as CSS and JS. The following examples demonstrate the use of URL expressions.
3.1 Import static resource files
Thymeleaf pages use the th:href attribute to import CSS resource files:
<link rel="stylesheet" th:href="@(/resources/css/bootstrap.min.css)"/>
In the above example, the css folder under resources is accessed by default.
Thymeleaf pages use the th:src attribute to import JS resource files:
<script th:src="@{/resource/js/bootstrap.min.js]"></script>
By default, the js folder under resources is accessed.
3.2 Use @{…} to set the background image
<div th:style="'background:url('+ @{${imgurl}} +');'"></div>
The above path uses @{${imgurl} to specify the path of the image, and Thymeleaf also sets the background through th:background.
3.3URL link
Thymeleaf supports <a>using th:href in tags to handle URL links:
<a th:href="@{http://www.a.com/user/u123456}">绝对路径</a>
<a th:href="@{/order}">相对路径</a>
In the above example, the th:href attribute modifier will evaluate and replace the URL value linked with href into the href attribute.
Similarly, th:href also supports URL parameter passing, we can use URL expressions with parameters, examples are as follows:
<a th:href="@{/order/details(orderId=${orderId})}">view</a>
In the above example, the @{…} expression accesses the orderId variable in the context through {orderId}. The last (orderId=${o.id}) indicates that the content in the brackets will be treated as URL parameters. This syntax avoids the use of "&" to splice URL parameters, which greatly improves readability.
If multiple parameters are required, they will be separated by commas, for example:
<a th:href="@{/order/process(execId=${execId},execType='FAST')}">view</a>
In the above example, using the @{} expression to create the URL and passing the two parameters execId and execType at the same time is simpler and easier to read than using "&" concatenation.
4. Text internationalization expression
Text internationalization expressions allow us to retrieve locale text information from an external file, using expressions like #{login.tip}. The following example demonstrates Thymeleaf's internationalization.
Step 01 Create internationalized resources.
Spring Boot supports internationalization. We create a new i18n folder under the resources resource file directory, create two files test_zh_CN.properties and test_en_US.properties under this folder (you can also directly create the Resource Bundle folder), and then add test properties.
We created an internationalized resource configuration file for test, added the login.tip attribute and configured the corresponding Chinese and English.
Step 02 Modify the system internationalization configuration.
Add the internationalization configuration defined above to application.properties:
@spring.messages.basename=i18n.test
Step 03 Reference internationalized resources in the page.
Create the i18n.html page in the resource/templates directory, the sample code is as follows:
<!DOCTYPE htm1>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>国际化</h3>
<p th:text="#{login.tip}">Please log in</p>
</body>
</htm1>
In the above example, the attribute configuration is obtained by the literal internationalization expression #{login.tip}.
Step 04 Create a background request.
Add the following code to the previous HelloController:
@RequestMapping("/i18n")
public String i18n() {
return "i18n";
}
Step 05 Run the test.
After the configuration is complete, start the project and visit http://localhost:8080/i18n in the browser to verify whether the internationalization configuration is effective.
Through the #{login.tip} expression, the Chinese content in the internationalized resource configuration is obtained.