官网: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博客搜索:标题关键字。以获取全部资料 ❤