SpringBoot中模板引擎thymeleaf-CFANZ编程社区

首先我们用SpringBoot创建一个支持thymeleaf的web项目

添加web支持

SpringBoot中模板引擎thymeleaf_xml

添加thymeleaf模板引擎

SpringBoot中模板引擎thymeleaf_html_02

创建好该项目之后，在templates目录下创建一个普通的html文件，这个时候只需要写一个controller就可以实现页面的跳转

SpringBoot中模板引擎thymeleaf_spring_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello thymeleaf
</body>
</html>

package com.hzy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {
    @RequestMapping("test")
    public String test() {
        return "test";
    }
}

SpringBoot中模板引擎thymeleaf_xml_04

这样可以实现了页面的跳转，但是thymeleaf还没有发力，也就是说，现在写的只是html代码，要想用到thymeleaf，需要引入一个头文件xmlns:th="http://www.thymeleaf.org"，这样我们就可以用thymeleaf的语法了

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello thymeleaf
</body>
</html>

thymeleaf可以通过th:对所有的html元素进行操作，下面进行演示

获取后台数据，${}

package com.hzy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {
    @RequestMapping("test")
    public String test(Model model) {
        model.addAttribute("msg","<h1>hello</h1>");
        return "test";
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--不转义字符串-->
<div th:text="${msg}"></div>
<!--转义字符转-->
<div th:utext="${msg}"></div>
</body>
</html>

SpringBoot中模板引擎thymeleaf_html_05

循环遍历后台数据

controller类

package com.hzy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class HelloController {
    @RequestMapping("test")
    public String test(Model model) {
        List<String> list = new ArrayList<>();
        list.add("abc");
        list.add("def");
        list.add("ghi");
        model.addAttribute("list",list);
        return "test";
    }
}

test.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:each="lis : ${list}" th:text="${lis}"></div>

</body>
</html>

SpringBoot中模板引擎thymeleaf_spring_06

遍历map中的属性值

SpringBoot中模板引擎thymeleaf_xml_07

Thymeleaf提取公共部分

首先我们定义一个公共部分的页面，这里顶一个header.html

这里定义的语法是th:fragment="变量名"，其英文意思是碎片的意思，给fragment部分定义一个变量为myhead

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header th:fragment="myhead">
    <h1>这是头部公共部分</h1>
</header>
</body>
</html>

下面是调用该公共部分，其语法是th:insert="~{页面名 :: fragment变量名}"，这样就可以直接取到公共部分了

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:insert="~{header :: myhead}"></div>

</body>
</html>

SpringBoot中模板引擎thymeleaf_spring_08

其中这里用的是insert，还有一个常用的replace，二者的区别

th:insert：保留自己的主标签
th:replace：不保留自己的主标签

<div th:insert="~{header :: myhead}"></div>
<div th:replace="~{header :: myhead}"></div>

其结果为

<div>
    <header th:fragment="myhead"><h1>这是头部公共部分</h1></header>
</div>

<header th:fragment="myhead"><h1>这是头部公共部分</h1></header>