所有的项目开发之中页面的相互包含是一项非常重要的技术支持,在thymeleaf模板之中提供有两种支持语法:
th:replace 是使用标签进行替换 原始的宿主标签还在,但是包含标签不在
th:include 是进行包含,原始的宿主标签消失,而保留包含的标签.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>SpringBoot模板渲染</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html;charse=UTF-8">
</head>
<body>
<div th:replace="@{/commons/footer}::companyInfo"></div>
<div th:include="@{/commons/footer}::companyInfo"></div>
</body>
</html>
http://localhost/member/map
<footer>
<p>百度(www.baidu.com)</p>
</footer>
<div>
<p>百度(www.baidu.com)</p>
</div>
1、既然要定义被包含的页面,于是建立"src/main/templates/commons/footer.html"页面;
footer.html
<meta charset="UTF-8">
<footer th:fragment="companyInfo">
<p>百度(www.baidu.com)</p>
</footer>
2、随后要进行页面的包含处理:
member_map.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>SpringBoot模板渲染</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html;charse=UTF-8">
</head>
<body>
<div th:replace="@{/commons/footer}::companyInfo"></div>
<table>
<tr><td>No.</td><td>KEY</td><td>UID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>
<tr th:each="memberEntry,memberStat:${allUsers}">
<td th:text="${memberStat.index + 1}"/>
<td th:text="${memberEntry.key}"/>
<td th:text="${memberEntry.value.mid}"/>
<td th:text="${memberEntry.value.name}"/>
<td th:text="${memberEntry.value.age}"/>
<td th:text="${memberStat.even}"/>
<td th:text="${memberStat.odd}"/>
</tr>
</table>
</body>
</html>
3、在很多的开发之中需要想被包含页面进行参数的传递,于是,在thymeleaf之中也可以实现一样的处理操作形式.
使用"th:with"的处理模式完成.
footer.html
<meta charset="UTF-8">
<footer th:fragment="companyInfo">
<p>百度(www.baidu.com)</p>
<p th:text="${itemid}"></p>
<p th:text="${subid}"></p>
</footer>
而后在进行包含处理的时候可以按照如下的方式进行参数的传递:
member_map.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>SpringBoot模板渲染</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html;charse=UTF-8">
</head>
<body>
<!-- <div th:replace="@{/commons/footer}::companyInfo"></div> -->
<div th:include="@{/commons/footer}::companyInfo" th:with="itemid=2,subid=20"></div>
</body>
</html>
百度(www.baidu.com)
2
20
那么此时就可以利用此技术与一些其它的前端开发框架整合进行项目的编写开发了
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
