Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）
生活随笔
收集整理的這篇文章主要介紹了
Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
使用Thymelaf 時，可以提取公共頁面，比如側邊欄、需要公共引入的css、js文件、頁腳等都可以提取出來。只編寫業務頁面的內容部分即可。
三種不同引入方式的區別
th:insert：將代碼塊片段整個插入到使用了th:insert的HTML標簽中，
th:replace：將代碼塊片段整個替換使用了th:replace的HTML標簽中，
th:include：將代碼塊片段包含的內容插入到使用了th:include的HTML標簽中
用一個官方例子來區分三者的不同：
?
<!--th:replace是將代碼塊代替當前div，其html結構和之前一致--> <footer> © 2011 The Good Thymes Virtual Grocery </footer> <!--th:include是將代碼塊footer的內容插入到div中，即少了一層footer--> <div> © 2011 The Good Thymes Virtual Grocery </div>實現
將公共的頁面放在template目錄下的layout目錄下
采用從后往前的順序來引用
最終業務開發頁面代碼
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"th:replace="layout/layout(title='收貨單數據',cssPaths='/public/css/plugins/datapicker/datepicker3.css,/public/css/plugins/switchery/switchery.css,/public/css/plugins/dropzone/basic.css,/public/css/plugins/dropzone/dropzone.css,/public/css/plugins/select2/select2.min.css,/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/dropzone/dropzone.js,/public/js/plugins/switchery/switchery.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/receiveOrder/wmsReceiveOrder.js')"><!-- layout文件路徑--> <div th:fragment="content"><div class="ibox float-e-margins"><div class="ibox "><div class="ibox-title"><h5>條件搜索</h5><div class="ibox-tools"><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></div></div><div class="ibox-content"><table class="table my-minus-1 mb-minus-1"><tbody><tr><td><div class="row" id="searchCondition"><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="purchaseCode">收貨單號</label><input type="text" id="purchaseCode" name="purchaseCode" value="" placeholder="收貨單號" class="form-control"></div></div><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="supplierName">供應商名稱</label><input type="text" id="supplierName" name="supplierName" value="" placeholder="供應商名稱" class="form-control"></div></div><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="status">狀態</label><select? class="form-control" id="status" name="status"><option value="">全部</option><option th:each="result : ${codeList}" th:value="${result.codeValue}" th:text="${result.codeName}"></option></select></div></div></div></td></tr></tbody><tfoot><tr class="text-center"><td colspan="4"><button id="resetBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button><button id="searchBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button></td></tr></tfoot></table></div></div><div class="ibox-content"><div class="table-responsive"><P><shiro:hasPermission name="roleAdd"> </shiro:hasPermission><button id="detailBtn" class="btn btn-info " type="button"><i class="fa fa-eye"></i> 查看</button><button id="delBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 刪除</button><button id="submitBtn" class="btn btn-info " type="button"><i class="fa fa-arrow-up"></i> 提交</button><button id="importBtn" class="btn btn-info " type="button"><i class="fa fa-file-excel-o"></i> 導入</button><button id="printBtn" class="btn btn-info " type="button"><i class="fa fa-print"></i> 打印</button><button id="dowloadBtn" class="btn btn-info " type="button"><i class="fa fa-download"></i> 模板下載</button><button id="InOrderBtn" class="btn btn-info " type="button"><i class="fa fa-plus"></i> 生成入庫單數據</button><button id="refreshBt" class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 刷新</button></P><p></p><table id="wmsReceiveOrder_table_id" class="table table-striped table-bordered hover" style="width:100%"><thead><tr><th>序號</th><th>收貨單號</th><th>收貨日期</th><th>收貨人</th><th>供應商編號</th><th>供應商名稱</th><th>總托數</th><th>總件數</th><th>送貨單號</th><th>創建人</th><th>創建日期</th><th>狀態</th></tr></thead><tbody></tbody></table></div></div></div><div class="modal inmodal" id="apImportModel" tabindex="-1" role="dialog"? aria-hidden="true"><div class="modal-dialog" id="apImportDiv" th:fragment="apImportDiv"><div class="modal-content animated fadeIn"><button type="button" class="close" onclick="return Testclose();" id="closeUploadBtn"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><form? class="dropzone"? id="dropzoneForm" enctype="multipart/form-data"><div class="fallback"><input name="file" value="1M以內的Excel文件" type="file" id="file_id"? accept=".xls,.xlsx" onchange="fileChange(this);" /></div></form><button id="uploladBtn" class="btn btn-info mt-2" type="button" onclick="return uploadExcel()"><i class="fa fa-reply"></i>上傳</button><button id="parseBtn" class="btn btn-info mt-2" type="button" onclick="return parseExcel()"><i class="fa fa-reply"></i>導入</button></div></div></div><!-- 查看詳情彈窗顯示--><div class="modal inmodal" id="receiveOrderDetailsModel" tabindex="-1" role="dialog"? aria-hidden="true"><div class="modal-dialog" id="receiveOrderDetailsDiv" th:fragment="receiveOrderDetailsDiv"><div class="modal-content animated fadeIn"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></div></div></div> </div></html>注：
1.此頁面通過th:replace來添加需要引用的css和js文件，即用layput目錄下的layout.html來代替，并傳遞三個參數，一個是頁面標題，一個是CSS路徑，一個是js路徑。
2.th:fragment部分就是聲明一個代碼塊，是主要的業務代碼部分。
來到引用的layout.html
layout是控制整個頁面布局的模板文件。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org" > <head th:replace="layout/header::head(${title},${cssPaths})"></head> <body> <div id="wrapper"><div th:replace="layout/slider::silder()"></div><div id="page-wrapper" class="gray-bg" ><div th:replace="layout/navbar::navbar()"></div><div class="wrapper wrapper-content animated fadeInRight"><div th:include="::content"></div></div><div class="footer"><div class="pull-right"><a href="https://blog.csdn.net/BADAO_LIUMANG_QIZHI" target="_wongoing">霸道 </a>技術支持</div><div><strong>流氓</strong> 氣質管理系統</div></div></div> </div> </body> <footer th:replace="layout/footer::foot(${jsPaths})"></footer> </html>注：
1.head部分通過th:replace來使用layout目錄下的header.html下的head代碼塊（即使用th:fragment="head(title,cssPaths)標識的部分）來代替，并將從上個頁面接收到的參數再傳遞給head代碼塊。
2.再往下使用layout目錄下的slide.html中的silder代碼塊來代替，使用公共側邊欄，下面同理引入導航欄。
3.再往下使用 th:include來引進當前頁面的content代碼塊，即上個頁面使用<div th:fragment="content">聲明的部分。
4.再往下就是公共的頁腳部分，沒有抽取公共頁面，直接寫死即可。
5.再往下就是使用th:replace引用的頁腳部分，接受上個頁面傳遞的js路徑參數，并傳遞給layout目錄下的footer.html中的foot代碼塊。
引入的head頁面代碼
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="head(title,cssPaths)"><title th:text="${title}"></title><meta charset="UTF-8"/><meta name= "viewport"content="width=device-width, initial-scale=1.0"><!--begin::基礎樣式 --><link th:href="@{/public/css/bootstrap.min.css}" rel="stylesheet"><link th:href="@{/public/font-awesome/css/font-awesome.css}" rel="stylesheet"><link th:href="@{/public/css/animate.css}" rel="stylesheet"><link th:href="@{/public/css/style.css}" rel="stylesheet"><link th:href="@{/public/css/my-style.css}" rel="stylesheet"><!--end::基礎樣式 --><!--begin::頁面樣式 --><link rel="stylesheet" type="text/css" th:each="cssPaths,status:${#strings.setSplit(cssPaths,',')}" th:href="@{${cssPaths}}"/><!--end::頁面樣式 --></head> </html>注：
1.通過th:fragment="head(title,cssPaths)接收上個頁面傳遞過來的參數，標題和CSS路徑。
2.通過th:text="${title}"動態顯示標題。
3.然后引用一些基礎樣式，引用href屬性通過@符號來引用。
4.然后分隔接受的cssPath參數，通過循環依次引入，使用內置變量通過#strings.setSplit，使用#來使用。使用${cssPaths}接受上個頁面傳遞的參數。使用@符號使用href屬性。
引入的silder頁面代碼
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"><nav class="navbar-default navbar-static-side" role="navigation" th:fragment="silder()"><div class="sidebar-collapse"><ul class="nav metismenu" id="side-menu"></ul></div></nav> </html>引入的navbar頁面代碼
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"><div class="row border-bottom" th:fragment="navbar()"><nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0"><div class="navbar-header"></div><ul class="nav navbar-top-links navbar-right"><li><a th:href="@{/logout}"><i class="fa fa-sign-out"></i> 退出</a></li></ul></nav></div> </html>注：
1.只是抽取了退出按鈕，其中退出的href屬性通過th:href="@{/logout}"來引用，跳轉到退出登錄對應的url。
引入的foot頁面代碼
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <footer th:fragment="foot(jsPaths)"><!--begin::基礎js --><!-- Mainly scripts --><script th:src="@{'/public/js/jquery-3.1.1.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/popper.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/bootstrap.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/plugins/metisMenu/jquery.metisMenu.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/plugins/slimscroll/jquery.slimscroll.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><!-- Custom and plugin javascript --><script th:src="@{'/public/js/inspinia.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/plugins/pace/pace.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/cookie.js?t='+${#strings.randomAlphanumeric(9)}}"></script><!--end::基礎js --><!--begin::頁面js --><script th:each="jsPaths,status:${#strings.setSplit(jsPaths,',')}" th:src="@{${jsPaths}+'?t='+${#strings.randomAlphanumeric(9)}}"></script><!--end::頁面js --><script th:src="@{'/modular/index.js?t='+${#strings.randomAlphanumeric(9)}}"></script></footer> </html>注：
1.大體思路同上面的cssPath路徑的解析引用。
2.這里在每個引用的js后面追加了一個9位的隨機數，掩人耳目。
?
?
總結
以上是生活随笔為你收集整理的Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux-目录结构说明
- 下一篇： Font Awesome一套绝佳的图标字