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>