Thymeleaf是一个用于web和独立环境的现代服务器端Java模板引擎。
Thymeleaf的模板不能直接通过url访问,需要经过控制器才可以

thymeleaf的使用步骤

1. 集成Thymeleaf模板
    引入依赖
       <!--使用thymelaf-->
        <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2. 编写配置
spring:
  thymeleaf:
    cache: false  # 关闭缓存
    prefix: classpath:/templates/ #指定模板位置
    suffix: .html #指定后缀

3. 编写控制器测试

@Controller    //一定要是@Controller 不能再使用@RestController注解
@RequestMapping("hello")
public class HelloController {
    @GetMapping("hello")
    public String hello(){
        System.out.println("测试与 thymeleaf 的集成");
        return "index";
    }
}

模板的基本语法

使用时必须在页面中加入thymeleaf如下命名空间:
<html lang="en" xmlns:th="http://www.thymeleaf.org">

获取数据    存入request域
<span th:text="${name}"/>

获取并解析带有html标签的字符串
<span th:utext="${url}"/>

将数据赋值给表单元素
<input type="text" th:value="${username}"/>

-  1.使用 th:text="${属性名}"  获取对应数据,获取数据时会将对应标签中数据清空,因此最好是空标签
-  2.使用 th:utext="${属性名}" 获取对应的数据,可以将数据中html先解析在渲染到页面
-  3.使用 th:value="${属性名}" 获取数据直接作为表单元素value属性



展示对象数据
id:<span th:text="${user.id}"></span>
name:<span th:text="${user.name}"></span>
age:<span th:text="${user.age}"></span>
bir: <span th:text="${user.bir}"></span>  ====  <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd HH:mm:ss')}"></span> 日期格式化

条件展示数据
<span th:if="${user.age == 23}">
  青年
</span>

展示多条数据
 <ul th:each="user:${users}">
   <li th:text="${user.id}"></li>
   <li th:text="${user.name}"></li>
   <li th:text="${user.age}"></li>
   <li th:text="${#dates.format(user.bir,'yyyy-MM-dd')}"></li>
</ul>

 <ul th:each="user,userStat:${users}">
   <li><span th:text="${userStat.count}"/>-<span th:text="${user.id}"/></li>   获取遍历次数count从1开始  index从0开始
   <li><span th:text="${userStat.odd}"/>-<span th:text="${user.name}"/></li>   获取当前遍历是否是奇数行
   <li><span th:text="${userStat.even}"/>-<span th:text="${user.age}"/></li>   获取当前遍历是否是偶数行
   <li><span th:text="${userStat.size}"/>-<span th:text="${user.bir}"/></li>   获取当前集合的总条数
</ul>

引入静态资源

# 使用thymeleaf模板项目中静态资源默认放在resources路径小static目录中

页面中引入
 <link rel="stylesheet" th:href="@{/css/index.css}">
 <script th:src="@{/js/jquery-min.js}"></script>

注意: @{/}代表通过thymeleaf语法动态获取应用名

在js代码中获取项目名
<script>
  const ctx = '[[@{/}]]';
</script>
注意:[[书写thymeleaf语法]],这里[[]]是thymeleaf内嵌表达式