第六章：thymeleaf页面模版-7. 包含处理

时间 2019-11-13

标签第六 thymeleaf 页面模版包含处理繁體版

原文原文链接

在全部项目中页面的互相包含是一项很是重要的技术支持，而在thymeleaf也一样支持有数据的包含处理，而对于包含操做在thymeleaf模板之中提供有两种支付语法
th:replace; 是使用标签进行替换原始的宿主标签还在可是包含标签不在；
th:include; 是进行包含原始的宿主标签消失而保留包含的标签
1. 既然要定义被包含的页面因而创建“src/main/resources/templates/commons/footer.html”页面javascript

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<footer th:fragment="companyInfo">
    <p style="color: red">zw(程序生活)</p>
</footer>
</html>

2.随后要进行页面的包含处理html

<div th:replace="@{/commons/footer}::companyInfo"></div>
<br/>
<div th:include="@{/commons/footer}::companyInfo"></div>

3. 在不少的开发之中都须要向被包含页面进行参数的传递在thymeleaf 之中也能够实现同样的处理操做形式使用 th:with的处理模式完成java

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<footer th:fragment="companyInfo">
    <p style="color: red">zw(程序生活)</p>
 
 
    <!--/*@thymesVar id="id" type="com"*/-->
    <p th:text="${id}"/>、<p th:text="${suid}"></p>
    <!--/*@thymesVar id="suid" type="com"*/-->
</footer>
</html>

然后在进行包含处理的时候能够按照以下的方式进行参数的传递ui

<div th:include="@{/commons/footer}::companyInfo" th:with="id=3,suid=35"></div>

footer.htmlcode

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<footer th:fragment="companyInfo">
	<p>魔乐科技（www.mldn.cn）</p>
	<p th:text="${itemid}"/>、<p th:text="${subid}"/>
</footer>

member_map.htmlxml

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>SpringBoot模版渲染</title>
	<script type="text/javascript" th:src="@{/js/main.js}"></script> 
	<link rel="icon" type="image/x-icon" href="/images/mldn.ico"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
	<!-- <div th:replace="@{/commons/footer} :: companyInfo"/> -->
	<div th:include="@{/commons/footer} :: companyInfo" th:with="itemid=2,subid=20"/>
	<hr/>
	<table>
		<tr><td>No.</td><td>KEY</td><td>MID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>
		<tr th:each="memberEntry,memberStat:${allMembers}">
			<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>