不是第一

Eclipse自动提示插件

官方文档

https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#base-objects

安装地址：

http://www.thymeleaf.org/eclipse-plugin-update-site/

Html中添加约束

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

URL地址处理

@{...}

1）@{userList} 相对当前路径结果为：http://localhost/thymeleaf/user/userList

2）@{./userList} 相对当前路径结果为：http://localhost/thymeleaf/user/userList

3）@{../tiger/home} 相对当前路径结果为：http://localhost/thymeleaf/tiger/home

4）@{/tiger/home} 相对应用根目录结果为：http://localhost/thymeleaf/tiger/home

5）@{https://www.baidu.com/} 绝对路径结果为：https://www.baidu.com

6） <link type="text/css" rel="stylesheet" th:href="@{/css/home.css}">

@ 以 "/" 开头定位到项目根路径，否则使用相对路径

th:href

<body>
<a th:href="@{userList(id=1)}">1、@{userList(id=9527)}</a>
<a th:href="@{userList(id=1,name=华安)}">2、@{userList(id=1,name=yoyo)}</a>
<a th:href="@{userList(id=1,name=${userName})}">3、@{userList(id=1,name=${userName})}</a>
</body>

th:text 文本

空格属于特殊字符，必须使用单引号包含整个字符串

<p class="css1 css2" th:class="'css1 css2'">样式</p>
<p th:text="'Big China'">中国</p>
<p th:text="${userName}">userName</p>
<p th:text="'small smile'+',very good.' + ${userName}">temp</p>

数字计算

<p th:text="80">8</p>
<p th:text="8+8">8 + 8</p>
<p th:text="8+8+' Love '+9+9">8 + 8+' Love '+9+9</p>
<p th:text="8+8+' Love '+(9+9)">8 + 8+' Love '+(9+9)</p>
<p th:text="100-${age}"></p>

Boolean判断

<p th:text="true">布尔</p>
<p th:text="true and false">true and true</p>
<p th:if="${isMarry}">已结婚</p>
<p th:if="${age}&gt;18">已成年</p>
<p th:if="${age}&lt;18">未成年</p>

运算

<p th:text="15 * 4">值为 60 </p>
<p th:text="15 * 4-100/10">值为 50 </p>
<p th:text="100 % 8">值为 4</p>

比较

<p th:if="5>3">5 大于 3</p>
<p th:if="5 &gt;4">5 大于 4</p>
<p th:if="10>=8 and 7 !=8">10大于等于8，且 7 不等于 8 </p>
<p th:if="!${isMarry}">!false</p>
<p th:if="not(${isMarry})">not(false)</p>

三元运算符

<p th:text="7&gt;5?'7大':'5大'">三元运算符</p>
<p th:text="${age}!=null?${age}:'age等于 null'"></p>
<p th:text="${age}!=null?(${age}>=18?'成年':'未成年'):'age等于 null'"></p>
<p th:text="${age2}!=null?${age2}:'age2等于 null'"></p>
<p th:class="${isMarry}?'css2':'css3'">已婚</p>

th:utext转义

map .addAttribute("china", "<b>Chian</b>,USA,UK");
<p th:text="${china}">默认转义</p>
<p th:utext="${china}">不会转义</p>

th:attr 设置属性

HTML5 所有的属性，都可以使用 th:* 的形式进行设置值

<a href="http://baidu.com" th:attr="title='百度'">百度</a>

html属性设置


<a href="" th:attr="title='前往百度',href='http://baidu.com'">前往百度</a>
设置 href 属性
<a href="userList.html" th:attr="href=@{/user/userHome}">用户首页</a>
设置 id 属性，data-target 属性 Html 本身是没有的，但允许用户自定义
<a href="#" th:attr="id='9527',data-target='user'">归海一刀</a>

<p th:abc="9527">th:abc="9527"</p>

<p th:xxoo="yoyo">th:xxoo="yoyo"</p>

Checked selected

Checked
<input type="checkbox" name="option1" checked/><span>是否已婚1？</span>
<input type="checkbox" name="option2" checked="checked"/><span>是否已婚2？</span>


后台传值 ： model.addAttribute("isMarry", true);

<input type="checkbox" name="option3" th:checked="${isMarry}"/><span>是否已婚？</span>
<input type="radio" name="option4" th:checked="${isMarry}"/><span>是否已婚？</span>
<input type="radio" name="option5" th:checked="!${isMarry}"/><span>是否已婚？</span>
select autofocus
<select>
	<option>a</option>
	<option th:selected="${isMarry}">已婚</option>
	<option  th:selected="${!isMarry}">未婚</option>

</select>
<input type="text" th:autofocus="false">
<input type="text" th:autofocus="true">
<input type="text" th:autofocus="false">

日期格式化

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

循环

JSTL 有一个 c:foreach，同理 Thymeleaf 也有一个 th:each。

作用都是一样的，都是用于遍历数组、List、Set、Map 等数据。 在Select上循环

 <option th:each="city : ${list}" th:text="${city.name}" th:selected="${cityName} eq ${city.name}">Peking</option>

状态变量 loopStatus

如果不指定 为变量 Stat

  • index: 当前迭代对象的index（从0开始计算）
  • count: 当前迭代对象的index(从1开始计算)
  • size: 被迭代对象的大小 current:当前迭代变量
  • even/odd: 布尔值，当前循环是否是偶数/奇数（从0开始计算）
  • first: 布尔值，当前循环是否是第一个
  • last: 布尔值，当前循环是否是最后一个
<tr th:each="city,status : ${list}" th:style="${status.odd}?'background-color:#c2c2c2'">
  		<!-- EL JSTL-->
  		<td th:text = "${status.count}"></td>
  		<td th:text = "${city.id}"></td>
  		<td th:text = "${city.name}"></td>
  	</tr>

逻辑判断

If/else

<p th:if="${isMarry}">已婚1</p>
<p th:unless="${isMarry}">未婚</p>

Switch/case 多条件判断

<div th:switch="1">
    <p th:case="0">管理员</p>
    <p th:case="1">操作员</p>
    <p th:case="*">未知用户</p>
</div>



<div th:switch="-1">
    <p th:case="0">管理员</p>
    <p th:case="*">操作员</p>
    <p th:case="*">未知用户</p>
</div>

<div th:switch="${isMarry}">
    <p th:case="true">已婚</p>
    <p th:case="true">已成年</p>
    <p th:case="false">未婚</p>
</div>

<div th:switch="'For China'">
    <p th:case="'For USA'">美国</p>
    <p th:case="'For UK'">英国</p>
    <p th:case="'For China'">中国</p>
    <p th:case="*">未知国籍</p>
</div>

内联表达式

[[...]] 等价于 th:text（结果将被 HTML 转义），[(...)] 等价于 th:utext（结果不会执⾏HTML转义）

<p>[[${china}]]</p>
<p>[(${china})]</p>
<p>[[Lo1ve]]</p>
<p>[['I Love You Baby']]</p>
<p>[(9527)]</p>

禁⽤内联th:inline ="none"

内联 JavaScript

<script type="text/javascript" th:inline="javascript">
     var info = [[${info}]];
        var age = [[${age}]];
        var id = [[${id}]];
        var name = [[${name}]];
        console.log(id, name, age, info);
</script>

前后端分离开发

   <script type="text/javascript" th:inline="javascript">
        /**
         * Thymeleaf 将自动忽略掉注释之后 和 分号之前的所有内容,如下为 "前端测试"
         */
        var info = /*[[${info}]]*/ "前端测试";
        console.log(info);
</script>

Servlet作用域中的对象属性

URL/request

<p>${param.size()}=[[${param.size()}]]</p>
<p>${param.id}=[[${param.id}]]</p>

Session

<p>${session.size()}=[[${session.size()}]]</p>
<p>${session.user.id}=[[${session.user.id}]]</p>