SpringBoot Web开发——模板引擎（Thymeleaf）

@Yi-Xing 2020-04-02 0 评论 0 浏览

SpringBoot

一、快速入门

1、导入依赖

首先导入 Thymeleaf 的依赖。

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

SpringBoot 自动配置了 thymeleaf，参数如下：

@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";

2、编写接口

只要我们把 HTML 页面放在 classpath:/templates/，thymeleaf 就能自动渲染。

@RequestMapping("/")
@Controller
public class DemoController {

    @RequestMapping(value = "/success")
    public String success(Model model) {
        model.addAttribute("hello","Yi-Xing");
        // classpath:/templates/success.html
        return "success";
    }
}

3、编写页面

Thymeleaf 的名称空间。

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

使用 Thymeleaf 映射数据。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Yi-Xing</title>
</head>
<body>

<h1>success</h1>
<p th:text="${hello}">我的第一个段落。</p>

</body>
</html>

二、语法规则

1、常用标签

th:action 定义后台控制器路径
th:each 循环语句
th:field 表单字段绑定
th:href 定义超链接
th:id div 标签中的 id 声明，类似 HTML 标签中的 id 属性
th:if 条件判断语句
th:include 布局标签，替换内容到引入文件
th:fragment 布局标签，定义一个代码片段，方便其它地方引用
th:object 替换对象
th:src 图片类地址引入
th:text 显示文本
th:value 属性赋值

th:text 改变当前元素里面的文本内容。th:任意 HTML 属性；来替换原生属性的值。Thymeleaf 属性都定义了一个数字优先级，它确定了它们在标记中的执行顺序。

2、常用函数：

#dates 日期函数
#lists 列表函数
#arrays 数组函数
#strings 字符串函数
#numbers 数字函数
#calendars 日历函数
#objects 对象函数
#bools 逻辑函数

3、获取对象的属性，调用方法

使用点（.）访问属性。相当于调用属性 getter。

${person.father.name}

也可以通过使用方括号（[]）并将属性名称作为变量或在单引号之间写入来访问属性。

${person['father']['name']}

如果对象是一个映射，则点和括号语法都将等效于对其 get（…）方法执行调用。

${countriesByCode.ES} 
${personsByName['Stephen Zucchini'].age}

对数组或集合的索引访问也用括号执行，在括号中写入索引。

${personsArray[0].name}

方法可以被调用，也可以有参数。

${person.createCompleteName()} 
${person.createCompleteNameWithSeparator('-')}

4、内置的基本对象

#ctx : 上下文对象。
#vars: 上下文变量。
#locale : 上下文区域设置。
#request : （仅在 Web 上下文中）HttpServletRequest 对象。
#response : （仅在 Web 上下文中）HttpServletResponse 对象。
#session :（仅在 Web 上下文中）HttpSession 对象。
#servletContext : （仅在 Web 上下文中）servletContext 对象。

5、内置的一些工具对象

#execInfo：关于正在处理的模板的信息。
#messages：在变量表达式中获取外部化消息的方法，与使用#{…}语法获得消息的方法相同。
#uris：用于转义 url/uri 部分的方法
#conversions：执行配置的转换服务（如果有）的方法。
#dates：方法 java.util.Date 对象：格式化、组件提取等。
#calendars：类似于日期， java.util.Calendar。
#numbers：格式化数字对象的方法。
#strings：String 对象的方法：contains、startsWith、prepending/appending 等。
#objects：对象的一般方法。
#bools：布尔求值的方法。
#arrays：数组的方法。
#lists：列表的方法。
#sets：set 的方法。
#maps：map 的方法。
#aggregates：在数组或集合上创建集合的方法。
#ids：处理可能重复的 id 属性的方法（例如，作为迭代的结果）。

格式化日期

 <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>

6、常用表达式

*{...} 选择表达式，如果没有执行对象，则和 ${} 在功能上是一样的。

<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>

<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>

@{...}定义 URL。

<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) --> 
<a href="details.html"
    th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) --> 
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) --> 
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

~{...}片段引用表达式。

#{...}获取国家化内容。

7、字面量

文本文字： 'one text' , 'Another one!' ,…
数字文字： 0 , 34 , 3.0 , 12.3 ,…
布尔字面常数： true , false
空文字： null
文字标记： one , sometext , main ,…

8、运算符

字符串拼接：+
数学运算： + , - , * , / , %
布尔运算： and , or，! , not
比较运算符： > , < , >= , <= ( gt , lt , ge , le )，== , != ( eq , ne )
条件运算符：
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)

9、页面嵌套

抽取公共片段。

<div th:fragment="copy"> </div>

引入公共片段。

<div th:insert="~{footer :: copy}"> </div>

三种引入功能片段（可以设置参数）

th:insert：将公共片段整个插入到声明引入的元素中
th:replace：将声明引入的元素替换为公共片段
th:include：将被引入的片段的内容包含进这个标签中

三、关闭 Thymeleaf 的缓存

spring:
  thymeleaf:
    cache: false

标题：SpringBoot Web开发——模板引擎（Thymeleaf）
作者：Yi-Xing
地址：http://47.94.239.232:10014/articles/2020/04/02/1585810502087.html
博客中若有不恰当的地方，请您一定要告诉我。前路崎岖，望我们可以互相帮助，并肩前行！