1 thymeleaf配置
1.1 导入thymeleaf包
<!-- springboot整合 thymeleaf 视图展示技术-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.1.2.RELEASE</version>
</dependency>
1.2 配置视图
1.2.1 配置视图
如果不配置,官方默认在/templates下,如果想访问/templates下的目录如/templates/page,可以在return里返回 return “page/test01”;
1.2.2 测试
在/templates下新建一个test01.html
在TestController.java里:
//跳转到test01.html
@GetMapping("/t1")
public String toTest01Html(){
return "test01";//默认是转发
}
结果:
测试成功
1.3 templates目录介绍
templates是放模板的目录,不允许外界通过url直接访问,是安全的,类似WEB-INF目录。
static是存放html、css、js、图片等静态资源
2 thymeleaf语法
在html页面要加
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2.1 变量输出与字符创操作
2.1.1 th:text
在页面输出值
<span th:text="该标签的作用是在页面输出值"></span>
2.1.2 th:value
将值放入到input标签的value中
<input th:value="fk">
效果:
2.1.3 判断字符串是否为空
${#strings.isEmpty(key)}
判断字符串是否为空,为空返回true 不为空返回false
${#strings.contains(msg,‘1’)
判断字符串是否包含指定子串,如果包含返回true 否则返回false
${#strings.startsWith(msg,‘h’)
判断字符串是否以指定的子串开头 如果是返回true,否则返回false
${#strings.endsWith(msg,‘h’)
判断字符串是否以指定的子串结尾 如果是返回true,否则返回false
${#strings.length(msg)
获取字符串的长度
${#strings.indexOf(msg,‘h’)
查找子串的位置,并返回改字串的下标,没有找到返回-1
${#strings.substring(msg,10) 从指定位置开始截取字符串到末尾
${#strings.substring(msg,10,12) 从指定位置开始截取字符串到指定下标位置
${#strings.toUpperCase(msg) 将字符串的小写字母转成大写
${#strings.toLowerCase(msg) 将字符串的大写字母转成小写
2.2 绑定数据
2.2.1 使用model绑定数据
后台:
//跳转到test01.html
@GetMapping("/t1")
public String toTest01Html(Model model){
//使用model绑定数据,在test01.html页面获取服务端绑定的数据
model.addAttribute("username","fengkang");
return "test01";//默认是转发
}
前台取username值:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span th:text="${username}"></span>
</body>
</html>
效果:
2.2.2 使用HttpServletRequest绑定数据
使用HttpServletRequest绑定数据,在test01.html页面获取服务端绑定的数据
调用内置对象要加#号
后台:
//跳转到test01.html
@GetMapping("/t1")
public String toTest01Html(HttpServletRequest request){
//使用HttpServletRequest绑定数据,在test01.html页面获取服务端绑定的数据
request.setAttribute("username","fengkang");
return "test01";//默认是转发
}
前台:
<span th:text="${#httpServletRequest.getAttribute('username')}"></span>
2.2.3 使用HttpSession绑定数据
//跳转到test01.html
@GetMapping("/t2")
public String toTest02Html(HttpServletRequest request, HttpSession session){
//使用HttpSession绑定数据,在test01.html页面获取服务端绑定的数据
session.setAttribute("username","fengkang");
return "test01";//默认是转发
}
前台:
<span th:text="${session.username}"></span>
或者
<span th:text="${#httpSession.getAttribute('username')}"></span>
2.2.4 使用ServletContext绑定数据
//跳转到test01.html
@GetMapping("/t3")
public String toTest03Html(HttpServletRequest request, HttpSession session){
//使用ServletContext绑定数据,在test01.html页面获取服务端绑定的数据
ServletContext context = request.getServletContext();
context.setAttribute("username","fengkang");
return "test01";//默认是转发
}
前台:
<span th:text="${application.username}"></span>
2.2.5 使用ModelAndView绑定数据
//跳转到test01.html
@GetMapping("/t4")
public ModelAndView toTest04Html(ModelAndView modelAndView){
//使用ModelAndView绑定数据,在test01.html页面获取服务端绑定的数据
modelAndView.addObject("username","fengkang");
//封装视图
modelAndView.setViewName("test01");
return modelAndView;
}
前台:
<span th:text="${username}"></span>
2.3 日期格式化处理
${#dates.format(time)}
格式化日期,按照浏览器格式输出
${#dates.format(time,‘yyyy-MM-dd’)}
格式化日期,按照指定格式输出
取出时间中的年 、月、日
<span th:text="${#dates.year(time)}"></span>
<span th:text="${#dates.month(time)}"></span>
<span th:text="${#dates.day(time)}"></span>
2.4 条件判断
2.4.1 th:if
服务端绑定的sex值进行判断,显示哪个标签
<span th:if="${sex}=='男'">男</span>
<span th:if="${sex}=='女'">女</span>
2.4.2 th:switch th:case
<div th:switch="${id}">
<span th:case="1">id为1</span>
<span th:case="2">id为2</span>
<span th:case="3">id为3</span>
</div>
2.5 迭代遍历
<table border="1px" width="300px" >
<tr>
<td>ID</td>
<td>NAME</td>
<td>ADDRESS</td>
</tr>
<tr th:each="u : ${list}">
<td th:text="${u.id}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.address}"></td>
</tr>
</table>
2.5.1 th:each 下的状态变量
Index 当前遍历对象的下标 从0开始
Count 当前迭代对象的计数 从1开始
Size 当前迭代对象长度
Even /old 当前迭代对象是否是偶数/奇数 布尔值 从0开始
First 当前循环是否是第一条 是返回true 否则返回false
Last 当前循环是否是最后一条 是返回true 否则返回false
2.5.2 th:each 遍历list
后台:
//绑定list集合
@GetMapping("/t6")
public String getList(Model model){
List<String> list = new ArrayList<>();
//将数据封装到list集合里
list.add("张三");
list.add("李四");
list.add("王二麻");
model.addAttribute("name",list);
return "test02";
}
前台:
<table border="2px" width="500px">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<!--n:用来遍历name的变量名,随便写;${name}:获取到绑定的list集合;
s:获取index的变量名;${s.index}:获取index,从0开始,这里代表学号-->
<tr th:each="n,s : ${name}">
<td th:text="${s.index}"></td>
<td th:text="${n}"></td>
</tr>
</table>
效果:
2.5.3 th:each 遍历map
创建实体类Student.java
package com.fk.smashing.pojo;
import lombok.Data;
@Data
public class Student {
private Integer id;
private String name;
private double score;
//生成构造器
public Student(Integer id, String name, double score) {
this.id = id;
this.name = name;
this.score = score;
}
}
后台:
//绑定map集合
@GetMapping("/t5")
public String getMap(Model model){
Map<String, Student> map = new HashMap<>();
//将数据封装到map集合里
map.put("u1",new Student(1,"张三",88));
map.put("u2",new Student(2,"李四",97));
map.put("u3",new Student(3,"王二麻",92));
model.addAttribute("map",map);
return "test02";
}
前台:
<table border="2px" width="500px">
<tr>
<td>学号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<!--"maps":用来遍历的变量名,随便写;${map}:获取到绑定的map集合-->
<tr th:each="maps: ${map}">
<td th:each="a : ${maps}" th:text="${a.value.id}"></td>
<td th:each="a : ${maps}" th:text="${a.value.name}"></td>
<td th:each="a : ${maps}" th:text="${a.value.score}"></td>
</tr>
</table>
效果:
2.5.4 绑定Student对象
后台:
//绑定Student对象
@GetMapping("/t7")
public String getStudent(Model model){
//将数据封装到student对象里
Student student = new Student(1,"张三",88);
model.addAttribute("student",student);
return "test02";
}
前台:
<span th:text="${student.id}"></span>
<span th:text="${student.name}"></span>
<span th:text="${student.score}"></span>
效果:
2.6 URL表达式
2.6.1 绝对路径
<a th:href="@{http://www.baidu.com}">绝对路径</a>
<a href="http://www.baidu.com">绝对路径</a>
<a href="@{http://localhost:8066/t7}">绝对路径</a>
2.6.2 相对路径
相对于项目的根,一般是同一个项目下
<a th:href="@{/t11}">相对路径</a>
相对于服务器路径的根,可以访问另一个项目
<a th:href="@{~/项目名/访问路径}">相对服务器的根</a>
2.6.3 通过url在路径上传参数
前台页面将参数传给后台接收处理
<a href="/t8?id=1&name='lisi'">以前的url路径传参</a>
<a th:href="@{/t8(id=1,name='lisi')}">thymeleaf的url路径传参</a>