求教thymeleaf html 页面写参数的问题

求教thymeleaf html 页面写参数的问题,第1张

Spring中Model的attributes属性 SpringMVC调用可以在视图模型的执行过程中访问的数据,在Thymeleaf中相当于上下文变量。 在SpringMVC中添加一个attributes有几种不同的方法

jsp里面有个c:foreach遍历,thymeleaf里面也有th:each

来个装简单的遍历,先看java代码

List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

Map<String, Object> m = new HashMap<String, Object>();

mput("name", "name1");

mput("age", "1");

listadd(m);

m = new HashMap<String, Object>();

mput("name", "name2");

mput("age", "2");

listadd(m);

m = new HashMap<String, Object>();

mput("name", "name3");

mput("age", "3");

listadd(m);

m = new HashMap<String, Object>();

mput("name", "name4");

mput("age", "4");

listadd(m);

m = new HashMap<String, Object>();

mput("name", "name5");

mput("age", "5");

listadd(m);

modeladdAttribute("list", list);

接着看html写法:

简单遍历:

<table border="1">

<tr th:each="m : ${list}"><!-- 其中m是个临时变量,像for(User u : userList)那样中的u-->

<td th:text="${mname}"/>

<td th:text="${mage}"/>

</tr>

</table>

除了遍历,我们还可以拿到遍历的其他信息,比如下标,单行双行,这时要有一状态变量,假设命名为:iterStat,那么从iterStat中可获取的信息如下:

// 来自官网:

当前迭代索引,从0开始。这是index属性。

当前迭代索引,从1开始。这是count属性。

迭代变量中的元素总数。这是size财产。

每个迭代的iter变量。这

开发传统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=百度" 传过来。

如果使用 idea + thymeleaf 的时候,直接在模板中使用 Model 中定义的变量, 会出现变量未定义的错误 : Cannot resolve 'variable'

此时只需要按 alt + enter , 选择 Declare external variable in comment annotion ,然后在新增的注释 `` 的 type 中输入你的类型即可

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

实际上,模板引擎是非常平易近人的技术。譬如大家可能都比较熟悉的 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 ,先不必实现具体功能,代码如下:

实例:

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

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

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

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

本文使用的SpringBoot版本是214RELEASE,下面直接进入使用阶段。

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

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

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

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

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

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

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

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

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

Spring中Model的attributes属性

SpringMVC调用可以在视图模型的执行过程中访问的数据,在Thymeleaf中相当于上下文变量。

在SpringMVC中添加一个attributes有几种不同的方法,下面有一些常见的情况:

给Model的addAttribut方法新增一个attribute

@RequestMapping(value = "message", method = RequestMethodGET)

public String messages(Model model) {

modeladdAttribute("messages", messageRepositoryfindAll());

return "message/list";

}

在ModelAndView的返回值中添加:

@RequestMapping(value = "message", method = RequestMethodGET)

public ModelAndView messages() {

ModelAndView mav = new ModelAndView("message/list");

mavaddObject("messages", messageRepositoryfindAll());

return mav;

}

以上就是关于求教thymeleaf html 页面写参数的问题全部的内容,包括:求教thymeleaf html 页面写参数的问题、jsp能用th:each遍历吗、SpringBoot页面展示Thymeleaf等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9342540.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存