thymeleaf js 根据元素下标取值

thymeleaf js 根据元素下标取值,第1张

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

在一个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,springboot266

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

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

最后我们通过访问>

api里面说的是建一个与html同名的properties文件,里面是key=value格式,把这个文件放到与html路径一起,但是我也没实现,不知道是不是消息解释器的原因

原文:

>

找到解决办法了:

spring 配置:

springmessagesbasename=i18n/messages

springmessagescache-seconds= 3600

springmessagesencoding=UTF-8

这里已解决,在resources目录下建一个文件名i18n,里面有个文件messagesproperties,文件里面是key=value格式,然后直接使用就行了

参考这个的:>

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

以上就是关于thymeleaf js 根据元素下标取值全部的内容,包括:thymeleaf js 根据元素下标取值、「SpringBoot实战」视图技术-Thymeleaf、用的thymeleaf框架,前台html里怎么读取properties文件的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9578558.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存