thymeleaf前端给后端传值(thymeleaf前端取值)

thymeleaf前端表达式怎么写

Thymeleaf?基本表达式

如需了解thymeleaf以及thymeleaf整合spring，请参考《Thymeleaf模板引擎使用》、《Thymeleaf?集成spring》

${}

变量表达式（美元表达式，哈哈），用于访问容器上下文环境中的变量，功能同jstl中${}。

例如：

protected void doPost(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

...

//Create Servlet context

WebContext ctx = new WebContext(req, resp, this.getServletContext(), req.getLocale());

ctx.setVariable("helloword","hello thymeleaf,wellcome!");

//Executing template engine

templateEngine.process("home", ctx, resp.getWriter());

}

模板页面访问变量

pspan th:text="${helloword}"/span/p

回到顶部

*{}

选择表达式（星号表达式）。选择表达式与变量表达式有一个重要的区别：选择表达式计算的是选定的对象，而不是整个环境变量映射。也就是：只要是没有选择的对象，选择表达式与变量表达式的语法是完全一样的。那什么是选择的对象呢？是一个：th:object对象属性绑定的对象。

例如：

div th: obj ect=" ${session. user}"

pName: span th: text=" *{firstName}" Sebastian/span. /p

pSurname: span th: text=" *{lastName}" Pepper/span. /p

pNationality: span th: text=" *{nationality}" Saturn/span. /p

/div

上例中，选择表达式选择的是th:object对象属性绑定的session.?user对象中的属性。

回到顶部

#{}

消息表达式（井号表达式，资源表达式）。通常与th:text属性一起使用，指明声明了th:text的标签的文本是#{}中的key所对应的value，而标签内的文本将不会显示。

例如：

新建/WEB-INF/templates/home.html，段落

p th: text=" #{home. welcome}" This text will not be show! /p

新建/WEB-INF/templates/home.properties，home.welcome：

home.welcome=this messages is from home.properties!

测试结果：

从测试结果可以看出，消息表达式通常用于显示页面静态文本，将静态文本维护在properties文件中也方面维护，做国际化等。

回到顶部

@{}

超链接url表达式。

例如：

script?th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"

回到顶部

#maps

工具对象表达式。常用于日期、集合、数组对象的访问。这些工具对象就像是java对象，可以访问对应java对象的方法来进行各种操作。

例如：

div th:if="${#maps.size(stuReqBean.students[__${rowStat.index}__].score) != 0}"

label${score.key}:/labelinput type="text" th:value="${score.value}"/input

/div

div th:if="${#maps.isEmpty(stuReqBean.students[__${rowStat.index}__].score)}"

...do something...

/div

其他工具对象表达式还有：

#dates

#calendars

#numbers

#strings

#objects

#bools

#arrays

#lists

#sets

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

在控制器中往页面传递几个变量：

在页面中使用变量表达式${}来获取它们：

可以看到变量表达式不但可以获取变量的属性值，甚至还可以访问变量的方法（getName()和upcaseName()）。session代表HttpSession对象。

*{}代指th:object所指定的对象，即${session.user}。

URL链接表达式会给URL自动添加上下文的名字。比如：

解析后的href值为 。

当需要在URL中传递参数时，比如这样 ，可以如下操作：

传递多个参数：

路径变量的写法：

后端接受路径变量：

除了使用'...' + ${}来连接字面量和变量外，还可以使用|...|来代替，比如：

等价于：

注意： 在| ... |字面替换中只允许有变量表达式${...}

条件表达式实际上就是三目运算符。比如：

条件表达式也可以使用括号嵌套：

else表达式也可以省略，在这种情况下，如果条件为false，则返回空值：

默认表达式是一种特殊类型的条件值，不带then部分。比如：

表示，当${session.user.sex}为null时，值为sex is unknown，否则为表达式的值。这就好像为表达式指定了一个默认值一样。其等价于：

Thymeleaf默认提供了丰富的表达式工具类，这里列举一些常用的工具类。

比如：

注意事项 :

值得注意的是，在使用工具类对某个表达式进行处理时候，你可能会写成：

${#strings.isEmpty(${session.user.name})}。

实际上这种写法是错误的，将抛出异常。正确的写法为：

${#strings.isEmpty(session.user.name)}。

在Thymeleaf中，使用 th:each 标签可对集合类型进行迭代，支持的类型有：

1.任何实现了 java.util.List 的对象；

2.任何实现了 java.util.Iterable 的对象；

3.任何实现了 java.util.Enumeration 的对象；

4.任何实现了 java.util.Iterator 的对象;

5.任何实现了 java.util.Map 的对象。当迭代maps时，迭代变量是 java.util.Map.Entry 类型；

6.任何数组。

一个简单的例子：

其中${prods}为迭代值，prod为迭代变量。除此之外，我们还可以通过状态变量获取迭代的状态信息，比如：

其中stat就是状态变量。默认为迭代变量加上Stat后缀，在本例中，不直接申明stat，则状态变量名称为prodStat。状态变量包含以下信息：

1.index，当前迭代下标，从0开始；

2.count，当前迭代位置，从1开始；

3.size，迭代变量中的总计数量；

4.current，每次迭代的迭代变量；

5.even/odd，当前迭代是偶数还是奇数；

6.first，当前迭代的是不是第一个；

7.last，当前迭代的是不是最后一个；

例子：

页面显示如下：

当prod.comments不为空时，页面将渲染出该a标签。

另外，th:if有一个反向属性th:unless，用于代替上面的not：

th:case="*"表示默认选项，相当于default：

在模板的编写中，通常希望能够引入别的模板片段，比如通用的头部和页脚。Thymeleaf模板引擎的 th:include ， th:insert 和 th:replace 属性可以轻松的实现该需求。不过从Thymeleaf 3.0版本后， 不再推荐使用 th:include 属性。

在index.html页面路径下创建一个footer.html：

在footer.html中，使用 th:fragment 属性定义了 footer 片段，然后在index.html中引用它：

其中footer为被引用的模板名称（templatename），copy为th:fragment标记的片段名称（selector），~{...}称为片段表达式，由于其不是一个复杂的片段表达式，所以可以简写为：

页面显示如下：

通过观察渲染出的源码可发现th:include，th:insert和th:replace的区别所在：

注意： 引用本页面的片段可以略去templatename，或者使用this来代替。

如果片段不包含th:fragment属性，我们可以使用CSS选择器来选中该片段，如：

引用方式：

使用th:fragment定义的片段可以指定一组参数：

然后在引用的时候给这两个参数赋值，有如下两种方式：

对于第二种方式，onevar和twovar的顺序不重要，并且使用第二种方式引用片段时，片段可以简写为：

比如有如下片段：

当value为all时，页面渲染为：

当value为body时，页面渲染为：

当value为tag时，页面渲染为：

当value为all-but-first时，页面渲染为：

在Thymeleaf模板引擎中，使用 th:with 属性来声明一个局部变量

在上面div中， th:width 属性声明了一个名为firstPer的局部变量，内容为 ${persons[0]} 。该局部变量的作用域为整个div内。

也可以一次性定义多个变量：

th:with属性允许重用在同一个属性中定义的变量：

参考：

「SpringBoot实战」视图技术-Thymeleaf

在一个Web应用中，通常会采用MVC设计模式实现对应的模型、视图和控制器，其中，视图是用户看到并与之交互的界面。对最初的Web应用来说，视图是由HTML元素组成的静态界面；而后期的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发，提供了一些视图技术支持，并主要推荐整合模板引擎技术实现前端页面的动态化内容。本文对SpringBoot常用的Thymeleaf进行整合。

Thymeleaf是一种现代的基于服务器端的Java模板引擎技术，也是一个优秀的面向Java的XML、XHTML、HTML5页面模板，它具有丰富的标签语言、函数和表达式，在使用Spring Boot框架进行页面设计时，一般会选择 Thymeleaf模板。我们在这里学习Thymeleaf 常用的标签、表达式。

Thymeleaf标签

使用标签只需要加上一个命名空间就可以了。 即修改原html的第二行就可以了。

变量表达式${..}主要用于获取上下文中的变量值，示例代码如下。

这是标题

- 使用了Thymeleaf模板的变量表达式${..}用来动态获取p标签中的内容 - 如果当前程序没有启动或者当前上下文中不存在title变量，该片段会显示标签默认值“这是标题”； - 如果当前上下文中存在title 变量并且程序已经启动，当前p标签中的默认文本内容将会被tite变量的值所替换，从而达到模板引擎页面数据动态替换的效果。

Thymeleaf为变量所在域提供了一些内置对象

结合上述内置对象的说明，假设要在Thymeleaf模板擎页面中动态获取当前国家信息，可以使用#locale内置对象

选择交量表达式和变量表达式用法类似，一般用于从被选定对象而不是上下文中获取属性值，如果没有选定对象，则和变量表达式一样，示例代码如下。

消息表达式#{..}主要用于Thymeleaf模板页面国际化内容的动态替换和展示。使用消息表这式#{..}进行国际化设置时，还需要提供一些国际化配置文件。关于消息表达式的使用，下文写国际化时会详细说明。

链接表达式@{..}一般用于页面跳转或者资源的引入，在Web开发中占据着非常重要的地位，并且使用也非常频繁。

片段表达式~{..}是一种用来将标记片段移动到模板中的方法。其中，最常见的用法是使用th:insert或th:replace 属性插入片段

Spring Boot默认设置了静态资源的访问路径，默认将/**所有访问映射到以下目录。

我们创建一个springboot项目用于本次实验。项目名为springboot_01_thyme。java8，springboot2.6.6

创建一个LoginController类用于数据替换效果测试。

我们写一个login.html进行测试。我们导入一个bootstrap的样式到static/login里面，并且自己定义一些css。

最后我们通过访问 可以查看效果

在resources目录下创建名为i18n的文件夹，数一数这个单词多少个字母internationalization，就知道为什么叫i18n了。

然后我们在i18n文件夹下面创建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。

目录结构：这个Resource Bundle 'login'时idea自动创建的，我们不需要管，只需要完成我们的就行。

login.properties

login_zh_CN.properties

login_en_US.properties

然后我们在配置文件application.properties里面添加代码

我们在config包下面创建一个MyLocalResovel类，自定义国际化功能区域信息解析器。

这里我们基本就完成了，但是在访问中文的时候会出现乱码现象。

我们打开idea的file-settings-file Encodings.

将Default encoding for properties的编码改为utf-8，同时勾选Transparentnative-to-ascii conversion

然后我们重新编写login.properties和其他相关的

但是这种方法1只对当前项目有效。下次创建还是使用GBK编码

本文我们主要了解了Thymeleaf的基本语法、标签、表达式、基本使用、同时还实现了页面登录页得国际化。

本文作者：hjk-airl

本文链接：

springboot集成Thymeleaf实现一个用户的增删改查功能，包括前后端代码实现

在springboot的开发框架中，本来就推荐使用thymeleaf的前端框架，所以结合起来进行请后端的开发也是很方面的。下面就是我学习两者的一个实际用例笔记的额一个记录，方便回看关键的知识点

修改后自动跳转到用户列表页面

Thymeleaf如何将表格中被选中的checkbox的所有值传到后端？

jquery遍历获取每一行选中的记录的id进行组合 如1，2，3，5等

通过ajax的异步post提交参数到后台的控制器方法中

变量存储ids的信息

$(function(){

$('#send').click(function(){

$.ajax({

type: "post",

url: "后台方法名称",

data: {ids:ids},

dataType: "json",

success: function(data){

$('#resText').empty(); //清空resText里面的所有内容

var html = '';

$.each(data, function(commentIndex, comment){

html += 'div class="comment"h6' + comment['username']

+ ':/h6p class="para"' + comment['content']

+ '/p/div';

});

$('#resText').html(html);

}

});

});

});