前端页面中怎么使用 Thymeleaf 的语法来获取 ModelMap 中的数据
时间: 2024-02-25 15:53:58 浏览: 24
使用 Thymeleaf 的语法获取 ModelMap 中的数据,可以使用 `${}` 表达式语言,例如 `${modelMapName.key}`,其中 `modelMapName` 是 ModelMap 中存储数据的名称,`key` 是数据的键值。比如,如果 ModelMap 中存储了一个名为 `user` 的对象,其中包含了一个名为 `name` 的属性,那么可以使用以下语法来获取该属性的值:
```
<p th:text="${user.name}">default name</p>
```
在以上代码中,`${user.name}` 表达式会从 ModelMap 中获取名为 `user` 的对象,然后再获取该对象的 `name` 属性值,并将其填充到 `<p>` 标签中。如果 ModelMap 中不存在名为 `user` 的对象,或者 `user` 对象中不存在 `name` 属性,那么会显示默认的文本 “default name”。
相关问题
在<script></script>中怎么使用 Thymeleaf 的语法来获取 ModelMap 中的List类型数据
在 `<script>` 标签中使用 Thymeleaf 的语法获取 ModelMap 中的 List 类型数据,可以使用 `th:inline="javascript"` 属性开启 JavaScript 内联模式,然后使用 `[# th:each]` 指令进行循环遍历。比如,假设 ModelMap 中存储了一个名为 `users` 的 List 对象,可以使用以下方式获取该 List 中的数据:
```
<script th:inline="javascript">
// 定义一个 JavaScript 数组
var users = [];
// 使用 Thymeleaf 循环遍历 ModelMap 中的 List 对象
/*[# th:each="user : ${users}"]*/
// 将每个用户对象转换成 JavaScript 对象,并添加到数组中
var userObj = {
id: /*[[${user.id}]]*/,
name: /*[[${user.name}]]*/,
age: /*[[${user.age}]]*/
};
users.push(userObj);
/*[/]*/
// 打印 JavaScript 数组
console.log(users);
</script>
```
在以上代码中,我们使用 `th:inline="javascript"` 属性开启了 JavaScript 内联模式,然后使用 `[# th:each]` 指令遍历了 ModelMap 中的 `users` List 对象,将每个用户对象转换成了 JavaScript 对象,并添加到了 `users` 数组中。在 `var userObj = {...}` 表达式中,我们使用了 `${}` 表达式语言来获取每个用户对象中的属性值,其中 `user.id`、`user.name`、`user.age` 分别对应 List 中每个用户对象的 id、name、age 属性。最后,我们将 `users` 数组打印到控制台中。
在 JavaScript 文件中使用 Thymeleaf 语法
在 JavaScript 文件中使用 Thymeleaf 语法需要借助于服务器端的渲染,通过在服务器端解析模板并将变量的值渲染到模板中,然后将渲染好的 HTML 页面返回给客户端。
具体实现方法有以下几种:
1. 将 JavaScript 文件的内容嵌入到 HTML 页面中,使用 Thymeleaf 语法引用模板中的变量。例如:
```
<script th:inline="javascript">
var myVar = /*[[${myVar}]]*/ '';
// ...
</script>
```
此方法需要将 JavaScript 内容写在 HTML 页面中,不太灵活。
2. 将 JavaScript 文件的内容存储在模板中,使用 Thymeleaf 语法引用模板中的变量,然后在服务器端将模板渲染为 HTML 页面。例如:
```
// JS 模板文件
var myVar = /*[[${myVar}]]*/ '';
// 渲染模板并返回 HTML 页面
@GetMapping("/my-page")
public String myPage(Model model) {
model.addAttribute("myVar", "hello world");
return "my-page";
}
```
此方法需要在服务器端进行模板渲染,适用于需要动态生成 HTML 页面的情况。
3. 将 JavaScript 文件的内容存储在独立的文件中,在服务器端使用 Thymeleaf 语法生成动态的 JavaScript 文件。例如:
```
// JavaScript 文件模板
var myVar = /*[[${myVar}]]*/ '';
// 渲染 JavaScript 文件并返回
@GetMapping("/my-script.js")
public ResponseEntity<String> myScript(Model model) {
String content = // 读取 JavaScript 文件模板并使用 Thymeleaf 渲染
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_JAVASCRIPT);
return new ResponseEntity<>(content, headers, HttpStatus.OK);
}
```
此方法需要在服务器端生成动态的 JavaScript 文件,适用于需要动态生成 JavaScript 文件的情况。
无论采用哪种方法,在使用 Thymeleaf 语法时都需要确保在服务器端进行模板渲染,而不能直接在客户端访问 JavaScript 文件。