SpringBoot-使用Thymeleaf提取公共页面

SpringBoot-使用Thymeleaf提取公共页面

在我们进行项目练习时，会发现有的前端静态页面样式都是差不多的形式，但是代码量却是出奇的多，那此时我们就可以使用Thymeleaf的基础语法来，提取出公共页面，来时实现代码复用，以及简化

1. 在SpringBoot项目中导入Thymeleaf依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. 静态页面中引入命名空间

xmlns:th="http://www.thymeleaf.org"

3. 抽取页面公共部分

语法: th:fragment="对应的id名"
作用：抽取页面公共部分，作为一个组件，通过id进行标识

---

我们可以在一个指定的位置

• 如我在templates目录下创建了一个commons目录，用来存放我分抽取的公布部分页面,如图所示
  

• 我将所有的公共部分都放在commons.html页面中

4. 使用我们抽取的公共部分

语法: th:replace="~{公共部分所在的页面:所需公共部分标识的id}"
语法: th:insert="~{公共部分所在的页面:所需公共部分标识的id}"

如我的公共页面存放在了：templates/commons/commons.html,在我们需要的地方使用上述语法之一即可，在我的dashboard.html静态页面中插入我们提取的公共部分
然后，我们就可以运行项目来查看效果