【学习笔记】Thymeleaf学习笔记

1.简介

thymeleaf、freemark以及velocity都是一种服务端模板语言。
服务端模板语言可以在web应用中代替jsp作为动态web页面。
特点： thymeleaf模板文件中既有动态数据，又有静态数据，如果不翻译，就渲染静态数据，如果翻译，那么翻译出来就是动态数据。

2.Thymeleaf依赖

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

3.Thymeleaf配置

application.thymeleaf

# thymeleaf配置
spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

4.Thymeleaf命名空间

只有thymeleaf名字空间下的属性或者标签才可以使用thymeleaf语法。

xmlns:th="http://www.thymeleaf.org"

5.Thymeleaf命名空间下的属性

thymeleaf中有很多属性，可以实现不同的功能.属性值就是thymeleaf表达式。基本语法：

th:thymeleaf属性="属性值"

5.1.text和utext属性

这两个属性是用来设置标签中的内容的。

• text
  不解释值中html内容
• utext
  解释值中的html内容

5.2.html原生属性

th名字空间下直接使用html原生属性就是为了设置标签对应的html属性的。所有html属性(包括自定义属性)都可以通过这种方式设置动态值，也可以多个属性一起设置:。

<img src="1.png" th:src="thymeleaf表达式"  alt=""  th:alt=""  />
<a href=""  th:href=“” >链接</a>
<input value="" th:value="" />
<img src="1.png"  alt=""  th:attr="src=${},alt=${}"  />

5.3.选择结构

th:if=“表达式”: 如果表达式结果是true，就要当前元素，否则不要当前元素。
th:unless=“表达式”: 如果表达式结果是false，就要当前元素，否则不要当前元素。
th:switch…th:case 多条件选择结构

<p>
	<!--th:if="表达式":  如果表达式结果是true，就要当前元素，否则不要当前元素。-->
    <span th:if="${isLogin}">
        欢迎admin,
        角色是:
        <!--th:switch...th:case   多条件选择结构-->
        <span th:switch="${role}">
            <span th:case="'boss'">总经理</span>
            <span th:case="'manager'">经理</span>
            <span th:case="'user'">员工</span>
            <span th:case="*">default</span>
        </span>
    </span>
    <!--th:unless="表达式": 如果表达式结果是false，就要当前元素，否则不要当前元素。-->
    <span th:unless="${isLogin}"><a>去登录</a></span>
</p>

5.4.循环结果

th:each=“e,status:集合或者数组” : 遍历集合或者数组，把当前元素重复生成多份。

<ul>
    <li th:each="username,status:${userlist}" >
        <span th:text="${status.index+1}"></span>:
        <span th:text="${username}"></span>
    </li>
</ul>

status对象中的属性:

1. index: 当前正在遍历记录的 index （从 0 开始）
2. count: 表示当前正在遍历第几条记录（从 1 开始）
3. size: 对象所含的记录数
4. current: 当前正在遍历的记录
5. even/odd: 布尔值，当前index 是否是偶数/奇数
6. first: 布尔值，是不是第一条记录
7. last: 布尔值，是不是最后一条记录

5.5.对象Object

th:object属性用来在父标签上定义一个对象，然后在子标签中就可以直接访问这个对象中的属性。
但是注意: 在子标签中访问属性时，使用*{}

<div th:object="${stuinfo}">
    <p th:text="*{stuno}"></p>
    <p th:text="*{stuname}"></p>
    <p th:text="*{stuage}"></p>
    <p th:text="*{stugender}"></p>
</div>

这里边: stuno,stuname,stuage,stugender都访问的时th:object指定的stuinfo对象中的属性。

5.6.别名

th:with可以用来在父标签中给数据起名(相当于定义变量)，在子标签中可以直接通过名字访问数据。有利于数据的复用.

<div th:with="sy='姝'">
     1:<p th:text="${sy}"></p>
     2:<p th:text="${sy}"></p>
     3:<p th:text="${sy}"></p>
     4:<p th:text="${sy}"></p>
 </div>

5.7.表单name属性设置

th:field主要用于表单元素，不仅会设置表单的value属性做回显，而且会自动设置name属性。

<form th:object="${stuinfo}">
    <p>学号:<input th:field="*{stuno}" readonly/></p>
    <p>姓名:<input th:field="*{stuname}" /></p>
    <p>年龄:<input th:field="*{stuage}" /></p>
    <p>性别:<input th:field="*{stugender}" /></p>
    <button>修改</button>
</form>

5.8.th:block

这个标签没有实际效果，只是为了承载th:if th:each th:object th:with这几个属性的。

<div>
    <th:block th:each="c,s:${comments}">
        <h2 th:utext="${c}"></h2>
        <p th:utext="${c}"></p>
    </th:block>
</div>

block标签在模板文件被翻译的时候，最终会忽略掉。

6.Thymeleaf表达式

基本上所有th:下的thymeleaf属性的属性值都是表达式。

6.1.表达式语法

表达式就是数据和运算符的组合。

运算符
	算术运算符： +   -   *    /    %
	关系运算符：>    <     ==     !=     >=      <=
               gt   lt    eq     ne     ge      le
	逻辑运算符： and   or   not(!)
	条件运算符： ()?():()
	字符串拼接  + ：th:text="’hello:‘ + ${username}"
	thymeleaf表达式中还支持一种模板字符串，可以很简单的实现字符串拼接：th:text="|hello${username}|"

数据
	字面值常量：数值（1、3.14、100），字符串（"hello"），boolean/true/false
	变量（符号表达式）：${}，*{}，#{}，@{}

6.1.1.符号表达式

1. ${}

   <p th:text="${#dates.format(stuinfo.stubirthday,'yyyy-MM-dd')}"></p>
   <p>name: <span th:text="${@beanStu.stuname}"></span></p>
   <p>config: <span th:text="${@environment.getProperty('my.config')}"></span></p>
   

2. * {}
   这种表达式跟上边的${}表达式几乎一样，只不过*{}优先去父元素的object指定的对象中访问数据，而不是去model中获取。

3. #{}
   这种表达式主要是去国际化资源中读取数据，可以嵌套 ${} 和 *{}。

   <label th:text="#{login.username}">
   

4. @{}
   这种表达式主要用来注解定义一个url地址，可以嵌套 ${} 和 *{}。

   <a th:href="@{/users/delete}">删除</a>
   <a th:href="@{/users/delete(username=${username})}">删除</a>
   

7.Thymeleaf片段

thymeleaf中片段 可以实现跟jsp中的include包含 一样的效果，就是片段复用。

7.1.定义片段

<!--定义片段-->
<div th:fragment="myheader">
	这是公共的头部
</div>
<div th:fragment="myfooter">
    这是公共的底部
</div>

7.2.引入片段

• th:insert=“片段所在的模板文件文件名::片段名”
  把片段直接插入到当前元素中 ： 两个都在,片段元素在当前元素中
• th:include=“片段所在的模板文件文件名::片段名”
  把片段的内容包含到当前元素中 ：当前元素在，片段元素没了
• th:replace=“片段所在的模板文件文件名::片段名”
  用片段直接替换当前元素: 片段元素在，当前元素没了

<head th:insert="common::myhead('页面1')"></head>
<head th:include="common::myhead('页面1')"></head>
<head th:replace="common::myhead('页面1')"></head>

在片段中通过${}表达式就可以访问到参数值。

8.简单用例

controller层

@RequestMapping("/hi")
public String hello(Model model){
    System.out.println("hello");
    model.addAttribute("msg","hello thymeleaf");
    return "hello";
}

thymeleaf实现，可以通过thymeleaf语法获取“msg”数据；

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    <p th:text="${msg}">hello</p>
</body>
</html>