Thymeleaf基本使用
一、基础语法
参考:
https://www.cnblogs.com/msi-chen/p/10974009.html
https://www.cnblogs.com/jiangbei/p/8462294.html
1. 在HTML中添加以下标签内容
<html xmlns:th="http://www.thymeleaf.org">
2. 通过${...}获取变量值
<p th:text="'Hello!, ' + ${name} + '!'">3333</p> <!-- 避免引号太多引起混乱,可以用以下方式--> <p th:text="|Hello!, + ${name} + !|">3333</p>
3. 选择变量表达式 *{...}
<div th:object="${session.user}"> <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p> <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p> <p>Nationality: <span th:text={nationality}">Saturn</span>.</p> </div> 等价于 <div> <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p> <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p> <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p> </div>
<标签里面的内容只在前端写页面的时候展示,后端有值覆盖掉之后是不会显示的>
4. 运算符
数学运算
- 二元操作:+, - , * , / , %
- 一元操作: - (负)
逻辑运算
- 一元 : and or
- 二元 : !,not
比较运算(为避免转义尴尬,可以使用括号中的英文进行比较运算!)
- 比较:> , < , >= , <= ( gt , lt , ge , le )
- 等于:== , != ( eq , ne )
条件运算
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)
5. 循环 th:each=" ... "
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>hello</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <!-- 不存在则忽略,显示hello null!(可以通过默认值进行设置)--> <p th:text="'Hello ' + (${name}?:'admin')">3333</p> <table> <tr> <th>ID</th> <th>NAME</th> <th>AGE</th> </tr> <tr th:each="emp : ${empList}"> <td th:text="${emp.id}">2</td> <td th:text="${emp.name}">海</td> <td th:text="${emp.age}">18</td> </tr> </table> </body> </html>
th:each属性用于迭代循环,语法:th:each="obj,iterStat:${objList}"
迭代对象可以是java.util.List,java.util.Map,数组等;
iterStat称作状态变量,属性有:
- index:当前迭代对象的index(从0开始计算)
- count: 当前迭代对象的index(从1开始计算)
- size:被迭代对象的大小
- current:当前迭代变量
- even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
- first:布尔值,当前循环是否是第一个
- last:布尔值,当前循环是否是最后一个
<ol> <li>List循环: <table border="1"> <tr> <th>用户名</th> <th>邮箱</th> <th>管理员</th> <th>状态变量:index</th> <th>状态变量:count</th> <th>状态变量:size</th> <th>状态变量:current.userName</th> <th>状态变量:even</th> <th>状态变量:odd</th> <th>状态变量:first</th> <th>状态变量:last</th> </tr> <tr th:each="user,userStat : ${list}"> <td th:text="${user.userName}">Onions</td> <td th:text="${user.email}">test@test.com.cn</td> <td th:text="${user.isAdmin}">yes</td> <th th:text="${userStat.index}">状态变量:index</th> <th th:text="${userStat.count}">状态变量:count</th> <th th:text="${userStat.size}">状态变量:size</th> <th th:text="${userStat.current.userName}">状态变量:current</th> <th th:text="${userStat.even}">状态变量:even****</th> <th th:text="${userStat.odd}">状态变量:odd</th> <th th:text="${userStat.first}">状态变量:first</th> <th th:text="${userStat.last}">状态变量:last</th> </tr> </table> </li> <li>Map循环: <div th:each="mapS:${map}"> <div th:text="${mapS}"></div> </div> </li> <li>数组循环: <div th:each="arrayS:${arrays}"> <div th:text="${arrayS}"></div> </div> </li> </ol>
6.常用语法
7. JS模板
模板引擎不仅可以渲染html,也可以对JS中的进行预处理。而且为了在纯静态环境下可以运行,其Thymeleaf代码可以被注释起来:
<script th:inline="javascript"> const user = /*[[${user}]]*/ {}; const age = /*[[${user.age}]]*/ 20; console.log(user); console.log(age) </script>