硬核！腾讯强推的Thymeleaf高级用法笔记，码农：全篇高光知识点

云烟 • 2024年 1月 20日上午10:23 • 未分类 • 阅读 151

欢迎大家来到IT世界,在知识的湖畔探索吧!

上一篇分享的是《SpringBoot简明教程》，这篇给大家分享《快速入门springboot 网页开发，Thymeleaf高级用法》。

Thymeleaf高级用法

1. 模板布局

◼ 公共部分通常定义为模板布局：如页眉，页脚，公共导航栏、菜单等。

模板布局定义方法

◼ 布局页中用 th:fragment 定义模板片段，其他页面用 th:insert 引用片段

例如： footer.html，通过 th:fragment 定义一个模板片段

<footer th:fragment="copy">
<!--写一些代码-->
</footer>

欢迎大家来到IT世界,在知识的湖畔探索吧!

其他页面通过 th:insert 引用片段：

欢迎大家来到IT世界,在知识的湖畔探索吧!<div th:insert = "~{ footer :: copy }"></div> <!--标准形式-->

解释：

引例

footer.html 页面代码：通过 th:fragment 定义片段名

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Title</title></head><body><footer th:fragment="copy">© 2021 The Good Thymes Virtual Grocery</footer></body></html>

index.html 页面引用 fragment：

欢迎大家来到IT世界,在知识的湖畔探索吧!<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--th/footer 页面名 (相对路径，不含后缀.html)-->
<!--copy 是fragment的名称-->
<div th:insert="~{ th/footer::copy }"></div>
</body>
</html>

简写形式： <div th:insert=” th/footer::copy “></div>

th:insert 、 th:replace、 th:include 区别

<div th:insert="~{ th/footer::copy }"></div>
<div th:replace="~{ th/footer::copy }"></div>
<div th:include="~{ th/footer::copy }"></div>

th:insert：插入片段，原来的标签(div、 footer)还在

th:replace：用片段替换其主标签(div没有了)

th:include：类似于th:insert，但只插入片段的内容

(footer标签没有了)

说明：这三个运行结果表面看上去是相同的

带参数的引用片段

◼ 示例：

footer.html 片段名中声明参数(类似函数定义)

<footer th:fragment="copy(name)">
© 2021 The Good Thymes Virtual Grocery
<!--调用参数-->
<p th:text="'Authorized by ' + ${name}"></p>
</footer>

index.html

<!--实际参值(后台传递过来)-->
<div th:insert="~{ th/footer::copy(${stu.name}) }"></div>

2.表单验证

◼ 表单输入的信息通常需要进行验证，以及提供错误信息反馈。

验证相关的标签

（2）显示所有错误信息：遍历 #fields.errors()

1）添加验证依赖

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

2）在实体类属性中添加约束

接快速入门springboot 网页开发（一）创建的类

public class Student {
@Min(value=2020001,message="最小值2020001")
@Max(value=2020999,message="最大值2020999")
private long id;//主键.
@NotBlank(message="姓名不能为空")
@Length(min=5,max=20,message="姓名长度为5-20个字符")
private String name;
…其他代码不变
}

3）添加控制器代码

@Controller
public class TestController {
	@RequestMapping("/edit")
	public String edit( Model model){
	Student s=new Student(2019001,"小明");
	model.addAttribute("stu",s);
	return "th/form";
	}
}

4） form.html 主要代码

<form th:action="@{/save}" method="post">
<div>
<label for="id">学号</label>
<input type="text" id="id" th:field="${stu.id}" placeholder="请输入学号">
<span th:if="${#fields.hasErrors('stu.id')}" th:errors="${stu.id}" class="warn"></span>
</div>
<div>
<label for="name">姓名</label>
<input type="text" id="name" th:field="${stu.name}" placeholder="请输入姓名">
<span th:if="${#fields.hasErrors('stu.name')}" th:errors="${stu.name}" class="warn"></span>
</div>
<button id="btn" type="submit">保存</button>
<div>
<ul th:if="${#fields.hasErrors('stu.*')}" class="warn">
<li th:each="err:${#fields.errors('stu.*')}" th:text="${err}"></li>
</ul>
</div>
</form>

5)添加控制器代码

（1）使用对象封装前端传来的数据

（2） @Validated 进行验证

（3） BindingResult 对象配合获取验证结果

（4） @ModelAttribute 将数据添加到模型对象中，用于传回给form视图使用

如果验证有错误信息，则将 “stu” 对象(由@ModelAttribute(“stu”) 指定)返回form.html 重新修改

如果没有错误信息，则将 “new_stu” 对象返回 save.html

@RequestMapping(value="/save", method = RequestMethod.POST)
public String save( @ModelAttribute("stu") @Validated Student stu,
BindingResult bindingResult,
Model model){
	if( bindingResult.hasErrors() ){
	return "th/form";
	}
	model.addAttribute("new_stu",stu);
	return "th/save"; //save.html略
}

解释:

最后效果还是很好的，

输入localhost:8080/edit进入表单提交页面，然后如果不符合在实体类属性中添加的约束的话就出现相应的报错信息，可以把报错信息统一改为红色便于识别，如果符合就跳转到save.html页面，这个save.html可以自由发挥

3.常用工具类

◼ Thymeleaf 提供了丰富的表达式工具类，例如（部分）：

#strings：字符串工具类

#dates：时间操作和时间格式化

#numbers：格式化数字对象的方法

#bools：常用的布尔方法Java EE架构

#strings 工具类

◼ 字符串长度（length）

◼ 字符串转换（toString）

◼ 检查字符串是否为空（isEmpty）

◼ 字符串是为空替换操作（defaultString）

◼ 检查字符串中是否包含某个字符串（contains containsIgnoreCase）

◼ 检查字符串是以片段开头还是结尾（startsWith endsWith）

◼ 截取（substring substringAfter substringBefore）

◼ 替换（replace）

◼ 追加（prepend append）

◼ 变更大小写（toUpperCase toLowerCase）

◼ 去空格（trim）

◼ 拆分和组合字符串（arrayJoin arraySplit）Java EE架构

示例

如果值为 null 或 空串，则 true，否则 false
<p th:text="${#strings.isEmpty(stu.name)}"></p>
如果值为 null 或 空串，则显示默认值张三
<p th:text="${#strings.defaultString(stu.name,'张三')}"></p>
<p th:text="${#strings.length(stu.name)}"></p> <!-- 2 (stu.name='小明') -->
<p th:text="${#strings.contains('abcez','ez')}"></p> <!--true-->
<p th:text="${#strings.startsWith('Donabcez','Don')}"></p> <!--true-->
<p th:text="${#strings.indexOf('abcefg','e')}"></p> <!--3-->
<p th:text="${#strings.substring('abcefg',3,5)}"></p> <!--ef-->
<p th:text="${#strings.replace('aabbccbb','bb','zz')}"></p> <!--aazzcczz-->
<p th:text="${#strings.prepend('88888888','027-')}"></p> <!--027-88888888-->
<p th:text="${#strings.append('abc','123')}"></p> <!--abc123-->
<p th:text="${#strings.toUpperCase('abc')}"></p> <!--ABC-->
<p th:text="${#strings.trim(' abc ')}"></p> <!--abc-->

#dates 工具类

◼ 格式化操作（format）

◼ 获取日期属性操作（day month year hour minute second monthName

dayOfWeek ）

◼ 生成日期操作（createNow create createToday）Java EE架构

wustzz

示例

<p th:text="${today}"></p>
<p th:text="${#dates.format(today,'yyyy/MM/dd HH:mm:ss')}"></p>
<p th:text="${#dates.year(today)}"></p>
<p th:text="${#dates.month(today)}"></p>
<p th:text="${#dates.monthName(today)}"></p>
<p th:text="${#dates.day(today)}"></p>
<p th:text="${#dates.dayOfWeek(today)}"></p>
<p th:text="${#dates.dayOfWeekName(today)}"></p>
<p th:text="${#dates.hour(today)}"></p>
<p th:text="${#dates.minute(today)}"></p>
<p th:text="${#dates.second(today)}"></p>
<p th:text="${#dates.createNow()}"></p> <!--含有时间-->
<p th:text="${#dates.createToday()}"></p> <!--时间为00:00:00-->
<p th:text="${#dates.create('2021','03','15')}"></p>

后台添加代码： model.addAttribute(“today”,new Date());

#numbers 工具类

◼ 对不够位数的数字进行补0（formatInteger ）

◼ 设置千位分隔符（formatInteger）

◼ 精确小数点（formatDecimal ）

◼ 设置百分号（formatPercent ）

◼ 生成数组（sequence ）Java EE架构

wustzz

示例

<p th:text="${#numbers.formatDecimal('10.126',3,2)}"></p>
<p th:text="${#numbers.formatCurrency('1000')}"></p>
<div th:each="n:${#numbers.sequence(0,4)}">
<p th:text="${n}"></p>
</div>
<div th:each="num:${#numbers.sequence(0,10,2)}" >
<p th:text="${num}"></p>
</div>

结果： 010.13

结果： ¥1,000.00

生成 [0,1,2,3,4] 数组

生成 [0,2,4,6,8,10] 数组

#bools 工具类

◼ 判断对象是否为 ture 或 false的操作：（isTrue isFalse）

◼ 数字 1 为 ture , 0 为 false;

◼ “on” 为 true, “off” 为 false;

◼ “true” 为 true, “false”为 false;Java EE架构

示例

<p th:text="${#bools.isTrue(1)}"></p> <!--true-->
<p th:text="${#bools.isTrue('on')}"></p> <!--true-->
<p th:text="${#bools.isTrue('true')}"></p> <!--true-->

以上就是《快速入门springboot 网页开发，Thymeleaf高级用法》的分享。
也欢迎大家交流探讨，该文章若有不正确的地方，希望大家多多包涵。
创作不易，你们的支持就是我最大的动力，如果对大家有帮忙给个赞哦~~~

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/38014.html