Thymeleaf本身是html文件,这样就有一个好处,不需要依赖Java程序就能直接打开,做到前后端分离。
Thymeleaf的简单例子
添加支持
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
页面控制器
使用的是@Controller注解,返回的是页面文件。
简单的例子:输入localhost:8080/hello打开的时hello.html页面
@Controller
public class HelloController {
@RequestMapping("/hello")
public String hello(Model m) {
m.addAttribute("name", "thymeleaf");//将值“thymeleaf”赋给name
return "hello";//页面为hello.html
}
}
hello.html
文件放在该目录下
位置信息可以在application.properties
进行修改
spring.mvc.view.prefix=/templates/
spring.mvc.view.suffix=.html
hello.html内代码
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
//当程序不运行只打开html文件时显示name,运行程序时,显示name传递的内容
<p th:text="${name}" >name</p>
//两种字符串拼接方法
<p th:text="'Hello! ' + ${name} + '!'" >hello world</p>
<p th:text="|Hello! ${name}!|" >hello world</p>
</body>
</html>
application.properties
这里好像也可以不用配置
#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#缓存设置为false, 这样修改之后马上生效,便于调试
spring.thymeleaf.cache=false
#上下文
server.context-path=/thymeleaf
以上,为简单Thymeleaf使用案例。
Thymeleaf语法相关
1、后端传递参数方法
m.addAttribute(String str, Object obj);
传递对象的方法,传递时可以时普通对象,也可以是对象集合。
@Controller
public class TestController {
@RequestMapping("/test")
public String test(Model m) {
String htmlContent = "<p style='color:red'> 红色文字</p>";
Product currentProduct =new Product(5,"product e", 200);
m.addAttribute("htmlContent", htmlContent);
m.addAttribute("currentProduct", currentProduct);
return "test";
}
}
2、th:text和th:utext区别
th:text="${htmlContent}"
显示的是htmlContent内的文本内容
th:utext="${htmlContent}"
如果htmlContent内的文本内容是html语句的话,还会再进行解析再显示出来。
3、包含其他页面内容
显示类似于网页最底下的版权等相关固定信息
建立include.html文件
其中,footer1是不带参数的,footer2 是带参数的
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1">
<p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)">
<p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>
要嵌入其他页面时,使用以下代码
<div class="showing">
<div th:replace="include::footer1" ></div>
<div th:replace="include::footer2(2015,2018)" ></div>
</div>
4、Boolean判断
<p th:if="${testBoolean}" >Hello World</p>
:如果布尔值为true,则会显示后面的内容,为false则不显示
<p th:if="${not testBoolean}" ></p>
:true则不显示,false显示
<p th:unless="${testBoolean}" ></p>
:同上
三元表达式
<p th:text="${testBoolean}?'true显示这边':'false显示这边'" ></p>
5、遍历
传入的ps为List集合
<div class="showing">
<table>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr th:each="p: ${ps}">
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
</div>
6、日期输出
Controller类传递Data参数
Date now = new Date();
m.addAttribute("now", now);
html代码
<div class="showing date">
<h2>格式化日期</h2>
直接输出日期 ${now}:
<p th:text="${now}"></p>
默认格式化 ${#dates.format(now)}:
<p th:text="${#dates.format(now)}"></p>
自定义格式化 ${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}:
<p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
</div>
不同格式效果