官网：https://www.thymeleaf.org/
点我跳 3.0文档

Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎，能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。

Thymeleaf 的主要目标是提供一种优雅且高度可维护的模板创建方式。

正式接入

本代码分享在Gitee：https://gitee.com/li_kun_zang/thymeLeafDemo

Maven依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置文件关闭缓存！

#Thymyleaf
# 关闭Thymeleaf缓存
spring.thymeleaf.cache=false

配置实体类

@Data
public class UserInfo {
    private Integer id;
    private String name;
    private Integer isDelete;
}

Java代码：本质就是访问某接口，去展示内容，在Model放入返回内容即可。

import com.zanglikun.thymeleafdemo.pojo.UserInfo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @Author ：zanglk
 * @DateTime ：2022/11/3 12:44
 * @Description ：更新Thymeleaf文章
 * @Notes ：To change this template：Click IDEA-Preferences to search 'File Templates'
 */
@Controller
@RequestMapping("demo")
public class ThymeLeaf {

    @RequestMapping("A")
    public String a(Model model){

        //
        model.addAttribute("diyword","我是DIYWORD");

        // 对象数据
        UserInfo userInfo = new UserInfo(1,"张三",1);
        UserInfo userInfo2 = new UserInfo(1,"张三",1);
        ArrayList<UserInfo> diskInfo = new ArrayList<>();
        diskInfo.add(userInfo);
        diskInfo.add(userInfo2);
        model.addAttribute("keys",userInfo);


        // map数据
        Map map = new HashMap();
        map.put("id","001");
        map.put("name","张三");
        map.put("age","15");
        map.put("sex","男");
        model.addAttribute("allmap",map);


        // 数组
        String[] shuzu = {"zhangsan","lisi","wangwu","zhaoliu"};
        model.addAttribute("allshuzu",shuzu);

        // 日期
        model.addAttribute("nowTime",new Date());

        // 判断
        model.addAttribute("age",20);
        return "A"; // 找/resource/template/A.html
    }
}

注意：ThymeLeaf默认的文件路径是Resource/template/。我们所有Thymeleaf的网页都要放在其中

A.html

<!DOCTYPE html>
<!--这个标头不能忘记：xmlns:th="http://www.thymeleaf.org"-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Demo</title>
</head>
<body>
<h1 style="text-align: center">IDEA 可以直接修改Thymeleaf文件, 在Idea打开的浏览器再次聚焦即可看到结果</h1>
<h3>p标签 追加el表达式 el表达式的内容是：读取后端返回的diyword 进行展示
    ?words=你好</h3>
<h4 th:text="${diyword}">展示的内容：</h4>

<br><br>
<h2>表单提交</h2>
<form th:action="@{/thy/thymeleafdemo}">
    <input th:placeholder="请输入内容" th:name="words">
    <button>提交</button>
</form>

<br><br>
<h2>对象展示</h2>
<table>
    <tr>
        <td>代理对象序号</td>
        <td>对象id字段</td>
        <td>对象name字段</td>
        <td>对象isDelete字段</td>
    </tr>
    <!-- key 是每一个元素,anyName仅仅是代理对象,实际生效的是${keys}}-->
    <tr th:each="key,anyName:${keys}">
        <td>
            <span th:text="${anyName.index}+1"></span>
        </td>
        <td>
            <span th:text="${key.id}"></span>
        </td>
        <td>
            <span th:text="${key.name}"></span>
        </td>
        <td>
            <span th:text="${key.isDelete}"></span>
        </td>
    </tr>

</table>

<br><br>
<h2>map遍历</h2>
<div th:each="element,AnyName:${allmap}">
    <!--<div th:text="${key}"></div>-->
    元素对象key:<span th:text="${element.key}"/>
    value:<span th:text="${element.value}"/>
    <br>
    代理对象key:<span th:text="${AnyName.current.key}"/>
    value:<span th:text="${AnyName.current.value}"/>
    <br>
</div>


<br><br>
<h2>数组遍历</h2>
<div th:each="element,AnyName:${allshuzu}">
    <!--这里 index+1 等价于 count-->
    <span th:text="${AnyName.count}"></span>
    <span th:text="${AnyName.index+1}"></span>
    <span th:text="${element}"></span>
</div>


<br><br>
<h2>时间遍历</h2>
<span th:text="${#dates.format(nowTime,'yyyy年MM月dd日 hh时mm分ss秒')}"></span>

<br><br>
<h2>判断</h2>
<span th:if="${(age > 21)}">大于21</span>
<span th:if="${(age <= 21)}">小于等于21</span>

<br><br>
<h2>引入其他文件的div块 </h2>
<h4>方法:include="目标文件名::被(th:fragment标记为about)的内容"</h4>
<div th:include="footer::aboutus"></div>
</body>
</html>

footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我是页脚</title>
</head>
<body>
<div id="C" th:fragment="aboutus">我是被引入内容：Design By Dazen。Website：https://www.zanglikun.com<br></div>
</body>
</html>

测试结果：

Thymeleaf Demo

IDEA 可以直接修改Thymeleaf文件, 在Idea打开的浏览器再次聚焦即可看到结果

p标签 追加el表达式 el表达式的内容是：读取后端返回的diyword 进行展示 方法传递的参数是String word 你可在请求路径上加 ?words=你好

我是DIYWORD



表单提交



对象展示

代理对象序号 对象id字段 对象name字段 对象isDelete字段
1 1 张三 1


map遍历

元素对象key:sex value:男
代理对象key:sex value:男
元素对象key:name value:张三
代理对象key:name value:张三
元素对象key:id value:001
代理对象key:id value:001
元素对象key:age value:15
代理对象key:age value:15


数组遍历

1 1 zhangsan
2 2 lisi
3 3 wangwu
4 4 zhaoliu


时间遍历

2022年11月03日 01时48分31秒

判断

小于等于21

引入其他文件的div块

方法:include=”目标文件名::被(th:fragment标记为about)的内容”

我是被引入内容：Design By Dazen。Website：https://www.zanglikun.com
特殊说明：
上述文章均是作者实际操作后产出。烦请各位，请勿直接盗用！转载记得标注原文链接：www.zanglikun.com
第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取最新全部资料 ❤