Thymeleaf基本语法
SpringBoot集成Thymeleaf模板引擎:
勾选Thymeleaf:
pom.xml文件:
<groupId>com.example</groupId>
<artifactId>springboot-thymeleaf</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-thymeleaf</name>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Thymeleaf模板引擎放在templates文件夹下,无法直接访问,需要通过转发:
controller文件:
@Controller
@RequestMapping("/hello")
public class HelloController {
@RequestMapping("/f1")
public String f1(){
return "hello";
}
}
hello.html文件:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf测试</title>
</head>
<body>
<h>Hello</h>
</body>
</html>
访问localhost:8080/hello/f1 :
1.取值
th:text="表达式"
th:utext="表达式"
[[${表达式]]
[(${表达式})]
controller文件:
@Controller
@RequestMapping("/hello")
public class HelloController {
@RequestMapping("/f1")
public String f1(Model model){
model.addAttribute("msg","<h1 style='color:red'>Hello Thymeleaf</h1>");
return "hello";
}
}
hello.html文件:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf测试</title>
</head>
<body>
<h1>Hello</h1>
<span th:text="${msg}"></span>
<span th:utext="${msg}"></span>
<span>[[${msg}]]</span>
<span>[(${msg})]</span>
</body>
</html>
访问:
th:text ,[[${msg}]]
取值不解析标签,th:utext ,[(${msg})]
会解析标签。
2.判断
th:if 显示符合判断体的
controller文件:
@RequestMapping("/f2")
public String f2(Model model){
model.addAttribute("age",23);
return "hello";
}
hello.html文件:
<h1>判断标签</h1>
<span th:if="${age<5}">婴儿</span>
<span th:if="${age<18}">少年</span>
<span th:if="${age<30}">青年</span>
<span th:if="${age<65}">中年</span>
<span th:if="${age<100}">老年</span>
访问:
th:unless 显示不符合判断体的
hello.html文件:
<h1>判断标签</h1>
<span th:unless="${age<5}">婴儿</span>
<span th:unless="${age<18}">少年</span>
<span th:unless="${age<30}">青年</span>
<span th:unless="${age<65}">中年</span>
<span th:unless="${age<100}">老年</span>
</body>
访问:
th:switch
controller文件:
@RequestMapping("/f2")
public String f2(Model model){
model.addAttribute("role","admin");
return "hello";
}
hello.html文件:
<h1>判断标签</h1>
<span th:switch="${role}">
<span th:case="admin">管理员</span>
<span th:case="student">学生</span>
<span th:case="teacher">老师</span>
<span th:case="*">其他</span>
</span>
其中<span th:case="*">其他</span>
表示没有匹配到的。
访问:
3. 遍历操作
th:each
controller文件:
@RequestMapping("/f3")
public String f3(Model model){
People p1 = new People();
People p2 = new People();
People p3 = new People();
p1.setId("1");
p1.setAge(13);
p1.setName("wjg");
p2.setId("2");
p2.setAge(16);
p2.setName("locy");
p3.setId("3");
p3.setAge(23);
p3.setName("bob");
List<People> list = new ArrayList<>();
list.add(p1);
list.add(p2);
list.add(p3);
model.addAttribute("people",list);
return "hello";
}
hello.html文件:
<h1>遍历</h1>
<table border="1">
<tr>
<th>序号</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr th:each="p,i:${people}">
<td th:text="${i.index+1}"></td>
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.age}"></td>
</tr>
</table>
访问:
4.设置输入框默认值
th:object 和 th:field
controller文件:
@RequestMapping("/f4")
public String f4(Model model){
People p = new People();
p.setId("1");
p.setAge(13);
p.setName("wjg");
model.addAttribute("people",p);
return "hello";
}
hello.html文件:
<h1>设置默认值</h1>
<!--*{属性}-->
<form action="" th:object="${people}">
<input type="text" th:field="*{id}" />
</form>
<!--对象.属性-->
<form action="">
<input type="text" th:field="${people.name}">
</form>
5.引入代码片段
include-insert-replace-fragment
fragment:代表片段
include:保留自己标签,不引入片段标签
insert:保留自己标签,引入片段标签
replace:不保留自己标签,引入片段标签
片段(foot.html):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<footer th:fragment="foot">版权所有者:KGF886</footer>
</body>
</html>
hello.html文件:
<h1>引入代码片段</h1>
<div th:include="foot.html::foot"></div>
<div th:insert="foot.html::foot"></div>
<div th:replace="foot.html::foot"></div>
页面源码:
<h1>引入代码片段</h1>
<div>版权所有者:KGF886</div>
<div><footer>版权所有者:KGF886</footer></div>
<footer>版权所有者:KGF886</footer>
</body>