SpringBoot-模板引擎Thymeleaf的使用
程序员文章站
2024-02-29 17:43:58
...
SpringBoot-模板引擎Thymeleaf的使用
模板引擎
模板引擎是为了是用户界面与业务数据分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
相关配置
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
在application.properties中添加配置
spring.thymeleaf.cache=false
赋值、字符串拼接
页面string.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example String </title>
</head>
<body>
<div>
<h1>text</h1>
<p th:text="${userName}">ceshi</p>
<span th:text="'Welcome to our application, ' + ${userName} + '!'"></span>
<br/>
<span th:text="|Welcome to our application, ${userName}!|"></span>
</div>
</body>
</html>
后端代码(传值)
@RequestMapping("/string")
public String string(ModelMap map) {
map.addAttribute("userName", "baidu");
return "string";
}
启动项目后在浏览器输入网址:http://localhost:8080/string，结果如下
text
baidu
Welcome to our application，baidu！
Welcome to our application，baidu！
条件判断if/Unless
Thymeleaf使用th:if和th:unless属性进行条件判断
页面if.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example If/Unless </title>
</head>
<body>
<div >
<h1>If/Unless</h1>
<a th:if="${flag == 'yes'}" th:href="@{http://www.baidu.com/}"> home </a>
<br/>
<a th:unless="${flag != 'no'}" th:href="@{http://www.baidu.com/}" >ityoukn
ow</a>
</div>
</body>
</html>
后端代码(传值)
@RequestMapping("/if")
public String ifunless(ModelMap map) {
map.addAttribute("flag", "yes");
return "if";
}
启动项目后在浏览器输入网址:http://localhost:8080/if，结果如下
If/Unless
home
for循环
首先在后端定义一个用户列表：
private List<User> getUserList(){
List<User> list=new ArrayList<User>();
User user1=new User("⼤",12,"123456");
User user2=new User("⼩",6,"123563");
User user3=new User("纯洁",66,"666666");
list.add(user1);
list.add(user2);
list.add(user3);
return list;
}
页面list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example If/Unless </title>
</head>
<body>
<div >
<h1>for循环</h1>
<table>
<tr th:each="user,iterStat : ${users}">
<td th:text="${user.name}">neo</td>
<td th:text="${user.age}">6</td>
<td th:text="${user.pass}">213</td>
<td th:text="${iterStat.index}">index</td>
</tr>
</table>
</div>
</body>
</html>
iterStat-状态变量，具体属性有：
·index，当前迭代对象的index-从0开始计算
·count，当前迭代对象的index-从1开始计算
·size，被迭代对象的大小
·current，当前迭代变量
·even/odd，布尔值，当前循环是否是偶数/奇数-从0开始计算
·first，布尔值，当前循环是否是第一个
·last，布尔值，当前循环是否是最后一个
后端代码(传值)
@RequestMapping("/list")
public String list(ModelMap map) {
map.addAttribute("users", getUserList());
return "list";
}
启动项目后在浏览器输入网址:http://localhost:8080/list，结果如下
for 循环
⼤ 12 123456 0
⼩ 6 123563 1
纯洁 66 666666