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 这个标签内的代码段)