Thymeleaf基本语法

直接创建 maven 项目，需要的依赖

 <parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
     <version>2.1.4.RELEASE</version>
</parent>
<dependencies>
     <!--web起步依赖-->
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
     </dependency>

     <!--thymeleaf配置-->
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
     </dependency>
</dependencies>

1、th:action

定义后台控制器路径，类似<form>标签的 action 属性。

demo.html 增加内容

1
2
3

<form id="login-form" th:action="@{/get}">
  <button>提交</button>
</form>

在 TestController 里面打一个断点，点击提交请求，请求会直接到 TestController 里面

2、th:each

对象遍历，功能类似 jstl 中的<c:forEach>标签。

创建 User

public class User implements Serializable {
    private Integer id;
    private String name;
    private Integer age;

    // 各种方法... ... ...
}

TestController 里面添加测试数据

@Controller
public class TestController {

    @RequestMapping("/get")
    public String hello(Model model) {

        //集合数据
        List<User> users = new ArrayList<User>();
        users.add(new User(1, "张三", 18));
        users.add(new User(2, "李四", 19));
        users.add(new User(3, "王五", 20));
        model.addAttribute("users", users);
        return "demo";
    }
}

修改demo.html

<body>
  <table>
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>

    <tr th:each="user:${users}">
      <td th:text="${user.id}"></td>
      <td th:text="${user.name}"></td>
      <td th:text="${user.age}"></td>
    </tr>
  </table>
</body>

测试效果：http://localhost:8080/get

3、Map 输出

TestController 里面添加测试数据

@Controller
public class TestController {

    @RequestMapping("/get")
    public String hello(Model model) {

        Map<String,Object> dataMap = new HashMap<String,Object>();
        dataMap.put("name","张三");
        dataMap.put("age","18");
        model.addAttribute("dataMap",dataMap);
        return "demo";
    }
}

修改 demo.html

<body>
  <table>
    <!-- 读取map的两种方式
    1：知道map的key ， 直接根据key 获取数据
    2：不知道map的key，循环方式获取key，然后获取数据 -->
    <h5>方式1</h5>
    <div>
      获取Key=name的值：<span th:text="${dataMap.name}"></span><br />
      获取key=age的值：<span th:text="${dataMap.age}"></span> <br />
    </div>
    <h5>方式2</h5>
    <div th:each="map:${dataMap}">
      <span th:text="${map.key}"></span>:<span th:text="${map.value}"></span>
    </div>
  </table>
</body>

4、数组输出

TestController 里面添加测试数据

@Controller
public class TestController {

    @RequestMapping("/get")
    public String hello(Model model) {

        String[] names = {"张三","李四","王五"};
        model.addAttribute("names",names);
        return "demo";
    }
}

修改 demo.html

<body>
  <!--
 循环：第一个参数：name ：当前被循环的对象
      第二个参数：nameIndex：当前循环的下标
-->
  <div th:each="name,nameIndex:${names}">
    <span th:text="${nameIndex.count}"></span>--><span th:text="${name}"></span>
    <br />
    <br />
  </div>
</body>

5、Date 输出

修改TestController

@Controller
public class TestController {

    @RequestMapping("/get")
    public String hello(Model model) {
        model.addAttribute("now",new Date());
        return "demo";
    }
}

修改 demo.html

<body>
  <div>
    <span th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></span>
  </div>
</body>

6、th:if

条件判断

修改TestController

@Controller
public class TestController {

    @RequestMapping("/get")
    public String hello(Model model) {
        model.addAttribute("age",18);
        return "demo";
    }
}

修改 demo.html

<body>
  <!-- if:th：unless表示条件不成立 ，输出数据 -->
  <div>
    <span th:if="${(age>=18)}"
      >年龄:
      <p th:text="${age}"></p>
    </span>
    <span th:unless="${age<18}">成年人</span>
  </div>
</body>

7、th:fragment

可以定义一个独立的模块，在 templates 目录下，新建一个 footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>关于</title>
  </head>
  <body>
    <div th:fragment="about">关于本站<br /></div>
  </body>
</html>