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

需积分: 0 88 浏览量更新于2024-08-05 收藏 590KB PDF 举报

"本课程主要讲解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项目开发的专业性至关重要。

󰵎󰴯布局就是对前端的󰵎󰴯进󰢩划分区域，每个区域有同的职责，布局是为好地重复󰉁前端代码，

避免󰮢重复性的劳动。在现有的前端系统中，󰵎󰴯布局成前端开发最重要的作之，Thymeleaf 在设

计之初对󰵎󰴯布局就有考虑，通过 Thymeleaf 的相关语法可以很容地实现对前端󰵎󰴯布局。

Spring Boot 2.0 将布局单独提取出来，需要单独引依赖：thymeleaf-layout-dialect。

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>nz.net.ultraq.thymeleaf</groupId>

<artifactId>thymeleaf-layout-dialect</artifactId>

</dependency>

󰶳先定义个代码󰅧段 copyright.html，放到 layout 󰋴录下：

</footer>

th:fragment 定义个代码󰅧段，创建 index.html 在󰵎󰴯任何地引：

<body>

</body>

th:insert 和 th:replace 区别，insert 只是加载，replace 是替换。

Thymeleaf 3.0 推荐使󰉁 th:insert 替换 2.0 的 th:replace。

layout 是件夹地址，ﬁleName 是件名，语法这样写 layout/ﬁleName:htmlhead，其中，htmlhead 是指定

义的代码󰅧段，如 th:fragment="htmlhead"。

创建个 indexController，指向 index.html：

第 2-5 课：Thymeleaf 󰵎󰴯布局

快速

GitChat

下载后可阅读完整内容，剩余6页未读，立即下载

文润观书

粉丝: 32

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

thymeleaf-spring5-3.0.14.RELEASE-API文档-中文版.zip

thymeleaf-spring5-3.0.10.RELEASE-API文档-中文版.zip

thymeleaf-bootstrap2:Thymeleaf方言支持bootstrap2

thymeleaf-extras-tiles2:Thymeleaf与Apache Tiles 2.x的集成

thymeleaf-layout-interceptor:支持 Thymeleaf 布局的 Spring 拦截器

第2-3课：模板引擎 Thymeleaf 基础使⽤1

第 2-4 课：模板引擎 Thymeleaf ⾼阶⽤法1

Spring-Boot-with-Thymeleaf-part-2-forms-with-validation:带Thymeleaf的Spring Boot教程，第2部分-带有验证的表单

Spring-Thymeleaf-Demo:Spring Thymeleaf 演示

org.thymeleaf:thymeleaf-spring5:null:jar

最新资源