Thymeleaf实践总结

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: Thymeleaf实践总结

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

【1】页面获取后台model数据

背景


后台放数据到model中,给页面使用。

后台

@RequestMapping("/toFace_login.html")
public String toFace_login(String username,Model model) {
      model.addAttribute("username", username);
      return "mall/user/face_login";
  }

在Thymeleaf中,这些model的attributes属性值均可以使用${attributeName}来访问,这个attributeName对于Thymeleaf来说就是一个messages,这是一个SpringEL表达式,总之,SpringEL表达式是一种支持在运行时查询和操作对象图的语言。


页面

<input id="username" type="hidden" th:value="${username}"/>

【2】页面获取request中数据

背景

后台放数据到request中,给页面使用。


后台

现在假设有一个@Controller控制器,控制器中重定向的方式发送一个request参数:

@Controller
public class SomeController {
    @RequestMapping("/")
    public String redirect() {
        return "redirect:/query?q=Thymeleaf Is Great!";
    }
}

页面

访问参数q可以使用param前缀:

<p th:text="${param.q[0]}" th:unless="${param.q == null}">Test</p>

例子中有两点需要注意的地方:

  • ${param.q!=null}检查set中是否有参数q
  • 参数是一个数组,因为它可以多值比如?q=a&r=b


还有一种访问方式是使用#httpServletRequest对象,可以直接进入javax.servlet.http.HttpServletRequest对象:

<p th:text="${#httpServletRequest.getParameter('q')}" 
th:unless="${#httpServletRequest.getParameter('q') == null}">Test</p>

【3】直接从session中获取值

背景

数据以键值对的方式放到session中使用。

页面

<input type="hidden" name="id" th:value="${session.admin.id}" />

可以看到,不同于JSP可以自动从request、session以及application中取值。Thymeleaf从session中取值需要显示标明。

【4】VUE与Thymeleaf结合使用

① vue获取session中数据


如下所示想要获取session中user.id:

[[${session?.user?.id}]]

thymeleaf页面中使用js获取model里面的值:

//activity 放到了后端model中
var activityId=[[${activity.id}]];

【5】日期格式化

① DateTime类型格式化

<input type="text" id="workTime" 
th:value="${#dates.format(order.workTime, 'yyyy-MM-dd HH:mm:ss')}" 
lay-verify="required" name="workTime"   class="layui-input">

② LocalDateTime类型格式化

maven中引入依赖:

<!-- thymeleaf格式化localdatetime -->
<dependency>
   <groupId>org.thymeleaf.extras</groupId>
   <artifactId>thymeleaf-extras-java8time</artifactId>
   <version>3.0.1.RELEASE</version>
</dependency>

页面修改如下:

<input type="text" id="workTime" 
th:value="${#temporals.format(order.workTime, 'yyyy-MM-dd HH:mm:ss')}" 
lay-verify="required" name="workTime"   class="layui-input">

【6】标签传值

① th:onclick动态传参

写法一:

<span class="myoperation" th:onclick="'openEdit('+${require.id}+')'">修改</span>
# 解析后的效果
<span class="myoperation" onclick="openEdit(1)">修改</span>

写法二:

<span class="myoperation" th:onclick="'openEdit(\''+${require.id}+'\')'">修改</span>
# 解析后的效果
<span class="myoperation" onclick="openEdit('1')">修改</span>

写法三:

<span class="myoperation" th:onclick="|openEdit(${require.id})|">修改</span>
# 解析后的效果
<span class="myoperation" onclick="openEdit(1)">修改</span>

写法四(推荐):

该中写法使用[[]]进行解析变量,需要版本为3.0.10+

<span class="myoperation" th:onclick="openEdit([[${require.id}]])">修改</span>
# 解析后的效果
<span class="myoperation" onclick="openEdit(1)">修改</span>

② th:with从后台接口获取数据

 <select th:with="dictList=${@sysDictValueServiceImpl.getValueByCode('language')}" 
 id="language" name="language"  @change="changeNature()" style="margin-bottom: 0px;width: 200px;margin: 0px 20px" >
    <option value="">请选择英语要求</option>
    <option th:each="dict : ${dictList}" th:text="${dict.name}" th:value="${dict.dictValue}"></option>
</select>
目录
相关文章
|
7月前
|
缓存
FreeMarker实践总结
FreeMarker实践总结
64 1
|
7月前
|
XML 前端开发 Java
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
149 0
|
前端开发 Java Spring
Thymeleaf使用笔记
Thymeleaf使用笔记
46 0
|
存储 JavaScript 前端开发
Thymeleaf入门教程
Thymeleaf入门教程
169 0
|
Java 程序员 Maven
模板引擎:第二章:Thymeleaf
模板引擎:第二章:Thymeleaf
160 0
模板引擎:第二章:Thymeleaf
|
设计模式 前端开发 Java
【JavaWeb】模板引擎Thymeleaf
内容提取出来单独的放在一个文件中,称为模板,对于一些动态的内容,可以将这些内容在模板中使用占位符占位,当服务器把这些动态的内容计算好了之后,就可以把模板中占位符替换成动态计算的结果,然后把组装好的HTML格式的字符串在返回给浏览器
【JavaWeb】模板引擎Thymeleaf
|
Web App开发 安全 Java
一篇很全面的freemarker教程
FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: 1,文本:直接输出的部分 2,注释:格式部分,不会输出 3,插值:即${...}或#{..
1925 0
|
前端开发 Java
Freemarker - 基础篇(上)
Freemarker - 基础篇(上)
380 0
Freemarker - 基础篇(上)
|
前端开发
Freemarker - 基础篇(下)
Freemarker - 基础篇(下)
207 0
Freemarker - 基础篇(下)
|
移动开发 Java HTML5
Thymeleaf 5 分钟教程
Thymeleaf 是一个用于 web 和独立环境的现代服务器端 Java 模板引擎。 Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板ー HTML,它既可以在浏览器中正确显示,也可以作为静态原型工作,从而加强开发团队之间的协作。 有了 Spring Framework 的模块、大量与您最喜欢的工具集成的功能,以及插入您自己功能的能力,Thymeleaf 是现代 HTML5 JVM web 开发的理想选择ーー尽管它可以做的还有很多。 用 Thymeleaf 语言编写的 HTML 模板看起来和工作方式仍然类似于 HTML,使得在应用程序中运行的实际模板仍然可以作为有用的设计工件工
190 0