Thymeleaf模板入门（三）

Thymeleaf基本语法

1. 往期

2. 案例

实体类User

package top.infinxkj.thymeleaf.pojo;

public class User {
    public String name;
    public int age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

控制器

@Controller
public class DemoController {

    @GetMapping("my")
    public String myIndex(Model model){
        User user = new User();
        user.setName("张 三");
        user.setAge(28);
        model.addAttribute("user",user);
        return "index";
    }
}

动静结合

Thymeleaf中所有的表达式都需要写在指令中，指令时HTML5的自定义属性，在静态环境下，Thymeleaf表达式的内容会被浏览器自动忽略。

${user.name} 可以写作${user['name']}

3. 自定义变量

在数据量较多时，频繁使用对象.属性名会比较繁琐，我们可以自定义变量。

<div th:object="${user}">
    <p>name: <span th:text="*{name}">大古</span></p>
    <p>age: <span th:text="*{age}">28</span></p>
</div>

用 th:object="${user}"获取user的值
在内部的任意元素上，可以通过 *{属性名}，来获取user中的属性

4. 方法

ognl表达式本身支持方法调用

<div th:object="${user}">
    <p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
    <p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</div>

Thymeleaf提供了很多内置对象和对象内的方法，详情见：Thymeleaf模板入门二

举例：

controller添加

        model.addAttribute("today",new Date());

HTML页面：

<p>
    今天是：<span th:text="${#dates.format(today,'yyyy-MM-dd')}">2021-04-03</span>
</p>

5. 字面值

有时，我们需要在指令中填写基本类型如（字符串、数值、布尔等），不希望被Thymeleaf解析为变量，这个时候称字面值。

扫描二维码关注公众号，回复： 13134060 查看本文章

字符串字面值

用对单引号包括

<p>
    字符串字面值:<span th:text="'name'">字面值</span>
</p>

数字字面值

不许任何符号，直接书写，甚至可以进行算术运算

<p>
    数字字面值:小明身高： <span th:text="185">190</span>.
</p>

布尔字面值

布尔类型的字面值是true或false

<p>
    布尔型字面值<div th:if="true">true</div>
</p>

6. 拼接

普通字符串与表达式拼接：

<span th:text="'欢迎您:' + ${user.name} + '!'"></span>

字符串字面值需要用''，Thymeleaf使用一对|即可：

<span th:text="|欢迎您:${user.name}|"></span>

7. 运算

${}内部是通过OGNL表达式引擎解析的，外部的是通过Thymeleaf的引擎解析，运算符尽量放在${}外进行。

算术运算

支持的算术运算符：+ - * / %

<span th:text="${user.age}"></span>
<span th:text="${user.age}%2 == 0"></span>

比较运算

支持：>, <, >= and <= ，但是>, <不能直接使用，xml会解析为标签，要使用别名。

注意 == and !=不仅可以比较数值，类似于equals的功能。

可以使用的别名：gt (>), lt (<), ge (>=), le (<=), not (!). Also eq (==), neq/ne (!=).

条件运算

三元运算

<span th:text="${user.age}>=18 ? '成年':'未成年'"></span>

三元运算符的三个部分：conditon ? then : else

condition：条件，then：条件成立的结果，else：不成立的结果

其中的每部分都可是Thymeleaf中的任意表达式。

默认值

有的时候，我们取一个值可能为空，这个时候需要做非空判断，可以使用 表达式 ?: 默认值简写：

<span th:text="${user.name} ?: '李华'"></span>

表达式值为null时，使用默认值。注意：?:之间没有空格。

8. 循环

循环是频繁使用的，使用th:each指令来完成：

有用户的集合：users在Context中。

<tr th:each="user : ${users}">
    <td th:text="${user.name}">姓名</td>
    <td th:text="${user.age}">年龄</td>
</tr>

${users} 是要遍历的集合，可以是以下类型：

Iterable，实现了Iterable接口的类
Interator，迭代器
Map，遍历得到的是Map.Entry
Array，数组及其它一切符合数组结果的对象
Enumeration，枚举

在迭代的同时，也可以获取迭代的状态对象：

<tr th:each="user,stat : ${users}">
    <td th:text="${stat.index}">序号</td>
    <td th:text="${user.name}">姓名</td>
    <td th:text="${user.age}">年龄</td>
</tr>

stat对象包含以下属性：

index，从0开始的角标
count，元素的个数，从1开始
size，总元素个数
current，当前遍历到的元素
even/odd，返回是否为奇偶，boolean值
first/last，返回是否为第一或最后，boolean值

9. 逻辑判断

Thymeleaf中使用th:if 或者 th:unless ，两者的意思相反。

<p>
    <span th:if="${user.age} < 30">年轻人</span>
</p>

如果表达式的值为true，则标签会渲染到页面，否则不进行渲染。

以下情况被认定为true：

表达式值为true、为非0数值、为非0字符、为字符串，但不是"false","no","off"、不是布尔、字符串、数字、字符中的任何一种

其它情况包括null都被认定为false

10.分值控制switch

这里要使用两个指令：th:switch 和 th:case

<div th:switch="${user.name}">
    <p th:case="张 三">管理员</p>
    <p th:case="李四">经理</p>
    <p th:case="*">员工</p>
</div>

有一个th:case成立，其它的则不再判断。与java中的switch是一样的。th:case="*"表示默认，放最后。

11. JS模板

模板引擎不仅可以渲染html，也可对JS进行预处理。为了在纯静态环境下运行，Thymeleaf代码可以被注释起来：

在script标签中通过th:inline="javascript"声明这是要特殊处理的js脚本

语法结构：

const user = /*[[Thymeleaf表达式]]*/ "静态环境下的默认值";

表达式后面跟着的是默认值。

源码：

HTML：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>让大古编程</title>
</head>
<body>
<h3>变量</h3>
<span th:text="${user.name}">请登录</span>
<h3>自定义变量</h3>
<p>name: <span th:text="${user.name}">大骨</span></p>
<p>age: <span th:text="${user.age}">18</span></p>
<p>或者</p>
<div th:object="${user}">
    <p>name: <span th:text="*{name}">大古</span></p>
    <p>age: <span th:text="*{age}">28</span></p>
    <p>age: <span th:text="${#object.age}">28</span></p>
</div>
<h3>方法</h3>
<div th:object="${user}">
    <p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
    <p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</div>
<p>
    今天是：<span th:text="${#dates.format(today,'yyyy-MM-dd')}">2021-04-03</span>
</p>
</body>
<h3>字面值</h3>
<p>
    字符串字面值:<span th:text="'name'">字面值</span>
</p>
<p>
    数字字面值:小明身高： <span th:text="185">190</span>.
</p>
<p>
    布尔型字面值<span th:if="true">true</span>
</p>
<h3>拼接</h3>
<span th:text="'欢迎您:' + ${user.name} + '!'"></span></br>
<span th:text="|欢迎您:${user.name}|"></span>
<h3>运算</h3>
<p>
    <span th:text="${user.age}"></span>
    <span th:text="${user.age}%2 == 0"></span>
    <span th:text="${user.age}>=18 ? '成年':'未成年'"></span>
    <span th:text="${user.name} ?: '李华'"></span>
</p>
<h3>循环</h3>
<tr th:each="user : ${users}">
    <td th:text="${user.name}">姓名</td>
    <td th:text="${user.age}">年龄</td>
</tr>
</br>
<tr th:each="user,stat : ${users}">
    <td th:text="${stat.index}">序号</td>
    <td th:text="${user.name}">姓名</td>
    <td th:text="${user.age}">年龄</td>
</tr>
<h3>逻辑判断</h3>
<p>
    <span th:if="${user.age} < 30">年轻人</span>
</p>
<h3>分支控制</h3>
<div th:switch="${user.name}">
    <p th:case="'张 三'">管理员</p>
    <p th:case="'李四'">经理</p>
    <p th:case="*">员工</p>
</div>
<h3>JS模板</h3>
<script th:inline="javascript">
    const user = /*[[${user}]]*/ {};
    const age = /*[[${user.age}]]*/ 20;
    console.log(user);
    console.log(age)
</script>
</html>

Controller

package top.infinxkj.thymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import top.infinxkj.thymeleaf.pojo.User;

import java.util.*;

@Controller
public class DemoController {
    @GetMapping("my")
    public String myIndex(Model model){
        User user = new User();
        User user2 = new User();
        user.setName("张 三");
        user.setAge(28);
        user2.setName("李四");
        user2.setAge(20);
        ArrayList<User> users=new ArrayList<User>();
        users.add(user);
        users.add(user2);
        model.addAttribute("user",user);
        model.addAttribute("users",users);
        model.addAttribute("today",new Date());
        return "index";
    }
}

User实体类

package top.infinxkj.thymeleaf.pojo;

public class User {
    public String name;
    public int age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

在这里插入图片描述