目录
1?Thymeleaf标准变量表达式
?2 Thymeleaf选择变量表达式(了解,不推荐使用)
?3?URL 表达式
4 代码演示?
4.1 写一个实体
4.2 写一个控制层
4.3 核心配置文件
4.4 前端展示数据页面以及结果截图
4.4.1 userDetail页面(选择和标准变量表达式)
?
4.4.2? url页面(URL 表达式)
1?Thymeleaf标准变量表达式
语法: ${...}
说明:标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和 EL 中的 ${} 相同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据。
.注意:th:text="" 是 Thymeleaf 的一个属性,用于文本的显示
?2 Thymeleaf选择变量表达式(了解,不推荐使用)
语法:*{...}
说明:选择变量表达式,也叫星号变量表达式,使用 th:object 属性来绑定对象选择表达式首先使用 th:object 来绑定后台传来的 User 对象,然后使用 * 来代表这个对象,后面 {} 中的值是此对象中的属性。
选择变量表达式 *{...} 是另一种类似于标准变量表达式 ${...} 表示变量的方法
选择变量表达式在执行时是在选择的对象上求解,而${...}是在上下文的变量 Model 上求解,这种写法比标准变量表达式繁琐,只需要大家了解即可
?3?URL 表达式
语法:@{...}
说明:主要用于链接、地址的展示,可用于<script src="...">、<link href="...">、<a href="...">、<form action="...">、<img src="">等,可以在 URL 路径中动态获取数据。
4 代码演示?
4.1 写一个实体
package com.liuhaiyang.springboot.entity;
public class User {
private Integer id;
private String name;
private Integer age;
//set()和get(),toString()
}
4.2 写一个控制层
package com.liuhaiyang.springboot.controller;
import com.liuhaiyang.springboot.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class UserController {
@RequestMapping("/user/detail")
public String userDetail(Model model){
User user =new User();
user.setAge(20);
user.setId(100888);
user.setName("zhansgan");
model.addAttribute("user",user);
return "userDetail";
}
@RequestMapping("/url")
public String urlDetail(Model model){
model.addAttribute("id",1008611);
model.addAttribute("name","瓦达");
model.addAttribute("age",25);
return "url";
}
@RequestMapping("/test")
public @ResponseBody String test(String name){
return "请求路径带参数"+name;
}
@RequestMapping("/test1")
public @ResponseBody String test1(Integer id,String name,Integer age){
return "请求路径带参数,参数id:"+id+" ,姓名:"+name+" ,年龄"+age;
}
}
4.3 核心配置文件
#关闭Thymeleaf缓存
spring.thymeleaf.cache=false
#thymeleaf 模版前缀,默认值,可选项
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf 模版后缀,默认值,可选项
spring.thymeleaf.suffix=.html
4.4 前端展示数据页面以及结果截图
4.4.1 userDetail页面(选择和标准变量表达式)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标准变量表达式:${}</h1>
用户编号:<span th:text="${user.id}"></span> <br/>
用户姓名:<span th:text="${user.name}"></span><br/>
用户年龄:<span th:text="${user.age}"></span> <br/>
<h1>选择变量表达式(星号表达式):*{}</h1>
<!-- *{}必须使用th:object属性来绑定这个对象 在div子标签中使用*来代替绑定的对象${user}-->
<div th:object="${user}">
用户编号:<span th:text="*{id}"></span> <br/>
用户姓名:<span th:text="*{name}"></span><br/>
用户年龄:<span th:text="*{age}"></span> <br/>
</div><br/>
<h1>标准变量表达式与选择变量表达式的混合使用</h1>
用户编号:<span th:text="*{user.id}"></span> <br/>
用户姓名:<span th:text="*{user.name}"></span><br/>
用户年龄:<span th:text="*{user.age}"></span> <br/>
</body>
</html>
4.4.2? url页面(URL 表达式)
页面很多,就不一一展示了,拿点主要的展示
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>URL路径表达式</title>
</head>
<body>
<h1>url路径表达式:@{.....}</h1>
<h2>a标签中的绝对路径(没有参数)</h2> <br/>
<a href="http://www.baidu.com">传统写法:跳转至百度</a> <br/>
<a th:href="@{http://www.baidu.com}">路径:路径到百度</a> <br>
<a th:href="@{http://localhost:8080/user/detail}">跳转至:/user/detail</a> <br>
<a href="http://localhost:8080/user/detail">传统写法跳转至:/user/detail</a><br>
<h2>URL路径表达式,相对路径[没有参数](实际开发中推荐使用的)</h2>
<a th:href="@{/user/detail}">跳转至:/user/detail</a>
<h2>绝对路径(带参数)</h2>
<a href="http://localhost:8080/test?name=zhangsan">传统的绝对路径,带参数</a> <br/>
<a th:href="@{http://localhost:8080/test?name='李四'}">路径表达式写法,带参数name</a> <br>
<h2>相对路径(带参数)</h2>
<a th:href="@{/test?name=李四}">相对路径,带参数</a>
<h2>相对路径(带参数:后台获取的参数值)</h2>
<a th:href="@{'/test?name='+${id}}">相对路径,获取后台参数值</a>
<h2>相对路径(带多个参数:后台获取的参数值)</h2>
<a th:href="@{'/test1?id='+${id}+'&name='+${name}+'&age='+${age}}">相对路径,获取后台多个参数值</a> <br/>
<a th:href="@{/test1(id=${id},name=${name},age=${age})}">强烈推荐这个方式,相对路径,获取后台多个参数值</a> <br/>
<a th:href="@{'/test2/'+${id}}">请求路径为RESTful风格</a><br/>
<a th:href="@{'/test3/'+${id}+'/'+${name}}">请求路径为RESTful风格(多个参数)</a>
</body>
</html>
?
?
?
|