1. 特性
- 动态设置网页参数
- 集成于SpringBoot框架
- 独立性,有无网络皆可运行
- 轻量级(jsp属于重量级框架)
2. 依赖
- thymeleaf非常方便,只需导入一个依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3. 添加application.properties配置
# thymeleaf前缀名,即存放于类路径下的templates文件夹
spring.thymeleaf.prefix=classpath:/templates/
# thymeleaf后缀名,当后缀为.html时被解释为thylemeaf
spring.thymeleaf.suffix=.html
# 编码方式UTF-8
spring.thymeleaf.encoding=UTF-8
# 当浏览器接受服务器响应时,响应类型为html
spring.thymeleaf.servlet.content-type=text/html
# 设置静态文件夹,通常在templates文件夹下的html文件不能直接被浏览器访问,需要通过controller访问。因此我们需要将静态网页与动态网页分别存放于templates和static。为了便于管理,将两个文件夹均设置为静态目录,将html文件(不论是否使用了模板引擎)放置于templates文件夹下,而将js、css文件放置于static文件夹下。
spring.resources.static-locations=classpath:/templates/,classpath:/static
4. 展示数据
在使用thymeleaf语法之前,需要在标签中加入thymeleaf命名空间,用于解析thymeleaf,从而提供代码提示。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
4.1 展示单个数据
4.1.1 在controller中填写要递交的数据
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
@Controller
@RequestMapping("/user")
public class HelloController {
@GetMapping("/namepage")
public String hello(HttpServletRequest httpServletRequest, Model model){
//向model中添加属性值
model.addAttribute("name","SeekWind");
//返回index值,作为index.html的逻辑名,自动在template文件中寻找index.html
return "index";
}
}
4.1.2 在html中获取name值
<span th:text="${name}"></span>
4.1.3 此时,重启Application,即可获得正确结果
注意:凡是修改了Java代码或者修改了thymeleaf内容的,需要重启Application。而只修改了JSP或者纯html代码的,只需要alt+F9重新编译即可。
4.1.4 如果在后端使用html标签作为属性值,则需要作如下变化
@Controller
@RequestMapping("/user")
public class HelloController {
@GetMapping("/namepage")
public String hello(HttpServletRequest httpServletRequest, Model model){
//向model中添加属性值
model.addAttribute("name","SeekWind");
//以html标签作为属性值
model.addAttribute("nameHtml","<a href>SeekWind_HTML</a>");
//返回index值,作为index.html的逻辑名,自动在template文件中寻找index.html
return "index";
}
}
<span th:utext="${nameHtml}"></span>
4.1.5 重启后,效果如下图
4.1.6 如果将值输入到表单,则作如下变化
<input th:value="${name}"/>
4.1.7 重启后效果图
4.2 展示对象
4.2.1 书写User类
import java.util.Date;
import lombok.*;
@Data
@AllArgsConstructor
@ToString
public class User {
private String name;
private Integer id;
private Date bir;
}
在类的构造中,使用了lombok依赖。lombok依赖可以将constructor、getter、setter、toString、equals、hashcode方法以注解的形式构建。提高了代码的可读性。
对于lombok,需要引入依赖。最好再下载lombok IDEA插件,否则IDEA会报静态编译错误。
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
4.2.2 在Controller中传递对象
@Controller
@RequestMapping("/user")
public class HelloController {
@GetMapping("/namepage")
public String hello(HttpServletRequest httpServletRequest, Model model){
//向model中添加属性值
model.addAttribute("name","SeekWind");
//以html标签作为属性值
model.addAttribute("nameHtml","<a href>SeekWind_HTML</a>");
//以对象作为属性值
model.addAttribute("user",new User("Seekwind", 123456, new Date()));
//返回index值,作为index.html的逻辑名,自动在template文件中寻找index.html
return "index";
}
}
4.2.3 在html中接收user对象
<ul>
<li>Name: <span th:text="${user.name}"></span></li>
<li>ID: <span th:text="${user.id}"></span></li>
<li>Bir: <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd')}"></span></li>
</ul>
4.2.4 重启后效果如图
4.3 展示多条数据(遍历集合)
4.3.1 在Controller中传递对象集合
@Controller
@RequestMapping("/user")
public class HelloController {
@GetMapping("/namepage")
public String hello(HttpServletRequest httpServletRequest, Model model){
List<User> users = Arrays.asList(
new User("AAA",111, new Date()),
new User("BBB",222, new Date()),
new User("CCC",333, new Date())
);
//以对象的集合作为属性值
model.addAttribute("users", users);
//返回index值,作为index.html的逻辑名,自动在template文件中寻找index.html
return "index";
}
}
4.3.2 在html中接收并遍历集合
<ul title="List<User>" th:each="userEle, userState:${users}">
<li>Index: <span th:text="${userState.index}"/></li>
<li>Name: <span th:text="${userEle.name}"></span></li>
<li>ID: <span th:text="${userEle.id}"></span></li>
<li>Bir: <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd')}"></span></li>
</ul>
遍历集合使用each语句
<ul th:each="userEle, userState:${users}"></ul>
其中,userEle参数接收集合中的每个元素,userState元素接收userEle的其他状态参数(可以不写)。
userState有以下几个参数。
参数 | 意义 |
---|---|
userState.size | 集合的大小 |
userState.index | 当前元素在集合中的索引(从0开始) |
userState.count | 当前元素在集合中的索引(从1开始) |
userState.current | 输出当前元素的toString() |
userState.even | 当前元素是否为偶数行(count是否为偶数) |
userState.first | 当前元素是否为第一个 |
userState.last | 当前元素是否为第二个 |
userState.odd | 当前元素是否为奇数行(count是否为奇数) |
4.4 使用if语句
4.4.1 Java集合
Java集合依然使用4.3中的User list
4.4.2 thymeleaf中的if语法
<ul title="List<User>" th:each="userEle, userState:${users}">
<div th:if="${userEle.id} ge 222">
<li>Index: <span th:text="${userState.even}"/></li>
<li>Name: <span th:text="${userEle.name}"></span></li>
<li>ID: <span th:text="${userEle.id}"></span></li>
<li>Bir: <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd')}"></span></li>
</div>
</ul>
表示输出 id 大于等于222的集合元素。ge代表大于等于,类似的还有:
符号 | 意义 |
---|---|
gt (great than) | 大于 |
ge (great equal) | 大于等于 |
eq (equal) | 等于 |
lt (less than) | 小于 |
le (less equal) | 小于等于 |
ne (not equal) | 不等于 |
当然,也可以直接使用不等号,但是使用不等号会对thymeleaf的字符串的解析带来难度,使用字母可以提高thymeleaf的性能。
5. 引用静态资源
5.1 静态资源文件夹
默认的静态资源文件夹为类路径下的static文件夹。
如果有需要,可以在application.properties文件中修改静态目录:
spring.resources.static-locations=classpath:/templates/,classpath:/static
5.2 thymeleaf引用静态资源语法
<link rel="stylesheet" th:href="@{/css/index.css}">
<script th:src="@{/js/jquery.js}"></script>
注意,此处使用**@{}**包裹资源地址,且资源地址以定义的静态文件目录作为根目录。