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
静态页面中插入我们提取的公共部分
然后,我们就可以运行项目来查看效果