Thymeleaf介绍:
1.thymeleaf是什么?
thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,
基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。Thymeleaf提供
了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,
如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,
因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签
属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。
2.thymeleaf入门:
1.创建工程,添加依赖:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.it</groupId>
<artifactId>it-thymeleaf</artifactId>
<version>1.0-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.4.RELEASE</version>
</parent>
<dependencies>
<!--web起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--thymeleaf配置-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
</project>
2.在resources下创建templates文件夹,再创建index.html
注意:要在html中引入约束:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>测试入门</title>
</head>
<body>
<h1>欢迎来到首页:<span th:text="${message}"></span></h1>
</body>
3.创建Controller类测试:
package com.it.controller;
/**
* ToDo
*
* @author Lyle
* @date 2020/4/11
*/
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/test")
public class TestController {
@RequestMapping("/index")
public String showIndex(Model model){
model.addAttribute("message","lyle");
return "index";
}
}
4.配置文件application.yml:
spring:
thymeleaf:
cache: false # 去除缓存
3.Thymeleaf基本语法:
1.在Controller测试类中设置Model类型:
//简单类型: key value
model.addAttribute("message","lyle");
//pojo类型:
Person person = new Person(18, "樱木花道");
model.addAttribute("person",person);
//List集合类型:
ArrayList<Person> list = new ArrayList();
list.add(new Person(20,"鹰眼米霍克"));
list.add(new Person(21,"红发香克斯"));
model.addAttribute("list",list);
//Map集合类型:
HashMap<String,Object> map = new HashMap();
map.put("风清扬","独孤九剑");
map.put("洪七公","降龙十八掌");
model.addAttribute("map",map);
//在请求路径后拼接参数传入到路径后面
model.addAttribute("id",1);
model.addAttribute("name","路飞");
//日期类型:
model.addAttribute("date",new Date());
2.在index.html中获取对应的值:
<body>
<h4>欢迎来到首页:<span th:text="${message}"></span></h4>
<br />
<h4>
POJO类型:<br/>
用户的信息:<br/>
用户名:<span th:text="${person.name}"></span><br/>
年龄:<span th:text="${person.age}"></span><br/>
</h4>
<hr/>
<br/>
<h4>
集合List类型:<br/>
<table>
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr th:each="person:${list}">
<td th:text="${person.name}"></td>
<td th:text="${person.age}"></td>
</tr>
</table>
</h4>
<hr/>
<div>
<div th:each="entry:${map}">
<span th:text="${entry.key}"></span>:
<span th:text="${entry.value}"></span>
</div>
</div>
<hr/>
<a th:href="@{/test/index(id=${id},name=${name})}">点击链接</a>
日期格式化:<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span><br/>
条件判断:
<div>
<div th:if="2>1">吃好吃的</div>
<div th:if="2<1">吃清淡的的</div>
</div>
<br/>
<button onclick="login()">点点点</button>
</body>
<script th:inline="javascript">
var login=function () {
var name=[[${message}]];
alert("哈哈哈,"+name+"你上当了...")
}
</script>