<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.6.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
spring:
# 配置thymeleaf的相关信息
thymeleaf:
# 开启视图解析
enabled: true
#编码格式
encoding: UTF-8
#前缀配置
prefix: classpath:/templates/
# 后缀配置
suffix: .html
#是否使用缓存 开发环境时不设置缓存
cache: false
# 格式为 HTML 格式
mode: HTML5
# 配置类型
servlet:
content-type: text/html
static:用于存放静态资源,例如html、JavaScript、css以及图片等。 templates:用来存放模板引擎Thymeleaf(本质依然是.html文件) 需要在controller中指定Thymeleaf页面的url,然后再Model中绑定数据。
controller
@Controller
public class HelloController
{
@GetMapping("/index")
public String hello(Model model)
//对应函数
{
model.addAttribute("name","Leo");
return "index";
//与templates中index.html对应
}
}
public String basicTrain(Model model){
Userv0.userv0=new UserV0();
Userv0.setUsername("lookroot");
Userv0.setAge(22);
Userv0.setIsVip(true);
Userv0.setTags(Arrays.asList("php","node","java"));
model.setAttribute("user",userV0);
return "basic";
}
注意引入
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello 第一个Thymeleaf程序
<div th:text="${name}">name是Leo>(我是离线数据)</div>
</body>
</html>
常用方法
th:id 替换id <input th:id="${user.id}"/>
th:text 文本替换 <p text:="${user.name}">bigsai</p>
th:utext 支持html的文本替换 <p utext:="${htmlcontent}">content</p>
th:object 替换对象 <div th:object="${user}"></div>
th:include 替换内容到引入文件 <script type="text/javascript" th:include="@{index.js}"></script>
th:value 替换值 <input th:value="${user.name}" >
th:each 迭代 <tr th:each="student:${user}" >
th:href 替换超链接 <a th:href="@{index.html}">超链接</a>
th:src 替换资源 <script type="text/javascript" th:src="@{index.js}"></script>声明。
<div th:text="${user}">name是Leo>(我是离线数据)
<p th:text="*{name}">name</p>
<h1 th:text="*{age}">age</h1>
</div>
<p th:text="${user.name}">name</p>
<h1 th:text="${user.age}">age</h1>`
字符串链接
1
<div th:text="'名字是'+${name}">name是Leo>(我是离线数据)</div>
2
<div th:text=|名字是${name}|>name是Leo>(我是离线数据)</div>
if
<p th:if="$"{user.isVip}>会员</p>
each
user.setTags(Arrays.asList("PHP,Node,"java"))
<ul>
<li th:each="tag:${user.tags}" th:text="${tag}"></li>
</ul>
<tr th:each="comment : ${comments}">
<td th:text="${comment.id}"></td>
<td th:text="${comment.content}"></td>
<td th:text="${comment.author}"></td>
<td th:text="${comment.aId}"></td>
</tr>
switch
<div th:switch="${user.sex}">
<p th:case ="1">男</p>
<p th:case ="2">女</p>
<p th:case ="*">默认</p>
</div>
引入script
<link rel="stylesheet" th:hetf="@{app.css}">
引入 js 并且传入参数
<script th:inline="javascript">
const user=/*[[${user}]]{}*/{默认值};
console.log(user)
</script>
var userId = [[${ session.user.id }]];
切片
component.html
两种方式,但是引入的时候用法不同
<!doctype html>
<html lang='en' xmlns:th="http://www.thymeleaf.org">
<footer th: fragment="com1">
com1
</footer>
<div id ="com2">
com2
</div>
在index.html 中
第一个会替换掉标签 第二个不会替换掉 第三个配合上述的写法
<div th:replace="~{commponent::com1}"><div>
<div th:insert="~{commponent::com1}"><div>
<div th:insert="~{commponent::#com2}"><div>
<form th:action="@{/user/login}" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
用户名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="username" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
密码:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="password" />
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="点我登录 »" />
<a href="regist.html">还没有账号,立即注册</a>
</p>
</form>
@RequestMapping("login")
public String login(String username,String password,HttpSession session){
if...{
return "redirect:/login";//登录失败回到登录界面
}
return "redirect:/employee/lists";//登录成功之后,跳转到查询所有员工信息控制器路径
}
新建basic.html,此时如果我们想渲染User这个对象的信息我们可以这样
<div>
<h2 th:text="${user.getUsername()}"></h2>
<p th:text="${user.getAge()}"></p>
</div>
也可以将User定义为临时变量,接着使用*{xxx}就能取到值了
<div th:object="${user}">
<h2 th:text="*{username}"></h2>
<p th:text="*{age}"></p>
</div>
还可以不使用get的方式,直接使用属性名
<h2 th:text="${user.username}" ></h2>
th:if th:if通过布尔值决定这个元素是否渲染
<p th:if="${user.isVip}">会员</p>
th:each th:each可以迭代循环出数据,前面我们User对象里面的tags是一个数组,我们来渲染一下
<ul>
<li th:each="tag:${user.getTags()}"
th:text="${tag}"></li>
</ul>
状态变量在th:each属性中定义,并且包含以下数据: 当前的迭代索引,从0开始。这是index属性。 从1开始的当前迭代索引。这是count属性。 迭代变量中元素的总数。这是size财产。 每次迭代的iter变量。这是current财产。 当前迭代是偶数还是奇数。这些是even/odd布尔属性。 当前迭代是否是第一个。这是first布尔属性。 当前迭代是否为最后一次。这是last布尔属性。 th:switch th:switch选择语句
<div th:switch="${user.getSex()}">
<p th:case="'1'">男</p>
<p th:case="'2'">女</p>
<p th:case="*">默认</p>
</div>
如果在springboot中需要引入static目录下的静态资源可以使用@{xxx}的方式
<link th:href="@{/app.css}" rel="stylesheet">
<!-- JavaScript动态渲染 -->
<script th:inline="javascript">
const user = /*[[${user}]]*/ {};
console.log(user);
</script>
同理css也是可以的
<style th:inline="css">
.main\ elems {
text-align: /*[[${align}]]*/ left;
}
</style>
日常开发中呢我们经常将有些可以复用的部分抽离出来
新建一个component.html,一个文件里面可以写多个碎片,使用th:fragment来定义
<footer th:fragment="com1">
this is com1
</footer>
<footer id="com2">
this is com2
</footer>
使用碎片主要有两种方式replace和insert,在index.html中编写
<!--replace-->
<div th:replace="~{component::com1}"></div>
<!--insert-->
<div th:insert="~{component::com1}"></div>
这两种方式的区别就是,replace会将新标签完全替换原本的标签,也就是说原本写th:replace属性的标签就不会渲染出来,insert是往这个地方插入标签
直接通过选择器使用 对于碎片,甚至可以不定义,我们再次添加一个 碎片
<footer id="com2">
this is com2
</footer>
然后使用它
<div th:insert="~{component::#com2}"></div>
组件传递参数 组件也是可以传递数据的
<div th:fragment="com3(message)">
<p th:text="${message}"></p>
</div>
使用的时候
<div th:insert="~{component::com3('传递数据')}"></div>
局部替换组件 我们使用一个组件的时候,想要局部替换掉这个组件里面的部分内容该怎么做呢?通过传递参数的方式传递一个组件过来,并把这个组件替换原本的一部分
<div th:fragment="com4(message)">
<p th:replace="${message}">原本的message</p>
</div>
使用的时候
<div th:insert="~{component::com4(~{::#message})}">
<p id="message">替换的message</p>
</div>
基本对象
#ctx:上下文对象
${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}
请求/会话属性
${session.xxx}
${application.xxx}
${#request.getAttribute('xxx')}
在thymeleaf里面是可以直接使用一些Java的函数的,并且你可以通过传递参数的方式把一些自己写的方法传递给页面,在里面调用也是可以的
一些可以直接的使用函数
#dates
#calendars
#strings
#numbers
#objects
#bools
#arrays
#lists
#sets
#maps
#aggregates
以日期格式化来举例
<p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>