Thymeleaf可以处理六种类型的模板,每种类型的模板称为模板模式
*HTML (标记模板模式)
*XML (标记模板模式)
*TEXT 文本模板模式
*JAVASCRIPT
*CSS
*RAW 无操作模板模式
Thymeleaf标准方言中的大多数处理器都是属性处理器,因为浏览器将简单的忽略其不识别的属性。例如向下面的JSP代码无法显示出来
<from: input type="text" name="userName" value="${user.name}">
然而Thymeleaf将允许我们实现上述代码相同的功能
<input type="text" name="userName" value="James carrot" th:value="${user.name}"/>
HTML5规范要求用户自定义属性以data-前缀开头
<p data-th-text="#{home.welcome}">welcome to our grocery store!</p>
Thymeleaf允许使用#{…..}语法表达式指定对应的特定消息:
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
标准语法表达式
简单表达式
变量表达式:${………..}
选择变量表达式:*{……}
消息表达式:#{………….}
链接网址表达式:@{……..}
片段表达式:~{…….}
文字
文字:’one text’,’Another one’
消息
消息文本不是完全静态,但我们想知道是哪个用户访问该网站
<p th:text="#{${welcomeMsgKey}(${session.user.name})}">
Welcome to our grocery store,Sebastian Pepper!
</p>
标准表达式详解
1.变量表达式
用于访问容器上下文环境中的变量
<input th:text="${ID}"></input>
<input th:if="${Ul.Power}==1">管理员</input>
2.星号表达式
<div th:object="${UL}">
<p>Name: <span th:text="*{Name}">张</span>.</p>
<p>LastName:<span th:text="*{lastName}">三</span>.</p>
<p>Address:<span th:text="*{addr}">北京</span>
</div>
Html解释:首先使用th:object来邦定后台传来的UserPower对象,然 后使用*来代表这个对象,后面{}中的值是此对象中的属性
3.消息表达式
与th:text属性一起使用,指明th:text的标签的文本是#{}中的key 所对应的value,而标签内的文本将不会显示
<p th:text="#{home.language}">This text will not be show!</p>
home.language=这段代码将会被显示
访问页面,效果是英文不会被显示,显示的是属性文件中的中文
4.URL表达式
超链接url表达式
<script th:src="@{/static/js/jquery-2.4.min.js}"></script>
thymeleaf属性介绍
1. th:action
定义后台控制器的路径,类似于标签的action属性
<from id="login" th:action="@{/login}">......</from>
2.th:each
将一个对象集合遍历输出,和jstl中的类似而且还可以遍历数组及Map
<tr th:each="user,iterStat:${list}">
<td th:text="${user.userName}">Onions</td>
</tr>
<li>Map类型的循环:
<div th:each="mapS:{map}">
<div th:text="${mapS}"></div>
</li>
<li>数组的循环:
<div th:each="arrayS:${arrays}">
<div th:text="${arrayS}"></div>
</div>
</li>
3.th:href、th:src、th:id
定义超链接,类似标签的href属性。value形式为@{/login}
<a class="login" th:href="@{/login}"></a>
用于外部资源的引入,类似<script>标签的src属性,常与@{}表达式结合使用
<script th:src="@{/static/js/jquery-2.4.min.js}"></script>
类似html标签中的id属性
<div class="user" th:id="(${index})"></div>
4.th:if
这个属性使用也非常频繁,比如后台传来一个key,判断value的值,1为男,2为女。
<span th:if="${Sex} == 1" >
<input type="redio" name="se" th:value="男" />
</span>
<span th:if="${Sex} == 2">
<input type="redio" name="se" th:value="女" />
</span>
5.th:value
类似html中的value属性,能对某元素的value属性进行赋值
<input type="hidden" id="StartNo" name="StartNo" th:value="${StartNo}">
6.th:text
用于文本的显示
<input type="text" id="RealName" name="RealName"
th:text="${RealName}">
7.th:attr
这个属性用于给HTML中某元素的某属性赋值
<input type="hidden" id="StartNo" name="StartNo" th:attr="value=${StartNo}" >