
上QQ阅读APP看书,第一时间看更新
3.10 包含指令
在页面开发中,包含是一个重要的指令,利用包含指令可以实现页面代码的重用处理。Thymeleaf也同样支持数据的包含处理,而对于包含操作,在Thymeleaf模板中提供了两种支持语法。
th:replace:使用标签进行替换,原始的宿主标签还在,但是包含标签不在。
th:include:进行包含,原始的宿主标签消失,只保留包含的标签。
1.【mldnboot-thymeleaf项目】建立src/main/view/templates/commons/footer.html页面。

本程序设置了一个包含的名称信息为companyInfo,同时还需要包含页面向本页面传递title与url两个参数信息。
2.【mldnboot-thymeleaf项目】在ThymeleafController控制器类中追加一个新的方法,用于页面跳转。

3.【mldnboot-thymeleaf项目】建立src/main/view/templates/message/message_include.html页面。

本程序使用th:include指令(替换掉父元素<div>)实现了页面的包含处理,同时利用th:with命令向被包含页面传递了两个参数。此时的页面运行效果如图3-15所示。

图3-15 页面包含