1. 啥是 Thymeleaf在学 Thymeleaf 之前咱们先看一下应用 jsp 开发遇到的次要问题：jsp 的痛点1.页面蕴含大量 java 代码，代码太凌乱<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
    <title>jsp</title>
    </head>
    <body>
    <%

    String name = (String)request.getAttribute("name");int age = (int)request.getAttribute("age");

    %>
    <p>姓名： <%=name%></p>
    <p>年龄： <%=age%></p>
    </body>
    </html>
    2.jsp 技术曾经是很多年前的老技术了，当初的支流框架都不举荐应用，根本被淘汰了。模板引擎技术尽管 jsp 根本被淘汰了，然而它的技术替代品如雨后春笋，层不出穷。模板引擎技术就是其中的代表。咱们都晓得传统的页⾯开发通常采⽤ HTML+ JS 技术，⽽当初⼤局部⽹站都采⽤标签化 + 模块化的设计。模板引擎技术就是依据这种⽅式，使⽤户界⾯与业务数据拆散⽽产⽣的。它能够⽣成特定格局的⽂档，⽤于⽹站的模板引擎就会⽣成⼀个规范的 HTML ⽂档在原有的 HTML 页⾯中来填充数据，最终达到渲染页⾯的⽬的。模板引擎技术说白了就是把数据和页⾯整合在⼀起的技术。Thymeleaf 简介Thymeleaf 是一种能够代替 jsp 的模板引擎技术。它有如下长处：1.与 SpringBoot 完满整合：SpringBoot 提供了 Thymeleaf 的默认配置，咱们能够像以前操作 jsp 一样来操作 Thymeleaf。2.开箱即用：反对 JSTL 格局语法。3.多方言反对：Thymeleaf 提供 spring 规范方言和一个与 SpringMVC 完满集成的可选模块，能够疾速的实现表单绑定、国际化等性能。2. 环境搭建这里咱们创立 springboot 我的项目。1.引入依赖 <dependencies>

     <!-- thymeleaf --> <dependency>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- web --> <dependency>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- lombok --> <dependency>     <groupId>org.projectlombok</groupId>     <artifactId>lombok</artifactId>     <optional>true</optional> </dependency> <!-- test --> <dependency>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-test</artifactId>     <scope>test</scope> </dependency>

    </dependencies>
    2.Thymeleaf 配置application.ymlserver:
    port: 8081
    servlet:
    context-path: /thymeleaf-demo

spring:
thymeleaf:

# thymeleaf 配置cache: false # 禁用缓存，批改完实时展现数据prefix: classpath:/templates/ # 文件所在位置suffix: .html # 后缀

web:

resources:  static-locations: classpath:/static/ # 动态资源

在 springboot 的配置文件中，咱们配置了 thymeleaf 的默认前缀和后缀。还配置了动态资源的拜访门路。

3.html 文件引入 Thymeleaf 的命名空间xmlns:th="http://www.thymeleaf.org"


html 文件必须引入 thymeleaf 的命名空间能力应用相干语法。3. 罕用语法1.th:text作用：如果变量有值，则替换标签外面的默认值，否则展现标签的默认值。例如：@GetMapping("hello")
public String hello(Model model) {

model.addAttribute("msg", "黄沙百战穿金甲，不破楼兰终不还！");return "hello";

}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

<meta charset="UTF-8"><title>msg</title>

</head>
<body>
<p>-------------诗句赏析-------------</p>
<p th:text="${msg}">人生得意须尽欢，莫使金樽空对月。</p>
</body>
</html>
测试： 

2.th:href作用：用来指向文件的 url。例如：<link rel="stylesheet" type="text/css" th:href="@{css/login.css}"/>


3.th:action作用：用来配置 form 表单的申请门路th:action="@{/login}"
例如：<form th:action="@{/login}" method="post">

姓名： <input type="text" name="username"/>明码： <input type="password" name="password"/><input type="submit" class="button" value="登录"/>

</form>
4.th:if作用：条件判断，如果判断为真就显示数据或者执行相干操作。例如：<p th:if="${username!=null && username!=''}"> 欢送你： <span th:text="${username}"></span></p>
复制代码5.th:src作用：用来指向文件的 url。例如：<img th:src="@{images/title.jpg}" >
复制代码6.th:onclick作用：绑定事件。例如：删除

  1. 小案例场景：用户登录胜利之后，展现用户信息和用户列表。

    controller/ 进入登录界面 /
    @GetMapping("/toLogin")
    public String toLogin() {
    return "login";
    }

@PostMapping("/login")
public String login(Model model, String username, String password) {

// 用户名model.addAttribute("username", username);// 用户列表信息List<User> userList = Stream.of(new User(1, "张三", 18), new User(2, "李四", 19)        , new User(3, "王五", 20)).collect(Collectors.toList());model.addAttribute("userList", userList);return "index";

}
login.html<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

<meta charset="UTF-8"><link rel="stylesheet" type="text/css" th:href="@{css/login.css}"/><title>登录界面</title>

</head>
<body>
<p class="login_title">登录页面</p>
<form th:action="@{/login}" method="post">

姓名： <input type="text" name="username"/>明码： <input type="password" name="password"/><input type="submit" class="button" value="登录"/>

</form>
</body>
</html>
index.html<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

<meta charset="UTF-8"><title>用户列表</title>

</head>
<body>
<p th:if="${username!=null && username!=''}"> 欢送你： <span th:text="${username}"></span></p>
<img th:src="@{images/title.jpg}">
<p>-------------用户列表-------------</p>

ID姓名年龄操作
<span th:text="${user.id}"></span><span th:text="${user.name}"></span><span th:text="${user.age}"></span>删除

<script>

function deleteUser(id) {    console.log("id: " + id);}

</script>
</body>
</html>
实现代码：链接: https://pan.baidu.com/s/16Rpp...
提取码: ccfn