最详 Thymeleaf 使用教程

13 篇文章 0 订阅
11 篇文章 0 订阅

前言

操作前建议先参考我的另一篇博客:玩转 SpringBoot 2 快速整合 | Thymeleaf 篇 查看如何在SpringBoot 中使用 Thymeleaf。还有一点需要注意的是:模版页面中的 html 上需要声明 Thymeleaf 的命名空间,具体代码如下:

 
  1. <html xmlns:th="http://www.thymeleaf.org">

接下来就可以开始 Thymeleaf 使用教程了!

全文介绍 Thymeleaf 是基于 Thymeleaf 3.0.11.RELEASE 版本进行说明的。

基础语法

文本标签 th:text/th:utext

用于文本内容的显示操作。

  1. th:text 进行文本替换 不会解析html
  2. th:utext 进行文本替换 会解析html

代码演示:

 
  1. @RequestMapping("/th")
  2. public String th(Model model){
  3. String msg = "<h1>我是h1</h1>";
  4. model.addAttribute("msg",msg);
  5. return "/course/th";
  6. }

th:text 进行文本替换 不会解析html

 
  1. <p th:text="text标签: + ${msg}"></p>

结果页面:

 
  1. <p>text标签:<h1>我是h1</h1></p>

游览器访问的效果:
在这里插入图片描述

th:utext 进行文本替换 会解析html

 
  1. <p th:utext="utext标签: + ${msg}"></p>

游览器展示效果如下图:
在这里插入图片描述
使用 + 和 | | 效果是一样的,如下代码所示:

 
  1. <p th:utext="utext标签: + ${msg}"></p>
  2. <p th:utext="|utext标签: ${msg}|"></p>

字符串拼接

拼接字符串通过 + 或者 | 进行拼接

代码演示:

 
  1. @RequestMapping("/th")
  2. public String th(Model model){
  3. model.addAttribute("a",1);
  4. model.addAttribute("b",2);
  5. return "/course/th";
  6. }

模版页面:

 
  1. <p th:text="${a}+${b}"></p>

结果页面:

 
  1. <p>3</p>

模版页面:

 
  1. <p th:text="|${a} ${b}|"></p>

结果页面:

 
  1. <p>1 2</p>

模版页面:

 
  1. <p th:text="${a} > ${b}"></p>

结果是:

 
  1. <p>false</p>

java代码:

 
  1. @RequestMapping("/th")
  2. public String th(Model model){
  3. model.addAttribute("flag",true);
  4. return "/course/th";
  5. }

模版页面:

 
  1. <p th:text="!${flag}"></p>

结果页面:

 
  1. <p>false</p>

{...}和 ${...}表达式
正常情况下 
{...} 和 ${...}是一样的,但是 *{...} 一般和 th:object 进行一起使用来完成对象属性的简写。

代码演示:

 
  1. @RequestMapping("/th")
  2. public String th(Model model){
  3. User user = new User("ljk",18);
  4. model.addAttribute("user",user);
  5. return "/course/th";
  6. }

使用 ${...}操作
模版代码:

 
  1. <p th:text="${user.name}"></p>
  2. <p th:text="${user.age}"></p>

结果页面:

 
  1. <p>ljk</p><p>18</p>

**使用 *{...}操作**
模版代码:

 
  1. <p th:text="*{user.name}"></p>
  2. <p th:text="*{user.age}"></p>

结果页面:

 
  1. <p>ljk</p><p>18</p>

**使用 *{...}特有操作**
模版代码:

 
  1. <div th:object="${user}" >
  2. <p th:text="*{name}"></p>
  3. <p th:text="*{age}"></p>
  4. </div>

结果页面:

 
  1. <p>ljk</p><p>18</p>

#{...}表达式

用于国际化message.properties 属性读取
定义message.properties 配置文件
在这里插入图片描述
在这里插入图片描述

定义国际化处理转换处理类

 
  1. @Configuration
  2. public class LocaleResolverConfig {
  3. @Bean(name="localeResolver")
  4. public LocaleResolver localeResolverBean() {
  5. return new SessionLocaleResolver();
  6. }
  7. }

定义国际化处理的controller

 
  1.  
  2. @Controller
  3. public class ProductController {
  4.  
  5. @Autowired
  6. private LocaleResolver localeResolver;
  7. private ProductService productService = new ProductService();
  8.  
  9. @RequestMapping("/")
  10. public String useT(Model model,HttpServletRequest request,HttpServletResponse response) {
  11. //设置访问用户信息到session
  12. request.getSession(true).setAttribute("user", new User("桌前", "明月", "CHINA", null));
  13. localeResolver.setLocale(request,response,Locale.CHINA);
  14. return "productList";
  15. }
  16. }

如果没有定义 message_en_US.properties 和 message_zh_CN.properties 会默认取message.properties中的信息
如果 Locale = Locale.CHINA 就取 message_zh_CN.properties
如果 Locale = Locale.US 就取 message_en_US.properties。

模版代码:

 
  1. <p th:utext="#{home.welcome(${session.user.name})}">Welcome to our grocery store, Sebastian!</p>

访问controller的路径的效果:
在这里插入图片描述

~{...}片段表达式

这个一般和模版布局的语法一起使用,具体使用方式请看下面模版布局的教程。

@{...}链接网址表达式

一般和 th:href、th:src进行结合使用,用于显示Web 应用中的URL链接。通过@{...}表达式Thymeleaf 可以帮助我们拼接上web应用访问的全路径,同时我们可以通过()进行参数的拼接

代码演示:

模版代码:

 
  1. <img th:src="@{/images/gtvglogo.png}" />

结果页面:

 
  1. <img src="/sbe/images/gtvglogo.png">

模版代码:

 
  1. <a th:href="@{/product/comments(prodId=${prod.id})}" >查看</a>

结果页面:

 
  1. <a href="/sbe/product/comments?prodId=2">查看</a>

模版代码:

 
  1. <a th:href="@{/product/comments(prodId=${prod.id},prodId2=${prod.id})}" >查看</a>

结果页面:

 
  1. <a href="/sbe/product/comments?prodId=2&amp;prodId2=2">查看</a>

条件判断 th:if/th:unless

th:if 当条件为true则显示。
th:unless 当条件为false 则显示。

代码演示:

java代码:

 
  1. @RequestMapping("/thif")
  2. public String thif(Model model){
  3. model.addAttribute("flag",true);
  4. return "/course/thif";
  5. }

模版页面:

 
  1. <p th:if="${flag}">if判断</p>

结果页面:

 
  1. <p>if判断</p>

模版页面:

 
  1. <p th:unless="!${flag}">unless 判断</p>

结果页面:

 
  1. <p>unless 判断</p>

switch

th:switch 我们可以通过switch来完成类似的条件表达式的操作。
代码演示:
java代码:

 
  1. @RequestMapping("/thswitch")
  2. public String thswitch(Model model){
  3. User user = new User("ljk",23);
  4. model.addAttribute("user",user);
  5. return "/course/thswitch";
  6. }

模版页面:

 
  1. <div th:switch="${user.name}">
  2. <p th:case="'ljk'">User is ljk</p>
  3. <p th:case="ljk1">User is ljk1</p>
  4. </div>

结果页面:

 
  1. <div><p> User is ljk</p></div>

for循环

th:each 遍历集合

代码演示:
java代码:

 
  1. @RequestMapping("/theach")
  2. public String theach(Model model){
  3.  
  4. List<User> userList = new ArrayList<User>();
  5. User user1 = new User("ljk",18);
  6. User user2 = new User("ljk2",19);
  7. User user3 = new User("ljk3",20);
  8. User user4 = new User("lj4",21);
  9. userList.add(user1);
  10. userList.add(user2);
  11. userList.add(user3);
  12. userList.add(user4);
  13. model.addAttribute("userList",userList);
  14.  
  15. List<String> strList = new ArrayList<String>();
  16. strList.add("ljk");
  17. strList.add("ljk2");
  18. strList.add("ljk3");
  19. strList.add("lj4");
  20. model.addAttribute("strList",strList);
  21.  
  22. return "/course/theach";
  23. }

模版页面:

 
  1. <table>
  2. <thead>
  3. <tr>
  4. <th>用户名称</th>
  5. <th>用户年龄</th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr th:each="user : ${userList}" th:class="${userStat.odd}? 'odd'">
  10. <td th:text="${user.name}">Onions</td>
  11. <td th:text="${user.age}">2.41</td>
  12. </tr>
  13. </tbody>
  14. </table>
  15. ----------------------------------------------------------------------
  16. <table>
  17. <thead>
  18. <tr>
  19. <th>用户名称</th>
  20. </tr>
  21. </thead>
  22. <tbody>
  23. <tr th:each="str : ${strList}" th:class="${strStat.odd}? 'odd'">
  24. <td th:text="${str}">Onions</td>
  25. </tr>
  26. </tbody>
  27. </table>

结果页面:
在这里插入图片描述

我们可以通过便利的变量名+Stat 来获取索引 是否是第一个或最后一个等。
便利的变量名+Stat称作状态变量,其属性有:

  • index:当前迭代对象的迭代索引,从0开始,这是索引属性;
  • count:当前迭代对象的迭代索引,从1开始,这个是统计属性;
  • size:迭代变量元素的总量,这是被迭代对象的大小属性;
  • current:当前迭代变量;
  • even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算);
  • first:布尔值,当前循环是否是第一个;
  • last:布尔值,当前循环是否是最后一个
  • for循环介绍内容参考了 CSDN博主liubin5620 Thymeleaf模板引擎常用属性之 th:each迭代循环:https://blog.csdn.net/liubin5620/article/details/80470619

th:href

用于声明在a 标签上的href属性的链接 该语法会和@{..} 表达式一起使用。

代码演示:
java代码:

 
  1. @RequestMapping("/thhref")
  2. public String thhref(Model model){
  3. return "/course/thhref";
  4. }

模版代码:

 
  1. <a href="../home.html" th:href="@{/}">返回首页</a>

结果页面:

 
  1. <a href="/sbe/">返回首页</a>

th:class

用于声明在标签上class 属性信息。

代码演示:
java代码:

 
  1. @RequestMapping("/thclass")
  2. public String thclass(Model model){
  3. return "/course/thclass";
  4. }

模版页面:

 
  1. <p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p>

结果页面:

 
  1. <p class="even">even</p>

th:attr

用于声明html中或自定义属性信息。

代码演示:

java代码:

 
  1. @RequestMapping("/thattr")
  2. public String thattr(Model model){
  3. return "/course/thattr";
  4. }

模版页面:

 
  1. <img th:attr="src=@{/images/gtvglogo.png}" />

结果页面:

 
  1. <img src="/sbe/images/gtvglogo.png">

th:value

用于声明html中value属性信息。

代码演示:
java代码:

 
  1. @RequestMapping("/thvalue")
  2. public String thvalue(Model model){
  3. model.addAttribute("name", "ljk");
  4. return "/course/thvalue";
  5. }

模版页面:

 
  1. <input type="text" th:value="${name}" />

结果页面:

 
  1. <input type="text" value="ljk">

th:action

用于声明html from标签中action属性信息。

代码演示:
java代码:

 
  1. @RequestMapping("/thaction")
  2. public String thaction(Model model){
  3. return "/course/thaction";
  4. }

模版页面:

 
  1. <form action="subscribe.html" th:action="@{/subscribe}">
  2. <input type="text" name="name" value="abc"/>
  3. </form>

结果页面:

 
  1. <form action="/sbe/subscribe">
  2. <input type="text" name="name" value="abc">
  3. </form>

th:id

用于声明htm id属性信息。

代码演示:
java代码:

 
  1. @RequestMapping("/thid")
  2. public String thid(Model model){
  3. model.addAttribute("id", 123);
  4. return "/course/thid";
  5. }

模版页面:

 
  1. <p th:id="${id}"></p>

结果页面:

 
  1. <p id="123"></p>

th:inline

JavaScript内联 操作使用的语法,具体请参考下面内联操作相关介绍

th:onclick

用于声明htm 中的onclick事件。

代码演示:
java代码:

 
  1. @RequestMapping("/thonclick")
  2. public String honclick(Model model){
  3. return "/course/thonclick";
  4. }

模版页面:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7. function showUserInfo(){
  8. alert("i am zhuoqianmingyue!")
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <p th:onclick="'showUserInfo()'">点我</p>
  14. </body>
  15. </html>

结果页面:

 
  1. <p onclick="showUserInfo()">点我</p>

th:selected

用于声明htm 中的selected属性信息。

代码演示:
java代码:

 
  1. @RequestMapping("/thselected")
  2. public String thselected(Model model){
  3. model.addAttribute("sex", 1);
  4. return "/course/thselected";
  5. }

模版页面:

 
  1. <select>
  2. <option name="sex"></option>
  3. <option th:selected="1 == ${sex}">男</option>
  4. <option th:selected="0 == ${sex}">女</option>
  5. </select>

结果页面:

 
  1. <select>
  2. <option name="sex"></option>
  3. <option selected="selected">男</option>
  4. <option>女</option>
  5. </select>

th:src

用于声明htm 中的img中src属性信息。

代码演示:
java代码:

 
  1. @RequestMapping("/thsrc")
  2. public String thsrc(Model model){
  3. return "/course/thsrc";
  4. }

模版页面:

 
  1. <img title="GTVG logo" th:src="@{/images/gtvglogo.png}" />

结果页面:

 
  1. <img title="GTVG logo" src="/sbe/images/gtvglogo.png">

th:style

用于声明htm中的标签 css的样式信息。

代码演示:
java代码:

 
  1. RequestMapping("/thstyle")
  2. public String thstyle(Model model){
  3. model.addAttribute("isShow", true);
  4. return "/course/thstyle";
  5. }

模版页面:

 
  1. <p th:style="'display:' + @{(${isShow} ? 'none' : 'block')} + ''"></p>

结果页面:

 
  1. <p style="display:none"></p>

th:with

用于thymeleaf 模版页面中局部变量定义的使用。

代码演示:
java代码:

 
  1. @RequestMapping("/thwith")
  2. public String thwith(Model model){
  3. model.addAttribute("today", new Date());
  4. return "/course/thwith";
  5. }

模版页面:

 
  1. <p th:with="df='dd/MMM/yyyy HH:mm'">
  2. Today is: <span th:text="${#dates.format(today,df)}">13 February 2011</span>
  3. </p>

结果页面:

 
  1. <span>02/六月/2019 06:52</span>

java代码:

 
  1. @RequestMapping("/thwith")
  2. public String thwith(Model model){
  3. List<User> users = new ArrayList<User>();
  4. users.add(new User("ljk",18));
  5. users.add(new User("ljk2",18));
  6. model.addAttribute("users",users);
  7. return "/course/thwith";
  8. }

模版页面:

 
  1. <div th:with="firstEle=${users[0]}">
  2. <p>
  3. 第一个用户的名称是: <span th:text="${firstEle.name}"></span>.
  4. </p>
  5. </div>

结果页面:

 
  1. <div>
  2. <p>
  3. 第一个用户的名称是: <span>ljk</span>.
  4. </p>
  5. </div>

还有一种用法是在模版布局中带参数的引用片段中使用方式如下:

 
  1. <div th:replace="::frag" th:with="onevar=${value1},twovar=${value2}">

具体演示请参考模版布局中的介绍。

Elvis运算符

Elvis运算可以理解成简单的判断是否为null的三元运算的简写,如果值为nullzhe显示默认值,如果不为null 则显示原有的值。

代码演示:
java代码:

 
  1. @RequestMapping("/elvis")
  2. public String elvis(Model model){
  3. model.addAttribute("age", null);
  4. return "/course/elvis";
  5. }

模版页面:

 
  1. <p>Age: <span th:text="${age}?: '年龄为nll'"></span></p>

结果页面:

 
  1. <p>Age: <span>年龄为nll</span></p>

java代码:

 
  1. @RequestMapping("/elvis")
  2. public String elvis(Model model){
  3. model.addAttribute("age2", 18);
  4. return "/course/elvis";
  5. }

模版页面:

 
  1. <p>Age2: <span th:text="${age2}?: '年龄为nll'"></span></p>

结果页面:

 
  1. <p>Age2: <span>18</span></p>

三元表达式

我们可以在thymeleaf 的语法中使用三元表达式 具体使用方法是在th:x 中通过 表达式?1选项:2选项。

代码演示:
java代码:

 
  1. @RequestMapping("/threeElementOperation")
  2. public String threeElementOperation(Model model){
  3. return "/course/threeElementOperation";
  4. }

模版页面:

 
  1. <p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p>

结果页面:

 
  1. <p class="even">even</p>

java代码:

 
  1. @RequestMapping("/threeElementOperation")
  2. public String threeElementOperation(Model model){
  3. model.addAttribute("name", "ljk");
  4. return "/course/threeElementOperation";
  5. }

模版页面:

 
  1. <p th:value="${name eq 'ljk' ? '帅哥':'丑男'}" th:text="${name eq 'ljk' ? '帅哥':'丑男'}"></p>

结果页面:

 
  1. <p value="帅哥">帅哥</p>

条件表达式操作字符:
gt:great than(大于)
ge:great equal(大于等于)
eq:equal(等于)
lt:less than(小于)
le:less equal(小于等于)
ne:not equal(不等于)

No-Operation(_)什么都不做
Elvis运算符 的一种特殊简写操作,当显示的值为null 是就什么都不做。

代码演示:
java代码:

 
  1. @RequestMapping("/noOperation")
  2. public String noOperation(Model model){
  3. model.addAttribute("name", null);
  4. return "/course/noOperation";
  5. }

模版页面:

 
  1. <span th:text="${name} ?: _">no user authenticated</span>

结果页面:

 
  1. <span>no user authenticated</span>

标准方言中存在以下固定值布尔属性:

th:asyncth:autofocusth:autoplay
th:checkedth:controlsth:declare
th:defaultth:deferth:disabled
th:formnovalidateth:hiddenth:ismap
th:loopth:multipleth:novalidate
th:nowrapth:openth:pubdate
th:readonlyth:requiredth:reversed
th:scopedth:seamlessth:selected

针对特定的HTML5属性:

th:abbrth:acceptth:accept-charset
th:accesskeyth:actionth:align
th:altth:archiveth:audio
th:autocompleteth:axisth:background
th:bgcolorth:borderth:cellpadding
th:cellspacingth:challengeth:charset
th:citeth:classth:classid
th:codebaseth:codetypeth:cols
th:colspanth:compactth:content
th:contenteditableth:contextmenuth:data
th:datetimeth:dirth:draggable
th:dropzoneth:enctypeth:for
th:formth:formactionth:formenctype
th:formmethodth:formtargetth:fragment
th:frameth:frameborderth:headers
th:heightth:highth:href
th:hreflangth:hspaceth:http-equiv
th:iconth:idth:inline
th:keytypeth:kindth:label
th:langth:listth:longdesc
th:lowth:manifestth:marginheight
th:marginwidthth:maxth:maxlength
th:mediath:methodth:min
th:nameth:onabortth:onafterprint
th:onbeforeprintth:onbeforeunloadth:onblur
th:oncanplayth:oncanplaythroughth:onchange
th:onclickth:oncontextmenuth:ondblclick
th:ondragth:ondragendth:ondragenter
th:ondragleaveth:ondragoverth:ondragstart
th:ondropth:ondurationchangeth:onemptied
th:onendedth:onerrorth:onfocus
th:onformchangeth:onforminputth:onhashchange
th:oninputth:oninvalidth:onkeydown
th:onkeypressth:onkeyupth:onload
th:onloadeddatath:onloadedmetadatath:onloadstart
th:onmessageth:onmousedownth:onmousemove
th:onmouseoutth:onmouseoverth:onmouseup
th:onmousewheelth:onofflineth:ononline
th:onpauseth:onplayth:onplaying
th:onpopstateth:onprogressth:onratechange
th:onreadystatechangeth:onredoth:onreset
th:onresizeth:onscrollth:onseeked
th:onseekingth:onselectth:onshow
th:onstalledth:onstorageth:onsubmit
th:onsuspendth:ontimeupdateth:onundo
th:onunloadth:onvolumechangeth:onwaiting
th:optimumth:patternth:placeholder
th:posterth:preloadth:radiogroup
th:relth:revth:rows
th:rowspanth:rulesth:sandbox
th:schemeth:scopeth:scrolling
th:sizeth:sizesth:span
th:spellcheckth:srcth:srclang
th:standbyth:startth:step
th:styleth:summaryth:tabindex
th:targetth:titleth:type
th:usemapth:valueth:valuetype
th:vspaceth:widthth:wrap
th:xmlbaseth:xmllangth:xmlspace

内联

如何使用内连操作

我们可以通过 在父标签声明 th:inline="text" 来开启内联操作。当然如果想整个页面使用可以直接声明在body上即可。具体使用方式如下面代码所示。

模版页面:

 
  1. <div th:inline="text">
  2. <p>Hello, [[${user.name}]]!</p>
  3. </div>

结果内容如下:

 
  1. <div>
  2. <p>Hello,zhuoqianmingyue!</p>
  3. </div>

这样的操作和使用th:text是等同的。

 
  1. <div>
  2. <p th:text="Hello,+${user.name}"></p>
  3. </div>

[[...]]对应于th:text[(...)]对应于th:utext

禁用内联操作

这我们可以通过在父标签或者本标签上声明th:inline="none"来禁用内联的操作,如下面代码所示:
模版页面:

 
  1. <p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

结果页面:

 
  1. <p>A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

JavaScript内联

如果我们想在JavaScript 中使用内联操作,需要在 script 标签上声明 th:inline="javascript" 然后我们就可以 script 标签中使用内联操作了。具体使用方式如下面代码所示:
模版页面:

 
  1. <script th:inline="javascript">
  2. var username = [[${user.name}]];
  3. </script>

结果页面:

 
  1. <script th:inline="javascript">
  2. var username = "zhuoqianmingyue";
  3. </script>

CSS内联

我们可以通过在 style 标签上声明 th:inline="css" 来开启在css中使用内联的操作,具体操作方式如下:

 
  1. <style th:inline="css">
  2. ...
  3. </style>

例如,假设我们将两个变量设置为两个不同的String值:
classname = 'main elems'
align = 'center'
我们可以像以下一样使用它们:

 
  1. <style th:inline="css">
  2. .[[${classname}]] {
  3. text-align: [[${align}]];
  4. }
  5. </style>

结果页面:

 
  1. <style th:inline="css">
  2. .main\ elems {
  3. text-align: center;
  4. }
  5. </style>

模板布局

定义引用片段代码

SpringBoot2.0 使用模版模版布局需要先引入 thymeleaf的 thymeleaf-layout-dialect依赖

 
  1. <dependency>
  2. <groupId>nz.net.ultraq.thymeleaf</groupId>
  3. <artifactId>thymeleaf-layout-dialect</artifactId>
  4. </dependency>

定义footer.html页面 该页面就是我们的引用片段代码

 
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div th:fragment="copy">
  9. &copy; 2011 The Good Thymes Virtual Grocery
  10. </div>
  11. </body>
  12. </html>

我们可以通过 th:fragment 来定义引用片段,然后可以在其他页面进行引用。

定义引用页面 index.html

 
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <div th:insert="~{footer :: copy}"></div>
  10. </body>
  11. </html>

通过 th:insert 和 ~{...}片段引用表达式 进行引入footer.html中定义的片段

定义访问index页面的 controller

 
  1. @Controller
  2. @RequestMapping("/layout")
  3. public class LayOutController {
  4. @RequestMapping("/index")
  5. public String index(){
  6. return "/layout/index";
  7. }
  8. }

进行测试
http://localhost:8090/sbe/layout/index
在这里插入图片描述
结果页面:

 
  1. <div>
  2. <div>
  3. ? 2011 The Good Thymes Virtual Grocery
  4. </div>
  5. </div>

如下面的代码2种方式的写法是一致的。如果你觉得~{footer :: copy}写法比较麻烦可以采用简写的方式footer :: copy。

 
  1. <div th:insert="footer :: copy"></div>
  2. <div th:insert="~{footer :: copy}"></div>

通过id属性来声明片段

我们可以通过 th:fragment 来定义引用片段,但是我们也可以通过在引用片段代码上声明id属性的方式进行片段的引用,具体操作方式如下:

定义引用片段代码模版页面 footer.html

 
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="copy-section" >
  9. &copy; 2011 The Good Thymes Virtual Grocery
  10. </div>
  11. </body>
  12. </html>

引用引用片段的模版页面:index.html

 
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div th:insert="~{footer :: #copy-section}"></div>
  9. </body>
  10. </html>

结果页面:

 
  1. <div>
  2. <div id="copy-section">
  3. ? 2011 The Good Thymes Virtual Grocery
  4. </div>
  5. </div>

footer :: #copy-section和~{footer :: #copy-section} 结果是一致的。

th:insert和th:replace(和th:include)之间的区别

  • th:insert 是最简单的:他会将使用th:insert的标签 和引用片段的内容都显示出来
  • th:replace 插入引用片段的标签和内容
  • th:include类似于th:insert,只插入此片段的内容

th:insert
java代码:

 
  1. @Controller
  2. @RequestMapping("/layout")
  3. public class LayoutController {
  4. @RequestMapping("/index2")
  5. public String index2(Model model) {
  6. return "/layout/index2";
  7. }
  8. }

声明引用片段模版页面:footer2.html

 
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. <footer th:fragment="copy">
  9. &copy; 2011 The Good Thymes Virtual Grocery
  10. </footer>
  11. </body>
  12. </html>

引用片段模版页面:index2.html

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. <div th:insert="footer2 :: copy"></div>
  9. <div th:replace="footer2 :: copy"></div>
  10. <div th:include="footer2:: copy"></div>
  11. </body>
  12. </html>

th:insert 结果:

 
  1. <div>
  2. <footer>
  3. ? 2011 The Good Thymes Virtual Grocery
  4. </footer>
  5. </div>

th:replace结果:

 
  1. <footer>
  2. ? 2011 The Good Thymes Virtual Grocery
  3. </footer>

th:include结果:

 
  1. <div>
  2. ? 2011 The Good Thymes Virtual Grocery
  3. </div>

带参数的引用片段

定义引用片段代码模版页面 footer.html

 
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. <div th:fragment="frag (onevar,twovar)">
  9. <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
  10. </div>
  11. </body>
  12. </html>

引用引用片段的模版页面:index.html

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. <div th:insert="footer :: frag('a','b')"></div>
  9. </body>
  10. </html>

结果页面:

 
  1. <div>
  2. <div>
  3. <p>a - b</p>
  4. </div>
  5. </div>

th:insert="footer ::frag (onevar='a',twovar='b')" 和th:insert="footer :: frag('a','b')效果是相等的。还有另一种写法就是使用th:with
th:insert="::frag" th:with="onevar='a',twovar='b'"

删除模版片段

我们为了方便通过直接查看下面的页面 productList.html (主要是为了作为原型页面进行查看)我们需要添加一些模拟数据。

  1. <table>
  2. <tr>
  3. <th>NAME</th>
  4. <th>PRICE</th>
  5. <th>IN STOCK</th>
  6. <th>COMMENTS</th>
  7. </tr>
  8. <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
  9. <td th:text="${prod.name}">Onions</td>
  10. <td th:text="${prod.price}">2.41</td>
  11. <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  12. <td>
  13. <span th:text="${#lists.size(prod.comments)}">2</span> comment/s
  14. <a href="comments.html"
  15. th:href="@{/product/comments(prodId=${prod.id})}"
  16. th:unless="${#lists.isEmpty(prod.comments)}">view</a>
  17. </td>
  18. </tr>
  19. <tr class="odd">
  20. <td>Blue Lettuce</td>
  21. <td>9.55</td>
  22. <td>no</td>
  23. <td>
  24. <span>0</span> comment/s
  25. </td>
  26. </tr>
  27. <tr>
  28. <td>Mild Cinnamon</td>
  29. <td>1.99</td>
  30. <td>yes</td>
  31. <td>
  32. <span>3</span> comment/s
  33. <a href="comments.html">view</a>
  34. </td>
  35. </tr>
  36. </table>

在上面的代码中模拟数据的代码,但是我们通过正常的controller访问该页面的时候会显示出下面的模拟数据。

 
  1. <tr class="odd">
  2. <td>Blue Lettuce</td>
  3. <td>9.55</td>
  4. <td>no</td>
  5. <td>
  6. <span>0</span> comment/s
  7. </td>
  8. </tr>
  9. <tr>
  10. <td>Mild Cinnamon</td>
  11. <td>1.99</td>
  12. <td>yes</td>
  13. <td>
  14. <span>3</span> comment/s
  15. <a href="comments.html">view</a>
  16. </td>
  17. </tr>

我们直接查看该页面的效果如下:
在这里插入图片描述

通过url访问查看该页面的效果:
在这里插入图片描述

thymeleaf 为我们提供了 th:remove 帮助我们解决这个问题:

  1. <tr class="odd" th:remove="all">
  2. <td>Blue Lettuce</td>
  3. <td>9.55</td>
  4. <td>no</td>
  5. <td>
  6. <span>0</span> comment/s
  7. </td>
  8. </tr>
  9. <tr th:remove="all">
  10. <td>Mild Cinnamon</td>
  11. <td>1.99</td>
  12. <td>yes</td>
  13. <td>
  14. <span>3</span> comment/s
  15. <a href="comments.html">view</a>
  16. </td>
  17. </tr>
  18.  

我们在模拟数据上声明th:remove="all" 后在此通过url访问 没有了我们之前的模拟数据
在这里插入图片描述

直接查看该页面还是可以查看到我们的模拟数据的。
在这里插入图片描述

all属性中的这个值是什么意思?th:remove可以根据其价值以五种不同的方式表现:

  • all:删除包含标记及其所有子标记。
  • body:不要删除包含标记,但删除其所有子标记。
  • tag:删除包含标记,但不删除其子项。
  • all-but-first:删除除第一个之外的所有包含标记的子项。
  • none: 没做什么。此值对于动态评估很有用。

    当我们知道没有属性的含义后我们可以通过在 声明一次即可,无需在通过定义多个 th:remove="all"

预定义的工具对象

#dates

处理日期数据 生成,转换,获取日期的具体天数 年数。

代码演示:

java代码:

 
  1. @RequestMapping("/dates")
  2. public String dates(Model model) throws ParseException{
  3. Date date = new Date();
  4. model.addAttribute("date",date);
  5.  
  6. String dateStr = "2018-05-30";
  7. SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
  8. Date date2 = sdf.parse(dateStr);
  9. Date[] datesArray = new Date[2];
  10. datesArray[0] = date;
  11. datesArray[1] = date2;
  12. model.addAttribute("datesArray",datesArray);
  13.  
  14. List<Date> datesList = new ArrayList<Date>();
  15. datesList.add(date);
  16. datesList.add(date2);
  17. model.addAttribute("datesList",datesList);
  18. return "/course/dates";
  19. }

format操作

java代码:

  1. Date date = new Date();

模版页面:

  1. <span th:text="${#dates.format(date)}">4564546</span>

结果页面:

  1. <span>2019年5月30日 上午10时03分24秒 </span>

java代码:

  1. Date date = new Date();

模版页面:

  1. <span th:text="${#dates.format(date, 'dd/MMM/yyyy HH:mm')}">4564546</span>

结果页面:

  1. <span>30/五月/2019 10:03 </span>

java代码:

  1. Date[] datesArray = new Date[2];
  2. datesArray[0] = date;
  3. datesArray[1] = date2;

模版页面:

  1. <p th:text="${#dates.format(datesArray, 'yyyy-MM-dd HH:mm')}"></p>

结果页面:

  1. <p>2019-05-30 10:03</p>

不知为何这里只是取出了一个日期数据


java代码:

  1. List<Date> datesList = new ArrayList<Date>();
  2. datesList.add(date);
  3. datesList.add(date2);
  4. model.addAttribute("datesList",datesList);

模版页面:

  1. <p th:text="${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}"></p>

结果页面:

  1. <p>[30/五月/2019 10:03, 30/五月/2018 00:00]</p>

获取日期属性操作
java代码:

  1. Date date = new Date();

模版页面:

  1. <p th:text="${#dates.day(date)} "></p>

结果页面:

  1. <p>30</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.month(date)}"></p>

结果页面:

 
  1. <p>5</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.monthName(date)}"></p>

结果页面:

 
  1. <p>五月</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.monthNameShort(date)} "></p>

结果页面:

 
  1. <p>五月</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.year(date)}"></p>

结果页面:

 
  1. <p>2019</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.dayOfWeek(date)}"></p>

结果页面:

 
  1. <p>5</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.dayOfWeekName(date)}"></p>

结果页面:

 
  1. <p>星期四</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.dayOfWeekNameShort(date)}"></p>

结果页面:

 
  1. <p>星期四</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.hour(date)}"></p>

结果页面:

 
  1. <p>10</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.minute(date)}"></p>

结果页面:

 
  1. <p>10</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.second(date)}"></p>

结果页面:

 
  1. <p>45</p>

java代码:

 
  1. Date date = new Date();

模版页面:

 
  1. <p th:text="${#dates.millisecond(date)} "></p>

结果页面:

 
  1. <p>853</p>

生成日期操作

模版页面:

 
  1. <p th:text="${#dates.createNow()}"></p>

结果页面:

 
  1. <p>Thu May 30 10:15:55 CST 2019</p>

模版页面:

 
  1. <p th:text="${#dates.format(#dates.createNow())}"></p>

结果页面:

 
  1. <p>2019年5月30日 上午10时15分55秒</p>

模版页面:

 
  1. <p th:text="${#dates.create('2019','05','30')}"></p>

结果页面:

 
  1. <p>Thu May 30 00:00:00 CST 2019</p>

模版页面:

 
  1. <p th:text="${#dates.create('2019','05','31','10','18')}"></p>

结果页面:

 
  1. <p>Fri May 31 10:18:00 CST 2019</p>

模版页面:

 
  1. <p th:text="${#dates.create('2019','05','30','10','18','34')}"></p>

结果页面:

 
  1. <p>Thu May 30 10:18:34 CST 2019</p>

模版页面:

 
  1. <p th:text="${#dates.createToday()}"></p>

结果页面:

 
  1. <p>Thu May 30 00:00:00 CST 2019</p>

#numbers

处理数字数据的转换。包括:

  • 对不够位数的数字进行补0(formatInteger )
  • 设置千位分隔符(formatInteger)
  • 精确小数点(formatDecimal )
  • 设置百分号(formatPercent )
  • 生成数组(sequence )

代码演示:

 
  1. @RequestMapping("/numbers")
  2. public String numbers(Model model) throws ParseException{
  3. return "/course/numbers";
  4. }

数字进行补0操作

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('123',4)}"></p>

结果页面:

 
  1. <p>0123</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('123',3)}"></p>

结果页面:

 
  1. <p>123</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('123',2)}"></p>

结果页面:

 
  1. <p>123</p>

Java代码

 
  1. @RequestMapping("/numbers")
  2. public String numbers(Model model) throws ParseException{
  3. List<Integer> numList = new ArrayList<Integer>();
  4. numList.add(1);
  5. numList.add(12);
  6. numList.add(13);
  7. model.addAttribute("numList",numList);
  8. return "/course/numbers";
  9. }

模板代码:

 
  1. <p th:text="${#numbers.listFormatInteger(numList,3)}"></p>

结果页面:

 
  1. <p>[001, 012, 013]</p>

千位分隔符操作
模板代码:

 
  1. <p th:text="${#numbers.formatInteger('1000',2,'POINT')}"></p>

结果页面:

 
  1. <p>1.000</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('1000',6,'POINT')}"></p>

结果页面:

 
  1. <p>001.000</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('1000',7,'POINT')}"></p>

结果页面:

 
  1. <p>0.001.000</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('1000',2,'COMMA')}"></p>

结果页面:

 
  1. <p>1,000</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('1000',2,'WHITESPACE')}"></p>

结果页面:

 
  1. <p>1 000</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('1000',2,'NONE')}"></p>

结果页面:

 
  1. <p>1000</p>

模板代码:

 
  1. <p th:text="${#numbers.formatInteger('1000',2,'DEFAULT')}"></p>

结果页面:

 
  1. <p>1,000</p>

精确小数点操作
模板代码:

 
  1. <p th:text="${#numbers.formatDecimal('10.123',3,2)}"></p>

结果页面:

 
  1. <p>010.12</p>

模板代码:

 
  1. <p th:text="${#numbers.formatDecimal('1000.123',5,'POINT',2,'COMMA')}"></p>

结果页面:

 
  1. <p>01.000,12</p>

钱显示符号操作

模板代码:

 
  1. <p th:text="${#numbers.formatCurrency('1000')}"></p>

结果页面:

 
  1. <p>¥1,000.00</p>

百分比操作
模板代码:

 
  1. <p th:text="${#numbers.formatPercent('0.2',2, 4)}"></p>

结果页面:

 
  1. <p>20.0000%</p>

模板代码:

 
  1. <p th:text="${#numbers.formatPercent('0.2',3, 2)}"></p>

结果页面:

 
  1. <p>020.00%</p>

生成数组操作

模板代码:

 
  1. <div th:each="num : ${#numbers.sequence(0,4)}" >
  2. <p th:text="${num}"></p>
  3. </div>

结果页面:

 
  1. <div><p>0</p></div>
  2. <div><p>1</p></div>
  3. <div><p>2</p></div>
  4. <div><p>3</p></div>
  5. <div><p>4</p></div>

模板代码:

 
  1. <div th:each="num : ${#numbers.sequence(0,4,1)}" >
  2. <p th:text="${num}"></p>
  3. </div>

结果页面:

 
  1. <div><p>0</p></div>
  2. <div><p>1</p></div>
  3. <div><p>2</p></div>
  4. <div><p>3</p></div>
  5. <div><p>4</p></div>

模板代码:

 
  1. <div th:each="num : ${#numbers.sequence(0,10,2)}" >
  2. <p th:text="${num}"></p>
  3. </div>

结果页面:

 
  1. <div><p>0</p></div>
  2. <div><p>2</p></div>
  3. <div><p>4</p></div>

#strings

处理String的相关操作,包括:

  • 字符串转换(toString)
  • 检查字符串是否为空(isEmpty)
  • 字符串是为空替换操作(defaultString)
  • 检查字符串中是否包含某个字符串(contains containsIgnoreCase)
  • 检查字符串是以片段开头还是结尾(startsWith endsWith)
  • 截取(substring substringAfter)
  • 替换(replace)
  • 追加(prepend append)
  • 变更大小写(toUpperCase toLowerCase)
  • 拆分和组合字符串(arrayJoin arraySplit)
  • 去空格(trim)
  • 缩写文本(abbreviate)
  • 字符串连接(concat)

代码演示:
java 代码

 
  1. @RequestMapping("/strings")
  2. public String strings(Model model){
  3. Object object = "123";
  4. model.addAttribute("object",object);
  5.  
  6. List<Integer> numList = new ArrayList<Integer>();
  7. numList.add(1);
  8. numList.add(12);
  9. numList.add(13);
  10. model.addAttribute("numList",numList);
  11. }

Java代码

 
  1. Object object = "123";

模板代码:

 
  1. <p th:text="${object}"></p>

结果页面:

 
  1. <p>123</p>

toString操作

Java代码

 
  1. Object object = "123";

模板代码:

 
  1. <p th:text="${#strings.toString(object)}"></p>

结果页面:

 
  1. <p>123</p>

Java代码

 
  1. List<Integer> numList = new ArrayList<Integer>();
  2. numList.add(1);
  3. numList.add(12);
  4. numList.add(13);

模板代码:

 
  1. <p th:text="${#strings.toString(numList)}"></p>

结果页面:

 
  1. <p>[1, 12, 13]</p>

isEmpty操作
Java代码

 
  1. String name = null;

模板代码:

 
  1. <p th:text="${#strings.isEmpty(name)}"></p>

结果页面:

 
  1. <p>true</p>

Java代码

 
  1. List<String> nameList = new ArrayList<String>();
  2. nameList.add("1");
  3. nameList.add(null);

模板代码:

 
  1. <p th:text="${#strings.listIsEmpty(nameList)}"></p>

结果页面:

 
  1. <p>[false, true]</p>

Java代码

 
  1. Set<String> nameSet = new HashSet<String>();
  2. nameSet.add(null);
  3. nameSet.add("1");

模板代码:

 
  1. <p th:text="${#strings.setIsEmpty(nameSet)}"></p>

结果页面:

 
  1. <p>[true, false]</p>

defaultString操作
Java代码

 
  1. String name = null;

模板代码:

 
  1. <p th:text="${#strings.defaultString(text,'该值为null')}"></p>

结果页面:

 
  1. <p>该值为null</p>

Java代码

 
  1. List<String> nameList = new ArrayList<String>();
  2. nameList.add("1");
  3. nameList.add(null);

模板代码:

 
  1. <p th:text="${#strings.listDefaultString(textList,'该值为null')}"></p>

结果页面:

 
  1. <p>[abc, 该值为null]</p>

contains操作
模板代码:

 
  1. <p th:text="${#strings.contains('abcez','ez')}"></p>

结果页面:

 
  1. <p>true</p>

模板代码:

 
  1. <p th:text="${#strings.containsIgnoreCase('abcEZ','ez')}"></p>

结果页面:

 
  1. <p>true</p>

startsWith endsWith 操作

模板代码:

 
  1. <p th:text="${#strings.startsWith('Donabcez','Don')}"></p>

结果页面:

 
  1. <p>true</p>

模板代码:

 
  1. <p th:text="${#strings.endsWith('Donabcezn','n')}"></p>

结果页面:

 
  1. <p>true</p>

indexOf操作
模板代码:

 
  1. <p th:text="${#strings.indexOf('abcefg','e')}"></p>

结果页面:

 
  1. <p>3</p>

substring操作
模板代码:

 
  1. <p th:text="${#strings.substring('abcefg',3,5)}"></p>

结果页面:

 
  1. <p>ef</p>

replace操作
模板代码:

 
  1. <p th:text="${#strings.replace('lasabce','las','ler')}"></p>

结果页面:

 
  1. <p>lerabce</p>

prepend操作
模板代码:

 
  1. <p th:text="${#strings.prepend('abc','012')}"></p>

结果页面:

 
  1. <p>012abc</p>

append操作
模板代码:

 
  1. <p th:text="${#strings.append('abc','456')}"></p>

结果页面:

 
  1. <p>abc456</p>

toUpperCase操作
模板代码:

 
  1. <p th:text="${#strings.toUpperCase('abc')}"></p>

结果页面:

 
  1. <p>ABC</p>

toLowerCase操作
模板代码:

 
  1. <p th:text="${#strings.toLowerCase('ABC')}"></p>

结果页面:

 
  1. <p>abc</p>

length操作
模板代码:

 
  1. <p th:text="${#strings.length('abc')}"></p>

结果页面:

 
  1. <p>3</p>

trim操作
模板代码:

 
  1. <p th:text="${#strings.trim(' abc ')}"></p>

结果页面:

 
  1. <p>abc</p>

abbreviate操作
模板代码:

 
  1. <p th:text="${#strings.abbreviate('12345678910',10)}"></p>

结果页面:

 
  1. <p>1234567...</p>

#objects

处理Object对象的操作 包含obj不为空返回改值如果为空返回默认值(nullSafe)
java代码

 
  1. @RequestMapping("/objects")
  2. public String objects(Model model){
  3. Object obj = null;
  4. model.addAttribute("obj",obj);
  5. }

模板代码:

 
  1. <p th:text="${#objects.nullSafe(obj,'该对象为null')}"></p>

结果页面:

 
  1. <p>该对象为null</p>

#bools

判断对象是否为ture或者是否为false的操作。

  • 数字 1 为 ture , 0 为 false;
  • "on" 为 true, "off" 为false;
  • "true" 为true, "false"为 false;

isTrue操作
模板代码:

 
  1. <p th:text="${#bools.isTrue(true)} "></p>

结果页面:

 
  1. <p>true</p>

模板代码:

 
  1. <p th:text="${#bools.isTrue(false)} "></p>

结果页面:

 
  1. <p>false</p>

模板代码:

 
  1. <p th:text="${#bools.isTrue('on')} "></p>

结果页面:

 
  1. <p>true</p>

模板代码:

 
  1. <p th:text="${#bools.isTrue('off')} "></p>

结果页面:

 
  1. <p>false</p>

模板代码:

 
  1. <p th:text="${#bools.isTrue('true')} "></p>

结果页面:

 
  1. <p>true</p>

模板代码:

 
  1. <p th:text="${#bools.isTrue('false')} "></p>

结果页面:

 
  1. <p>false</p>

模板代码:

 
  1. <p th:text="${#bools.isTrue(1)} "></p>

结果页面:

 
  1. <p>true</p>

模板代码:

 
  1. <p th:text="${#bools.isTrue(0)} "></p>

结果页面:

 
  1. <p>false</p>

#arrays

处理数组的相关操作的内置对象,包含:

  • 转换数组 toStringArray toIntegerArray,
  • 获取数组的长度(length ),
  • 判断数组是否为空(isEmpty )
  • 是否包含某个元素(contains)
  • 是否包含一批元素(containsAll)

其中 toStringArray 等操作接受的是Object对象,containsAll 接受一批元素支持数组和集合的参数。

toStringArray操作
java代码

 
  1. @RequestMapping("/arrays")
  2. public String arrays(Model model){
  3. List<String> object = new ArrayList<String>();
  4. object.add("1");
  5. object.add("2");
  6. model.addAttribute("object",object);
  7. }

模板代码:

 
  1. <p th:text="${#arrays.toStringArray(object)} "></p>

结果页面:

 
  1. <p>[Ljava.lang.String;@3cca655d</p>

length操作
java代码

 
  1. Integer[] array = {1,2,3};

模板代码:

 
  1. <p th:text="${#arrays.length(array)} "></p>

结果页面:

 
  1. <p>3</p>

isEmpty操作
java代码

 
  1. Integer[] array = {1,2,3};

模板代码:

 
  1. <p th:text="${#arrays.isEmpty(array)} "></p>

结果页面:

 
  1. <p>false</p>

contains操作
java代码

 
  1. Integer[] array = {1,2,3};

模板代码:

 
  1. <p th:text="${#arrays.contains(array,1)} "></p>

结果页面:

 
  1. <p>true</p>

containsAll操作
java代码

 
  1. Integer[] array = {1,2,3};
  2. Integer[] array2 = {1,3};

模板代码:

 
  1. <p th:text="${#arrays.containsAll(array,array2)} "></p>

结果页面:

 
  1. <p>true</p>

#lists

处理 list 相关操作的内置对象,包括:

  • 计算长度(size)
  • 检查list是否为空(isEmpty)
  • 检查元素是否包含在list中(contains,containsAll)
  • 对给定list的副本排序(sort)

java代码

 
  1. @RequestMapping("/lists")
  2. public String lists(Model model){
  3. List<Integer> list = new ArrayList<Integer>();
  4. list.add(1);
  5. list.add(3);
  6. list.add(2);
  7. model.addAttribute("list",list);

模板代码:

 
  1. <p th:text="${#lists.size(list)} "></p>

结果页面:

 
  1. <p>3</p>

java代码:

 
  1. List<Integer> list = new ArrayList<Integer>();
  2. list.add(1);
  3. list.add(3);
  4. list.add(2);

模板代码:

 
  1. <p th:text="${#lists.isEmpty(list)} "></p>

结果页面:

 
  1. <p>false</p>

java代码:

 
  1. List<Integer> list = new ArrayList<Integer>();
  2. list.add(1);
  3. list.add(3);
  4. list.add(2);

模板代码:

 
  1. <p th:text="${#lists.contains(list, 1)}"></p>

结果页面:

 
  1. <p>true</p>

java代码:

 
  1. List<Integer> list = new ArrayList<Integer>();
  2. list.add(1);
  3. list.add(3);
  4. list.add(2);
  5. List<Integer> list2 = new ArrayList<Integer>();
  6. list2.add(1);
  7. list2.add(2);

模板代码:

 
  1. <!-- elements 可以是数组 集合 list -->
  2. <p th:text="${#lists.containsAll(list,list2)}"></p>

结果页面:

 
  1. <p>true</p>

java代码:

 
  1. List<Integer> list = new ArrayList<Integer>();
  2. list.add(1);
  3. list.add(3);
  4. list.add(2);

模板代码:

 
  1. <p th:text="${#lists.sort(list)}"></p>

结果页面:

 
  1. <p>[1, 2, 3]</p>

#sets

处理 set 相关操作的内置对象,包括:

  • 转换为Set(toSet)
  • 计算长度(size)
  • 检查set是否为空(isEmpty)
  • 检查元素是否包含在set中 (contains,containsAll)

size操作

java代码

 
  1. @RequestMapping("/sets")
  2. public String sets(Model model){
  3. Set<Integer> set = new HashSet<Integer>();
  4. set.add(1);
  5. set.add(2);
  6. set.add(3);
  7. set.add(4);
  8. model.addAttribute("set",set);

模板代码:

 
  1. <p th:text="${#sets.size(set)} "></p>

结果页面:

 
  1. <p>3</p>

isEmpty 操作

java代码:

 
  1. Set<Integer> set = new HashSet<Integer>();
  2. set.add(1);
  3. set.add(2);
  4. set.add(3);
  5. set.add(4);

模板代码:

 
  1. <p th:text="${#sets.isEmpty(set)} "></p>

结果页面:

 
  1. <p>false</p>

contains操作

java代码:

 
  1. Set<Integer> set = new HashSet<Integer>();
  2. set.add(1);
  3. set.add(2);
  4. set.add(3);
  5. set.add(4);

模板代码:

 
  1. <p th:text="${#sets.contains(set, 1)}"></p>

结果页面:

 
  1. <p>true</p>

containsAll操作

java代码

 
  1. Set<Integer> set = new HashSet<Integer>();
  2. set.add(1);
  3. set.add(2);
  4. set.add(3);
  5. set.add(4);
  6.  
  7. Integer[] elements = {1,2};
  8. model.addAttribute("elements",elements);

模板代码:

 
  1. <p th:text="${#sets.containsAll(set, elements)}"></p>

结果页面:

 
  1. <p>true</p>
  2.  

sort操作

java代码:

 
  1. Set<Integer> set = new HashSet<Integer>();
  2. set.add(1);
  3. set.add(2);
  4. set.add(3);
  5. set.add(4);

模板代码:

 
  1. <p th:text="${#lists.sort(list)}"></p>

结果页面:

 
  1. <p>[1, 2, 3]</p>

#maps

处理 map相关操作的内置对象,包括:

  • 计算长度(size)
  • 检查map是否为空(isEmpty)
  • 检查映射中是否包含键或值(containsKey,containsAllKeys,containsValue)

java代码:

 
  1. @RequestMapping("/maps")
  2. public String maps(Model model){
  3. Map<String,Integer> map = new HashMap<String,Integer>();
  4. map.put("1",1);
  5. map.put("2",2);
  6. map.put("3",3);
  7. model.addAttribute("map",map);

模板代码:

 
  1. <p th:text="${#maps.size(map)} "></p>

结果页面:

 
  1. <p>3</p>

java代码:

 
  1. Map<String,Integer> map = new HashMap<String,Integer>();
  2. map.put("1",1);
  3. map.put("2",2);
  4. map.put("3",3);

模板代码:

 
  1. <p th:text="${#maps.isEmpty(map)} "></p>

结果页面:

 
  1. <p>false</p>

java代码:

 
  1. Map<String,Integer> map = new HashMap<String,Integer>();
  2. map.put("1",1);
  3. map.put("2",2);
  4. map.put("3",3);

模板代码:

 
  1. <p th:text="${#maps.containsKey(map, '1')}"></p>

结果页面:

 
  1. <p>true</p>

java代码:

 
  1. Map<String,Integer> map = new HashMap<String,Integer>();
  2. map.put("1",1);
  3. map.put("2",2);
  4. map.put("3",3);
  5. String[] keys = {"1","2"};
  6. model.addAttribute("keys",keys);

模板代码:

 
  1. <!-- keys 可以是数组可以是集合 -->
  2. <p th:text="${#maps.containsAllKeys(map, keys)}"></p>

结果页面:

 
  1. <p>true</p>

java代码:

 
  1. Map<String,Integer> map = new HashMap<String,Integer>();
  2. map.put("1",1);
  3. map.put("2",2);
  4. map.put("3",3);

模板代码:

 
  1. <p th:text="${#maps.containsValue(map, 2)}"></p>

结果页面:

 
  1. <p>true</p>

java代码:

 
  1. Map<String,Integer> map = new HashMap<String,Integer>();
  2. map.put("1",1);
  3. map.put("2",2);
  4. map.put("3",3);
  5. Integer[] values = {1,2};
  6. model.addAttribute("values",values);

模板代码:

 
  1. <!-- values 可以是数组可以是集合 -->
  2. <p th:text="${#maps.containsAllValues(map, values)}"></p>

结果页面:

 
  1. <p>true</p>

#aggregates

用户处理集合或者数组的一些统计操作,包括:

  • 求和(sum)
  • 求平均值(avg)
  • 处理包装类型或基本类型的数组或集合

求和操作

java代码:

 
  1. @RequestMapping("/aggregates")
  2. public String aggregates(Model model){
  3. Integer[] array = {1,2,3,4};
  4. model.addAttribute("array",array);
  5. return "/course/aggregates";
  6. }

模板代码:

 
  1. <p th:text="${#aggregates.sum(array)} "></p>

结果页面:

 
  1. <p>10</p>

java代码:

 
  1. List<Integer> list = new ArrayList<Integer>();
  2. list.add(1);
  3. list.add(2);
  4. list.add(3);
  5. list.add(4);

模板代码:

 
  1. <p th:text="${#aggregates.sum(list)} "></p>

结果页面:

 
  1. <p>10</p>

求平均值操作

java代码:

 
  1. Integer[] array = {1,2,3,4};

模板代码:

 
  1. <p th:text="${#aggregates.avg(array)} "></p>

结果页面:

 
  1. <p>2.5</p>

java代码:

 
  1. List<Integer> list = new ArrayList<Integer>();
  2. list.add(1);
  3. list.add(2);
  4. list.add(3);
  5. list.add(4);

模板代码:

 
  1. <p th:text="${#aggregates.avg(list)} "></p>

结果页面:

 
  1. <p>2.5</p>

小结

本文主要介绍 Thymeleaf 的基础用法、内联、模板布局、预定义的工具对象。整体来看Thymeleaf 使用语法还是很强大的,但是我这里不会强烈安利你使用 Thymeleaf,正如 Thymeleaf 官方所说:“无论如何,比较技术的最好方法是自己使用它们,并感觉哪个最适合你!” 你同样可以选择使用 Velocity 或 FreeMarker。

代码示例

具体代码示例请查看我的GitHub 仓库 springbootexamples 中的 spring-boot-2.x-thymeleaf 下的 course 包下查看。

GitHub:https://github.com/zhuoqianmingyue/springbootexamples

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值