当前位置：首页 > news >正文

thymeleaf

news 2024/12/23 17:19:28

一、理论

thymeleaf是Java模板引擎，模板是指我们开发好的前端页面，其中页面里涉及到的数据只需要调用后端系统查询即可，所以前端页面是不变的，变的是从后端返回的数据。

二、实践

依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置文件

spring:thymeleaf:cache: falseencoding: 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>index</title>
</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>index</title>
</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>index</title>
</head>
<body>
<p th:if="${result1}">1大于2</p>
<p th:if="${result2}">1小于2</p>
</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=14return "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>index</title>
</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>index</title>
</head>
<body>
<div th:switch="${sex}"><p th:case="male">male</p><p th:case="female">female</p><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>index</title>
</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>header</title>
</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>foot</title>
</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>index</title>
</head>
<body>
<div th:insert="fragment/header :: top"></div>
<div th:text="${name}"></div>
<div th:insert="fragment/foot :: bottom"></div>
</body>
</html>