第六章：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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。