Thymeleaf
目录
- 一、Thymeleaf简介
- 在Java中，模板引擎可以帮助生成文本输出。常见的模板引擎包括FreeMarker、Velocity和Thymeleaf等 Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎。 Thymeleaf 和 JSP比较： Thymeleaf目前所作的工作和JSP有相似之处，Thymeleaf和JSP都是属于服务端渲染技术，Thymeleaf比JSP功能强大许多。 Thymeleaf就是SpringBoot 官方推荐使用的模板引擎。
- 二、搭建thymeleaf环境：
- 三、常用标签:
- 四、域对象
- 五、内置工具对象：# 符号直接使用
- 六、Link URL
- 七、如何引入另一个html页面：
- 八、thymeleaf字符串拼接
一、Thymeleaf简介
在Java中，模板引擎可以帮助生成文本输出。常见的模板引擎包括FreeMarker、Velocity和Thymeleaf等
Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎。
Thymeleaf 和 JSP比较：
Thymeleaf目前所作的工作和JSP有相似之处，Thymeleaf和JSP都是属于服务端渲染技术，Thymeleaf比JSP功能强大许多。
Thymeleaf就是SpringBoot 官方推荐使用的模板引擎。
二、搭建thymeleaf环境：
1、创建一个 SpringBoot 项目
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、编写跳转页面的 Controller
@Controller
@RequestMapping("/student")
public class StudentController {@Autowiredprivate IStudentService studentService;@RequestMapping("/selectAll")public String selectAll(Model model) {model.addAttribute("message", "HelloWorld");Student student = new Student(1, "李四", 23, "男");model.addAttribute("student", student);List<Student> list = studentService.selectAll();model.addAttribute("list", list);return "student_list";}
}
3、student_list.html 页面
在resources/templates目录创建一个student_list.html页面。
注意，必须加上命名空间xmlns:th=“http://www.thymeleaf.org/”，否则Thymeleaf的自定义标签没有提示。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--使用th:text输出--><div th:text="${message}"></div><input type="text" th:id="${student.id}" th:name="${student.name}" th:value="${student.name}"/><!--循环--><table border="1"><tr><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td></tr><tr th:each="student:${list}"><td th:text="${student.id}">1</td><td th:text="${student.name}">张三</td><td th:text="${student.age}">23</td><td th:text="${student.gender}">男</td></tr></table><!--取出集合中某一个--><div th:text="${list[0].name}"></div>
</body>
</html>
问题：为什么thymeleaf页面放在templates文件夹里面，并且后缀要是.html呢？
SpringBoot框架会将内置支持的功能组件放在spring-boot-autoconfigure-3.2.5.jar 包下，而 Thymeleaf 框架就是内置支持的。
所以在这个包里面可以找对应的自动配置代码，如图：
如果找默认的属性配置应该找XxxxProperties类，如图所示，Thymeleaf模板的前后缀如下：
所以Thymeleaf的页面存放在templates文件夹中，并且页面的后缀为.html。
三、常用标签:
1.数学运算
二元操作：+, - , * , / , %
一元操作: - （负）
2.逻辑运算
一元 : and or
二元 : !,not
3.比较运算（为避免转义尴尬，可以使用括号中的英文进行比较运算！）
比较：> , < , >= , <= ( gt , lt , ge , le )
等于：== , != ( eq , ne )
4.简单表达式
变量表达式: ${…}
消息表达式: #{…}
URL 表达式: @{…}
<body><!-- 使用th:text属性输出 --><div th:text="${message}" ></div><input type="text" th:id="${student.id}" th:name="${student.name}" th:value="${student.name}"><br/><!--循环--><table border="1"><tr><td>编号</td><td>姓名</td><td>年龄</td><td>生日</td></tr><tr th:each="student:${list}"><td th:text="${student.id}">1</td><td th:text="${student.name}">张三</td><td th:text="${student.age}">23</td><td th:text="${#dates.format(student.birthday, 'yyyy-MM-dd')}">1990-12-13</td></tr></table><!--判断Thymeleaf支持四种判断：th:if/th:unless、逻辑运算符（and、or、not）、三目运算符、switch。--><!--第一种：if & unless--><!-- 如果条件为真，执行标签内的内容 --><div th:if="${list[0].name eq '张三1'}">张三1</div><div th:if="${list[0].name == '张三1'}">张三1</div><!-- 如果条件为假，执行标签内的内容 --><div th:unless="${false}">unless</div><!--第二种：and、or、not--><div th:if="${true or false}">真的18岁</div><div th:if="${not false}">真的别做梦</div><!--第三种：三目运算符--><span th:text="${student.age eq 23} ? '今年是23' : '不是23'"></span><span th:text="${student.age eq 23 ? '今年23' : '不是23'}"></span><!--第四种：switch--><div th:switch="${student.age}"><div th:case="16">我今年16岁</div><div th:case="17">我今年17岁</div><div th:case="18">我今年18岁</div><div th:case="20">我今年20岁</div><div th:case="23">我今年23岁</div><div th:case="*">我年年18岁</div></div>
</body>
th:block
th:block</th:block>是Thymeleaf提供的唯一的一个Thymeleaf块级元素，其特殊性在于Thymeleaf模板引擎在处理th:block的时候会删掉它本身，标签本身不显示，而保留其内容
<div th:switch="${student.age}"><div th:case="16">我今年16岁</div><div th:case="17">我今年17岁</div><div th:case="18">我今年18岁</div><div th:case="20">我今年20岁</div><div th:case="23">我今年23岁</div><div th:case="*">我年年18岁</div>
</div>
<th:block th:switch="${student.age}"><div th:case="16">我今年16岁</div><div th:case="17">我今年17岁</div><div th:case="18">我今年18岁</div><div th:case="20">我今年20岁</div><div th:case="23">我今年23岁</div><div th:case="*">我年年18岁</div>
</th:block>
四、域对象
变量表达式的作用是：从web作用域里面取到对应的值，作用域包括 request、session、application。
@RequestMapping("/data")
public String data(HttpServletRequest request, HttpSession session) {Student student1 = new Student(1, "张三1", 23 , "男");request.setAttribute("student1", student1);Student student2 = new Student(2, "张三2", 23, "男");session.setAttribute("student2", student2);Student student3 = new Student(3, "张三3", 23, "男");ServletContext application = request.getServletContext();application.setAttribute("student3", student3);return "data";
}
<body>request:<div>编号：<span th:text="${student1.id}"></span><br>姓名：<span th:text="${student1.name}"></span><br>年龄：<span th:text="${student1.age}"></span><br></div>session:<div>编号：<span th:text="${session.student2.id}"></span><br>姓名：<span th:text="${session.student2.name}"></span><br>年龄：<span th:text="${session.student2.age}"></span><br></div>application:<div>编号：<span th:text="${application.student3.id}"></span><br>姓名：<span th:text="${application.student3.name}"></span><br>年龄：<span th:text="${application.student3.age}"></span><br></div></body>
作用域内容对象的空值处理：
当获取一个作用域中不存在的对象属性，那么会返回一个null，但是有些情况下还通过点运算符获取对象属性，那么这是SpringBoot会报异常。有些情况下，就是根据某个对象是否为null来执行相应的操作。
–需求：获取session作用域中的user对象，如果不为null就输出Id，如果为null，就输出空字符串，而不是报异常。
–分析：可以在调用对象或者方法的点（.）前面，使用问号（?）来判断null
编号：
五、内置工具对象：# 符号直接使用
除了基本对象, thymeleaf 还提供了一组工具对象，其实和java中对应的方法大同小异。
@RequestMapping(value = "/util")
public String set(Model model) {Set<String> names = new HashSet<String>() ;List<Integer> ids = new ArrayList<Integer>() ;for (int i = 0 ; i < 5 ; i ++) {names.add("boot-" + i) ;ids.add(i) ;}model.addAttribute("names", names) ;model.addAttribute("ids", ids) ;model.addAttribute("mydate", new Date()) ;return "util" ;
}
<body><p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"/><p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss.SSS')}"/><hr/><p th:text="${#strings.replace('www.baidu.cn','.','$')}"/><p th:text="${#strings.toUpperCase('www.baidu.cn')}"/><p th:text="${#strings.trim('www.baidu.cn')}"/><hr/><p th:text="${#sets.contains(names,'boot-0')}"/><p th:text="${#sets.contains(names,'boot-9')}"/><p th:text="${#sets.size(names)}"/><hr/><p th:text="${#lists.contains(ids,0)}"/>
</body>
六、Link URL
链接 URL 表达式语法是 @{…}
反斜杠 ”/“ 开头，代表static目录下的静态资源文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"><script type="text/javascript" src="/jquery-2.1.4.js"></script><script type="text/javascript" th:src="@{/mylayer.js}"></script>
</head>
<body>
</body>
</html>
七、如何引入另一个html页面：
header.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div th:fragment="common_resource"><link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"><script type="text/javascript" th:src="@{/jquery-2.1.4.js}"></script><script type="text/javascript" th:src="@{/mylayer.js}"></script></div>
</body>
</html>
<head><meta charset="UTF-8"><title>Title</title><!--<link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"><script type="text/javascript" th:src="@{/jquery-2.1.4.js}"></script><script type="text/javascript" th:src="@{/mylayer.js}"></script>--><div th:replace="header::common_resource"></div>
</head>
八、thymeleaf字符串拼接
域中存了user.name 张三，页面输出：hello张三
<span th:text="${'hello'+user.name}"></span><br>
<span th:text="'hello'+${user.name}"></span><br>
<span th:text="|hello${user.name}|"></span>
代码在springboot中