记录一下，等做项目的时候不需要满世界的百度查语法
在使用thymeleaf的时候我们需要在html页面的头顶加入thymeleaf的命名空间
<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
</head>
<body>
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
</body>
</html>
展示单个数据
- 在mvc层设置数据：
model.addAttribute("name", "小苍");
- 在html页面获取数据：
<span th:text="${name}"></span>
- 当展示的数据里有html标签的时候：
model.addAttribute("username", "<a href=''>数据</a>");
- 获取数据的时候使用utext解析：
<span th:utext="${username}"></span>
- 其他的例子：
<input type="text" name="userName" value="James Carrot" th:value="${name}" />
总结：
- 使用th:text="${属性名}" 获取对应数据，获取数据时会将对应标签中的数据清空，因此最好是空标签
- 使用th:utext="${属性名}" 获取对应的数据，可以将数据中html先解析再渲染到页面
- 使用th:value="${属性名}" 获取数据直接作为表单元素value属性
展示对象数据
@Controller
public class HelloController {
@RequestMapping("hello")
public String hello(Model model){
model.addAttribute("user", new User("21","小三",23,new Date()));
return "index";
}
}
<ul>
<li>id:<span th:text="${user.getId()}"></span></li>
<li>name:<span th:text="${user.getName()}"></span></li>
<li>age:<span th:text="${user.getAge()}"></span></li>
<li>bir:<span th:text="${#dates.format(user.getDate(),'yyyy-MM-dd')}"></span></li> 这里需要对日期进行格式化
</ul>
条件展示数据
- 运算符：
比较：>，<，>=，<=（gt，lt，ge，le）
等号运算符：==，!=（eq，ne）
model.addAttribute("user", new User("21","小三",23,new Date()));
- 当user.age的值大于23的时候显示user.name
<span th:if="${user.age} gt 23" th:text="${user.name}"></span>
其他的运算符同理
展示多个数据
- 直接遍历集合
<ul th:each="user:${users}">
<li th:text="${user.id}"></li>
<li th:text="${user.name}"></li>
<li th:text="${user.age}"></li>
<li th:text="${#dates.format(user.date,'yyyy年MM月dd日')}"></li>
</ul>
- 遍历时获取遍历状态
<ul th:each="user,userStat:${users}">
<li>当前遍历的次数: <span th:text="${userStat.count}"/>
当前遍历的索引: <span th:text="${userStat.index}"/>
当前遍历是否是奇数行: <span th:text="${userStat.odd}"/>
当前遍历是否是偶数行: <span th:text="${userStat.even}"/></li>
<li>集合的总记录数：<span th:text="${userStat.size}"></span></li>
</ul>
三目运算
<div th:text="${sex} == '男' ? '男士':'非男士' "></div>
<div th:text="${sex} == '女' ? '女士':'非女士' "></div>
标准表达式功能摘要
标准表达式功能的快速摘要：
- 简单表达式：
变量表达式： ${…}
选择变量表达式： *{…}
消息表达： #{…}
链接URL表达式： @{…}
片段表达式： ~{…} - 文字
文本文字：‘one text’，‘Another one!’，…
号码文字：0，34，3.0，12.3，…
布尔文字：true，false
空文字： null
文字标记：one，sometext，main，… - 文字操作：
字符串串联： +
文字替换： |The name is ${name}| - 算术运算：
二元运算符：+，-，*，/，%
减号（一元运算符）： - - 布尔运算：
二元运算符：and，or
布尔否定（一元运算符）： !，not - 比较和平等：
比较：>，<，>=，<=（gt，lt，ge，le）
等号运算符：==，!=（eq，ne） - 条件运算符：
如果-则： (if) ? (then)
如果-则-否则： (if) ? (then) : (else)
默认： (value) ?: (defaultvalue)
-特殊令牌：
无操作： _
官方说了所有的功能都是可以嵌套使用的：
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
引入静态资源
- 引入的静态资源的案例
springboot存放静态资源，建议放在static目录下
项目引入静态资源的时候
<link rel="stylesheet" th:href="@{/css/index.css}">
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
- 当跳转资源需要传递参数的时候：
<a href="details.html" th:href="@{/user/details(orderId=1)}">view</a>
- 多参数传递
<a href="details.html" th:href="@{/user/details(orderId=1,,name='小李')}">view</a>
官方的案例：
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html"
th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
如果你想了解更多：
请点击这里的按钮study Many