Thymeleaf 操作 2021.6.15

2024-03-13 07:53:08

目录

  1. 什么是Thymeleaf

  2. 模板引擎介绍 Thymeleaf介绍

  3. 学习Thymeleaf必知的知识点

  4. Springboot MVC介绍

  5. 动静分离

  6. 第一个Thymeleaf程序 创建程序，添加依赖 编写controller 编写Thymeleaf页面 启动程序

  7. Thymeleaf语法详解 配置 常用标签

  8. 链接表达式: @{…} 变量表达式: ${…} 选择变量表达式: *{…}

    消息表达: #{…}

什么是Thymeleaf

大家好，我是bigsai，今天我们来学习Thymeleaf，如果你对Thymeleaf比较陌生也不要紧，它很容易学习与理解，并有着自己鲜明的特色。

Thymeleaf 操作 2021.6.15

开始之前，我们依旧问一个问题：什么是Thymeleaf？

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

模板引擎介绍
模板引擎？你可能第一次听说模板引擎，估计你会禁不住想问：什么是模板引擎？

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的html文档。从字面上理解模板引擎，最重要的就是模板二字，这个意思就是做好一个模板后套入对应位置的数据，最终以html的格式展示出来，这就是模板引擎的作用。
对于模板引擎的理解，可以这样形象的做一个类比：开会！
相信你在上学初高中时候每次开会都要提前布置场地、拿小板凳、收拾场地。而你上了大学之后每次开会再也不去大操场了,每次开会都去学校的大会议室，桌子板凳音响主席台齐全，来个人即可，还可复用……。模板引擎的功能就类似我们的会议室开会一样开箱即用，将模板设计好之后直接填充数据即可而不需要重新设计整个页面。提高页面、代码的复用性。

不仅如此，在Java中模板引擎还有很多，模板引擎是动态网页发展进步的产物，在最初并且流传度最广的jsp它就是一个模板引擎。jsp是官方标准的模板，但是由于jsp的缺点比较多也挺严重的，所以很多人弃用jsp选用第三方的模板引擎，市面上开源的第三方的模板引擎也比较多，有Thymeleaf、FreeMaker、Velocity等模板引擎受众较广。

听完了模板引擎的介绍，相信你也很容易明白了模板引擎在web领域的主要作用：让网站实现界面和数据分离，这样大大提高了开发效率，让代码重用更加容易。

Thymeleaf介绍

上面知晓了模板引擎的概念和功能，你也知道Thymeleaf是众多模板引擎的一种，你一定会好奇想深入学习Thymeleaf的方方面面。从官方的介绍来看，Thymeleaf的目标很明确：

Thymeleaf的主要目标是为您的开发工作流程带来优雅自然的模板-HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而可以在开发团队中加强协作。
Thymeleaf拥有适用于Spring Framework的模块，与您喜欢的工具的大量集成以及插入您自己的功能的能力，对于现代HTML5 JVM Web开发而言，Thymeleaf是理想的选择——尽管它还有很多工作要做。
并且随着市场使用的验证Thymeleaf也达到的它的目标和大家对他的期望，在实际开发有着广泛的应用。Thymeleaf作为被Springboot官方推荐的模板引擎，一定有很多过人和不寻同之处：

动静分离：

Thymeleaf选用html作为模板页，这是任何一款其他模板引擎做不到的！Thymeleaf使用html通过一些特定标签语法代表其含义，但并未破坏html结构，即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便界面的测试和修改。

开箱即用：

Thymeleaf提供标准和Spring标准两种方言，可以直接套用模板实现JSTL、
OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Springboot官方大力推荐和支持，Springboot官方做了很多默认配置，开发者只需编写对应html即可，大大减轻了上手难度和配置复杂度。
此外，Thymeleaf在曾经还有一次大的版本升级，从Thymeleaf2.0—>Thymeleaf3.0。在Thymeleaf2.0时代，Thymeleaf基于xml实现，虽然它带来了许多出色强大的功能，但有时会降低性能效率，那个时候Thymeleaf的性能真的太差而被很多人所吐槽带来了很不好的印象。

Springboot

相信你对Springboot都很熟悉，我们使用Thymeleaf大多情况都是基于Springboot平台的，并且Thymeleaf的发展推广也离不开Springboot官方得支持，且本文的实战部分也是基于Springboot平台。

而Spring
Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring
Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。

简而言之，Springboot是当前web开发主流，且其简化了Spring的配置让开发者能够更容易上手Web项目的开发。且Thymeleaf能够快速整合入Springboot，使用方便快捷。

MVC介绍

我们使用的Thymeleaf模板引擎在整个web项目中起到的作用为视图展示(view)，谈到视图就不得不提起模型(model)以及控制器(view),其三者在web项目中分工和职责不同，但又相互有联系。三者组成当今web项目较为流行的MVC架构。

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，其中：

Model（模型）表示应用程序核心（用来存储数据供视图层渲染）。 View（视图）显示数据，而本篇使用的就是Thymeleaf作为视图。
Controller（控制器）处理输入请求，将模型和视图分离。
使用MVC设计模式程序有很多优点，比如降低程序耦合、增加代码的复用性、降低开发程序和接口的成本，并且通过这样分层结构在部署维护能够提供更大的便捷性。

在Java
web体系最流行的MVC框架无疑就是Springmvc框架了，在项目中经常配合模板引擎使用或者提供Restful接口。在下面案例Thymeleaf同样使用Springmvc作为MVC框架进行控制。

具体效果可以参照下图,下图即为一个动静结合的实例。

右上角为动态页面通过服务端访问，数据显示为服务端提供的数据，样式依然为html的样式
右下角为静态页面可通过浏览器直接打开，数据为初始的数据

Thymeleaf 操作 2021.6.15

动态页面每次修改打开都需要重新启动程序、输入链接，这个过程其实是相对漫长的。如果界面设计人员用这种方式进行页面设计时间成本高并且很麻烦，可通过静态页面设计样式，设计完成通过服务端访问即可达成目标UI的界面和应用，达到动静分离的效果。这个特点和优势是所有模板引擎中Thymeleaf所独有的！

第一个Thymeleaf程序

上面既然简单介绍了Thymeleaf,下面咱们着手实战第一个Thymeleaf程序。考虑到Thymeleaf被Springboot官方推荐，并且Springboot已成为javaweb领域必不可少的技术点，咱们就用IDEA基于Springboot构建第一个Thymeleaf程序。Thymeleaf提供了一组Spring集成，使您可以将其用作Spring
MVC应用程序中JSP的全功能替代品。对于构建一个完整程序，创建第一个Thymeleaf程序需要以下几个步骤：

  1. 创建程序，

  2. 添加依赖

  3. 编写Controller

  4. 编写Thymeleaf页面

    首先，打开你的IDEA创建新项目，选择Spring Initializr方式创建Springboot项目 ，然后点击next。

具体如下图所示。
Thymeleaf 操作 2021.6.15点击next之后，我们进行next 填写好Group(一般com或者com.xxx)和Aritifact(一般项目名)创建。其他地方没有特殊情况不需要修改，具体如下图：
Thymeleaf 操作 2021.6.15
IDEA的编译器做的很友好，可以直接选择热门的依赖而不需要去进行寻找，我们勾选其中Web 模块的Spring web依赖以及Template 模块的Thymeleaf依赖。finish 即可：
Thymeleaf 操作 2021.6.15
当然，如果你创建项目时没有勾选依赖也不要紧，在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>

就这样，程序创建完毕，依赖也成功添加，你就可以在此基础上正式开始你的个性化操作。
编写controller
在编写Controller和Thymeleaf之前，先让你看一下最终项目的目录结构，有个初略的印象和概念：
Thymeleaf 操作 2021.6.15
在其中：

  1. pom.xml：是项目中的Maven依赖，因为Springboot使用Maven来管理外部jar包依赖，我们只需填写依赖名称配置即可引入该依赖，在本系统中引入Spring

  2. web模块(Springmvc)和Thymeleaf的依赖.我们不需要自己去招相关jar包。

  3. application.properties: 编写Springboot与各框架整合的一些配置内容。

  4. controller：用来编写控制器，主要负责处理请求以及和视图(Thymeleaf)绑定。

  5. static：用于存放静态资源，例如html、JavaScript、css以及图片等。

  6. templates：用来存放模板引擎Thymeleaf(本质依然是.html文件) 项目基于Springboot框架，且选了Spring web(Springmvc)作为mvc框架，其中Thymeleaf就是v(view)视图层，我们需要在controller中指定Thymeleaf页面的url，然后再Model中绑定数据。

我们在com.Thymeleaf文件下创建controller文件夹，在其中创建urlController.java的controller文件，文件内容(代码)为：

package com.Thymeleaf.controller;

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

@Controller
public class urlController {
    @GetMapping("index")//页面的url地址
    public String getindex(Model model)//对应函数
    {
        model.addAttribute("name","bigsai");
        return "index";//与templates中index.html对应
    }
}

上述代码就是一个完整的controller。部分含义如下：

  1. @controller 注解的意思就是声明这个java文件为一个controller控制器。

  2. @GetMapping(“index”)
    其中@GetMapping的意思是请求的方式为get方式(即可通过浏览器直接请求)，而里面的index表示这个页面(接口)的url地址(路径)。即在浏览器对项目网页访问的地址。

  3. getindex()
    是@GetMapping(“index”)注解对应的函数，其类型为String类型返回一个字符串，参数Model类型即用来储存数据供我们Thymeleaf页面使用。

  4. model.addAttribute(“name”,“bigsai”)就是Model存入数据的书写方式，Model是一个特殊的类，相当于维护一个Map一样，而Model中的数据通过controller层的关联绑定在view层(即Thymeleaf中)可以直接使用。

  5. return “hello”：这个index就是在templates目录下对应模板(本次为Thymeleaf模板)的名称，即应该对应hello.html这个Thymeleaf文件(与页面关联默认规则为：templates目录下返回字符串.html)。

编写Thymeleaf页面

咱们在项目的resources目录下的templates文件夹下面创建一个叫index.html的文件，咱们在这个html文件中的标签修改为

`<html xmlns:th="http://www.thymeleaf.org">`

这样在Thymeleaf中就可以使用Thymeleaf的语法和规范啦。

对于第一个Thymelaf程序，你只需将index.html文件改成这样即可：

<!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>
</body>
</html>

你可能会对

name是bigsai(我是离线数据) 感到陌生，这个标签中的th:text="${name}"就是Thymeleaf取值的一个语法，这个值从后台渲染而来(前面controller中在Model中存地值)，如果没网络(直接打开html文件)的时候静态数据为：name是bigsai(我是离线数据)。而如果通过网络访问那么内容将是前面在controller的Model中储存的bigsai。
启动程序
这样写好之后咱们执行这个Springboot程序。通过网络访问http://localhost:8080/index
Thymeleaf 操作 2021.6.15
上图左侧为直接打开的静态页面，而右侧是通过网络访问服务端返回的动态界面，可以看的到，界面的内容和我们预期一致，左右两侧也正是静动态页面的两个代表。

通过以上的步骤，你就完成了第一个Thymeleaf程序并且能够成功运行。入门便悄然开始！

常用标签
咱们上面知道Thymeleaf通过特殊的标签来寻找属于Thymeleaf的部分，并渲染该部分内容，而除了上面展示过的th:text之外还有很多常用标签，并且Thymeleaf也主要通过标签来识别替换对应位置内容，Thymeleaf标签有很多很多，功能也很丰富，这里列举一些比较常用的标签如下：
Thymeleaf 操作 2021.6.15
链接表达式: @{…}
上面我们已经学习到Thymeleaf是一个基于html的模板引擎，但是我们还是需要加入特定标签来声明和使用Thymeleaf的语法。我们需要在Thymeleaf的头部加Thymeleaf标识：

1 在Thymeleaf 中，如果想引入链接比如link，href，src，需要使用@{资源地址}引入资源。其中资源地址可以static目录下的静态资源，也可以是互联网中的绝对资源。

引入css

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

引入JavaScript：

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

超链接：

<a th:href="@{index.html}">超链接</a>
上一篇：使用Thymeleaf开发Web项目


下一篇：Thymeleaf前后端传值 页面取值与js取值