标签：15 Springboot 2021.6 controller html Thymeleaf 引擎 模板

目录

1. 什么是Thymeleaf

2. 模板引擎介绍 Thymeleaf介绍

3. 学习Thymeleaf必知的知识点

4. Springboot MVC介绍

5. 动静分离

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

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

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

   消息表达: #{…}

什么是Thymeleaf

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

开始之前，我们依旧问一个问题：什么是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的样式
右下角为静态页面可通过浏览器直接打开，数据为初始的数据

动态页面每次修改打开都需要重新启动程序、输入链接，这个过程其实是相对漫长的。如果界面设计人员用这种方式进行页面设计时间成本高并且很麻烦，可通过静态页面设计样式，设计完成通过服务端访问即可达成目标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。

具体如下图所示。
点击next之后，我们进行next 填写好Group(一般com或者com.xxx)和Aritifact(一般项目名)创建。其他地方没有特殊情况不需要修改，具体如下图：

IDEA的编译器做的很友好，可以直接选择热门的依赖而不需要去进行寻找，我们勾选其中Web 模块的Spring web依赖以及Template 模块的Thymeleaf依赖。finish 即可：

当然，如果你创建项目时没有勾选依赖也不要紧，在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之前，先让你看一下最终项目的目录结构，有个初略的印象和概念：

在其中：

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程序并且能够成功运行。入门便悄然开始！

常用标签
咱们上面知道Thymeleaf通过特殊的标签来寻找属于Thymeleaf的部分，并渲染该部分内容，而除了上面展示过的th:text之外还有很多常用标签，并且Thymeleaf也主要通过标签来识别替换对应位置内容，Thymeleaf标签有很多很多，功能也很丰富，这里列举一些比较常用的标签如下：

链接表达式: @{…}
上面我们已经学习到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>

标签：15,Springboot,2021.6,controller,html,Thymeleaf,引擎,模板
来源： https://blog.csdn.net/m0_47313047/article/details/117930618

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。