由于Thymeleaf是完全兼容HTML的,所以为了不破坏HTML结构,Thymeleaf 采用了自定义HTML属性的方式来生成动态内容。th:text语法的作用就是会动态替换掉作用HTML标签的内部内容。
<span th:text="${msg}">Hello</span>
<span>你好</span>
一般情况下,模板的变量都是会存放在模板上下文中,所以我们如果想要调用变量,就需要先设置变量到模板上下文中去
上下文这个术语在编程里用的比较多,一 般泛指在某个具体的实例里,比如说模板上下文, 指的是这个模板运行的实例。
代码:
// 测试数组
@GetMapping(value = "/array")
public String array(Model model) {
ArrayList<String> books = new ArrayList<>();
books.add("三国演义");
books.add("水浒传");
books.add("红楼梦");
books.add("西游记");
model.addAttribute("books", books);
return "array";
}
模板:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>测试数组</title>
</head>
<body>
<div>
<ul th:each="item : ${books}">
<li th:text="${item}"></li>
</ul>
</div>
</body>
</html>
效果:
如果对象包含对象,还是可以用.一直点出来的, 前提是这个对象是POJO类哦
package com.shenmazong.thymeleaf.pojo;
import lombok.Data;
/**
* @author 军哥
* @version 1.0
* @description: 用户实体类
* @date 2022/2/16 11:06
*/
@Data
public class TbUser {
private Integer userId;
private String userName;
private Integer userAge;
private String userSkills;
}
// 测试对象以及对象数组
@GetMapping(value = "/object")
public String object(Model model) {
// 测试对象
TbUser tbUser = new TbUser();
tbUser.setUserId(1);
tbUser.setUserName("武松");
tbUser.setUserAge(35);
tbUser.setUserSkills("景阳冈打虎");
model.addAttribute("user", tbUser);
// 测试对象数组
ArrayList<TbUser> tbUsers = new ArrayList<>();
for (int idx = 0; idx < 4; idx++) {
TbUser user = new TbUser();
user.setUserId(idx+1);
user.setUserName("武松"+idx);
user.setUserAge(35+idx);
user.setUserSkills("景阳冈打虎"+idx);
tbUsers.add(user);
}
model.addAttribute("users", tbUsers);
return "object";
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>测试对象</title>
</head>
<body>
<div>
<div>
<ul>
<li th:text="${user.userId}">id</li>
<li th:text="${user.userName}">姓名</li>
<li th:text="${user.userAge}">年龄</li>
<li th:text="${user.userSkills}">技能</li>
</ul>
</div>
<hr>
<div>
<ul>
<li th:text="${user.getUserId()}">id</li>
<li th:text="${user.getUserName()}">姓名</li>
<li th:text="${user.getUserAge()}">年龄</li>
<li th:text="${user.getUserSkills()}">技能</li>
</ul>
</div>
<hr>
<div>
<ul th:each="item,it : ${users}">
<li th:text="${it.count}">id</li>
<li th:text="${item.userId}">id</li>
<li th:text="${item.getUserName()}">姓名</li>
<li th:text="${item.getUserAge()}">年龄</li>
<li th:text="${item.getUserSkills()}">技能</li>
</ul>
</div>
</div>
</body>
</html>
th:each有一个状态变量,如上面代码中it,具体含义如下:
<span th:text="'00:00/'+${totalTime}"></span>
静态内容用单引号’’包裹起来,和上下文变量之间用+连接。
Thymeleaf做字符串拼接还做了优化工作,我们可以使用上面的代码你还可以这样|围住字符串,这样就不需要在文字后面附加’…‘+’…’
<span th:text="|00:00/${totalTime}|"></span>
Thymeleaf默认集成了大量的工具类可以方便的进行数据转化,一我们使用最多的是dates
@RequestMapping("/demo")
public String index(Model model){
Date dateVar = new Date();
model.addAttribute("dateVar",dateVar);
return "demo";
}
前台显示:
<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>
在这里如果后台的日期类型是LocalDate/LocalDateTime,那么就把#date换成#temporals
注意:需要在pom.xml文件里添加依赖
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
<version>3.0.4.RELEASE</version>
</dependency>
这个库会自动添加一个新的工具类temporals
工具类的运用和变量不同,变量使用的是${变量名} ,工具类使用的是#{工具类}。
后台代码:
@RequestMapping("/demo")
public String index(Model model){
LocalDateTime dateVar = LocalDateTime.now();
model.addAttribute("dateVar",dateVar);
return "demo";
}
前台代码:
- 显示年月日
<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd')}"></p>
<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日')}"></p>
<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>
dates和temporals支持的方法是一样的, 只是支持的类型不同,dates支持的是Date类, temporals支持的是LocalDate 和LocalDateTime。
java.util.Date类和LocalDateTime类功能是一样的,不同的是LocalDateTime是Java8才出现的,一老的应用还是用Date类的。
strings工具类
Thymeleaf里的其他工具类
各内置对象包含哪些方法可以点此看文档,也可以点这里看官方文档。
Thymeleaf内联表达式
其实就是th:text的另一种写法,直接把变量写在HTML中,格式:[[变量]]
<span>Hello [[${msg}]]</span>
<p>[[ ${#dates.format(dateVar, 'yyyy-MM-dd')} ]]</p>
<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日')}]]</p>
<p>[[${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}]]</p>
<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}]]</p>
注意:
内联表达式[[]]只能替代th:tex不是替代所有的th:标签。
另外,也不建议使用这种方式,因为这种方式破坏原来的html结构,违背了设计初衷。
示例代码
@GetMapping(value = "/date")
public String date(Model model) {
Date date = new Date();
model.addAttribute("createTime", date);
return "date";
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>测试日期函数</title>
</head>
<body>
<div>
<div>
<p th:text="${#dates.format(createTime, 'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(createTime, 'yyyy年MM月dd日')}"></p>
<p th:text="${#dates.format(createTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#dates.format(createTime, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>
</div>
<div>
<p th:text="|年月日: ${#dates.format(createTime, 'yyyy-MM-dd')}|"></p>
</div>
</div>
</body>
</html>
选择表达式(星号表达式)。选择表达式与变量表达式有一个重要的区别:选择表达式计算的是选定的对象,而不是整个环境变量映射。也就是:只要是没有选择的对象,选择表达式与变量表达式的语法是完全一样的。那什么是选择的对象呢?是一个:th:object对象属性绑定的对象。
例如:
<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>
上例中,选择表达式选择的是th:object对象属性绑定的session. user对象中的属性。
消息表达式(井号表达式,资源表达式)。通常与th:text属性一起使用,指明声明了th:text的标签的文本是#{}中的key所对应的value,而标签内的文本将不会显示。
例如:
新建/WEB-INF/templates/home.html,段落
<p th: text=" #{home. welcome}" >This text will not be show! </p>
新建/WEB-INF/templates/home.properties,home.welcome:
home.welcome=this messages is from home.properties!
测试结果:
从测试结果可以看出,消息表达式通常用于显示页面静态文本,将静态文本维护在properties文件中也方便维护,做国际化等。
超链接url表达式。
例如:
<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"/>
工具对象表达式。常用于日期、集合、数组对象的访问。这些工具对象就像是java对象,可以访问对应java对象的方法来进行各种操作。用法在上面数据转化已经举例