Thymeleaf实践总结

梦里梦外; 2023-06-10 07:28 21阅读 0赞

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表达式是一种支持在运行时查询和操作对象图的语言。

**页面**

--------------------

## **【2】页面获取request中数据** ##

**背景**

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

**后台**

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

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

**页面**

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

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

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

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

--------------------

## **【3】直接从session中获取值** ##

**背景**

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

**页面**

可以看到，不同于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类型格式化 ###

### ② LocalDateTime类型格式化 ###

maven中引入依赖：

<dependency>
       <groupId>org.thymeleaf.extras</groupId>
       <artifactId>thymeleaf-extras-java8time</artifactId>
       <version>3.0.1.RELEASE</version>
    </dependency>

页面修改如下：

## 【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>