文章目录
- 什么是Thymeleaf
- 集成Thymeleaf模板
- 引入依赖
- 编辑配置
- 编写controller
- 测试访问
- Thymeleaf 基础用法
- 1).html文件使用thymeleaf语法 必须导入thymeleaf的头才能使用相关语法
- 2).在html中通过thymeleaf语法获取数据
- 获取单个属性
- 获取对象属性
- 传递集合对象
- 传递条件对象
- 获取session作用域
- Thymeleaf 如何引入静态资源
- 使用thymeleaf模板项目中静态资源默认放在resources路径小static目录中
- **注意: @{/}代表通过thymeleaf语法动态获取应用名**
什么是Thymeleaf
Thymeleaf是一个现代服务器端 Java 模板引擎，适用于 Web 和独立环境。
Thymeleaf 的主要目标是将优雅的自然模板引入您的开发工作流程 - HTML 可以在浏览器中正确显示，也可以用作静态原型，从而允许开发团队进行更强有力的协作。
凭借 Spring Framework 的模块、与您喜爱的工具的大量集成以及插入您自己的功能的能力，Thymeleaf 非常适合现代 HTML5 JVM Web 开发 - 尽管它还有更多功能。
集成Thymeleaf模板
注意springboot建立好之后，模版文件就放在templates里面
引入依赖
<!--使用thymelaf--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
编辑配置
# 配置 thymeleaf
spring:thymeleaf:prefix: classpath:/templates/ #指定thymeleaf模板前缀目录suffix: .html #指定模板的后缀cache: false #是否开启thymeleaf缓存 默认值是true开启缓存 在开发过程中推荐使用false
编写controller
@Controller //一定要是@Controller 不能再使用@RestController注解
@RequestMapping("hello")
public class HelloController {@GetMapping("hello")public String hello(){System.out.println("测试与 thymeleaf 的集成");return "index";}
}
测试访问
Thymeleaf 基础用法
1).html文件使用thymeleaf语法 必须导入thymeleaf的头才能使用相关语法
namespace: 命名空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2).在html中通过thymeleaf语法获取数据
获取单个属性
设置数据
@RequestMapping("demo")public String demo(HttpServletRequest request, Model model, HttpSession session) {String name ="小陈";System.out.println("demo ok");request.setAttribute("name",name);return "demo";}
获取数据
<h4>获取单个数据:<span th:text="${name}"></span></h4>
展示数据
另外有时候，我们不是直接把文本渲染到页面中，是要，直接将获取数据先解析成html标签在渲染到页面。
所以我们可以使用以下方式
设置数据
String content = "<a href='http://www.baidu.com'>百度一下</a>";System.out.println("demo ok");model.addAttribute("content", content);
获取数据
<h4>获取单个数据: <span th:utext="${content}"></span></h4>
展示数据
将数据赋值给表单元素
<input type="text" name="username" th:value="${name}">获取对象属性
设置数据
User user = new User(21, "小张", 2300.23, new Date());request.setAttribute("user", user);
获取数据
<!-- 格式化日期:${#dates.format(格式化值,'格式')} -->
<h4>获取对象类型数据:id:<span th:text="${user.id}"/>name:<span th:text="${user.name}"/>salary:<span th:text="${user.salary}"/>birthday:<span th:text="${#dates.format(user.birthday,'yyyy-MM-dd HH:mm:ss')}"/>
</h4>
展示数据
传递集合对象
设置数据
//传递集合类型数据List<User> users = Arrays.asList(new User(22, "小黄", 232.2, new Date()),new User(23, "小王", 232.2, new Date()),new User(24,"win7",232.2,new Date()));model.addAttribute("users",users);
获取数据
<h4>获取集合类型数据:</h4><!--遍历数据 th:each="变量(current_element当前遍历元素),变量(state遍历状态对象):集合" 遍历-->
<ul><li th:each="user,state:${users}">state count: <span th:text="${state.count}"></span>state odd : <span th:text="${state.odd}"></span>state even : <span th:text="${state.even}"></span>state size : <span th:text="${state.size}"></span>id: <span th:text="${user.id}"></span>name: <span th:text="${user.name}"></span>salary: <span th:text="${user.salary}"></span>birthday: <span th:text="${#dates.format(user.birthday,'yyyy年MM月dd日')}"></span></li>
</ul>
展示数据
传递条件对象
设置数据
Integer age = 25;model.addAttribute("age", age);
获取数据
<!-- th:if="${age>=23}" 作用: 用条件展示数据-->
<div style="width: 100px;height: 100px;background: rebeccapurple;" th:if="${age>23}">我是rebeccapurple
</div>
<div style="width: 100px;height: 100px;background: greenyellow;" th:if="${age<=23}">我是greenyellow
</div>
展示数据
获取session作用域
设置数据
session.setAttribute("username","小二黑");
获取数据
<h4>获取session作用域中数据: <span th:text="${session.username}"></span></h4>
展示数据
Thymeleaf 如何引入静态资源
使用thymeleaf模板项目中静态资源默认放在resources路径小static目录中
注意: @{/}代表通过thymeleaf语法动态获取应用名
<!--th:href="@{/}" @{/}: 获取应用名称--><link rel="stylesheet" th:href="@{/demo.css}">
