Thymeleaf 布局设计与实战：SpringBoot2.0 结合 thymeleaf-layout-dialect

下载需积分: 0 | PDF格式 | 590KB | 更新于2024-08-05 | 13 浏览量 | 举报

"本课程主要讲解Thymeleaf页面布局的使用方法，旨在提升前端代码的复用性和效率。Thymeleaf作为一种流行的Java模板引擎，对于页面布局有着良好的支持。在SpringBoot 2.0中，需要额外引入thymeleaf-layout-dialect依赖来实现布局功能。" 在Thymeleaf中，页面布局的关键在于代码片段的定义和使用。首先，我们可以创建一个名为`copyright.html`的代码片段文件，将其放在`layout`目录下，并使用`th:fragment`属性定义一个可重用的部分，例如定义一个版权信息片段： ```html <footer th:fragment="copyright">©2018</footer> ``` 然后，在其他页面（如`index.html`）中，我们可以通过`th:insert`或`th:replace`指令引入并使用这个代码片段。`th:insert`指令会将代码片段内容插入到指定位置，而`th:replace`则会替换目标元素本身： ```html <body> <div th:insert="layout/copyright::copyright"></div> <div th:replace="layout/copyright::copyright"></div> </body> ``` 值得注意的是，Thymeleaf 3.0推荐使用`th:insert`替代`th:replace`，因为`th:insert`仅加载内容，不会删除目标元素，这通常更符合预期。引用代码片段时，需要指定文件夹路径和文件名，如`layout/copyright`，并指明要插入或替换的代码片段，即`::copyright`。这里的`htmlhead`是在代码片段中定义的`th:fragment`名称。为了将页面与后端逻辑关联起来，还需要创建一个控制器，例如`IndexController`，并设置路由指向`index.html`。这通常是通过Spring MVC的注解实现，如`@GetMapping("/index")`，返回`"index"`作为视图名称，Thymeleaf会自动寻找对应的HTML文件。 Thymeleaf页面布局的功能使得开发者能够有效地组织和重用前端代码，降低维护成本，提高开发效率。通过合理利用`th:fragment`、`th:insert`和`th:replace`，可以构建出灵活且模块化的Web应用界面。学习和掌握这些概念，对于提升Thymeleaf项目开发的专业性至关重要。