网站素材模板旅游,易语言和网站做交互,江苏推广网站建设业务,wordpress 文章评论统计代码最近做到页面数据展示分页的功能#xff0c;由于每个模块都需要分页#xff0c;所以每个页面都需要将分页的页码选择内容重复的写N遍#xff0c;如下所示#xff1a; 重复的代码带来的就是CtrlC#xff0c;CtrlV ,于是了解了一下thymeleaf的fragment加载语法以及th:includ…最近做到页面数据展示分页的功能由于每个模块都需要分页所以每个页面都需要将分页的页码选择内容重复的写N遍如下所示 重复的代码带来的就是CtrlCCtrlV ,于是了解了一下thymeleaf的fragment加载语法以及th:include、th:replace的区别得以解决。
首先在pom.xml引入thymeleaf的依赖
dependency
groupIdorg.springframework.boot/groupId
artifactIdspring-boot-starter-thymeleaf/artifactId
/dependency将上述的重复信息抽取出来存为pagination.html
!DOCTYPE html SYSTEM http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd
html xmlnshttp://www.w3.org/1999/xhtml xmlns:thhttp://www.thymeleaf.orgbodydiv classpanelBar th:fragmentpagination!--以下为公共部分--div classpagesspan显示/spanselect classcombox namenumPerPage οnchangenavTabPageBreak({numPerPage:this.value})option value1 th:selected${pages.numPerPage}11/optionoption value3 th:selected${pages.numPerPage}33/optionoption value5 th:selected${pages.numPerPage}55/optionoption value10 th:selected${pages.numPerPage}1010/optionoption value100 th:selected${pages.numPerPage}100100/optionoption value150 th:selected${pages.numPerPage}150150/optionoption value200 th:selected${pages.numPerPage}200200/optionoption value250 th:selected${pages.numPerPage}250250/option/selectspan idfleeceRecordCounts th:text共有${pages.totalCount}条/span/divdiv idfleece_page classpagination th:attrtargetType${pages.targetType},totalCount${pages.totalCount},numPerPage${pages.numPerPage},pageNumShown${pages.pageNumShown},currentPage${pages.currentPage}/div/div/body
/html在其他页面进行引用该公共模块时如下
div classpanelBar th:replacepagination::pagination/div注意第一个pagination为上述公共部分的文件名第二个pagination为th:fragment的值。这样便可以解决公共部分代码的抽取。
fragment加载语法如下
templatename::selector”::”前面是模板文件名后面是选择器 ::selector只写选择器这里指fragment名称则加载本页面对应的fragment templatename只写模板文件名则加载整个页面 fragment语法 !-- 语法说明 ::前面是模板文件名后面是选择器 --div th:includetemplate/footer::copy/div!-- 只写选择器这里指fragment名称则加载本页面对应的fragment --div th:include::#thispage/div!-- 只写模板文件名则加载整个页面 --div th:includetemplate/footer/div加载块 span idthispagediv in this page.
/spanth:include 和 th:replace都是加载代码块内容但是还是有所不同
th:include加载模板的内容 读取加载节点的内容不含节点名称替换div内容 th:replace替换当前标签为模板中的标签加载的节点会整个替换掉加载他的div 公共部分如下
!-- th:fragment 定义用于加载的块 --
span th:fragmentpagination
the public pagination
/span引用时如下 th:include 和 th:replace
!-- 加载模板的内容 读取加载节点的内容不含节点名称替换div的内容 --
div th:includepagination::pagination1/div
!-- 替换当前标签为模板中的标签 加载的节点会整个替换掉加载他的div --
div th:replacepagination::pagination2/div结果如下
!-- 加载模板的内容 读取加载节点的内容不含节点名称替换div的内容 --
div the public pagination/div
!-- 替换当前标签为模板中的标签 加载的节点会整个替换掉加载他的div --
span the public pagination/span
