Thymeleaf表达式讲解（一）

Leefs 2019-11-04 PM 2036℃ 0条

# Thymeleaf表达式讲解

### 一、标准变量表达式

1. 1.语法

语法：`${......}`

变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和JSTL中的${}相同；

Thymeleaf中的变量表达式使用${变量名}的方式获取其中的数据

2. 2.前后端数据交互

> 后端传参

创建一个Model对象

```java
public class User {
    private int id;
    private String nick;
    private String phone;
    private String email;
    private String address;

//生成get和set方法在此省略
}
```

在Spring mvc的Controller中使用model.addAttribute向前端传输数据，代码如下：

```java
@RequestMapping("/index")
    public String index(Model model){
        User user = new User();
        user.setId(1);
        user.setNick("李林超博客");
        user.setPhone("123445566");
        user.setEmail("996@163.com");
        user.setAddress("北京朝阳区");
        model.addAttribute("user",user);

return "index";
    }
```

> 前端接收代码：

```html
X
135632XXXXXX
xxxx@163.com
北京XXX
```

**th:text="":**是Thymeleaf中的一个属性，用于文本显示

### 二、选择变量表达式

1. 1.语法

语法：*{......}

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

2. 2.前后端数据交互

后端数据和上方标准变量表达式相同

> 前端接收代码

```html

 
 
 
 

```

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

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

选择变量表达式在执行时是在选择的对象上求解，而${......}是在上下文的变量Model上求解;

通过`th:objtect`属性指明选择变量表达式的求解对象;

> 直接使用*{......}获取数据

```html
<spen th:text="*{user.nick}"></spen>
<spen th:text="*{user.phone}"></spen>
<spen th:text="*{user.email}"></spen>
<spen th:text="*{user.address}"></spen>
```

### 三、URL表达式

1. 1.语法

语法：@{......}

2. 2.用途

URL表达式可用于<script src="......">、<link href="......">、<a href="......">等

3. 3.用法

> 绝对URL

```html
<a href="info.html" th:href="@{'http://localhost:8080/user/info?id='+${user.id}}">查看</a>
```

> 相对URL（相对于页面）

```html
<a href="info.html" th:href="@{'user/info?id='+${user.id}}">查看</a>
```

> 相对URL（相对于项目上下文）

```html
<a href="info.html" th:href="@{'/user/info?id='+${user.id}}">查看</a>
```

在路径前面添加一个`/`,项目的上下文名会被自动添加。

> 传输多个参数

```html
<a href="info.html" th:href="@{'http://localhost:8080/user/info?id='+${user.id}+'&phone='+${user.phone}}">查看</a>
```

> 另一种写法

```html
<a href="info.html" th:href="@{|http://localhost:8080/user/info?id=${user.id}&phone=${user.phone}|}">查看</a>
```

### 四、Thymeleaf常见属性

1. 1.**th:action**:定义后台控制器的路径，类似与<form>标签的action属性

> 普通form表单

```html
<from id="login2" th:action="/user/login">
	......
</from>
```

> Thymeleaf中from表单

```html
<from id="login" th:action="@{/user/login}">
	......
</from>
```

当action中没有动态数据时不需要使用Thymeleaf中的from表单，只需要使用普通表单就可以。

2. 2.**th:each:**这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与JSTL中的`<c:forEach>`类似，此属性既可以循环遍历集合，也可以循环遍历数组及Map.

> 后台Controller层代码

```java
@Controller
public class HelloController {

@RequestMapping("/index")
 public String index(Model model){
 List<User> userList = new ArrayList<>();
 for(int i=0;i<10;i++){
 User user1 = new User();
 user1.setId(i);
 user1.setNick("李林超博客"+i);
 user1.setPhone("12344556"+i);
 user1.setEmail(i+"996@163.com");
 user1.setAddress("北京朝阳区"+i);
 userList.add(user1);
 }
 model.addAttribute("userList",userList);
 return "index";
 }
}
```

> 前台页面代码

```html

 X
 X
 135632XXXXXX
 xxxx@163.com
 北京XXX

```

`th:each="user:${userList}"`中的`${userList}`是后台传来的key,

user是`${userList}`循环体的信息

userStat是循环体信息，通过该变量可以获取如下信息：

index、size、count、even、odd、first、last，其含义如下：

**index:**当前迭代对象的index(从0开始计算)

**count:**当前迭代对象的个数（从1开始计算）

**size:**被迭代对象的大小

**current:**当前迭代变量

**even/odd:**布尔值，当前循环是否是偶数/奇数（从0开始计算）

**first:**布尔值，当前循环是否是第一个

**last:**布尔值，当前循环是否是最后一个

*注意：默认采用迭代变量加上Stat后缀，即userStat.*

标签: Java, SpringBoot, Thymeleaf

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/129.html

上一篇内部类与向上转型

下一篇在方法和作用域内的内部类

Thymeleaf表达式讲解（一）

评论已关闭

栏目分类

标签云

友情链接申请

Thymeleaf表达式讲解（一）

评论已关闭

 栏目分类

标签云

友情链接申请

栏目分类

标签云

友情链接申请