Thymeleaf学习笔记
Thymeleaf学习笔记
模板引擎Thymeleaf快速入门
一、Thymeleaf前言
Thymeleaf是动静分离的，页面中的动态标签是需要传递参数的时候才会渲染，不然就是原本默认的静态的样子。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title th:text="${title}">默认的标题title>
// 这里的标签（标题）是一个动态的标签，当传递了title数据，页面就会渲染这个标签；不然按默认显示
head>
<body>
body>
html>
二、Thymeleaf基础使用
在application.yml文件中
sever:
port:0001
spring:
thymeleaf:
cache:false
// 开发过程中关闭，上线时打开
thymeleaf模板
DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
html>
单例：前端（index.html）
DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title th:text="${title}">默认的titletitle>
<meta th:content="${description}" name="description" content="默认的description">
<meta th:content="${keywords}" name="keywords" content="默认的keywords">
head>
html>
单例：后端 （IndexController.java）. 控制器（spring MVC）
@Controller
public class IndexController{
@GetMapping("/index")
public Stirng index(Model model){
// model 用来给页面追加数据
model.addAttribute("title","传递的title");
// 参数 + 参数值
model.addAttribute("description","传递的description");
model.addAttribute("keywords","传递的keywords");
return "index";
}
}
补充*1：如果我想在传递的值上加上一定的字符串，应该怎么做呢？
<title th:text="'某某字符串-' + ${title}">默认的titletitle>
or
<title th:text="|某某字符串 - ${title}|">默认的titletitle>
三、Thymeleaf常用方法
给页面看的对象
UserVO.java
@Data
public class UserVO{
private String username;
private Integer age;
private Integer sex;
private Boolean isVIP;
private Date createTime;
private List<String> tags;
}
IndexController.java
@Controller
public class IndexController{
@GetMapping("/index")
public Stirng index(Model model){
// model 用来给页面追加数据
model.addAttribute("title","传递的title");
// 参数 + 参数值
return "index";
}
@GetMapping("/basicTrain")
public Stirng basicTrain(Model model){
UserVO userVO = new UserVO();
userVO.setUsername("lookroot");
userVO.setAge(22);
userVO.setIsVIP(true);
userVO.setCreateTime(new Date());
userVO.setSex(1);
userVO.setTags(Arrays.asList("PHP","Node","Java"));
model.addAttribute("user",userVO());
return "basic";
}
}
basic.html
DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
head>
<body>
<div>
<p th:text="${user.username}">p>
<p th:text="${user.age}">p>
div>
<div th:object="${user}">
<p th:text="*{username}">p>
<p th:text="*{age}">p>
div>
<p th:if="${user.isVIP}">会员p>
<p th:if="${!user.isVIP}">会员p>
<ul>
<li th:each="tag:${user.tags}" th:text="${user.tag}">li>
ul>
<div th:switch="${user.sex}">
<p th:case="1">男p>
<p th:case="2">女p>
<p th:case="*">默认p>
div>
body>
html>
附：Cez的Thymeleaf笔记
Thymeleaf模板引擎
使用thymeleaf，只需要导入对应的依赖，将html放在templates目录下
ThymeleafProperties源码：
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
org.springframework.boot
spring-boot-starter-thymeleaf
在HTML中导入约束
<html lang="en" xmlns:th="http://www.thymeleaf.org">
所有的HTML元素都可以被thymeleaf接管 th:元素名
Thymeleaf遍历
//在控制器中
Model model
houses={......};
model.addAttribute("house",houses);
<tr th:each="house : ${houses}">
<td th:text="${house.getHouse_id()}">td>
<td th:text="${house.getHouse_address()}">td>
<td th:text="${house.getHouse_host_name()}">td>
<td th:text="${house.getHouse_price()}">td>
tr>
四、Thymeleaf中JavaScript、css的使用
五、Thymeleaf组件的使用
六、Thymeleaf中使用工具类
七、组件拓展和组件传值