SpringBoot与web开发(二)-----Thymeleaf 模板引擎

模板引擎 Thymeleaf

后端
Page content

Thymeleaf 模板引擎

1. 引入Thymeleaf

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

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
	public static final String DEFAULT_PREFIX = "classpath:/templates/";
	public static final String DEFAULT_SUFFIX = ".html";

将html页面放在templates目录下使用模板引擎 渲染页面

  • html中引入

    <html lang="en" xmlns:th="http://www.thymeleaf.org">

2. 语法规则

来自官网的使用手册：http://www.thymeleaf.org

  • th 语法

thymeleaf 语法

  • 表达式

    Simple expressions:（表达式语法）
Variable Expressions: ${...}：获取变量值；OGNL；
		1）、获取对象的属性、调用方法
		2）、使用内置的基本对象：
			#ctx : the context object.
			#vars: the context variables.
            #locale : the context locale.
            #request : (only in Web Contexts) the HttpServletRequest object.
            #response : (only in Web Contexts) the HttpServletResponse object.
            #session : (only in Web Contexts) the HttpSession object.
            #servletContext : (only in Web Contexts) the ServletContext object.
                
            ${session.foo}
        3）、内置的一些工具对象：
    #execInfo : information about the template being processed.
    #messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.
    #uris : methods for escaping parts of URLs/URIs
    #conversions : methods for executing the configured conversion service (if any).
    #dates : methods for java.util.Date objects: formatting, component extraction, etc.
    #calendars : analogous to #dates , but for java.util.Calendar objects.
    #numbers : methods for formatting numeric objects.
    #strings : methods for String objects: contains, startsWith, prepending/appending, etc.
    #objects : methods for objects in general.
    #bools : methods for boolean evaluation.
    #arrays : methods for arrays.
    #lists : methods for lists.
    #sets : methods for sets.
    #maps : methods for maps.
    #aggregates : methods for creating aggregates on arrays or collections.
    #ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样；
	补充：配合 th:object="${session.user}：
<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>
Message Expressions: #{...}：获取国际化内容
Link URL Expressions: @{...}：定义URL；
		@{/order/process(execId=${execId},execType='FAST')}
Fragment Expressions: ~{...}：片段引用表达式
		<div th:insert="~{commons :: main}">...</div>		
Literals（字面量）
Text literals: 'one text' , 'Another one!' ,…
Number literals: 0 , 34 , 3.0 , 12.3 ,…
Boolean literals: true , false
Null literal: null
Literal tokens: one , sometext , main ,…
Text operations:（文本操作）
String concatenation: +
Literal substitutions: |The name is ${name}|
Arithmetic operations:（数学运算）
Binary operators: + , - , * , / , %
Minus sign (unary operator): -
Boolean operations:（布尔运算）
Binary operators: and , or
Boolean negation (unary operator): ! , not
Comparisons and equality:（比较运算）
Comparators: > , < , >= , <= ( gt , lt , ge , le )
Equality operators: == , != ( eq , ne )
Conditional operators:条件运算（三元运算符）
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
Special tokens:
No-Operation: _

3. 实例

  • controller层 存放数据

    
/**
* @program: spring-boot-resetfu-crud
* @description:
* @author: ChangYue
* @create: 2019-07-17 11:49
*/
@Controller
public class HelloController {
@RequestMapping(value = "/success")
public String success(Map<String, Object> map) {
    map.put("hello", "<h1>你好</h1>");
    map.put("users", Arrays.asList("1", "2", "3"));
    return "success";
}
}

  • html 取出数据

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

<!--取出hello 不转义-->
<h4 th:utext="${hello}"></h4>
<!--取出hello 转义-->
<h4 th:text="${hello}"></h4>
<!--遍历数组 显示在同一个标签中-->
<h4 th:each="user:${users}" th:text="${user}"></h4>
<!--遍历数组 分开显示-->
<h3>
<span th:each="user:${users}">[[${user}]]</span>
</h3>

</body>
</html>

实例图

具体用法 可参照官方文档：

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf

4. 提取公共片段

thymeleaf 提供代码片段的复用

参考文档 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf 第八章：template layout

  • 顶部菜单栏 使用 th:fragment 定义片段

    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topnav">
 ......
</nav>

  • 引入定义的片段

    <nav th:insert="commons/bar::topnav"></nav>

  • 三种引入方式

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