thymeleaf
一、理论
thymeleaf是Java模板引擎，模板是指我们开发好的前端页面，其中页面里涉及到的数据只需要调用后端系统查询即可，所以前端页面是不变的，变的是从后端返回的数据。
二、实践
依赖
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
配置文件
spring:
thymeleaf:
cache: false
encoding: utf-8
th:text
controller：
@Controller
public class MicoZoneController {
@GetMapping("/index")
public String index(HttpServletRequest request) {
request.setAttribute("name", "zhangsan");
return "index";
}
}
html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>indextitle>
head>
<body>
<div th:text="|你的名字：${name}|">静态名字div>
body>
html>
th:each
controller：
@Controller
public class MicoZoneController {
@GetMapping("/index")
public String index(HttpServletRequest request) {
List<Student> studentList = new ArrayList<>();
studentList.add(new Student("zhangsan", 14));
studentList.add(new Student("ls", 28));
request.setAttribute("studentList", studentList);
Map<String, Integer> infoMap = new HashMap<>();
infoMap.put("zhaoliu", 17);
infoMap.put("chenqi", 18);
request.setAttribute("infoMap", infoMap);
return "index";
}
}
@Data
@AllArgsConstructor
class Student {
private String name;
private int age;
}
html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>indextitle>
head>
<body>
<div th:each="student,studentStat:${studentList}">
<p th:text="${studentStat.index}">p>
<p th:text="${student.name}">p>
<p th:text="${student.age}">p>
div>
<div th:each="info,infoStat:${infoMap}">
<p th:text="${infoStat.index}">p>
<p th:text="${info.key}">p>
<p th:text="${info.value}">p>
div>
body>
html>
th:if
controller：
@Controller
public class MicoZoneController {
@GetMapping("/index")
public String index(HttpServletRequest request) {
request.setAttribute("result1", 1 > 2);
request.setAttribute("result2", 1 < 2);
return "index";
}
}
html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>indextitle>
head>
<body>
<p th:if="${result1}">1大于2p>
<p th:if="${result2}">1小于2p>
body>
html>
th:href
controller：
@Controller
public class MicoZoneController {
@GetMapping("/index")
public String index(HttpServletRequest request) {
request.setAttribute("name", "zhangsan");
request.setAttribute("age", 14);
return "index";
}
@GetMapping("/a/b")
public String ab(@RequestParam("name") String name,
@RequestParam("age") Integer age) {
System.out.println("后端收到值：name=" + name + ",age=" + age); // 后端收到值：name=zhangsan,age=14
return "index";
}
@GetMapping("/c/d")
public String cd(Student student) {
System.out.println("后端收到值：" + student); // 后端收到值：Student(name=zhangsan, age=14)
return "index";
}
}
@Data
@ToString
class Student {
private String name;
private Integer age; // int 会报错
}
html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>indextitle>
head>
<body>
<a th:href="@{/a/b(name=${name},age=${age})}">点击a>
<a th:href="@{/c/d(name=${name},age=${age})}">点击a>
body>
html>
th:switch
controller：
@Controller
public class MicoZoneController {
@GetMapping("/index")
public String index(HttpServletRequest request) {
request.setAttribute("sex", "male");
return "index";
}
}
html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>indextitle>
head>
<body>
<div th:switch="${sex}">
<p th:case="male">malep>
<p th:case="female">femalep>
<p th:case="*">其他p>
div>
body>
html>
内联文本
controller：
@Controller
public class MicoZoneController {
@GetMapping("/index")
public String index(HttpServletRequest request) {
request.setAttribute("name", "zhangsan");
return "index";
}
}
html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>indextitle>
head>
<body>
<div th:inline="text">
<h3>我的姓名是：[[${name}]]h3>
div>
body>
html>
自定义模板
controller：
@Controller
public class MicoZoneController {
@GetMapping("/index")
public String index(HttpServletRequest request) {
request.setAttribute("name", "zhangsan");
return "index";
}
}
header.html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>headertitle>
head>
<body>
<div th:fragment="top">
<h1>我是top模板h1>
div>
body>
html>
foot.html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>foottitle>
head>
<body>
<div th:fragment="bottom">
<h1>我是bottom模板h1>
div>
body>
html>
index.html：
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>indextitle>
head>
<body>
<div th:insert="fragment/header :: top">div>
<div th:text="${name}">div>
<div th:insert="fragment/foot :: bottom">div>
body>
html>