SpringBoot——Thymeleaf的表达式

原创已于 2024-04-24 10:24:20 修改 · 7.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #后端 #java

于 2021-05-20 20:36:26 首次发布

【SpringBoot】专栏收录该内容

38 篇文章

订阅专栏

本文介绍了Thymeleaf模板引擎中的标准变量表达式、选择变量表达式以及URL表达式的使用。通过示例展示了如何在HTML页面中访问Controller传来的数据，包括使用${}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Thymeleaf中的标准变量表达式（掌握）

标准变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 EL 中的 ${} 相同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据。

语法：${...}

2.Thymeleaf中的选择变量表达式（了解，不推荐使用）

选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象。

选择表达式首先使用 th:object 来绑定后台传来的 User 对象，然后使用 * 来代表这个对象，后面 {} 中的值是此对象中的属性。

选择变量表达式 *{...} 是另一种类似于标准变量表达式 ${...} 表示变量的方法。

选择变量表达式在执行时是在选择的对象上求解，而${...}是在上下文的变量 Model 上求解，这种写法比标准变量表达式繁琐，只需要大家了解即可。

语法：*{...}

3.案例演示

首先写一个model。

package com.songzihao.springboot.model;

/**
 *
 */
public class User {
    private Integer id;
    private String name;
    private Integer age;

    //getter and setter
}

然后是我们的控制层，UserController。

package com.songzihao.springboot.controller;

import com.songzihao.springboot.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

/**
 *
 */
@Controller
public class UserController {

    @RequestMapping(value = "/user/detail")
    public ModelAndView userDetail() {
        ModelAndView mv=new ModelAndView();

        User user=new User();
        user.setId(1001);
        user.setName("张起灵");
        user.setAge(21);

        mv.addObject("user",user);
        mv.setViewName("userDetail");
        return mv;
    }

}

下来写这个 /user/detail 请求对应的html页面。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>使用标准变量表达式 ${} 展示User用户信息：</h2>
    用户编号：<span th:text="${user.id}"></span><br />
    用户姓名：<span th:text="${user.name}"></span><br />
    用户年龄：<span th:text="${user.age}"></span><br />
    <hr />
    <h2>使用选择变量表达式 *{} 展示User用户信息(星号表达式,仅在 div 范围内有效)</h2>
    <div th:object="${user}">
        用户编号：<span th:text="*{id}"></span><br />
        用户姓名：<span th:text="*{name}"></span><br />
        用户年龄：<span th:text="*{age}"></span><br />
    </div>
</body>
</html>

最后在核心配置文件中，添加以下内容。

#关闭Thymeleaf缓存
spring.thymeleaf.cache=false

#thymeleaf 模版前缀，默认值,可选项
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf 模版后缀，默认值,可选项
spring.thymeleaf.suffix=.html

最后启动项目入口类进行测试。

package com.songzihao.springboot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

可以看到我们在这里成功的通过Thymeleaf模板引擎中的变量表达式获取到了后台的数据。

4.Thymeleaf中的URL表达式

主要用于链接、地址的展示，可用于<script src="...">、<link href="...">、<a href="...">、<form action="...">、<img src="">等，可以
在 URL 路径中动态获取数据。

语法：@{...}

4.1 案例演示

首先写一个Controller控制层，里面定义几个请求方法。

package com.songzihao.springboot.controller;

import com.songzihao.springboot.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

/**
 *
 */
@Controller
public class UserController {

    @RequestMapping(value = "/url")
    public String urlExpression(Model model) {
        model.addAttribute("name","张起灵");
        model.addAttribute("id",1001);
        model.addAttribute("age",21);
        return "url";
    }

    @RequestMapping(value = "/test")
    public @ResponseBody String test(Integer id,String name,Integer age) {
        return "请求路径/test，获取到的数据中 id = " + id + ", name = " + name + ", age = " + age;
    }

}

然后对应的是我们的html页面。

注意URL表达式中，分别用到了绝对路径和相对路径。（这里推荐使用相对路径）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>URL路径表达式</title>
</head>
<body>
    <h2>URL路径表达式：@{......}</h2>
    <h4>a标签中的绝对路径(没有参数)</h4><br/>
    <a th:href="@{http://www.tencent.com}">跳转到腾讯</a><br/><br/>
    <a th:href="@{http://localhost:8080/user/detail}">跳转到/user/detail</a><br/><br/>
    <hr/>
    <h4>a标签中的相对路径(没有参数)</h4><br/>
    <a th:href="@{/user/detail}">跳转到/user/detail</a><br/><br/>
    <hr/>
    <h4>a标签中的绝对路径(带参数)</h4><br/>
    <a th:href="@{'http://localhost:8080/test?name=' + ${name}}">查看用户姓名</a><br/><br/>
    <hr/>
    <h4>a标签中的相对路径(带参数)</h4><br/>
    <a th:href="@{'/test?id=' + ${id} + '&name=' + ${name} + '&age=' + ${age}}">复杂写法：查看用户姓名</a><br/><br/>
    <a th:href="@{/test(id=${id},name=${name},age=${age})}">简练写法：查看用户姓名</a>
</body>
</html>

下面是核心配置文件中的内容、以及启动入口类测试。

#关闭Thymeleaf缓存
spring.thymeleaf.cache=false

#thymeleaf 模版前缀，默认值,可选项
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf 模版后缀，默认值,可选项
spring.thymeleaf.suffix=.html

package com.songzihao.springboot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}