how2j.cn

下载区
文件名 文件大小
thymeleaf.rar 5k

解压rar如果失败,请用5.21版本或者更高版本的winrar

点击下载 winrar5.21
步骤 1 : 基于上一个知识点改进   
步骤 2 : 先运行,看到效果,再学习   
步骤 3 : 模仿和排错   
步骤 4 : include.html   
步骤 5 : test.html   
步骤 6 : 重启测试   

步骤 1 :

基于上一个知识点改进

edit
本知识点是基于上一个知识点进行改进
步骤 2 :

先运行,看到效果,再学习

edit
老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
运行 Application.java, 然后访问地址:

http://127.0.0.1:8080/thymeleaf/test

在页面底部可以看到如图所示的版权信息,这个版权信息就是包含另一个页面的内容而来的。
先运行,看到效果,再学习
在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。
模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。
采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。

推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。
这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来
这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
新建一个 include.html 文件,然后里面用 th:fragment 标记代码片段。
footer1 是 不带参数的
footer2 是带参数的
这两种情况也是包含业务经常会用到的做法
include.html
<html xmlns:th="http://www.thymeleaf.org"> <footer th:fragment="footer1"> <p >All Rights Reserved</p> </footer> <footer th:fragment="footer2(start,now)"> <p th:text="|${start} - ${now} All Rights Reserved|"></p> </footer> </html>
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1">  
   <p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)">  
   <p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>
使用的时候就按照如下方式:

<div th:replace="include::footer1" ></div>
<div th:replace="include::footer2(2015,2018)" ></div>

就达到了包含的效果,其中第二种可以传参。
除了th:replace, 还可以用th:insert, 区别:
th:insert :保留自己的主标签,保留th:fragment的主标签。
th:replace :不要自己的主标签,保留th:fragment的主标签。
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>hello</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/> <script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script> <style> h2{ text-decoration: underline; font-size:0.9em; color:gray; } </style> </head> <body> <div class="showing"> <h2>显示 转义和非转义的 html 文本</h2> <p th:text="${htmlContent}" ></p> <p th:utext="${htmlContent}" ></p> </div> <div class="showing"> <h2>显示对象以及对象属性</h2> <p th:text="${currentProduct}" ></p> <p th:text="${currentProduct.name}" ></p> <p th:text="${currentProduct.getName()}" ></p> </div> <div class="showing" th:object="${currentProduct}"> <h2>*{}方式显示属性</h2> <p th:text="*{name}" ></p> </div> <div class="showing"> <h2>算数运算</h2> <p th:text="${currentProduct.price+999}" ></p> </div> <div class="showing"> <div th:replace="include::footer1" ></div> <div th:replace="include::footer2(2015,2018)" ></div> </div> </body> </html>
重新运行 Application,然后访问地址测试:

http://127.0.0.1:8080/thymeleaf/test


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-04-06 insert包含那里,什么叫不要自己的主标签?
伽椰子的呃呃

insert包含那里,什么叫不要自己的主标签?




1 个答案

jh_315322
答案时间:2022-06-18
insert就是插入到现在的标签里面,replace就是替换现在的标签。不知道这样理解对不对



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-09-28 th:insert无法正确引入
呱呱蛙




把replace改成insert以后页面不显示查看源码发现它没有引入footer的代码片段。replace的可以正确引入
加载中
<div class="showing">
    <div th:insert="include::footer1" ></div>
    <div th:replace="include::footer2(2015,2018)" ></div>
</div>

							


1 个答案

很倒霉的死小孩
答案时间:2021-02-01
同问!!!!! 请问解决了嘛????



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-03-02 关于页面引用
2019-08-15 站长,这个footer1文件都没有啊,怎么引用
2019-02-05 idea总是报错,忽略即可


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 2 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 JAVA 框架-SpringBoot-包含 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图