springboot-thymeleaf模板引擎
1 页面跳转
1.1 搭建springboot项目
1.2 在pom.xml中引入thymeleaf依赖
<!--thymeleaf模板引擎-->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>1.3 查看项目目录,确认导入成功
注意版本与spingboot版本对应
1.4 在resources/templates目录下创建一个 test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
</body>
</html>这个目录相当于 WEB-INF ,不能被直接访问,只能通过controller来跳转
1.5 创建controller层,并新建一个TestController类
package com.lv.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
//在templates目录下的所有页面,只能通过controller来跳转!
//这个需要模板引擎的支持 thymeleaf
@Controller
public class TestController {
@RequestMapping("/test")
public String test(){
return "test";
}
}controller跳转到templates目录下的文件,必须要thymeleaf支持,所以必须导入thymeleaf模板引擎的依赖
1.6 启动项目.访问test
访问到了test.html中的内容,说明controller成功跳转
2 thymeleaf语法:传值
使用thymeleaf方式通过controller向templates目录下的html传值
2.1 修改TestController
package com.lv.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
//在templates目录下的所有页面,只能通过controller来跳转!
//这个需要模板引擎的支持 thymeleaf
@Controller
public class TestController {
@RequestMapping("/test")
public String test(Model model){
model.addAttribute("msg","hello thymeleaf");
return "test";
}
}2.2 在test.html中导入约束
xmlns:th="http://www.thymeleaf.org"2.3 修改test.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--所有的html元素都可以被thymeleaf替换接管 : th:元素名-->
<div th:text="${msg}"></div>
</body>
</html>2.4 重启项目.访问test
在test.html页面中成功显示controller传过来的值
3 hymeleaf语法:转译和不转译
3.1 修改TestController
package com.lv.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class TestController {
@RequestMapping("/test")
public String test(Model model){
model.addAttribute("msg","<h1>hello thymeleaf</h1>");
return "test";
}
}3.2 修改test.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--不转译-->
<div th:text="${msg}"></div>
<!--转译-->
<div th:utext="${msg}"></div>
</body>
</html>3.3 重启程序,访问test
4 hymeleaf语法:循环遍历
4.1 修改TestController
package com.lv.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Arrays;
@Controller
public class TestController {
@RequestMapping("/test")
public String test(Model model){
model.addAttribute("numbers", Arrays.asList("one","two","three"));
return "test";
}
}4.2 修改test.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--第一种方式-->
<h3 th:each="number:${numbers}" th:text="${number}"></h3>
<hr>
<!--第二种方式-->
<h3 th:each="number:${numbers}">[[${number}]]</h3>
</body>
</html>4.3 重启程序,访问test
5 thymeleaf的其它语法
5.1 简单表达式：
- 变量表达式：${...}
- 选择变量表达式：*{...}
- 消息表达式：#{...}
- 链接网址表达式：@{...}
5.2 文字
- 文本文本：
'one text','Another one!',… - 数字文字：
0,34,3.0,12.3,… - 布尔文字：
true,false - 空文本：null
- 文字标记：
one,sometext,main,…
5.3 文本操作：
- 字符串串联：+
- 文字替换：|The name is ${name}|
5.4 算术运算：
- 二元运算符：
+,-,*,/,% - 减号（一元运算符）：-
5.5 布尔运算：
- 二元运算符：
and,or - 布尔否定（一元运算符）：
!,not
5.6 比较和平等：
- 比较器：
>,<,>=,<=(gt,lt,ge,le) - 等运算符：
==,!=(eq,ne)
5.7 条件运算符：
- 如果-那么：(if) ? (then)
- 如果-然后-否则：(if) ? (then) : (else)
- 默认：(value) ?: (defaultvalue)
