Thymeleaf

最新推荐文章于 2023-06-27 16:22:01 发布

m0_50242319

最新推荐文章于 2023-06-27 16:22:01 发布

阅读量220

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_50242319/article/details/109272672

版权

1.Thymeleaf介绍

thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。

Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。
它的特点便是：开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：
1.XML
2.有效的XML
3.XHTML
4.有效的XHTML
5.HTML5
6.旧版HTML5
所有这些模式都指的是格式良好的XML文件，但Legacy HTML5模式除外，它允许您处理HTML5文件，其中包含独立（非关闭）标记，没有值的标记属性或不在引号之间写入的标记属性。为了在这种特定模式下处理文件，Thymeleaf将首先执行转换，将您的文件转换为格式良好的XML文件，这些文件仍然是完全有效的HTML5（实际上是创建HTML5代码的推荐方法）1。
另请注意，验证仅适用于XML和XHTML模板。
然而，这些并不是Thymeleaf可以处理的唯一模板类型，并且用户始终能够通过指定在此模式下解析模板的方法和编写结果的方式来定义他/她自己的模式。这样，任何可以建模为DOM树（无论是否为XML）的东西都可以被Thymeleaf有效地作为模板处理。

2.Springboot整合thymeleaf

使用springboot 来集成使用Thymeleaf可以大大减少单纯使用thymleaf的代码量，所以我们接下来使用springboot集成使用thymeleaf.

实现的步骤为：

创建一个sprinboot项目
添加thymeleaf的起步依赖
添加spring web的起步依赖
编写html 使用thymleaf的语法获取变量对应后台传递的值
编写controller 设置变量的值到model中

跟spring mvc 方式很相似

(1)创建工程

创建一个独立的工程springboot-thymeleaf,该工程为案例工程

pom.xml依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
    </parent>
    <groupId>com.zb</groupId>
    <artifactId>mythyme</artifactId>
    <version>1.0-SNAPSHOT</version>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>
</project>

(2)创建html

在resources中创建templates目录，在templates目录创建 demo1.html,代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf的入门</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body><!--输出hello数据--><p th:text="${hello}"></p>
</body>
</html>

解释：
<html xmlns:th="http://www.thymeleaf.org">:这句声明使用thymeleaf标签
<p th:text="${hello}"></p>:这句使用 th:text=“${变量名}” 表示使用thymeleaf获取文本数据，类似于EL表达式。

(3)修改application.yml配置

创建application.yml,并设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试。

spring:
  thymeleaf:
    cache: false

还有一些默认的配置。比如spring mvc 中获取路径，配置xml 文件加上前缀后缀。去找到页面。 thymeleaf 默认就给我们加好了。只要按照规矩写就行。

(4)控制层

创建controller用于测试后台设置数据到model中。

@Controller
public class MyDemoController {

    @GetMapping("/hello")
    public String hello(Model model){
        model.addAttribute("hello","测试");

        Map<String,Object> dataMap = new HashMap<String,Object>();
        dataMap.put("No","123");
        dataMap.put("address","深圳");
        model.addAttribute("dataMap",dataMap);

        String [] arr = {"篮球","足球","乒乓球"};
        model.addAttribute("arr",arr);
        model.addAttribute("now",new Date());
        model.addAttribute("age",15);
        model.addAttribute("a","aclass");
        model.addAttribute("b","bclass");
        return "demo1";
    }
}

（5）测试

创建启动类com.zb.ThymeleafApplication，代码如下：

@SpringBootApplication
public class ThymeleafApplication {
    public static void main(String[] args) {
        SpringApplication.run(ThymeleafApplication.class,args);
    }
}

html页面

 <span th:text="${hello}"></span>
    <form th:action="@{hello}">
        <button>提交</button>
    </form>
    map
    <div th:each="map,mapsta:${dataMap}">
        <div th:text="${map}"></div>
        <span th:text="${mapsta.current.key}"></span>
        <span th:text="${mapsta.current.value}"></span>
        ========================================
    </div>
    数组
    <div th:each="ar,arrta:${arr}">
        <span th:text="${ar}"></span>
        <span th:text="${arrta.count}"></span>
        ========================================
    </div>
    时间
    <div th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></div>!!!!
    <span th:if="${(age>=18)}">长大了！</span>
    <span th:unless="${(age<18)}">为成年</span>

    <a href="" th:class="|${a} ${b}|">一个连接</a>
    <script th:inline="javascript">
        var hhh = [[${hello}]];
        alert(hhh);
    </script>

页面
在这里插入图片描述

m0_50242319

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf

1.Thymeleaf介绍 thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于
复制链接

扫一扫