Thymeleaf基本语法

SpringBoot集成Thymeleaf模板引擎:
勾选Thymeleaf:

Thymeleaf基本语法_html


pom.xml文件:

<groupId>com.example</groupId>
    <artifactId>springboot-thymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-thymeleaf</name>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Thymeleaf模板引擎放在templates文件夹下,无法直接访问,需要通过转发:

controller文件:

@Controller
@RequestMapping("/hello")
public class HelloController {
    @RequestMapping("/f1")
    public String f1(){
        return "hello";
    }
}

hello.html文件:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf测试</title>
</head>
<body>
    <h>Hello</h>
</body>
</html>

访问localhost:8080/hello/f1 :

Thymeleaf基本语法_html_02

1.取值

th:text="表达式"
th:utext="表达式"
[[${表达式]]
[(${表达式})]

controller文件:

@Controller
@RequestMapping("/hello")
public class HelloController {
    @RequestMapping("/f1")
    public String f1(Model model){
        model.addAttribute("msg","<h1 style='color:red'>Hello Thymeleaf</h1>");
        return "hello";
    }
}

hello.html文件:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf测试</title>
</head>
<body>
    <h1>Hello</h1>
    <span th:text="${msg}"></span>
    <span th:utext="${msg}"></span>

    <span>[[${msg}]]</span>
    <span>[(${msg})]</span>
</body>
</html>

访问:

Thymeleaf基本语法_spring_03

th:text ,[[${msg}]]取值不解析标签,th:utext ,[(${msg})]会解析标签。

2.判断

th:if 显示符合判断体的

controller文件:

@RequestMapping("/f2")
    public String f2(Model model){

        model.addAttribute("age",23);
        return "hello";
    }

hello.html文件:

<h1>判断标签</h1>
<span th:if="${age<5}">婴儿</span>
<span th:if="${age<18}">少年</span>
<span th:if="${age<30}">青年</span>
<span th:if="${age<65}">中年</span>
<span th:if="${age<100}">老年</span>

访问:

Thymeleaf基本语法_Thymeleaf_04

th:unless 显示不符合判断体的

hello.html文件:

<h1>判断标签</h1>
<span th:unless="${age<5}">婴儿</span>
<span th:unless="${age<18}">少年</span>
<span th:unless="${age<30}">青年</span>
<span th:unless="${age<65}">中年</span>
<span th:unless="${age<100}">老年</span>
</body>

访问:

Thymeleaf基本语法_spring_05

th:switch

controller文件:

@RequestMapping("/f2")
    public String f2(Model model){

        model.addAttribute("role","admin");
        return "hello";
    }

hello.html文件:

<h1>判断标签</h1>
<span th:switch="${role}">
    <span th:case="admin">管理员</span>
    <span th:case="student">学生</span>
    <span th:case="teacher">老师</span>
    <span th:case="*">其他</span>
</span>

其中<span th:case="*">其他</span>表示没有匹配到的。

访问:

Thymeleaf基本语法_xml_06

3. 遍历操作

th:each

controller文件:

@RequestMapping("/f3")
    public String f3(Model model){
    People p1 = new People();
    People p2 = new People();
    People p3 = new People();
    p1.setId("1");
    p1.setAge(13);
    p1.setName("wjg");
    p2.setId("2");
    p2.setAge(16);
    p2.setName("locy");
    p3.setId("3");
    p3.setAge(23);
    p3.setName("bob");
    List<People> list = new ArrayList<>();
    list.add(p1);
    list.add(p2);
    list.add(p3);
    model.addAttribute("people",list);

    return "hello";
    }

hello.html文件:

<h1>遍历</h1>
<table border="1">
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>

   <tr th:each="p,i:${people}">
       <td th:text="${i.index+1}"></td>
       <td th:text="${p.id}"></td>
       <td th:text="${p.name}"></td>
       <td th:text="${p.age}"></td>
   </tr>
</table>

访问:

Thymeleaf基本语法_spring_07


4.设置输入框默认值

th:object 和 th:field

controller文件:

@RequestMapping("/f4")
    public String f4(Model model){
    People p = new People();
    p.setId("1");
    p.setAge(13);
    p.setName("wjg");

    model.addAttribute("people",p);

    return "hello";
    }

hello.html文件:

<h1>设置默认值</h1>
<!--*{属性}-->
<form action="" th:object="${people}">
    <input type="text" th:field="*{id}" />
</form>
<!--对象.属性-->
<form action="">
    <input type="text" th:field="${people.name}">
</form>

5.引入代码片段

include-insert-replace-fragment
fragment:代表片段
include:保留自己标签,不引入片段标签
insert:保留自己标签,引入片段标签
replace:不保留自己标签,引入片段标签

片段(foot.html):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <footer th:fragment="foot">版权所有者:KGF886</footer>
</body>
</html>

hello.html文件:

<h1>引入代码片段</h1>
<div th:include="foot.html::foot"></div>
<div th:insert="foot.html::foot"></div>
<div th:replace="foot.html::foot"></div>

页面源码:

<h1>引入代码片段</h1>
<div>版权所有者:KGF886</div>
<div><footer>版权所有者:KGF886</footer></div>
<footer>版权所有者:KGF886</footer>
</body>