认识thymeleaf
什么是thymeleaf?
Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.
With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.
总而言之 thymeleaf是一个视图渲染技术
使用thymeleaf
- 打开thymeleaf官网 https://www.thymeleaf.org/download.html
- 导入maven依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.5.5</version>
</dependency>
hellowrold
一切伟大的行动和思想,都有一个微不足道的开始。 --Albert Camus
关闭缓存
避免一些不必要的麻烦
spring:
thymeleaf:
cache: false
编写前端页面
<!doctype html>
<!--注意:引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<p>Hello,thymeleaf!</p>
</div>
</body>
</html>
编写视图控制器
package com.lu.springboot.bootdemo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
//@RestController
@RequestMapping("/th")
public class ThymeleafController {
@GetMapping("/")
public String hello() {
return "hello";
}
}
这里需要注意 路径和视图名不能一致,否则会发生冲突.
效果
基础语法
引入命名空间
<html lang="en" xmlns:="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
如果需要 spring security 作为安全认证的的话 需要添加 hymeleaf-extras-springsecurity5 依赖
常用th标签
th:text
用于显示控制器穿入的name值
<div th:text="${name}">name</div>
@Controller
@RequestMapping("/th")
public class ThymeleafController {
@GetMapping("/")
public String hello(Model model) {
model.addAttribute("name","Hello,World!");
return "hello";
}
}
th:object
用于接收后台传来的对象
<div th:object="${userInfo}">
<p th:text="*{name}"></p>
<p th:text="*{age}"></p>
</div>
@Component
class User{
@Value("luckyFang")
private String name;
@Value("22")
private Integer age;
public String getName() {
return name;
}
public Integer getAge() {
return age;
}
}
@GetMapping("/object")
public String objectTest(Model model){
model.addAttribute("userInfo",user);
return "object";
}
th:action
用来指定表单提交地址,替换 name 和 value
<form th:action="@{/article/}+${article.id}" method="POST"></from>
th:value
将对象id的值替换为value的属性
<input type="text" th:value="${article.id}" name="id"/>
th:field
用来绑定后台对象和表单数据
<input type="text" id="title" name="title" th:field="${article.title}"/>
<input type="text" id="title" name="title" th:field="*{title}"/>
URL写法
thymeleaf中通过@来处理URL的,需要使用
th:href
和th:src
等属性
<a th:href="@{http://www.baidu.com/}"></a>
<a th:href="@{/}"> 相对路径</a>
<a th:href="@{css/bootstrap.min.css}">默认访问static下的css文件</a>
条件求值
thymeleaf通过
th:if
和th:unless
属性进行条件判断
<a th:href="@{/login}" th:if="${session.user==null}">Login</a>
th:unless
和 th:if
恰恰相反,只有表达式中条件不成立才显示其内容
switch
thymeleaf 支持switch结构
<div th:switch="${user.role}">
<p th:case="admin">管理员</p>
<p th:case="vip">VIP会员</p>
<p th:case="*"> 普通会员</p>
</div>
字符串替换
thymeleaf支持字符串替换拼接
拼接
<span th:text="欢迎您,'+${name}+'!"></span>
<span th:text="欢迎您,${name}!"></span>
运算符
算数运算符
<span th:text="1+2*3">1+2*3</span>
<span th:text="9%2">9%2</span>
条件运算符
<div th:if="${role} eq admin">
<span>欢迎您,管理员</span>
</div>
eq是表达式
- gt 大于
- ge 大于等于
- eq 等于
- lt 小于
- le 小于等于
- ne 不等于
判断空值
可用if判断是否为空
<span th:if="${name}!=null">不为空</span>
<span th:if="${name}==null">为空</span>
公用对象
thymeleaf提供了公用对象,可用通过
#
直接访问
格式化时间
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}">格式化时间</td>
判断是不是空字符串
<span th:if="${#strings.isEmpty(name)}">空的</span>
循环遍历
thymeleaf支持循环遍历对象
遍历对象
语法: th:each ="OBject:$"
<div th:each="article:${articles}">
<li th:text="${article.title}">文章内容</li>
<li th:text="${article.body}">文章内容</li>
</div>
遍历分页
<div th:each="item:${page.content}">
<li th:text="${item.id}">id</li>
<li th:text="${item.title}">title</li>
</div>
遍历列表
thymeleaf 可以直接遍历列表
<div th:each="item:${list}">
...
</div>
遍历数组
thymeleaf还可以遍历数组
<div th:each="item:${arrays}">
...
</div>
遍历集合
同样 thymeleaf 也可以遍历map
th:text="$" 访问key $ 可以访问value
<div th:each="item:${map}">
<li th:text="${item.key}"></li>
<li th:text="${item.value}"></li>
</div>
公用代码块
遇到需要重复使用的代码块可用
th:fragment
,th:include
和th:replace
标签来处理代码复用问题
标记复用代码块
<div class ="footer" id="head" th:fragment="header">
</div>
调用复用代码块
~{::xxx}
<div th:replace="~{common::header}"></div>
<div th:include="~{common::header}"></div>
- replace 替换内容
- include 加载内容