一、快速入门

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 属性都定义了一个数字优先级,它确定了它们在标记中的执行顺序。

image.png

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://zyxwmj.top/articles/2020/04/02/1585810502087.html
版权声明:本文为博主原创文章,转载请附上博文链接!
博客中若有不恰当的地方,请您一定要告诉我。前路崎岖,望我们可以互相帮助,并肩前行!

添加新评论