Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）

你的名字 2023-10-18 20:39 42阅读 0赞

场景

使用Thymelaf 时，可以提取公共页面，比如侧边栏、需要公共引入的css、js文件、页脚等都可以提取出来。只编写业务页面的内容部分即可。

三种不同引入方式的区别

th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中，

th:replace：将代码块片段整个替换使用了th:replace的HTML标签中，

th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中

用一个官方例子来区分三者的不同：

  1. <!--th:fragment定义代码块标识-->
  2. <footer th:fragment="copy">
  3. © 2011 The Good Thymes Virtual Grocery
  4. </footer>
  6. <!--三种不同的引入方式-->
  7. <div th:insert="footer :: copy"></div>
  8. <div th:replace="footer :: copy"></div>
  9. <div th:include="footer :: copy"></div>
  11. <!--th:insert是在div中插入代码块，即多了一层div-->
  12. <div>
  13.     <footer>
  14.     © 2011 The Good Thymes Virtual Grocery
  15.     </footer>
  16. </div>
  18. <!--th:replace是将代码块代替当前div，其html结构和之前一致-->
  19. <footer>
  20. © 2011 The Good Thymes Virtual Grocery
  21. </footer>
  23. <!--th:include是将代码块footer的内容插入到div中，即少了一层footer-->
  24. <div>
  25. © 2011 The Good Thymes Virtual Grocery
  26. </div>

实现

将公共的页面放在template目录下的layout目录下

![Image 1][]watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70

采用从后往前的顺序来引用

最终业务开发页面代码

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
  3.      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文件路径-->
  4. <div th:fragment="content">
  5.     <div class="ibox float-e-margins">
  6.         <div class="ibox ">
  7.             <div class="ibox-title">
  9.                 <h5>条件搜索</h5>
  10.                 <div class="ibox-tools">
  11.                     <a class="collapse-link">
  12.                         <i class="fa fa-chevron-up"></i>
  13.                     </a>
  14.                 </div>
  15.             </div>
  16.             <div class="ibox-content">
  17.                 <table class="table my-minus-1 mb-minus-1">
  18.                     <tbody>
  19.                     <tr>
  20.                         <td>
  21.                             <div class="row" id="searchCondition">
  22.                                 <div class="col-sm-2">
  23.                                     <div class="form-group">
  24.                                         <label class="col-form-label" for="purchaseCode">收货单号</label>
  25.                                         <input type="text" id="purchaseCode" name="purchaseCode" value="" placeholder="收货单号" class="form-control">
  26.                                     </div>
  27.                                 </div>
  28.                                 <div class="col-sm-2">
  29.                                     <div class="form-group">
  30.                                         <label class="col-form-label" for="supplierName">供应商名称</label>
  31.                                         <input type="text" id="supplierName" name="supplierName" value="" placeholder="供应商名称" class="form-control">
  32.                                     </div>
  33.                                 </div>
  34.                                 <div class="col-sm-2">
  35.                                     <div class="form-group">
  36.                                         <label class="col-form-label" for="status">状态</label>
  37.                                         <select  class="form-control" id="status" name="status">
  38.                                             <option value="">全部</option>
  39.                                             <option th:each="result : ${codeList}" th:value="${result.codeValue}" th:text="${result.codeName}"></option>
  40.                                         </select>
  41.                                     </div>
  42.                                 </div>
  43.                             </div>
  44.                         </td>
  45.                     </tr>
  46.                     </tbody>
  47.                     <tfoot>
  48.                     <tr class="text-center">
  49.                         <td colspan="4">
  50.                             <button id="resetBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button>
  51.                             <button id="searchBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button>
  52.                         </td>
  53.                     </tr>
  54.                     </tfoot>
  55.                 </table>
  56.             </div>
  57.         </div>
  58.         <div class="ibox-content">
  59.             <div class="table-responsive">
  60.                 <P>
  61.                     <shiro:hasPermission name="roleAdd">　　
  63.                     </shiro:hasPermission>
  64.                     <button id="detailBtn" class="btn btn-info " type="button"><i class="fa fa-eye"></i> 查看</button>
  65.                     <button id="delBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 删除</button>
  66.                     <button id="submitBtn" class="btn btn-info " type="button"><i class="fa fa-arrow-up"></i> 提交</button>
  67.                     <button id="importBtn" class="btn btn-info " type="button"><i class="fa fa-file-excel-o"></i> 导入</button>
  68.                     <button id="printBtn" class="btn btn-info " type="button"><i class="fa fa-print"></i> 打印</button>
  69.                     <button id="dowloadBtn" class="btn btn-info " type="button"><i class="fa fa-download"></i> 模板下载</button>
  70.                     <button id="InOrderBtn" class="btn btn-info " type="button"><i class="fa fa-plus"></i> 生成入库单数据</button>
  71.                     <button id="refreshBt" class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 刷新</button>
  72.                 </P>
  73.                 <p>
  75.                 </p>
  76.                 <table id="wmsReceiveOrder_table_id" class="table table-striped table-bordered hover" style="width:100%">
  77.                     <thead>
  78.                     <tr>
  79.                         <th>序号</th>
  80.                         <th>收货单号</th>
  81.                         <th>收货日期</th>
  82.                         <th>收货人</th>
  83.                         <th>供应商编号</th>
  84.                         <th>供应商名称</th>
  85.                         <th>总托数</th>
  86.                         <th>总件数</th>
  87.                         <th>送货单号</th>
  88.                         <th>创建人</th>
  89.                         <th>创建日期</th>
  90.                         <th>状态</th>
  91.                     </tr>
  92.                     </thead>
  93.                     <tbody>
  94.                     </tbody>
  95.                 </table>
  96.             </div>
  97.         </div>
  98.     </div>
  99.     <div class="modal inmodal" id="apImportModel" tabindex="-1" role="dialog"  aria-hidden="true">
  100.         <div class="modal-dialog" id="apImportDiv" th:fragment="apImportDiv">
  101.             <div class="modal-content animated fadeIn">
  102.                 <button type="button" class="close" onclick="return Testclose();" id="closeUploadBtn"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  103.                 <form  class="dropzone"  id="dropzoneForm" enctype="multipart/form-data">
  104.                     <div class="fallback">
  105.                         <input name="file" value="1M以内的Excel文件" type="file" id="file_id"  accept=".xls,.xlsx" onchange="fileChange(this);" />
  106.                     </div>
  107.                 </form>
  108.                 <button id="uploladBtn" class="btn btn-info mt-2" type="button" onclick="return uploadExcel()"><i class="fa fa-reply"></i>上传</button>
  109.                 <button id="parseBtn" class="btn btn-info mt-2" type="button" onclick="return parseExcel()"><i class="fa fa-reply"></i>导入</button>
  110.             </div>
  111.         </div>
  112.     </div>
  113.     <!-- 查看详情弹窗显示-->
  114.     <div class="modal inmodal" id="receiveOrderDetailsModel" tabindex="-1" role="dialog"  aria-hidden="true">
  115.         <div class="modal-dialog" id="receiveOrderDetailsDiv" th:fragment="receiveOrderDetailsDiv">
  116.             <div class="modal-content animated fadeIn">
  117.                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  120.             </div>
  121.         </div>
  122.     </div>
  123. </div>
  125. </html>

注：

1.此页面通过th:replace来添加需要引用的css和js文件，即用layput目录下的layout.html来代替，并传递三个参数，一个是页面标题，一个是CSS路径，一个是js路径。

2.th:fragment部分就是声明一个代码块，是主要的业务代码部分。

来到引用的layout.html

layout是控制整个页面布局的模板文件。

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org" >
  4. <head th:replace="layout/header::head(${title},${cssPaths})"></head>
  5. <body>
  6. <div id="wrapper">
  7.     <div th:replace="layout/slider::silder()"></div>
  8.     <div id="page-wrapper" class="gray-bg" >
  9.         <div th:replace="layout/navbar::navbar()"></div>
  10.         <div class="wrapper wrapper-content animated fadeInRight">
  11.             <div th:include="::content"></div>
  12.         </div>
  13.         <div class="footer">
  14.             <div class="pull-right">
  15.                 <a href="https://blog.csdn.net/BADAO_LIUMANG_QIZHI" target="_wongoing">霸道 </a>技术支持
  16.             </div>
  17.             <div>
  18.                 <strong>流氓</strong> 气质管理系统
  19.             </div>
  20.         </div>
  22.     </div>
  23. </div>
  24. </body>
  25. <footer th:replace="layout/footer::foot(${jsPaths})"></footer>
  26. </html>

注：

1.head部分通过th:replace来使用layout目录下的header.html下的head代码块（即使用th:fragment=”head(title,cssPaths)标识的部分）来代替，并将从上个页面接收到的参数再传递给head代码块。

2.再往下使用layout目录下的slide.html中的silder代码块来代替，使用公共侧边栏，下面同理引入导航栏。

3.再往下使用 th:include来引进当前页面的content代码块，即上个页面使用

声明的部分。

4.再往下就是公共的页脚部分，没有抽取公共页面，直接写死即可。

5.再往下就是使用th:replace引用的页脚部分，接受上个页面传递的js路径参数，并传递给layout目录下的footer.html中的foot代码块。

引入的head页面代码

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:fragment="head(title,cssPaths)">
  5.     <title th:text="${title}"></title>
  6.     <meta charset="UTF-8"/>
  7.     <meta name= "viewport"content="width=device-width, initial-scale=1.0">
  9.     <!--begin::基础样式 -->
  10.     <link th:href="@{/public/css/bootstrap.min.css}" rel="stylesheet">
  11.     <link th:href="@{/public/font-awesome/css/font-awesome.css}" rel="stylesheet">
  12.     <link th:href="@{/public/css/animate.css}" rel="stylesheet">
  13.     <link th:href="@{/public/css/style.css}" rel="stylesheet">
  14.     <link th:href="@{/public/css/my-style.css}" rel="stylesheet">
  15.     <!--end::基础样式 -->
  17.     <!--begin::页面样式 -->
  18.     <link rel="stylesheet" type="text/css" th:each="cssPaths,status:${#strings.setSplit(cssPaths,',')}" th:href="@{${cssPaths}}"/>
  19.     <!--end::页面样式 -->
  21. </head>
  22. </html>

注：

1.通过th:fragment=”head(title,cssPaths)接收上个页面传递过来的参数，标题和CSS路径。

2.通过th:text=”${title}“动态显示标题。

3.然后引用一些基础样式，引用href属性通过@符号来引用。

4.然后分隔接受的cssPath参数，通过循环依次引入，使用内置变量通过#strings.setSplit，使用#来使用。使用${cssPaths}接受上个页面传递的参数。使用@符号使用href属性。

引入的silder页面代码

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3.     <nav class="navbar-default navbar-static-side" role="navigation" th:fragment="silder()">
  4.         <div class="sidebar-collapse">
  5.             <ul class="nav metismenu" id="side-menu">
  7.             </ul>
  8.         </div>
  9.     </nav>
  10. </html>

引入的navbar页面代码

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3.     <div class="row border-bottom" th:fragment="navbar()">
  4.         <nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
  5.             <div class="navbar-header">
  6.             </div>
  7.             <ul class="nav navbar-top-links navbar-right">
  8.                 <li>
  9.                     <a th:href="@{/logout}">
  10.                         <i class="fa fa-sign-out"></i> 退出
  11.                     </a>
  12.                 </li>
  13.             </ul>
  14.         </nav>
  15.     </div>
  16. </html>

注：

1.只是抽取了退出按钮，其中退出的href属性通过th:href=”@{/logout}“来引用，跳转到退出登录对应的url。

引入的foot页面代码

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <footer th:fragment="foot(jsPaths)">
  4.     <!--begin::基础js -->
  5.     <!-- Mainly scripts -->
  6.     <script th:src="@{'/public/js/jquery-3.1.1.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  7.     <script th:src="@{'/public/js/popper.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  8.     <script th:src="@{'/public/js/bootstrap.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  9.     <script th:src="@{'/public/js/plugins/metisMenu/jquery.metisMenu.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  10.     <script th:src="@{'/public/js/plugins/slimscroll/jquery.slimscroll.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  11.     <!-- Custom and plugin javascript -->
  12.     <script th:src="@{'/public/js/inspinia.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  13.     <script th:src="@{'/public/js/plugins/pace/pace.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  14.     <script th:src="@{'/public/js/cookie.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  15.     <!--end::基础js -->
  16.     <!--begin::页面js -->
  17.     <script th:each="jsPaths,status:${#strings.setSplit(jsPaths,',')}" th:src="@{${jsPaths}+'?t='+${#strings.randomAlphanumeric(9)}}"></script>
  18.     <!--end::页面js -->
  19.     <script th:src="@{'/modular/index.js?t='+${#strings.randomAlphanumeric(9)}}"></script>
  21. </footer>
  22. </html>

注：

1.大体思路同上面的cssPath路径的解析引用。

2.这里在每个引用的js后面追加了一个9位的随机数，掩人耳目。

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Thymeleaf抽取公共页面片段

    抽取页面 项目中，一般把所有的公共页面片段都抽取出来 放在一个独立的页面中 其他，所有的页面根据需要进行引用 参考文档 ![这里写图片描述][70] t

    墨蓝墨蓝/ 0 赞/ 372 阅读

    相关 thymeleaf引入模板页面

    通常我们一个网站页面的头部和底部都是相同的，我们不可能在每个页面都写相同的内容，一般都会将这些相同的写成模板在需要的页面引入即可。 demo开始： 写一个通用的底部：

    怼烎@怼烎@/ 0 赞/ 360 阅读

    相关 RMQ模板（以poj 3264为例）

    题目：[点击打开链接][Link 1] 题意：N头牛，标号1—N，每头牛一个高度，求Q次查询l，r标号内的最高与最低之差。 分析：RMQ模板题。RMQ入门参考[htt

    朱雀朱雀/ 0 赞/ 358 阅读