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>