Thymeleaf介绍和基操(附截图和代码)
1.Thymeleaf 简介
Thymeleaf是一个Java XML / XHTML / HTML5 模板引擎 ，可以在Web（基于servlet ）和非Web环境中工作。 它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5，但它甚至可以在脱机环境中处理任何XML文件。 它提供完整的Spring Framework。
在Web应用程序中，Thymeleaf旨在成为JavaServer Pages （JSP）的完全替代品，并实现自然模板的概念：模板文件可以直接在浏览器中打开，并且仍然可以正确显示为网页。
Thymeleaf是开源软件、许可下 Apache许可证2.0.
2. 快速创建Thymeleaf项目
1.先创建spring boot项目
2.勾选Spring web常见web工程，和模板引擎中的Thymeleaf。
3.idea自动将Thymeleaf的相关以来导入pom.xml文件中
Thymeleaf项目的创建完成!
3. Thymeleaf表达式
标准环境表达式和选择变量表达式
1.首先创建实体类(id,username,age)以及getter和setter方法
2.创建控制类，user对象，并为user对象赋值传给userDetail页面
3.编写html页面
注意:
一定要在开头加上thymeleaf的命名空间"xmlns:th=“http://www.thymeleaf.org”"，否则将无法识别下面的thyme leaf语句
4.访问后的界面
区别:
标准环境表达式使用"${ }“来传递参数
而选择变量表达式(又叫星号表达式)使用” *{ } "来传递参数
说明:
" *{ } “必须使用th:object属性来绑定这个对象
在div子标签中使用 " * " 来代替绑定的对象 ${user}
推荐使用” ${ } "而不推荐 " * "
也可以混合使用，不推荐。
路径表达式(不带参)
1.编写控制类
2.编写html界面
3.访问界面后
上面内容结束，注意事项如下:
说明
- 路径表达式格式为: a th:href=" @{ } "
2.由于绝对路径的路径可能会更改，因此工作中更推荐使用相对路径。
路径表达式(带参)
单个参数
1.单个参数(采用拼接字符串形式)，同时也可以用另一种方式，下面有介绍
2.控制类的方法
3.结果界面
后台获取多个参数
控制类界面
url.html界面
这里有两种方式获取后台数据
第一种仍为拼接字符串的做法,用"?","&"等符号拼接字符串
第二种需要在路径后面加上括号，括号里描述各个属性所对于的值，不需要拼接字符串，强烈推荐第二种。
所用到的代码
1.controller类
package com.springboot_thymeleaf;
import com.springboot_thymeleaf.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("/user/detail")
public ModelAndView userDetail(){
ModelAndView modelAndView=new ModelAndView();
User user=new User();
user.setId(1);
user.setUsername("liHua");
user.setAge(23);
modelAndView.setViewName("userDetail");
modelAndView.addObject("user",user);
return modelAndView;
}
@RequestMapping("/url")
public String urlExpression(Model model){
model.addAttribute("id",1001);
model.addAttribute("age",20);
model.addAttribute("username","zhaoliu");
return "url";
}
@RequestMapping(value = "test")
public @ResponseBody String test(String username){
return "请求路径/test,参数是:"+username;
}
@RequestMapping(value = "/test1")
@ResponseBody
public String test1(Integer id,String username,Integer age){
return "请求路径/test1,参数id:"+id+",username="+username+",age="+age;
}
}
2.userDetail.html
```java
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--推荐-->
<h2>标准环境表达式:${} </h2>
用户编号:<span th:text="${user.id}"></span><br>
用户姓名:<span th:text="${user.username}"></span><br>
用户年龄:<span th:text="${user.age}"></span><br>
<br>
<!--不推荐-->
<h2>选择变量表达式(星号表达式):*{}</h2>
<div th:object="${user}">
用户编号:<span th:text="*{id}"></span><br>
用户姓名:<span th:text="*{username}"></span><br>
用户年龄:<span th:text="*{age}"></span><br>
</div>
</body>
</html>
3.url.html
<!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>
<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>
<h2>URL路径表达式,相对路径(没有参数)</h2>
<a th:href="@{/user/detail}">跳转到:/user/detail</a><br>
<h2>URL绝对路径(带参)</h2>
<a th:href="@{http://localhost:8080/test?username='zhangsan'}">绝对路径，带参数/test，并带参数username</a>
<h2>URL相对路径</h2>
<a th:href="@{/test?username='lisi'}">相对路径，带参数/test，并带参数username</a>
<h2>相对路径(带参数:后台获取的参数值)</h2>
<a th:href="@{'/test?username='+${id}}">相对路径:获取后台参数值</a>
<h2>相对路径(带参数:后台获取的多个参数值)</h2>
<a th:href="@{'/test1?id='+${id}+'&username='+${username}+'&age='+${age}}">相对路径:获取后台参数值</a><br>
<a th:href="@{/test1(id=${id},username=${username},age=${age})}">第二种相对路径:获取后台参数值</a>
</body>
</html>```
- 点赞
- 收藏
- 关注作者
评论（0）