一、thymeleaf语法说明

1.1、标签与属性

问题: 通过前面的案例，可以发现似乎所有HTML5标签的属性都有一个对应的thymeleaf属性，到底是不是这样的呢？

因为thymeleaf的表达式是写在自定义的属性里面的。如果HTML5原来的属性没有对应的thymeleaf属性，就会导致有些属性无法按thymeleaf的理念设置。因此可以得出：所有的HTML5标签的所有属性都有一个自定义的thymeleaf属性对应。如input标签的type、value属性对应的thymeleaf属性就是th:type、th:value。
<input type="text" th:type="" value="张三" th:value="" />

总结： thymeleaf属性只有当thymeleaf模板引擎启动的情况下，才会生效，即取代对应的HTML5属性，相反，thymeleaf属性仅仅只是一个无用的自定义属性，因为浏览器内核不认识，因此使用thymeleaf模板引擎可以使得前端代码和后端代码分离，当出现显示问题时，可以立即定位问题所在（是前端页面还是后台返回数据有错），这也是thymeleaf相对于jsp的一个优势。

1.2、判断

thymeleaf支持四种判断：th:if / th:unless、逻辑运算符（and、or、not）、三目运算符、switch。

第一种：if & unless

<!--如果条件为真，执行标签内的内容-->
<div th:if="${false}">曾经沧海难为水
</div>
<!--如果条件为假，执行标签内的内容-->
<div th:unless="${false}">除却巫山不是云
</div>

第二种：and 、or、not

<div th:if="${true or false}">莫愁天下无知己
</div>
<div th:if="${not false}">天下谁人不识君
</div>

第三种：三目运算符

<span th:text="true ? '年年岁岁花相似' : '岁岁年年人不同'"></span>

第四种：switch

<div th:switch="${21}"><div th:case="16">我今年16岁</div><div th:case="17">我今年17岁</div><div th:case="18">我今年18岁</div><div th:case="*">我今年18岁</div>
</div>

1.3、循环

thymeleaf使用th:each来实现循环遍历。

前端页面
templates/userinfos.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>需求：输出用户信息</h3>
<table border="1" cellpadding="0"><tr><th>编号</th><th>姓名</th><th>地址</th></tr><tr th:each="user,item:${users}"><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.address}"></td></tr>
</table>
<h3>需求：输出用户信息，声明状态对象</h3>
<table border="1" cellspacing="0"><tr><td>当前迭代索引</td><td>当前迭代序号</td><td>编号</td><td>姓名</td><td>地址</td></tr><tr th:each="user, item:${users}"><td th:text="${item.index}"></td><td th:text="${item.count}"></td><td th:text="${user.id}"></td><td>[[${user.name}]]</td><td th:text="${user.address}"></td></tr>
</table>
</body>
</html>

其中item为每行的详细值，key值如下：
1.index下标，从0开始
2.count第x个，从1开始
3.size这个集合的大小
4.current当前行的值

后端代码

com/xbmu/controller/TestController.java

package com.xbmu.controller;import com.xbmu.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;import java.util.ArrayList;@Controller
public class TestController {@GetMapping("/userinfo")public String showPage(Model model) {ArrayList<User> users = new ArrayList<>();User user1 = new User(1L,"张三","陕西省西安市");users.add(user1);User user2 = new User(2L,"李四","甘肃省兰州市");users.add(user2);User user3 = new User(3L,"王五","河南省郑州市");users.add(user3);model.addAttribute("users", users);return "userinfos";}
}

测试

1.4、代码片段复用

1.4.1、基本使用

th:fragment 标签是声明代码片段，用于解决代码复用的问题，好比java程序写的公用代码一样，每个需要的地方都可以直接调用；
th:insert 引用fragment的代码，保留自己的主标签；
th:replace 引用fragment的代码，不保留自己的主标签；
th:include 使用类似th:replace，thymeleaf3.0之后不推荐使用；

templates/common.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>公共页面</title>
</head>
<body><div th:fragment="code-one"><h3>公共代代码1</h3></div><div th:fragment="code-two"><h3>公共代代码2</h3></div><div th:fragment="code-three"><h3>公共代代码3</h3></div>
</body>
</html>

声明了三个代码片段：code-one、code-two和code-three。
templates/test.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<span th:replace="common :: code-one"></span>
<span th:insert="common :: code-two"></span>
<span th:include="common :: code-three"></span>
</body>
</html>

thymeleaf模板引擎编译后

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><h3>公共代代码1</h3>
</div>
<span><div><h3>公共代代码2</h3></div>
</span>
<span><h3>公共代代码3</h3>
</span>
</body>
</html>

双冒号的理解： 其中使用"::"双冒号来完成对页面片段的引用，有点像php里面的语法，使用双冒号来表示对类的静态属性和方法进行直接引用。
执行效果如下图：
总结： 可以很清晰的看出 th:insert、th:replace、th:include之间的区别，在于是否保留自己的主标签，th:include 在3.0之后已经不推荐使用了，可以使用th:replace标签替代。

1.4.2、fragment代码传参

使用fragment，我们是可以在HTML代码中传参的，比如我们定义了一个common.html其中有一个"欢迎XXX"的提示，而这个人名XXX就是需要动态传递的，这样我们可以最大程度的完成代码的复用，这个时候就是一个很好的使用场景。
templates/common.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>公共页面</title>
</head>
<body><div th:fragment="welcome(name)"><span th:text="'欢迎:'+${name}"></span></div>
</body>
</html>

templates/test.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div th:replace="common :: welcome('常山赵子龙')"></div>
</body>
</html>

测试

1.5、th:with ，th:remove，其他标签

1.5.1、th:with 定义局部变量

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div th:with="sum=(4-2)"><span th:text="${sum}"></span>
</div>
</body>
</html>

页面输出结果：2

1.5.2、th:remove 删除标签

th:remove用于html代码的删除，th:remove值有五个：

all 删除本段所有代码
body 删除主标签内的所有元素
tag 删除主标签，保留主标签所有的元素
all-but-first 保留主标签和第一个元素，其他全部删除
none 不删除任何标签

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="all" th:remove="all"><span>all</span><span>1</span>
</div><div id="body" th:remove="body"><span>body</span><span>2</span>
</div><div id="tag" th:remove="tag"><span>tag</span><span>3</span>
</div><div id="all-but-first" th:remove="all-but-first"><span>all-but-first</span><span>4</span>
</div><div id="none" th:remove="none"><span>none</span><span>5</span>
</div></body>
</html>

thymeleaf模板引擎编译后

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="body"></div><span>tag</span>
<span>3</span><div id="all-but-first"><span>all-but-first</span></div><div id="none"><span>none</span><span>5</span>
</div></body>
</html>

1.5.3、其他标签

th:style 定义样式
th: 点击事件
th:href 赋值属性href
th:value 赋值属性value
th:src 赋值src
th:action 赋值属性action
th:id 赋值属性id
th:attr 定义多个属性
th:object 定义一个对象

1.6、表达式对象概述

表达式里面的对象可以帮助我们处理要展示的内容，比如表达式的工具类dates可以格式化时间，这些内置类的熟练使用，可以让我们使用Thymeleaf的效率提高很多。

1.6.1、表达式基本对象

#ctx: 操作当前上下文.
#vars: 操作上下文变量.
#request: (仅适用于Web项目) HttpServletRequest对象.
#response: (仅适用于Web项目) HttpServletResponse 对象.
#session: (仅适用于Web项目) HttpSession 对象.
#servletContext: (仅适用于Web项目) ServletContext 对象.

1.6.2、表达式实用工具类

#execInfo: 操作模板的工具类，包含了一些模板信息，比如：${#execInfo.templateName} .
#uris: url处理的工具
#conversions: methods for executing the configured conversion service (if any).
#dates: 方法来源于 java.util.Date 对象，用于处理时间，比如：格式化.
#calendars: 类似于 #dates, 但是来自于 java.util.Calendar 对象.
#numbers: 用于格式化数字.
#strings: methods for String objects: contains, startsWith, prepending/appending, etc.
#objects: 普通的object对象方法.
#bools: 判断bool类型的工具.
#arrays: 数组操作工具.
#lists: 列表操作数据.
#sets: Set操作工具.
#maps: Map操作工具.
#aggregates: 操作数组或集合的工具.

官网连接：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects

十五、SpringBoot2核心技术——web开发(模块引擎Thymeleaf)_下相关推荐

STC8H开发(十五): GPIO驱动Ci24R1无线模块
目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...
第三百二十五节，web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签...
第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象 ...
SAP UI5 应用开发教程之三十五 - 如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
python 模板引擎对比_Python Web开发模板引擎优缺点总结
做 Web 开发少不了要与模板引擎打交道.我陆续也接触了 Python 的不少模板引擎,感觉可以总结一下了. 一.首先按照我的熟悉程度列一下: pyTenjin:我在开发 Doodle 和 91 外教 ...
javaweb学习总结(二十五)——jsp简单标签开发(一)
一.简单标签(SimpleTag) 由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编 ...
六十四、SpringBoot中的模板引擎Thymeleaf
@Author:Runsen 来源:尚硅谷下面建议读者学习尚硅谷的B站的SpringBoot视频,我是学雷丰阳视频入门的. 具体链接如下:B站尚硅谷SpringBoot教程文章目录使用Sprin ...
微信web开发工具如何使用_优秀的设计师和开发人员使用出色的Web开发工具
微信web开发工具如何使用 There are hundreds or even thousands of web tools and services on the market, but whic ...
Web开发人员最易犯下的十种常见错误
对于如何完成同一项任务,摆在我们面前的方案选项似乎无穷无尽,特别是在开发一套能够运作在现代网络环境之下的网站时.Web开发人员首先需要挑选一套Web托管平台及底层数据存储机制,并利用由提供的工具编写H ...
web开发集成数字证书_每个数字设计师都应该知道的Web开发的七个原则
web开发集成数字证书 A career path into digital design is often winding, meaning many practitioners come from ...

十五、SpringBoot2核心技术——web开发(模块引擎Thymeleaf)_下