java前端模板Thymeleaf常⽤语法
1、在html页⾯中引⼊模板。
<html xmlns:th="">
前端页面模板2、需要引⼊css时，代码如下：（js与其类似）
<link th:href="@{/css/a.css}" type="text/css" rel="stylesheet">
3、对于某些页⾯，我们需要引⼊其他公共页⾯的话，在需要引⼊的区域使⽤include，如下：
<div th:include="img::${frag}"></div>
//img表⽰另⼀个页⾯的（/路径/⽂件名去掉后缀）,
${frag}表⽰后台动态传⼊的fragment名字，我传⼊的是img，他是另⼀个页⾯的fragment名，传⼊的页⾯img.html如下：
<!DOCTYPE html>
<html xmlns:th="">//注：这句引⼊必须要有。
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="img">//${frag}的值为fragment的值
这是模板图⽚：
<img th:src="@{/img/a.png}">
</div>
</body>
</html>
4、如果需要对后台传过来的时间进⾏格式化，如下：
<p th:text="${#dates.format(time,'yyyy-MM-dd hh:mm:ss')}"></p>
/
/结果为  2019-04-01 12:55:24
如果不进⾏格式化，代码如下：
<h3 th:text="${time}"></h3>
//结果为Mon Apr 01 12:55:24 CST 2019 显然可读性差
5、对⽂本进⾏替换，两种⽅式，任选：
<span th:text="'welcome to our application, '+${user.phone}"></span>
<span th:text="|welcome to our application,${user.phone}|"></span>
6、后台传过来list集合的话，如何循环遍历呢？
<table>
<tr th:each="li:${list}">//li为别名，${list}为后台传过来的集合名
<td th:text="${li.phone}"></td>
<td th:text="${li.password}"></td>
</tr>
</table>
7、对数据判断，根据不同的数据类型使⽤不同的⽅法，如：对后台传过来的string类型，我们⽤strings：<p th:text="${#strings.isEmpty(user.password)?'暂⽆信息':user.password}"></p>
//为空显⽰前者：‘暂⽆信息’，不为空显⽰string字段。
对于list或者set，代码类似
<p th:if="${#lists.isEmpty(list)}"></p>
<p th:if="${#sets.isEmpty(list)}"></p>
8、根据后台传过来的数据进⾏区分，分别显⽰不同的内容，可以⽤if或者switch。
（1）if 后⾯跟的内容为真，显⽰对应的，unless刚好相反。
<div th:if="${user.phone=='184********'}">//判断为真显⽰
不错不错
</div>
<div th:unless="${user.phone=='184********'}">//判断为假显⽰
不错不错
</div>
如果user.phone从后台传过来是‘184********’（我的⼿机号），则前者显⽰，后者不显⽰。（2）if多条件与switch类型。
<div th:if="${aaa>5}">正确</div>
<div th:if="${aaa<5}">错误</div>
（3）switch的⽤法如下，肯定需要与case搭配。
<div th:switch="${user.phone}">
<p th:case="184********">
是健康⼥朋友的号码
</p>
<p th:case="184********">
是健康的号码
</p>
<p>
当然，我们也可以加default
<P th:default>
是其他健康不认识的⼈的号码
</P>
上⾯可以⽤下⾯的替换，与default效果⼀致：
<P th:case="*">
是其他健康不认识的⼈的号码
</P>
9、select语句，动态加载。
<select>
<option th:each="u:${list}" //遍历的集合，u为别名
th:value="${u.phone}" //select的值，此时的optiion值为电话
th:text="${u.phone}" //页⾯显⽰的⽂本
th:selected="${u.phone==user.phone}"> //默认选择的内容
</option>
</select>
实际效果如下：
10、动态加载图⽚，语法如下：
<img th:src="@{/img/{img}(img=${img})}">
如果图⽚没有拿到，我们为了美观需要默认的图⽚。可以这样：
<img th:src="@{/{img}(img=${img})}"
th:"'this.src=\'' + @{'/img/ss.gif'} + '\''">
th:onerror语法是当前⾯的图⽚，从后台拿不到时，我们使⽤ss.gif替换。
11、提交form表单，我们我们也可以⽤thymeleaf的语法。
<form th:action="@{/bb}" th:object="${user}" method="post" th:method="post">
<input type="text" th:field="*{phone}"/>//field上传的字段名字
<input type="text" th:field="*{password}">
<input type="submit">
</form>
th:object="${user}"，表⽰我们提交的内容为user对象，在后台直接接收user就⾏了，下⾯的字段phone，password都能拿到。
12、为了避免冲突，在前端，⼀下符合也需要改动。（注：分号不可省）
（1）< ；⼩于
（2）>；⼤于
（3）&equals 等于
（4）&le； ⼩于等于
（5）&ge； ⼤于等于
<h2>This is <⼩于</h2>
<h2>This is >⼤于/h2>
<h2>This is =；等于/h2>
<h2>This is ≤,⼩于等于/h2>
<h2>This is ≥⼤于等</h2>
13、数据格式化实例
（1）保留两位⼩数，整数位⾃动：
<span th:text="${#numbers.formatDecimal(price,0,2)}">34</span>
//结果为  11.00
（2）保留两位⼩数，整数位三位。
<span th:text="${#numbers.formatDecimal(price,3,2)}">34</span>
结果为： 011.00

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。