thymeleaf 页面引用实现动态布局加载

thymeleaf  页面引用实现动态布局加载

        最近在学习使用 springboot+thymeleaf，在把基本的框架布局功能实现了之后，发现了一些新的问题，就是所有页面都是全加载，也就是说每个页面都要实现布局，真是费时又费力。介于之前的web开发经验，一般都是上左右的布局方式，对于一些小的信息化系统建设也是很方便的一说。

        通过这几天不停的看资料（其实就是百度与Google），找实例，看视频。终于解决了。现将这问题记录于下，希望可以帮助有缘人。

使用 thymeleaf 布局

一般业务处理系统都是上左右布局的方式来实现，同是一些前台的框架也是这样布局的，比如 bootstrap 等，大致如下：

当然也有的是菜单在标题栏处。本次以上图为例。之前如果用 jsp 实现上图的布局比较简单，可通过 iframe 标签来实现。thymeleaf 可通过 fragment 来实现。

fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。

支持的th标签有以下三种方式：

1、th:insert:保留自己的主标签，保留th:fragment的主标签。
2、th:replace:不要自己的主标签，保留th:fragment的主标签。
3、th:include:保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

具体实现，直接看代码吧。

父页面：

  <div class="lyear-layout-container">
    
    <!--左侧导航-->
    <div th:include="common/left::meau_left"></div>
    <!--End 左侧导航-->
    
  </div>

子页面：

<div th:fragment='meau_left'>
<h1>这是左侧菜单</h1>
</div>

 结果：

  <div class="lyear-layout-container">
    
    <!--左侧导航-->
    <div><h1>这是左侧菜单</h1></div>
    <!--End 左侧导航-->
    
  </div>

可以看到在页面加载完成以后，父页面加载了子页面的内容。

总结：

1）、父页面上用标签 th:insert / th:replace / th:include 标示出需要加载的子页面的位置

标签参数格式：th:include="参数1::参数2"

第一个参数：子页面的路径/或html文件名称（不含扩展名）；

第二个参数：为子页面th:fragment的值。可以认为这是一个唯一标识ID。

th:include="::参数2"：只写参数2，这里指fragment名称，则加载本页面对应的fragment。（即父页中的内容）
th:include="参数1::"：只写参数1，则加载整个页面，整个html 标签的内容

2）、子页面上用标签 th:fragment 标示出需要加载到的父页面的内容（th:fragment 这个标签内的代码段）