spring boot:thymeleaf模板中insert/include/replace三种引用fragment方式的区别(spring boot 2.3.3)

一，thymeleaf模板中insert/include/replace三种引用fragment方式的区别

insert: 把整个fragment（包括fragment的节点tag）插入到当前节点内部,

replace:用fragment（包括fragment的节点tag）替换掉当前节点

include:把fragment的内容（不包括fragment的节点）插入到当前节点内容

文字描述还是不够直观，

看代码的测试更容易了解三者的区别

 

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/25/springbootthymeleaf-mu-ban-zhong-insertincludereplace-san-zhong-yin-yong-fragment-fang-shi-de-qu/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，演示项目的相关信息

1,项目地址:

https://github.com/liuhongdi/fragment

 

2,功能说明：

        演示了thymeleaf模板:insert/include/replace三种引用fragment方式的区别

 

3,项目结构：如图:

 

 

三，配置文件说明

1,pom.xml

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

 

2,application.properties

#error
server.error.include-stacktrace=always
#error
logging.level.org.springframework.web=trace

#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

 

四，java代码说明

1,HomeController.java

@RequestMapping("/home")
@Controller
public class HomeController {
    @GetMapping("/home")
    public String index(ModelMap modelMap) {
        return "home/home";
    }
}

 

2,footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span style="background: #ffff00;" th:fragment="copytxt">
    © 2013-2019 数据文化传播有限公司版权所有
</span>
</body>
</html>

 

3,home.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div style="width:100%;height:30px;background:#ffffff;font-size: 16px;" ></div>
<div id="content" style="width:1040px;">
    <div style="width:790px;float:left;margin-left:30px;">
        <!--main begin-->
        <div style="background: #ff0000;width:400px;height:100px;" th:insert="common/footer :: copytxt"></div>
        <div style="background: #00ff00;width:400px;height:100px;" th:replace="common/footer :: copytxt"></div>
        <div style="background: #0000ff;width:400px;height:100px;" th:include="common/footer :: copytxt"></div>
        <!--main   end-->
    </div>
</div>
</body>
</html>

分别用三种方式引用footer中的copytxt片断，

比较异同

 

五，测试效果

1,访问home:

http://127.0.0.1:8080/home/home

如图：

 

查看源代码比较:

  <!--main begin-->
        <div style="background: #ff0000;width:400px;height:100px;"><span style="background: #ffff00;">
    © 2013-2019 数据文化传播有限公司版权所有
</span></div>
        <span style="background: #ffff00;">
    © 2013-2019 数据文化传播有限公司版权所有
</span>
        <div style="background: #0000ff;width:400px;height:100px;">
    © 2013-2019 数据文化传播有限公司版权所有
</div>
        <!--main   end-->

可以看到三者的区别:

insert:把整个fragment插入到当前节点内部,

replace:用fragment替换到当前节点

include:把fragment的内容（不包括fragment的节点）插入到当前节点

 

六，查看spring boot版本:

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.3.3.RELEASE)

 

posted @ 2020-09-16 11:11  刘宏缔的架构森林  阅读(1435)  评论(0)  编辑  收藏  举报