Thymeleaf
Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎。官网：www.thymeleaf.org
Thymeleaf是跟Velocity、FreeMarker类似的模板引擎，它可以完全替代JSP，相较与其他的模板引擎相比，Thymeleaf在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。
通过Controller跳转到thymeleaf模板，否则thymeleaf模板无法渲染数据。
1、集成Thymeleaf模板
1️⃣引入依赖
<!-- 使用Thymeleaf模板 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2️⃣编写配置
- 配置prefix是去哪找thymeleaf模板。
spring:
thymeleaf:
cache: false #关闭缓存（默认是true，在开发时推荐使用false）
prefix: classpath:/templates/ #指定模板位置(/resources/templates)
suffix: .html #指定后缀
3️⃣编写控制器测试
@Controller
@RequestMapping("/hello")
public class HelloController {
@RequestMapping(path = "/hello")
public String hello(){
System.out.println("测试与thymeleaf模板的集成");
return "index";
}
}
2、模板基本语法
使用时必须在页面中加入thymeleaf如下命名空间：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2.1、展示单个数据
- redirect跳转：session作用域转递数据
- forward跳转：request，model 作用域传递数据
2.1.1、设置数据
model.addAttribute("name","小陈");
或
request.setAttribute("name","小陈");
2.1.2、获取数据
1️⃣request域
- th:text="${name}"不能写在h4标签上，否则取出来数据会覆盖掉h4标签内容
<h4>获取单个数据：<span th:text="${name}"/> </h4>
2️⃣Session域
<h4>获取Session作用域中数据：<span th:text="${session.username}"/></h4>
2.1.3、解析含有html标签数据
model.addAttribute("name"," <a href=''>张三</a> ");
model.addAttribute("username","小陈");
1️⃣直接获取原样输出
- 获取对应数据，获取数据时会将对应标签中数据清空，因此最好是空标签
<span th:text="${name}"/>
2️⃣获取并解析
- 获取对应的数据，可以将数据中html先解析再渲染到页面
<span th:utext="${name}"/>
3️⃣将数据赋值给表单元素
- 表示value使用thymeleaf模板
- 这个文本框初始时填入username内容
<input type="text" th:value="${username}"
2.2、对象数据获取
- 设置了seller的id、name、salary、birthday属性
Seller seller = new Seller(21, "小张", 2300.23, new Date());
request.setAttribute("seller", seller);
- 使用了thymeleaf提供的格式化日期，内置了一个函数
${#dates.format(格式化的值,格式化的格式)}
<h4>获取对象类型的数据：
id：<span th:text="${seller.id}"/>
name：<span th:text="${seller.name}"/>
salary：<span th:text="${seller.salary}"/>
birthday：
<span th:text="${#dates.format(seller.birthday,'yyyy-MM-dd HH:mm:ss')}"/>
</h4>
2.3、集合数据获取
- 数据
List<Seller> sellers = Arrays.asList(
new Seller(21, "小张", 2300.23, new Date()),
new Seller(22, "小王", 2400.3, new Date()));
model.addAttribute("sellers",sellers);
1️⃣直接遍历集合
- 遍历数据的语法：th:each=“变量:集合”
<ul>
<li th:each="seller:${sellers}">
id: <span th:text="${seller.id}"/>
name: <span th:text="${seller.name}"/>
salary: <span th:text="${seller.salary}"/>
birthday:
<span th:text="${#dates.format(seller.birthday,'yyyy-MM-dd HH:mm:ss')}"/>
</li>
</ul>
2️⃣遍历时获取遍历状态
- th:each=“变量(current_elemnet当前遍历元素)**,变量(state遍历的状态对象)😗*集合”
- state遍历的状态属性
- count：当前迭代对象的index(从1开始计算)
- index：当前迭代对象的index(从0开始计算)
- size：被迭代对象的大小
- current：当前迭代变量
- even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
- first:布尔值，当前循环是否是第一个
- last:布尔值，当前循环是否是最后一个
<ul>
<li th:each="seller,state:${sellers}">
state count: <span th:text="${state.count}"/>
state odd: <span th:text="${state.odd}"/>
state even: <span th:text="${state.even}"/>
state size: <span th:text="${state.size}"/>
id: <span th:text="${seller.id}"/>
name: <span th:text="${seller.name}"/>
salary: <span th:text="${seller.salary}"/>
birthday:
<span th:text="${#dates.format(seller.birthday,'yyyy-MM-dd HH:mm:ss')}"/>
</li>
</ul>
2.4、根据条件展示数据
-
运算符
- gt：great than（大于）>
- ge：great equal（等于）>=
- eq：equal（等于）=
- lt：less than（小于）<
- le：less equal（小于等于）<=
- ne：not equal （不等于）!=
-
数据
model.addAttribute("seller",new Seller(21, "小张", 2300.23, new Date()));
- 页面
<span th:if="${seller.id} eq 23">
青年
</span>
2.4、引入静态资源
使用thymeleaf模板项目中静态资源默认放在resources路径下static目录中
- 项目中放入对应的静态资源
- 页面中引入
- 注意：@{/}代表通过thymeleaf语法动态获取应用名称
<link rel="stylesheet" th:href="@{/css/demo.css}">
<script th:src="@{/demo.js}"/>
2.5、在js代码中获取项目名
- [[thymeleaf语法表达式]]，是thymeleaf内嵌表达式
<script>
let contextPath = "[[@{/}]]";
//或
contextPath = [[${#httpServletRequest.getContextPath()}]];
</script>
2133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
