thymeleaf前端表达式怎么写

Thymeleaf 基本表达式

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

${}

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

例如：

protected void doPost()

throws ServletException, IOException {

//Create Servlet context

WebContext ctx = new WebContext(req, resp, thisgetServletContext(), reqgetLocale());

ctxsetVariable("helloword","hello thymeleaf,wellcome!");

//Executing template engine

templateEngineprocess("home", ctx, respgetWriter());

}

模板页面访问变量

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

回到顶部

{}

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

例如：

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

<p>Name: <span th: text=" {firstName}" >Sebastian</span> </p>

<p>Surname: <span th: text=" {lastName}" >Pepper</span> </p>

<p>Nationality: <span th: text=" {nationality}" >Saturn</span> </p>

</div>

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

回到顶部

#{}

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

例如：

新建/WEB-INF/templates/homehtml，段落

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

新建/WEB-INF/templates/homeproperties，homewelcome：

homewelcome=this messages is from homeproperties!

测试结果：

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

回到顶部

@{}

超链接url表达式。

例如：

<script th:src="@{/resources/js/jquery/jqueryjson-24minjs}"

回到顶部

#maps

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

例如：

<div th:if="${#mapssize(stuReqBeanstudents[__${rowStatindex}__]score) != 0}">

<label>${scorekey}:</label><input type="text" th:value="${scorevalue}"></input>

</div>

<div th:if="${#mapsisEmpty(stuReqBeanstudents[__${rowStatindex}__]score)}">

do something

</div>

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

#dates

#calendars

#numbers

#strings

#objects

#bools

#arrays

#lists

#sets

好长一串代码，不明白你问的点在哪？如果你是问在js语句行使用thymeleaf的语法的话，那么你可以试试inline的语法 [[ 表达式 ]]

例子: $ajax('/apidata=[[${myBeandata}]]', );

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，以保证取到的下标序列与元素序列相对应。

Request参数

假设请求的url为:/user/getid=12

1、访问参数id可以使用param前缀，例如：${paramid!=null}检查是否有参数id；

2、参数是一个数组，因为它可以多值比如id=a&name=test，所以可以采用下标的方式访问，例如：

<p th:text="${paramq[0]}" th:unless="${paramq == null}">11</p>

3、还有一种访问方式是使用#>

可以使用如下方法获取后台模板值

<style th:inline="css">    [[${classname}]] {      text-align: [[${align}]];    }</style>

参考 在线助手-thymeleaf CSS内联表达式前端css里面怎么获取后台模板值

在写web项目的时候，controller里的返回值一般分为两种，一种是返回页面，也就是ModeAndView，另一种是直接返回数据，比如json格式的数据。

返回一个页面，我们需要用到一些模板引擎，比如熟知的jsp，模板引擎后面会详细讲解。

返回数据一般会选择返回json数据，我们之前的demo项目中使用的@RestController就是一个返回数据的注解。

spring-boot 支持多种模版引擎包括：

我们在讲前后端分离之前，都会使用Thymeleaf模板引擎，先简单的介绍一下它。

Thymeleaf是一个java类库，它是一个xml/xhtml/html5的模板引擎，可以作为mvc的web应用的view层。

Thymeleaf还提供了额外的木块与spring mvc集成，所以使用ssm框架的也可以使用这个模板引擎。

接下来，我们通过一个项目，来实践一下两种不同的返回结果。

先看一下最终的目录结构：

这里我们使用了Thymeleaf模板引擎来获得后台传来的数据并解析，使用bootstrap框架显示数据。可以看到，Thymeleaf的用法和jsp还是有点像的。可以直接通过${}的形式来获得attribute中的数据。

可以看到，我们成功的在前端获取到了数据。方式就是将数据保存在attribute中，然后再前端页面获取。

我们修改了注解，发现结果变了，直接显示了“index”,是因为@RestController会直接返回数据，而不是渲染页面，所以直接返回了index(这个index，是return语句中的)

访问 >

是的，添加TH。

注意要使用th:untext()函数，而非th:text()函数。

处理路径时，如果使用了获取绝对路径的方式，可能会造成访问权限问题，在web项目中要慎重。

大家可以根据自己的需求更改spring boot和Thymeleaf的文件目录，具体可以参考修改spring boot默认目录。

thymeleaf介绍

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。

这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。

浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

以上就是关于thymeleaf前端表达式怎么写全部的内容，包括:thymeleaf前端表达式怎么写、thymeleaf中可以使用ajax动态获取数据吗、thymeleaf js 根据元素下标取值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！