SpringBoot页面展示Thymeleaf

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

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

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

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

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

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

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

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

如果我们要显示的信息是存在资源文件中的，同样可以在页面中显示，例如资源文件中定义了内容 welcomemsg=欢迎{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=百度" 传过来。

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

实际上，模板引擎是非常平易近人的技术。譬如大家可能都比较熟悉的 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 版本选择 225 ， Group 为 comimooc ， Artifact 为 spring-boot-freemarker ，生成项目后导入 Eclipse 开发环境。

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

实例：

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

实例：

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

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

实例：

此时我们启动项目，然后访问 >

可以使用Thymeleaf提供的内联元素：[[]]

<script type="text/javascript" th:inline="javascript"> /<![CDATA[/

consolelog(/[[@{相对地址}]]/); /]]>/</script>

consolelog(/[[@{相对地址}]]/);里面的//作用是为了不让编辑器报错。

通过内联元素还可以在js中获取元素，和在Thymeleaf页面中一样。

  11   th:id    

         替换id标签

  12    th:text   

          文本替换，包括html标签

  13 th:utext   

        文本替换，html标签会显示出正确的样式

   14 th:object 

   替换对象， 用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。

15  th:value

属性赋值

16 th:with

定义局部变量。

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文, 以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >标记的范围内。

定义多个局部变量

17 th:style

设置样式

18 th:onclick

点击事件

19 th:each

属性赋值

110 th:if

 判断条件

111 th:unless

和th:if判断相反

112 th:href

链接地址

113 th:switch

多路选择配合th:case使用

114 th:fragment

自定义片段，定义fragment，所有的fragment可以写在一个文件里面，也可以单独存在

   115  th:insert

   保留自己的主标签，保留th:fragment的主标签。

  116  th:replace

  不要自己的主标签，保留th:fragment的主标签。

    117 th:include

    保留自己的主标签，不要th:fragment的主标签。（官方30后不推荐）

    结果为:

118 th:selectd

selected选择框选中

119 th:src

类地址引入

120 th:inline

定义js脚本可以使用变量

121 th:action

表单提交的地址

122 th:remove

删除某个属性

1all:删除包含标签和所有的孩子。

2body:不包含标记删除,但删除其所有的孩子。

3tag:包含标记的删除,但不删除它的孩子。

4all-but-first:删除所有包含标签的孩子,除了第一个。

5none:什么也不做。这个值是有用的动态评估。

123 th:attr

 设置标签属性，多个属性可以用逗号分隔

$ {}    变量表达式，可用于获取后台传过来的值

  {} 选择变量表达式  

 ＃{} 消息表达式  

 @ {} 链接⽹址表达式，用于替换网页中的 src、href 等的值

〜{} ⽚段表达式，可以用于引用公共的目标片段

@{} 处理 url 地址

     Thymeleaf 的 @ {} 表达式用于处理 web 应用中的 url 地址，可以是相对地址，也可以是绝对地址。

     @{/}  斜杠开头表示相对整个应用根目录，"/" 表示 "/应用上下文路径"

     假如页面当前浏览器地址为：>

Thymeleaf的表达式可以在方括号中包含一个字符串或者一个表达式，但并不支持直接使用循环变量来在方括号中取值。

如果你需要根据元素下标取值，可以使用Thymeleaf中的内联 #numbers 序列，定义序列长度并使用 {#numberssequence(0, length - 1)} 来生成下标序列，然后使用 $序号 来获取对应元素的值，如下所示：

Copy code

<tr th:each="index : ${#numberssequence(0, datagetConsumeUp()size() - 1)}">

<td th:text="${datagetConsumeUp()get(index)get(region)}"></td>

</tr>

这里将元素下标的序列放在了 th:each 指令中循环遍历，在内部指令中使用 $ 符号获取对应下标的元素值。

例如，如果 datagetConsumeUp() 返回一个类似List<ConsumeUp>的对象，则每次循环遍历时 $index 的值分别是 0, 1, 2, , n，然后使用 datagetConsumeUp()get(index)get(region) 获取每个元素的属性值。

这样可以避免使用 占位符，也能够实现根据元素下标取值的功能。需要注意的是， #numberssequence() 中的长度参数应该为 datagetConsumeUp()size() - 1，以保证取到的下标序列与元素序列相对应。

controller中进行参数合法性检验后，由service执行subject的login方法，若未发生异常，则登陆成功，再此直接通过 subjectgetPrincipal(); ，将其存入 subjectgetSession(); 即可

thymeleaf中使用session可以正常获取

一、通用的thymeleaf模板引擎通过returnmodel和view获取后台返回的数据。项目中的pomxml文件引用了与thymeleaf相关的包。

二、在相应的controller方法中设置要返回的数据。

三、在HTML页面上引用thymeleaf标记。

四、引用controller在HTML标记中返回的数据。

五、返回的controller可以在JS中获取。

session一般是登录时数据库读取后将部分有用信息存入到session中，然后只要是对话未结束，都可以通过存入时的session名去取对应的值，关闭游览器就失效了。跳转到其他页面一般不会失效，你可以看看是不是缺了系统引用或者是继承，session在有些页面不能直接取的。

以上就是关于SpringBoot页面展示Thymeleaf全部的内容，包括:SpringBoot页面展示Thymeleaf、04《Spring Boot 入门教程》使用模板引擎开发 Web 项目、thymeleaf在js中怎么写路径等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！