SpringBoot-6-模板Thymeleaf常用标签
上一章节我们已经介绍了，SpringBoot中如何使用Thymeleaf,如果对此还不是很清楚的同学可以查看之前的文章SpringBoot-5-页面展示Thymeleaf，这次我们主要来介绍Thymeleaf的常用标签以及使用方法。Thymeleaf的详细内容可以查看Thymeleaf官方文档。
大家关注我的微信公众号（springboot葵花宝典），回复：springboot，可以获取一些博主搜集的SpringBoot学习资料。
1.Thymeleaf基础语法
1.1 变量表达式 ${}
- 变量表达式作用：从web作用域，如request,session,application获取对应值
- 使用方法：直接使用
th:xx = "${}"获取对象属性
后台代码：
@Controllerpublic 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@AllArgsConstructorpublic 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、session\application
获取作用域方法：${#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/>
结果
结果 入学时间
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>
运行结果：
如果您觉得本文不错，欢迎Star支持，您的关注是我坚持的动力！
