SpringBoot-6-模板Thymeleaf常用标签

上一章节我们已经介绍了，SpringBoot中如何使用Thymeleaf,如果对此还不是很清楚的同学可以查看之前的文章SpringBoot-5-页面展示Thymeleaf，这次我们主要来介绍Thymeleaf的常用标签以及使用方法。Thymeleaf的详细内容可以查看Thymeleaf官方文档。

大家关注我的微信公众号（springboot葵花宝典），回复：springboot，可以获取一些博主搜集的SpringBoot学习资料。

1.Thymeleaf基础语法

1.1 变量表达式 ${}

变量表达式作用：从web作用域，如request,session,application获取对应值

使用方法：直接使用th:xx = "${}" 获取对象属性

后台代码：

@Controller
public class TestController {
    @GetMapping("/test")
    public String testPage(HttpServletRequest request, HttpSession session){
        Student stu1 = new Student("张三", 20, "<span style='color:red'>男</span>",80,90);
        request.setAttribute("stu1",stu1);
        Student stu2 = new Student("李四", 21, "<span style='color:red'>男</span>",87,93);
        session.setAttribute("stu2",stu2);
        Student stu3 = new Student("小芳", 19, "<span style='color:green'>女</span>",87,99);
        ServletContext application = request.getServletContext();
        application.setAttribute("stu3", stu3);
        return "test";
    }
}



import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Student {
    private String name;
    private int age;
    private String sex;
    private int cgrade;
    private int egrade;
}

前端html

#test.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
request：<br/>
<div>
    姓名：<label th:text="${stu1.name}"></label><br/>
    年龄：<label th:text="${stu1.age}"></label> <br/>
    性别：<label th:text="'text = '+${stu1.sex}"></label><br/>
    分数：<label th:text="'英语+英语=' + (${stu1.cgrade} + ${stu1.egrade})"></label><br/>
</div>
session：<br/>
<div>
    姓名：<label th:utext="${session.stu2.name}"></label><br/>
    年龄：<label th:utext="${session.stu2.age}"></label> <br/>
    性别：<label th:utext="'utext = '+${session.stu2.sex}"></label><br/>
    分数：<label th:utext="'英语+英语=' + (${session.stu2.cgrade} + ${session.stu2.egrade})"></label><br/>
</div>
application：<br/>
<div>
    姓名：<label th:text="${application.stu3.name}"></label><br/>
    年龄：<label th:text="${application.stu3.age}"></label><br/>
    性别：<label th:text="'text = '+ ${application.stu3.sex}"></label><br/>
    分数：<label th:utext="'英语+英语=' + (${application.stu3.cgrade} + ${application.stu3.egrade})"></label><br/>
</div>
</body>
</html>

运行结果http://localhost:8080/test

注：th:utext和th:text存在区别，utext，会解析html，text不会解析html

1.1.1 作用域

作用域对象：request、sessionapplication

获取作用域方法：${#request}

作用域获取请求URL：<label th:text="${#request.getRequestURL()}"></label><br/>

结果为

作用域获取请求URL：http://localhost:8080/test

1.1.2 作用域或对象为空处理方式

如果获取的对象或者作用域为空，那么返回的值为null,如果为null，则会报异常，我i们需要将其解决

  姓名：<label th:text="${application?.stu3?.name}"></label><br/>

1.2 选择变量表达式 *{}

使用方式：

通过 th:object获取对象
使用th:xx="*{}"获取对象属性

session：<br/>
<div>
    姓名：<label th:utext="${session.stu2.name}"></label><br/>
    年龄：<label th:utext="${session.stu2.age}"></label> <br/>
    性别：<label th:utext="'utext = '+${session.stu2.sex}"></label><br/>
    分数：<label th:utext="'英语+英语=' + (${session.stu2.cgrade} + ${session.stu2.egrade})"></label><br/>
</div>

等同于

session：选择表达式<br/>
<div th:object="${session.stu2}">
    姓名：<label th:text="*{name}"></label><br/>
    年龄：<label th:text="*{age}"></label><br/>
    性别：<label th:text="'text = '+ *{sex}"></label><br/>
    分数：<label th:utext="'英语+英语=' + (*{cgrade} + *{egrade})"></label><br/>
</div>

1.3 URL表达式 @{}

URL在WEB应用模板中占据着重要位置，如果需要 Thymeleaf 对 URL 进行渲染，那么务必使用 th:href，th:src 等属性

一般情况下@{}和${}的结合使用：在a标签的href中直接写对应值会导致解析失败

使用方法：通过链接表达式@{}直接拿到应用路径，然后拼接静态资源路径。

错误写法

<a href="#" th:href="@{/test/${session.stu2.img}}">照片1</a><br/>

正确写法

 <a href="#" th:href="@{/test/{orderId}(orderId=${session.stu2.img})}">照片2</a><br/>

1.4 判断

Thymeleaf有四种判断形势：th:if/th:unless、逻辑运算（and、or、not）、三目运算符、switch

<!--逻辑运算-->
<h4>逻辑运算</h4>
<div th:if="${application.stu3.age gt 1 && application.stu3.age lt 21}">
    真的18岁
</div>
<div th:if="${ session.stu2.age ge 21}">
    真的不是18岁
</div>
<div th:if="not( ${ session.stu2.age gt 21})">
    真的不是18岁
</div>
<h4>条件判断</h4>
[1]<lable th:text="true" th:if="${application.stu3.age}"></lable><br/>
[2]<lable th:text="'数字,非0'" th:if="${application.stu3.age}"></lable><br/>
[3]<lable th:text="'字符串,非false、off、no'" th:if="'a'"></lable><br/>
[4]<lable th:text="其他数据类型" th:if="${application.stu3}"></lable><br/>
[5]<lable th:text="字符串0" th:if="'0'"></lable><br/>
[6]<lable th:text="数字0" th:if="0"></lable><br/>
[7]<lable th:text="false" th:if="'false'"></lable><br/>
[8]<lable th:text="off" th:if="'off'"></lable><br/>
[9]<lable th:text="no" th:if="'no'"></lable><br/>
<!--swithch-->
<h4>swithch</h4>
<select th:switch="${application.stu3.age}">
    <option th:case="20">20</option>
    <option th:case="19">19</option>
    <option th:case="21">21</option>
</select><br/>
<h4>三木运算</h4>
<lable th:text="true ? '永远十八岁' : '可算是梦醒了'"><br/>

运算结果：

1.5 日期格式化

#使用默认的日期格式(toString方法) 并不是我们预期的格式
入学时间：<label th:text="'utext = '+${session.stu2.createtime}"></label><br/>
#可以通过时间工具类#dates来对日期进行格式化
入学时间：<label th:utext="'utext = '+${#dates.format(application.stu3.createtime,'yyyy-MM-dd HH:mm:ss')}"></label><br/>

结果

入学时间：text = Sun Feb 20 15:01:59 CST 2022
入学时间：utext = 2022-02-20 15:01:59

1.6 循环 th:each

后台代码

    @GetMapping("/test")
    public String testPage(HttpServletRequest request, HttpSession session, Model model){
        Date date = new Date();
        Student stu1 = new Student("张三", 20, "<span style='color:red'>男</span>",80,90,"1.png",date);
        request.setAttribute("stu1",stu1);
        Student stu2 = new Student("李四", 21, "<span style='color:red'>男</span>",87,93,"1.png",date);
        session.setAttribute("stu2",stu2);
        Student stu3 = new Student("小芳", 19, "<span style='color:green'>女</span>",87,99,"1.png",date);
        ServletContext application = request.getServletContext();
        application.setAttribute("stu3", stu3);
        ArrayList<Student> stus = new ArrayList<>();

        stus.add(stu1);
        stus.add(stu2);
        stus.add(stu3);

        model.addAttribute("stus", stus);
        return "test";
    }

前台代码

<div>
    <h3>需求：学生信息</h3>
    <table border="1" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>语文成绩</th>
            <th>英语成绩</th>
            <th>总分</th>
            <th>入学时间</th>
        </tr>
        <tr th:each="stu, iterStat:${stus}">
            <td th:text="${stu.name}"></td>
            <td th:text="${stu.age}"></td>
            <td th:utext="${stu.sex}"></td>
            <td th:text="${stu.cgrade}"></td>
            <td th:text="${stu.egrade}"></td>
            <td th:utext="(${stu.cgrade} + ${stu.egrade})"></td>
            <td th:text="${#dates.format(stu.createtime,'yyyy-MM-dd')}"></td>
        </tr>
    </table>
</div>