快速入门springboot 网页开发（三）Thymeleaf高级用法

Thymeleaf高级用法

1. 模板布局

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

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

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

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

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

解释：

引例

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：

<!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>

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>

（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-->

当先锋百科网