thymeleaf的简单用法-布局标签

最近简单学习使用了thymeleaf模板引擎,现在把一些理解写出来,可能理解的很浅或者有偏差,希望读者理解,并评论对我指正,让我能够有所进步,并改正偏差。

一.eclipse或myeclipse 设置HTML模板

Window->Preferences->输入templates->选择HTML下的HTML Source 下的Templates->New->Name中填写thymeleaf->Context->选择New HTML->Pattern中填入

<!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">
<head>
 <title>title</title>
</head>
<body>

</body>
</html>
接着->Apply->OK  一定要在HTML页面引入thymeleaf命名空间<html xmlns:th="http://www.thymeleaf.org"></html>  在html中引入此命名空间,可避免编辑器出现html验证错误。

二.使用自定义的HTMl模板

点击文件夹->New->选择html中的(Basic Templates)->Next到选择模板页面->页面下方有蓝色的字体HTML Templates->选择自定义的HTML模板->OK就可以了

三.thymeleaf中布局标签的简单用法

1.布局标签:th:fragment,layout:fragment和th:include,th:replace,th:insert,layout:decorator

1.1 th:fragment和th:include,th:replace,th:insert的用法:定义和引用代码块
(1)首先需要注意带有公共使用的代码块(布局标签定义的代码块)最好不要带有<html><body></body></html>
(2)th:fragment和th:include,th:replace,th:insert的用法和后三个标签的区别

<!-- school/common.html-->  定义代码块,公共使用  
<header th:fragment="header">  
 <div>this is a header</div>  
</header> 

<div id="nofragment"> this i a common code</div>(普通的代码块)
<!--school/index.html -->引用代码块
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <title>title</title>
</head>
<body>
<div th:insert="school/common :: header"> </div>
th:insert保留自己的主标签,保留th:fragment的主标签,作用插入代码块是,则对应的结果为:
<div>

 <header>

  <div>this is a header</div>

 </header>

</div>
<div th:include="school/common :: header"> </div>
th:include保留自己的主标签,舍弃th:fragment的主标签,作用是插入代码块,对应的结果为:
<div>
 <div>this is a header</div>
</div>

 <div th:replace="school/common :: header"> </div>
 th:replace舍弃自己的主标签,保留th:fragment的主标签,作用是替换代码块,对应的结果为:
<header>
 <div>this is a header</div>
</header>

我们也可以引用不使用定义代码块的布局标签的代码块,引用普通代码块。

 <div th:include="header:: #nofragment">
</body>

<html>

引入代码块的参数格式为templatename::[domselector],其中templatename是模板名(如header),domselector是可选的dom选择器。如果只写templatename,不写domselector,则会加载整个模板。

我们可以写<div th:include="header:: (${user.isManager}? #{header.manager} : #{header.noManager})"></div>来做选择

1.2 layout:fragment和layout:decorator的用法

<!-- school/layout.html-->模板页面

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
 <title>title</title>
</head>
<body>

<div th:include="school/common :: header"></div>

<div layout:fragment="content"></div>

<div th:include="school/common :: header"></div>

</body>

</html>

<!-- school/index.html-->

<html layout:decorator="school/layout"
      xmlns:th="http://www.thymeleaf.org">
<head>
 <title>title</title>
</head>
<body>

<div layout:fragment="content">这里是每个页面自己定义内容的部分,个人理解相当于重写layout中content部分</div>

</body>

</html>

这样的话,layout.html中引入的css,js,images之类的都可以在index.html页面使用,同时index.html页面可以引入自己的css,js,images等,只不过index.html使用了layout.html的布局,而content中的内容是每个页面自定义的,不共用

1.3 布局传参(模板传参)

<!--定义模板同时定义参数 school/common.html -->

<div th:fragment="content(firstvalue,secondvalue)">

 <p th:text="${firstvalue}+'---'+${secondvalue}"></p>

</div>

<!--引用模板同时传递参数 school/index.html -->

<div th:incluede="school/common :: content(${onevalue},${twovalue})"></div>

<div th:include="school/common :: content(firstvalue=${onevalue},secondvalue=${twovalue})"></div>

定义模板的时候签名也可以不包括参数:<div th:fragment="content">,我们依然可以使用<div th:include="school/common :: content(firstvalue=${onevalue},secondvalue=${twovalue})"></div>,还可以使用<div th:include="school/common :: content" th:with="firstvalue=${onevalue},secondvalue=${twovalue}">

我们还可以验证模板参数,用标签th:assert 断言

<!--定义模板同时定义参数 school/common.html -->

<div th:fragment="content(firstvalue,secondvalue)" th:assert="${!#strings.isEmpty(firstvalue,secondvalue)}">

 <p th:text="${firstvalue}+'---'+${secondvalue}"></p>

</div>

若是哪里有理解错误的或写错的地方,望各位读者评论或者私信指正,不胜感激。

猜你喜欢

转载自blog.csdn.net/malimingwq/article/details/78883110