Fork me on GitHub

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>
posted @ 2021-07-06 15:38  zerozhupan  阅读(145)  评论(0)    收藏  举报