Thymeleaf实践总结

简介: 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>
目录
相关文章
|
2天前
|
XML 数据格式
SpringMVC中使用FreeMarker实践
SpringMVC中使用FreeMarker实践
29 0
|
2天前
|
XML 前端开发 Java
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
68 0
|
2天前
|
缓存
FreeMarker实践总结
FreeMarker实践总结
26 1
|
6月前
|
前端开发 Java Spring
Thymeleaf使用笔记
Thymeleaf使用笔记
24 0
|
7月前
|
存储 JavaScript 前端开发
Thymeleaf入门教程
Thymeleaf入门教程
84 0
|
XML 移动开发 前端开发
【JavaWeb】Thymeleaf的简介与使用(上)
【JavaWeb】Thymeleaf的简介与使用(上)
【JavaWeb】Thymeleaf的简介与使用(上)
|
存储 前端开发
【JavaWeb】Thymeleaf的简介与使用(下)
【JavaWeb】Thymeleaf的简介与使用(下)
|
Java 程序员 Maven
模板引擎:第二章:Thymeleaf
模板引擎:第二章:Thymeleaf
132 0
模板引擎:第二章:Thymeleaf
|
设计模式 前端开发 Java
【JavaWeb】模板引擎Thymeleaf
内容提取出来单独的放在一个文件中,称为模板,对于一些动态的内容,可以将这些内容在模板中使用占位符占位,当服务器把这些动态的内容计算好了之后,就可以把模板中占位符替换成动态计算的结果,然后把组装好的HTML格式的字符串在返回给浏览器
【JavaWeb】模板引擎Thymeleaf
|
Java 开发者 Spring
引入 thymeleaf|学习笔记
快速学习引入 thymeleaf
94 0
引入 thymeleaf|学习笔记