Thymeleaf

什么是Thymeleaf？

Thymeleaf 官网原话：Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
翻译：Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎

什么是模板引擎？

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的html文档。
模板引擎，最重要的就是模板二字，就是事先做好一个模板，要用到时把数据套上去，最终生成一个html文件出来。
eg：开会；高中时学校开会要提前申请布置场地，买东西，等等一系列准备工作，结束又要清掉。但到大学里，开会是人到教室里，场地，麦克风，水等都是现成的，人到齐就可以直接开始了，结束了东西下次还可以复用。而模板引擎就是这样，开箱即用，将模板设计好后就可以直接套用数据，而不需要重新设计整个页面，提高设计页面的便捷性和可复用性。
模板引擎在web领域的主要作用：让网站实现界面和数据分离，这样大大提高了开发效率，让代码重用更加容易。

Thymeleaf介绍

是springbook官方推荐的第三方模板引擎。
Thymeleaf的主要目标是为您的开发工作流程带来优雅自然的模板-HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而可以在开发团队中加强协作
Thymeleaf拥有适用于Spring Framework的模块，与您喜欢的工具的大量集成以及插入您自己的功能的能力，对于现代HTML5 JVM Web开发而言，Thymeleaf是理想的选择

优点：

动静分离： Thymeleaf选用html作为模板页，这是任何一款其他模板引擎做不到的！Thymeleaf使用html通过一些特定标签语法代表其含义，但并未破坏html结构（Thymeleaf模板基于html，后缀也是.html），即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便界面的测试和修改。其他如传统的jsp是将html文件转换成.jsp文件，在进行修改，浏览器是无法直接打开的，要借助网络（服务器）才能访问。
动静分离：动态页面每次修改打开都需要重新启动程序、输入链接，这个过程其实是相对漫长的。如果界面设计人员用这种方式进行页面设计时间成本高并且很麻烦，可通过静态页面设计样式，设计完成通过服务端访问即可达成目标UI的界面和应用，达到动静分离的效果。这个特点和优势是所有模板引擎中Thymeleaf所独有的！
开箱即用： Thymeleaf提供标准和Spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言
Springboot官方大力推荐和支持，Springboot官方做了很多默认配置，开发者只需编写对应html即可，大大减轻了上手难度和配置复杂度。

Thymeleaf程序

在创建springbook文件时添加Web 模块的Spring web依赖以及Template 模块的Thymeleaf依赖。或者在pom.xml中添加以下依赖：

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

index.html：

开头

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

访问网址http://localhost:8080/index

常用标签

标签	作用	示例
th:id	替换id	`<input th:id="${user.id}"/>`
th:text	文本替换	`<p text:="${user.name}">bigsai</p>`
th:utext	支持html的文本替换	`<p utext:="${htmlcontent}">content</p>`
th:object	替换对象	`<div th:object="${user}"></div>`
th:value	替换值	`<input th:value="${user.name}" >`
th:each	迭代	`<tr th:each="student:${user}" >`
th:href	替换超链接	`<a th:href="@{index.html}">超链接</a>`
th:src	替换资源	`<script type="text/javascript" th:src="@{index.js}"></script>`

链接表达式: @{…}

引入css

 <link rel="stylesheet" th:href="@{index.css}">

引入JavaScript：

 <script type="text/javascript" th:src="@{index.js}"></script>

超链接：

<a th:href="@{index.html}">超链接</a>

变量表达式: ${...}

创建一个对象

package org.example.sh.beans;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Us {
    private String name;
    private int id;
    private String pwd;
}

Controller

@Controller
public class UsController {
//    @GetMapping("index")//页面的url地址
    @RequestMapping("/index3")
    public String getindex(Model model)//对应函数
    {
        Us user1=new Us("bigsai",22,"一个幽默且热爱java的社会青年");
        List<String> userList=new ArrayList<>();
        userList.add("zhang san 66");
        userList.add("li si 66");
        userList.add("wang wu 66");
        Map<String ,String> map=new HashMap<>();
        map.put("place","博学谷");
        map.put("feeling","very well");
        //数据添加到model中
        model.addAttribute("name","bigsai");//普通字符串
        model.addAttribute("user",user1);//储存javabean
        model.addAttribute("userlist",userList);//储存List
        model.addAttribute("map",map);//储存Map
        return "index2";//与templates中index.html对应
    }
}

controller中的Model直接存储某字符串，我们可以直接${对象名}进行取值。

取普通字符串：

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
hello 第一个Thymeleaf程序
<div th:text="${name}">name是bigsai(我是离线数据)</div>
<div th:text="${user.id}"></div>//取Us类中的id的值
<div th:text="${user['pwd']}"></div>//等于上一个形式
</body>
</html>

离线状态：

线上：

取List集合(each):

List是一个集合，each循环遍历这个集合里的值，

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<table>
    <tr th:each="item:${userlist}">
        <td th:text="${item}">
        </td>
    </tr>
</table>
</body>
</html>

直接取Map:

值不仅可以存在bean中，也可以存在Map中。

${Map名['key']},${Map名.key},${map.get('key')}三种方式取值

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
hello 第一个Thymeleaf程序
<div th:text="${name}">name是bigsai(我是离线数据)</div>
<div th:text="${user.id}">name是bigsai(我是离线数据)</div>
<div th:text="${user['pwd']}">name是bigsai(我是离线数据)</div>
<table>
    <tr th:each="item:${userlist}">
        <td th:text="${item}">
        </td>
    </tr>
    <tr>
        <td>place:</td>
        <td th:text="${map.get('place')}"></td>
    </tr>
    <tr>
        <td>feeling:</td>
        <td th:text="${map['feeling']}"></td>
    </tr>
    <tr>
        <td>feeling:</td>
        <td th:text="${map.feeling}"></td>
    </tr>
</table>
</body>
</html>

遍历Map：

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
hello 第一个Thymeleaf程序
<div th:text="${name}">name是bigsai(我是离线数据)</div>
<div th:text="${user.id}">name是bigsai(我是离线数据)</div>
<div th:text="${user['pwd']}">name是bigsai(我是离线数据)</div>
<table>
    <tr th:each="item:${userlist}">
        <td th:text="${item}">
        </td>
    </tr>
    <tr>
        <td>place:</td>
        <td th:text="${map.get('place')}"></td>
    </tr>
    <tr>
        <td>feeling:</td>
        <td th:text="${map['feeling']}"></td>
    </tr>
    <tr>
        <td>feeling:</td>
        <td th:text="${map.feeling}"></td>
    </tr>
    <tr th:each="item:${map}">
        <td th:text="${item.key}"></td>
        <td th:text="${item.value}"></td>
    </tr>
</table>
</body>
</html>

选择变量表达式: *{...}

${...}=*{...}

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
    <div th:object="${user}">
        <p>Name: <span th:text="*{name}">赛</span>.</p>
        <p>Age: <span th:text="*{id}">18</span>.</p>
        <p>Detail: <span th:text="*{pwd}">好好学习</span>.</p>
    </div>
</table>
</body>
</html>

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div >
    <p>Name: <span th:text="*{user.name}">赛</span>.</p>
    <p>Age: <span th:text="${user.id}">18</span>.</p>
    <p>Detail: <span th:text="${user.pwd}">好好学习</span>.</p>
</div>
</table>
</body>
</html>

消息表达: #{...}

templates目录下建立home.properties,写入：

bigsai.name=bigsai
bigsai.age=22
province=Jiang Su

在application.properties中加入以下内容：

spring:
  messages:
    basename: templates/home

html：

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<tr>
    <td>name:</td>
    <td th:text="#{bigsai.name}"></td>
</tr>
<tr>
    <td>年龄:</td>
    <td th:text="#{bigsai.age}"></td>
</tr>
<tr>
    <td>province:</td>
    <td th:text="#{province}"></td>
</tr>
</table>
</body>
</html>

总结：

Thymeleaf是一种Java模板引擎，被Springboot官方推荐，大大提高开发效率，提高代码复用率。虽然在当今Ajax更为流行，但对于后端开发工程师掌握Thymeleaf，拥有快速开发网页能力，还是很有必要的！

posted on 2023-03-16 22:24 阿霖找BUG 阅读(40) 评论(0) 收藏举报