thymeleaf页面模板（thymeleaf分页页面怎么写）

本文目录一览：

• 1、04《Spring Boot 入门教程》使用模板引擎开发 Web 项目
• 2、SpringBoot页面展示Thymeleaf
• 3、thymeleaf模板HTML中引用css但背景图片只显示了一半
• 4、Thymeleaf 5 分钟教程
• 5、SpringBoot Security 整合thymeleaf模板自定义登录页面，按需提示错误信息
• 6、使用thymeleaf模板引擎抽取公共页面

04《Spring Boot 入门教程》使用模板引擎开发 Web 项目

模板引擎这个词，咋听起来，有点高大上的意味。

实际上，模板引擎是非常平易近人的技术。譬如大家可能都比较熟悉的 JSP ，就是一种比较典型的模板引擎。

当浏览器将请求抛给控制器，控制器处理好数据后，就跳转 JSP 等模板引擎页面。注意在跳转的同时，还会将数据组装好，也交给模板引擎处理。

模板引擎会根据数据，和模板引擎的规则，动态生成 HTML 页面，最后返回给浏览器显示。

我们使用 Spring Boot 开发 Web 项目，大体上有两种方式。

第一种方式，是后端服务化的方式，也是当前的主流方式。前端是静态的 HTML 页面，通过 Ajax 请求 Spring Boot 的后端接口。 Spring Boot 返回数据一般采用 JSON 格式，前端接收后将数据显示。

第二种方式，是采取模板引擎的方式。前端的请求，到达 Spring Boot 的控制器后，控制器处理请求，然后将返回数据交给模板引擎。模板引擎负责根据数据生成 HTML 页面，最后将 HTML 返回给浏览器。

我个人比较推荐第一种方式，说一下该方式的几个优点：

本篇是讲模板引擎，也得说说模板引擎的优点，王婆卖瓜不能光夸草莓啊。模板引擎开发的页面，对搜索引擎 SEO 比较友好；还有就是简单的页面，如果用模板引擎开发速度比较快，毕竟模板化的方法，目的就是减少重复提高效率。

Spring Boot 支持的模板引擎种类很多，常见的有 FreeMarker 、 Thymeleaf 、 JSP 。

因为这些模板引擎使用的用户都不少，所以我们逐一介绍下其实现过程。

至于孰优孰劣，请各位看官自行评价。正所谓：尺有所短，寸有所长，各取所爱，万物生长！

本篇我们开发一个商品浏览项目实例。

此处说一个我个人的经验：在做一个项目或一个模块的时候，不要一开始就动手写代码，最好是谋定而后动。

我们作为程序员，实际上是整个程序世界的总指挥。应该先整体规划，再实现局部。这种总分型的开发方法便于我们理顺思路，提高编码效率！

好的，我们来思考下，实现商品浏览项目实例的整体流程：

整体流程

可以看到，我们是先建立了控制器方法和页面，再去实现其中的具体细节。这样可以让我们的思维保持连贯性和整体性，在做一些页面和方法较多的项目时，会感觉更加顺畅。

我们按整体流程，使用 FreeMarker 模板引擎，来实现商品浏览功能。

使用 Spring Initializr 创建项目，Spring Boot 版本选择 2.2.5 ， Group 为 com.imooc ， Artifact 为 spring-boot-freemarker ，生成项目后导入 Eclipse 开发环境。

引入 Web 项目及 FreeMarker 模板相关的依赖项，代码如下：

实例：

创建控制器类，由于是商品相关的控制器，所以命名为 GoodsController ，代码如下：

实例：

我们具体解释下该类的作用。

我们 resource/templates 目录下新建商品页面 goods.ftl ，先不必实现具体功能，代码如下：

实例：

此时我们启动项目，然后访问 ，即可显示对应页面内容。

定义商品类 GoodsDo 用来描述商品信息，注意 Do 表示数据模型对象（Data Object），代码如下：

实例：

然后我们编写服务类 GoodsService ，提供获取商品列表的方法。注意此处仅仅是演示模板引擎，并不需要访问数据库，直接返回一个指定内容的商品列表。

实例：

此时，我们的控制器就可以注入 GoodsService 类型的组件，然后调用其方法了。

实例：

注意 model.addAttribute("goodsList", goodsService.getGoodsList()); ，我们将商品列表相关的数据交给模板引擎去处理。

此时我们可以根据 FreeMarker 模板引擎，按模板规则显示商品信息了。

实例：

注意我们通过 FreeMarker 的模板语法，输出了商品列表信息。关于 FreeMarker 模板引擎更多的语法规则，感兴趣的同学可以后续查阅更多资料。

启动项目，打开浏览器访问 ，即可查看输出结果。

Thymeleaf 和 FreeMarker ，都是模板引擎，使用方法基本类似。此处我们仅仅是给出一个范例，不再做过多的解释。

使用 Spring Initializr 创建项目， Spring Boot 版本选择 2.2.5 ， Group 为 com.imooc ， Artifact 为 spring-boot-thymeleaf ，生成项目后导入 Eclipse 开发环境。

引入 Web 项目及 Thymeleaf 模板相关的依赖项。

实例：

创建控制器类， GoodsController ， Thymeleaf 直接使用 HTML 作为模板页面，故代码如下：

实例：

我们在 resource/templates 目录下新建商品页面 goods.html ，先不必实现具体功能，代码如下：

实例：

此时我们启动项目，然后访问 ，即可显示对应页面内容。

商品类 GoodsDo ，服务类 GoodsService ，这两个类与上面没有区别直接放出代码。

实例：

实例：

好的，此时我们的控制器就可以注入 GoodsService 类型的组件，然后调用其方法了。

实例：

此时我们可以根据 Thymeleaf 模板引擎，按模板规则显示商品信息了。

实例：

注意我们通过 Thymeleaf 的模板语法，输出了商品列表信息。关于 Thymeleaf 模板引擎更多的语法规则，感兴趣的同学可以后续查阅更多资料。

启动项目，打开浏览器访问 ，即可查看输出结果。

到此，大家基本上也能发现，这两种方式除了模板页面文件内容不同，其他地方基本都是一模一样的。

也就是说，模板引擎主要负责通过一些模板标签，将控制器返回的数据解析为网页。

注意 Spring Boot 官方已经不推荐使用 JSP 了，确实操作起来也比较麻烦。但是由于 JSP 用户体量还是比较大的，所以此处还是简单演示下，开发步骤与 FreeMarker / Thymeleaf 基本一致。

使用 Spring Initializr 创建项目， Spring Boot 版本选择 2.2.5 ， Group 为 com.imooc ， Artifact 为 spring-boot-jsp ，生成项目后导入 Eclipse 开发环境。

引入 Web 项目及 JSP 模板相关的依赖项。

实例：

创建控制器类， GoodsController ，代码如下：

实例：

手工添加 src/main/webapp 及子目录如下，同时目录下放一个 goods.jsp 用于测试。注意该目录是一个 Source Folder 源代码目录，不是普通文件夹目录。

spring-boot-jsp 项目结构

实例：

注意，我们还需要添加一个视图解析器，实现 JSP 页面往指定目录跳转。

实例：

此时我们启动项目，然后访问 ，即可显示对应页面内容。

商品类 GoodsDo ，服务类 GoodsService ，这两个类与上面没有区别直接放出代码。

实例：

实例：

好的，此时我们的控制器就可以注入 GoodsService 类型的组件，然后调用其方法了。

实例：

此时我们可以根据 JSP 模板引擎，按模板规则显示商品信息了。

实例：

注意我们通过 JSP 的模板语法，输出了商品列表信息。关于 JSP 模板引擎更多的语法规则，感兴趣的同学可以后续查阅更多资料。

启动项目，打开浏览器访问 ，即可查看输出结果。

最后大家应该也发现了， FreeMarker 和 Thymeleaf 的用法几乎是一模一样的，而 JSP 还需要手工添加一些目录和配置。

三种方式各有优劣， FreeMarker 模板语法比较简洁， Thymeleaf 可以直接使用 HTML 作为模板文件， JSP 用户群体广泛。

但是三种方式，都是一种模板引擎而已，将控制器返回数据转化为 HTML 页面显示，本质上没啥区别，大家对模板引擎有一个了解即可。

SpringBoot页面展示Thymeleaf

开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言

上面并没有列举所有SpringBoot支持的页面模板技术。其中Thymeleaf是SpringBoot官方所推荐使用的，下面来谈谈Thymeleaf一些常用的语法规则。

要想使用Thhymeleaf，首先要在pom.xml文件中单独添加Thymeleaf依赖。

Spring Boot默认存放模板页面的路径在 src/main/resources/templates 或者 src/main/view/templates ，这个无论是使用什么模板语言都一样，当然默认路径是可以自定义的，不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是 .html 。

在MVC的开发过程中，我们经常需要通过 Controller 将数据传递到页面中，让页面进行动态展示。

创建一个Controller对象，在其中进行参数的传递

在SpringBoot默认的页面路径下创建show.html文件，内容如下

可以看到在 p 标签中有 th:text 属性，这个就是thymeleaf的语法，它表示显示一个普通的文本信息。

如果我们要显示的信息是存在资源文件中的，同样可以在页面中显示，例如资源文件中定义了内容 welcome.msg=欢迎{0}光临！ 。可以在页面中将其显示

另外，在 th:utext 中还能做一些基础的数学运算

如果我们想要传递到的页面的信息，它本身是带有CSS样式的，这个时候如何在页面中将携带的样式信息也显示出来？此时我们的控制器方法这样写。

此时页面中需要借助 th:utext 属性进行显示

通过浏览器查看页面源码可以看出 th:utext 和 th:text 的区别是： th:text 会对 和 进行转义，而 th:utext 不会转义。

我们常常需要将一个bean信息展示在前端页面当中。

上面给出了两种展现方式，一种是通过${属性}，另外一种是通过 {属性}。

关于“${属性}”和“ {属性}”的区别？

$访问完整信息，而访问指定对象中的属性内容， 如果访问的只是普通的内容两者没有区别；

在 thymeleaf 之中提供有相应的集合的处理方法，例如：在使用 List 集合的时候可以考虑采用 get()方法获取指定索引的数据，那么在使用 Set 集合的时候会考虑使用 contains()来判断某个数据是否存在，使用 Map 集合的时候也希望可以使用 containsKey()判断某个 key 是否存在，以及使用get()根据 key 获取对应的 value，而这些功能在之前并不具备，下面来观察如何在页面中使用此类操作

在传统WEB工程开发时，路径的处理操作是有点麻烦的。SpringBoot中为我们简化了路径的处理。

页面之间的跳转也能通过@{}来实现

虽然在这种模版开发框架里面是不提倡使用内置对象的，但是很多情况下依然需要使用内置对象进行处理，所以下面来看下如何在页面中使用JSP内置对象。

thymeleaf 考虑到了实际的开发情况，因为 request 传递属性是最为常用的，但是 session 也有可能使用，例如：用户登录之后需要显示用户 id，那么就一定要使用到 session，所以现在必须增加属性范围的形式后才能够正常使用。在 thymeleaf 里面也支持有 JSP 内置对象的获取操作，不过一般很少这样使用。

所有的页面模版都存在各种基础逻辑处理，例如：判断、循环处理操作。在 Thymeleaf 之中对于逻辑可以使用如下的一些运算符来完成，例如：and、or、关系比较（、、=、=、==、!=、lt、gt、le、ge、eq、ne）。

通过控制器传递一些属性内容到页面之中：

不满足条件的判断

通过swith进行分支判断

在实际开发过程中常常需要对数据进行遍历展示，一般会将数据封装成list或map传递到页面进行遍历操作。

我们常常需要在一个页面当中引入另一个页面，例如，公用的导航栏以及页脚页面。thymeleaf中提供了两种方式进行页面引入。

可以看到页面当中还存在一个变量projectName，这个变量的值可以在引入页面中通过 th:with="projectName=百度" 传过来。

thymeleaf模板HTML中引用css但背景图片只显示了一半

可能程序不对。支持CSS3的浏览器里显示，可以用background-size来定义。如果你在不支持css3的浏览器里显示，可以给body定义一个子元素，宽度和高度都为100%，然后在这个子元素里加一个

回答于 2022-06-02

Thymeleaf 5 分钟教程

Thymeleaf 是一个用于 web 和独立环境的现代服务器端 Java 模板引擎。

Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板ー HTML，它既可以在浏览器中正确显示，也可以作为静态原型工作，从而加强开发团队之间的协作。

有了 Spring Framework 的模块、大量与您最喜欢的工具集成的功能，以及插入您自己功能的能力，Thymeleaf 是现代 HTML5 JVM web 开发的理想选择ーー尽管它可以做的还有很多。

用 Thymeleaf 语言编写的 HTML 模板看起来和工作方式仍然类似于 HTML，使得在应用程序中运行的实际模板仍然可以作为有用的设计工件工作。

Thymeleaf 3.0.11.RELEASE is the current stable version. It requires Java SE 6 or newer.

For the old 2.1.x branch, Thymeleaf 2.1.6.RELEASE is the latest version.

称为 Standard 和 SpringStandard ，这些方言定义了一组特性，对于大多数场景来说，这些特性应该足够了。 你可以识别这些标准方言何时在模板中使用，因为它包含以 th 前缀开头的属性，比如 span th: text..."。

Variable expressions.

Variable expressions

所以这相当于:

消息表达式(通常称为文本外部化、国际化或 i18n)允许我们从外部源(。 属性文件) ，通过键引用它们，并(可选地)应用一组参数。

因此，对于部署在 web 服务器的 / myapp 上下文中的 web 应用程序，可以使用如下表达式:

可以转换成这样的东西:

Url 也可以带参数:

导致这样的结果:

链接表达式可以是相对的，在这种情况下，没有应用程序上下文将前缀的 URL:

还有服务器相关(同样，没有应用程序上下文可以前缀) :

和 protocol-relative (就像绝对 url 一样，但是浏览器将使用与显示页面相同的 HTTP 或 HTTPS 协议) :

当然，Link 表达式可以是绝对的:

但是它们可以在任何地方使用，就像任何其他变量一样:

A good bunch of types of literals and operations are available:

Literals:

Text literals: 'one text', 'Another one!',…

Number literals: 0, 34, 3.0, 12.3,…

Boolean literals: true, false

Null literal: null

Literal tokens: one, sometext, main,…

Text operations: 文本运算

String concatenation: +

Literal substitutions: |The name is ${name}|

Arithmetic operations:

Binary operators: +, -, *, /, %

Minus sign (unary operator): -

Boolean operations: 布尔运算

Binary operators: and, or

Boolean negation (unary operator): !, not

Comparisons and equality: 比较运算

Comparators: , , =, = (gt, lt, ge, le)

Equality operators: ==, != (eq, ne)

Conditional operators: 条件运算

If-then: (if) ? (then)

If-then-else: (if) ? (then) : (else)

Default: (value) ?: (defaultvalue)

让我们来看看文学语言中的一些最基本的属性。 以 th: text 开始，它只是替换了标记的主体(请再次注意这里的原型化能力) :

接下来是 each，它会重复数组或表达式返回的元素的次数，并为迭代元素创建一个内部变量，其语法与 Java foreach 表达式相同:

最后，Thymeleaf 为特定的 XHTML 和 HTML5属性包含了许多 th 属性，这些属性只是评估它们的表达式并将这些属性的值设置为它们的结果。 他们的名字模仿了他们设置的属性值:

thymeleaf th:if表达式语法

网页应用

thymeleaf th:if表达式语法

SpringBoot Security 整合thymeleaf模板自定义登录页面，按需提示错误信息

使用SpringBoot Security进行登录验证，可以结合具体的业务需求来使用。在

SpringBoot Security前后端分离，登录退出等返回json

一文中，描述了前后端分离的情况下，如何进行登录验证和提示错误信息的。现在针对自定义的登录页面，能够精确地提示错误信息，做一个简单的演示demo。

本文使用的SpringBoot版本是2.1.4.RELEASE，下面直接进入使用阶段。

加上这个架包，重启项目后，整个项目就配置了登录拦截和验证。

不输入用户名和密码，直接点击登录时，会有提示信息，输入框的颜色还会变红。查看源码，可以发现，架包默认的登录页面提交方式为表单提交，method为post，并且默认是开启csrf的，在表单里自动生成了一个隐藏域，防止跨域提交，确保请求的安全性。

输入错误的用户名或密码，可以看到页面进行了跳转，跳转后的页面又回到了登录页，只是url地址后面多了一个参数，页面提示错误信息。

从页面源码，我们可以获得以下几个方面的信息：

如果页面是我们自己自定义的，如果要使用默认的过滤器获取登录信息，则必须使用post方式进行提交，如果使用ajax json的方式进行提交，则获取不到参数。

接下来自定义一个登录页面，为了快速构建登录页面，这里使用了thymeleaf模板。

在这个配置中，对登录页面进行了设置，设置使用自定义的登录页面，在Controller需要添加对应的页面渲染。

一个很丑的登录页面，这不是重点。重点是，登录名和密码正确时，页面可以正确的跳转，输入错误时，可以在登录页面进行信息提示。

在MyCustomUserService类中，我们设置了用户名为admin，密码为123456；输入其他的用户名称时，提示用户不存在；不输入用户名称，提示用户不能为空；密码不是123456时，提示密码错误；输入admin，123456时，页面前往index页面，下面进行验证。

使用thymeleaf模板引擎抽取公共页面

1、把公共部分放到一个公共页面common.html,注意：页面里边需要使用thymeleaf的名称空间xmlns:th=""

2、使用thymeleaf中的fragment定义截取片段th：fragment，或者使用id定义

3、定义片段完成后，需要参照官方文档里边的内容，引用片段，有th:insert、th:replace、th:include

这三种内容的区别是：

（1）th:insert:

总结：insert会把标签里边里面的所有内容给插入进去,div依旧保存

（2）th:replace方法

区别是div不见了，也就是说，把div给替换掉了，只保留片段的所有内容

（3）th:include方法

使用include之后，是把片段里边的内容给包含进去

4、演示使用include插入公共片段：（1）先把它的公共样式给删除

（2）使用th:include插入

关于thymeleaf页面模板和thymeleaf分页页面怎么写的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。