Thymeleaf小知识整理

最新推荐文章于 2021-10-06 22:52:55 发布

___Jacob

最新推荐文章于 2021-10-06 22:52:55 发布

阅读量275

点赞数

文章标签： java html

本文链接：https://blog.csdn.net/weixin_45591604/article/details/103834034

版权

Thymeleaf小知识整理

Thymeleaf概述

Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库
Jasypt的作者。
Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。

它的特点便是：开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：

XML(可扩展标记语言)
有效的XML(格式正确有效的XML)
XHTML(可扩展超文本标记语言)
有效的XHTML(格式正确有效的XHTML)
HTML5
旧版HTML5(html过度到html5的相关版本)

所有这些模式都指的是格式良好的XML文件，但Legacy HTML5模式除外，它允许您处理HTML5文件，其中包含独立（非关闭）标记，没有值的标记属性或不在引号之间写入的标记属性。为了在这种特定模式下处理文件，Thymeleaf将首先执行转换，将您的文件转换为格式良好的XML文件，这些文件仍然是完全有效的HTML5（实际上是创建HTML5代码的推荐方法）。另请注意，验证仅适用于XML和XHTML模板。然而，这些并不是Thymeleaf可以处理的唯一模板类型，并且用户始终能够通过指定在此模式下解析模板的方法和编写结果的方式来定义他/她自己的模式。这样，任何可以建模为DOM树（无论是否为XML）的东西都可以被Thymeleaf有效地作为模板处理。

2. SpringBoot整合Thymeleaf

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

2.1编写页面

在thymeleaf项目中；页面默认的放置路径可以通过查看 ThymeleafProperties 查看：

可以看到两行代码
在这里插入图片描述
这里表示固定的页面放置位置

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

#注意添加命名空间
#xmlns:th="http://www.thymeleaf.org"

2.2编写控制器

@GetMapping("/hello")
public ModelAndView hello(){
  	ModelAndView mv = new ModelAndView("demo");
	//设置数据
	mv.addObject("msg", "你好 Thymeleaf！");
	return mv;
}

3、Thymeleaf基本语法

3.1配置模板缓存

为了后续测试更加及时有效的更新；可以对thymeleaf的模板缓存设置为false，不启用；具体如下：
打开\resources\application.yml 添加如
下内容：

spring:
	thymeleaf:
		cache: false

3.2. 表达式符号说明

1）变量表达式： ${…} 用于访问容器上下文环境中的变量，例如:

<span 1 th:text="${msg}">

2）选择变量表达式： *{…} 获取指定的对象（th:object定义的）中的变量值。如果是单独的对象，
则等价于${}

<div th:object="${user}" >
Name: <span th:text=" *{firstName}" >Sebastian.
Surname: <span th:text=" *{lastName}" >Pepper.
Nationality: <span th:text=" *{nationality}" >Saturn.
</div>

3）信息表达式： #{…} 一般用于显示页面静态文本。将可能需要根据需求而整体变动的静态文本放
在properties文件中,方便维护。一般与th:text 一起使用，加载数据源中的消息，用于国际化。例如:

1、templates/home.properties文件中有：home.welcome=this messages is from
home.properties!
2、<p th: text="#{home.welcome}" >会显示home.welcome中定义的内容</p>

4）链接URL表达式： @{…} 用于链接。可以链接目录下的静态资源,也可以链接到后端请求处理接
口，例如:

<link th:src="@{/resources/js/jquery.js}" />
<li><a th:href="@{/test/hi}">首页</a></li>

5）工具对象表达式 #** 常用于日期、集合、数组对象的访问。这些工具对象就像是java对象,可以访
问对应java对象的方法来进行各种操作。例如：#maps,#strings
6）字符串连接 ||

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
也可以写成如下：
<span th:text="|Welcome to our application, ${user.name}!|">

3.3. action

定义后台控制器路径，类似标签的action属性。
例如：

<form id="login-form" th:action="@{/test/hello}">
<button>提交</button>
</form>

表示提交的请求地址为/test/hello

3.4. each

语法：----》 th:each="循环变量,循环状态:${变量}"
循环状态的属性有如下：
1. index:当前迭代对象的index（从0开始计算）
2. count: 当前迭代对象的index(从1开始计算)
3. size:被迭代对象的大小
4. current:当前迭代变量
5. even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
6. first:布尔值，当前循环是否是第一个
7. last:布尔值，当前循环是否是最后一个

3.4.1. 数组

在控制器内添加一个数组，放置到modelandview中

在demo.html内添加如下

<br>----------------------数组-------------------------<br>
<div th:each="arr, arrStat:${names}">
<span th:text="${arrStat.count}"></span><span th:text="${arr}"></span>
</div>
--或者--<br>
<div th:each="arr:${names}">
<span th:text="${arr}"></span>
</div>
</body>
</html>

3.4.2. map

在控制器内添加map

//设置map
Map<String, Object> goods = new HashMap<>();
goods.put("name", "苹果");
goods.put("price", 5.8);
mv.addObject("goods", goods);

同样，在demo.html内添加如下

<br>----------------------map-------------------------<br>
<div th:each="map, goodsStat:${goods}">
map = <span th:text="${map}"></span><br>
map.key = <span th:text="${map.key}"></span><br>
map.value = <span th:text="${map.value}"></span><br>
goodsStat.current.key = <span th:text="${goodsStat.current.key}"></span>
<br>
goodsStat.current.value = <span th:text="${goodsStat.current.value}">
</span><br>
</div>

3.4.3. 对象

thymeleaf有针对对象的语法，自行创建一个对象，其对象内属性可通过如下语法表现出来

<br>----------------------自定义对象-------------------------<br>
<table>
<tr>
<td>序号</td>
<td>id</td>
<td>名称</td>
<td>地址</td>
</tr>
<tr th:each="user,userStat:${userList}">
<td th:text="${userStat.count}"></td>
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.address}"></td>
</tr>
</table>

3.5. if与unless

<br>----------------------if 及 unless-------------------------<br>
<div th:if="${userList.size() > 0}">userList有数据</div>
<div th:unless="${userList.size() > 2}">userList数据小于等于2</div>

语法上
1、如果成立，则是
2、除非成立，否则是
把上代码结果套上上述语法则是结果。

3.6. fragment

th:fragment 可以定义一个独立的模块；其它页面可以通过 th:include 引入该模块
创建\resources\templates\footer.html
如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf测试</title>
</head>
<body>
footer页面中不在fragment中的内容。。。
<div th:fragment="fragment1">footer页面中的fragment...</div>
</body>
</html>

3.7. include

th:include 可以引入其它页面中的模块
1）修改 resources\templates\demo.html
添加部分内容如下

<br>----------------------fragment&include-------------------------<br>
<div th:include="footer::fragment1"></div>

这样就可以引用

3.8. 内置对象

Thymeleaf提供了很多的内置对象；如下：

#dates: java.util.Date的相关方法。对象:日期格式、组件提取等
#calendars: 类似于#日期,但对于java.util.Calendar日历对象
#numbers: 格式化数字对象的相关方法
#strings:字符串对象的相关方法:包含startsWith等
#objects: 对象相关方法
#bools: 布尔类型相关方法
#arrays: 数组相关方法
#lists: list集合
#sets: set集合
#maps: map集合
#aggregates: 用于创建聚集在数组或集合的相关方法
#messages: 获取外部信息内部变量表达式

3.9. javascript应用

如果在html中的javascript代码块中引用thymeleaf的表达式的话；那么其语法格式如下：

<!--方式1-->
<script th:inline="javascript">
var xx = [[${xxxx}]];
</script>
<!--方式2-->
<script th:inline="javascript">
/*<![CDATA[*/
var yyyy = /*[[${yyyy}]]*/'默认值';
/*]]*/
</script>

<br>----------------------javascript-------------------------<br>
<button onclick="showGoodsName()">显示商品名称</button>
<button onclick="showPrice()">显示商品价格</button>
<script th:inline="javascript">
function showGoodsName() {
var goodsName = [[${goods.name}]];
alert(goodsName);
}
</script>
<script th:inline="javascript">
/*<![CDATA[*/
function showPrice() {
var price = /*[[${goods.price}]]*/'100';
alert(price);
}
/*]]>*/
</script>

第二片代码中‘100’是默认值的意思。

___Jacob

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf小知识整理

Thymeleaf小知识整理Thymeleaf概述Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，...
复制链接

扫一扫