Thymeleaf th:include、th:replace使用
最近做到页面数据展示分页的功能,由于每个模块都需要分页,所以每个页面都需要将分页的页码选择内容重复的写N遍,如下所示:
重复的代码带来的就是Ctrl+C,Ctrl+V ,于是了解了一下thymeleaf的fragment加载语法以及th:include、th:replace的区别,得以解决。
首先在pom.xml引入thymeleaf的依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
将上述的重复信息抽取出来存为pagination.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><body><div class="panelBar" th:fragment="pagination"><!--以下为公共部分--><div class="pages"><span>显示</span><select class="combox" name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value})"><option value="1" th:selected="${pages.numPerPage}==1">1</option><option value="3" th:selected="${pages.numPerPage}==3">3</option><option value="5" th:selected="${pages.numPerPage}==5">5</option><option value="10" th:selected="${pages.numPerPage}==10">10</option><option value="100" th:selected="${pages.numPerPage}==100">100</option><option value="150" th:selected="${pages.numPerPage}==150">150</option><option value="200" th:selected="${pages.numPerPage}==200">200</option><option value="250" th:selected="${pages.numPerPage}==250">250</option></select><span id="fleeceRecordCounts" th:text="'共有'+${pages.totalCount}+'条'"></span></div><div id="fleece_page" class="pagination" th:attr="targetType=${pages.targetType},totalCount=${pages.totalCount},numPerPage=${pages.numPerPage},pageNumShown=${pages.pageNumShown},currentPage=${pages.currentPage}"></div></div></body>
</html>
在其他页面进行引用该公共模块时如下:
<div class="panelBar" th:replace="pagination::pagination"></div>
注意:第一个pagination为上述公共部分的文件名,第二个pagination为th:fragment的值。这样便可以解决公共部分代码的抽取。
fragment加载语法如下:
- templatename::selector:”::”前面是模板文件名,后面是选择器
- ::selector:只写选择器,这里指fragment名称,则加载本页面对应的fragment
- templatename:只写模板文件名,则加载整个页面
================== fragment语法 ============================= <!-- 语法说明 "::"前面是模板文件名,后面是选择器 --><div th:include="template/footer::copy"></div><!-- 只写选择器,这里指fragment名称,则加载本页面对应的fragment --><div th:include="::#thispage"></div><!-- 只写模板文件名,则加载整个页面 --><div th:include="template/footer"></div>
================= 加载块 ============================<span id="thispage">div in this page.
</span>
th:include 和 th:replace都是加载代码块内容,但是还是有所不同
- th:include:加载模板的内容: 读取加载节点的内容(不含节点名称),替换div内容
- th:replace:替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div
公共部分如下:
<!-- th:fragment 定义用于加载的块 -->
<span th:fragment="pagination">
the public pagination
</span>
引用时如下:
================= th:include 和 th:replace============================
<!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
<div th:include="pagination::pagination">1</div>
<!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div> -->
<div th:replace="pagination::pagination">2</div>
结果如下:
<!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
<div> the public pagination</div>
<!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div> -->
<span> the public pagination</span>
Thymeleaf th:include、th:replace使用相关推荐
- Thymeleaf th:include、th:replace使用
最近做到页面数据展示分页的功能,由于每个模块都需要分页,所以每个页面都需要将分页的页码选择内容重复的写N遍,如下所示: 重复的代码带来的就是Ctrl+C,Ctrl+V ,于是了解了一下thymelea ...
- thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if
文章目录 1.表达式 1.1.简单表达式 1.2.三元运算.条件表达式: 1.3.默认表达式 1.4.综合使用,属性值的 if - else 2.字符串连接.拼接 3.th:attr 的使用 4.th ...
- th:replace th:include
原文:https://blog.csdn.net/h1021456873/article/details/79085505 Thymeleaf html 导入(th:replace & th: ...
- Thymeleaf提取公共页面(从实例入手,以inspinia模板为例)
场景 使用Thymelaf 时,可以提取公共页面,比如侧边栏.需要公共引入的css.js文件.页脚等都可以提取出来.只编写业务页面的内容部分即可. 三种不同引入方式的区别 th:insert:将代码块 ...
- thymeleaf的属性优先级
所有Thymeleaf属性定义一个数字优先,建立他们的顺序执行的标签.这个顺序是: Order Feature Attributes 1 Fragment inclusion th:include t ...
- Thymeleaf框架
简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在 ...
- SpringBoot学习笔记【part12】Web开发——Thymeleaf模板引擎
SpringBoot 学习笔记 Part12 1. thymeleaf简介 SpringBoot默认不支持 JSP,需要引入第三方模板引擎技术实现页面渲染. Thymeleaf is a modern ...
- SpringBoot2.x 集成 Thymeleaf
本文主要对SpringBoot2.x集成Thymeleaf及其常用语法进行简单总结,其中SpringBoot使用的2.4.5版本. 一.Thymeleaf简介 Thymeleaf是面向Web和独立环境 ...
- Thymeleaf模板(全程案例详解)
Thymeleaf 1.thymeleaf简介 2.thymeleaf的使用 3.i18n国际化 4.thymeleaf变量获取 5.url变量 6.字面量获取和设置 7.迭代元素 8.条件判断的使用 ...
最新文章
- java调用julia脚本,Julia请求脚本中的用户输入
- gps有几个轨道面_同样是精准定位,为何GPS只用24颗卫星,北斗却需要55颗卫星?...
- EJB3.0学习笔记---Bean实现多个接口的情况下定义,访问方式:
- ajax显示失败信息,javascript
- 打包后找不到so_RTX 3090安装cuda11.1 找不到libcusolver.so.10
- 【ASP.Net MVC3 】使用Unity 实现依赖注入
- ccf中文期刊目录_37本!中国计算机学会CCF首次发布推荐中文科技期刊目录
- 【Android工具】Yandex!懂你的超级好用手机浏览器,可以安装PCchrome插件的手机浏览器!...
- MessageDigest详解
- 我所知道坦克大战(单机版)之添加爆炸效果、击毙坦克后产生爆炸
- 方正飞鸿:构建中小企业“两化融合”新模式
- 【quasi-maximum likelihood decoder】一种有效的PSK信号准最大似然译码器matlab性能仿真
- [翻译]2020年综述:基于深度学习的视频超分辨率
- kermit的安装与使用
- 苹果手机fiddler代理后无法联网的问题
- 时针分针夹角公式与重合问题
- Soc-e在FPGA上为任务关键型应用量身定制的IEEE 1588感知以太网交换机
- 【Pytorch基础教程36】基于Ernie预训练模型和Bert的新闻分类
- 1083 1到10的英文单词
- 【python】标准库(第五讲)
热门文章
- 知乎 mysql in 与 join_join和join in之间有什么区别?
- Java制作计算器实现加减乘除
- 港版-已过保 MacBookPro因显示屏涂层脱落去天才吧免费换屏过程
- 网站或者APP短信验证码是怎么实现的?
- Android手机文件系统操作——轻松存储与获取手机文件
- 什么是尖端放电?什么叫电击?什么叫暂态电击?什么叫稳态电击?
- 微信支付转账到银行卡 加密问题解决方法
- Machine Learning入门笔记(二) 模型评估与选择 (2)
- 笔记本计算机充不上电,笔记本电脑电池充不进电怎么办【解决方法】
- vmware安装windows10专业版