thymeleaf 介绍
理解
- Thymeleaf是用来开发Web和独立环境项目的现代 服务器 端 Java 模板引擎。
- Thymeleaf的主要目标是为您的开发工作流程带来优雅的 自然模板 - HTML。可以在直接浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。
- Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，
- Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP，或其他模板引擎，如Velocity、FreeMarker等。
- Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在 DOM（文档对象模型） 上执行预先制定好的逻辑。
特点
- 动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让 程序员 在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
- 开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
- 多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
- 与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。
( https://www.codercto.com/a/50477.html )
集成thymeleaf
POM导入文件
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
Entity
package com.zz.entity;
public class Account {
private String account;
private String name;
private String password;
private String accountType;
private String tel;
public Account(String account, String name, String password, String accountType, String tel) {
//super();
this.account = account;
this.name = name;
this.password = password;
this.accountType = accountType;
this.tel = tel;
}
public Account() {//重写
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getAccountType() {
return accountType;
}
public void setAccountType(String accountType) {
this.accountType = accountType;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
}
thymeleaf基础 语法一
变量
- Thymeleaf通过 ${} 来获取 model 中的变量，注意这不是el表达式，而是 ognl表达式
- 如果将Thymeleaf 与Spring - 集成在上下文变量上(也称为Spring术语中的模型属性)，则为 Spring EL
${…} :变量表达式
Controller
package com.zz.controller;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.zz.entity.Account;
@Controller
@RequestMapping("/thymeleaf")
public class DemoController {
@RequestMapping("/demo1")
public String to_demo1(Model m) {
//1、
m.addAttribute("helloname", "jerry");//key-value
//2、
Account account=new Account();
account.setName("小明");
m.addAttribute("a", account);
//3、
Account account1=new Account();
account1.setName("小明");
account1.setTel("77777777");
Account account2=new Account();
account2.setName("小2");
account2.setTel("777788888");
Account account3=new Account();
account3.setName("小3");
account3.setTel("777799999");
List<Account> clist=new ArrayList();
clist.add(account1);
clist.add(account2);
clist.add(account3);
m.addAttribute("cs", clist);
return "demo1";
}
}
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
hello demo1
<span >你好,span表示一个语句块</span>
<!-- ${...} :变量表达式，演示 -->
<!-- 1、直接取值，直接显示 -->
<h3>1、</h3>
<span th:text="${helloname}"></span>
<!-- 2、取对象(对象的属性)，直接显示 -->
<h3>2、</h3>
<span th:text="${a.name}"></span>
<!-- 3、List,显示
遍历（迭代）的语法---th:each="自定义变量的名称：${集合变量名称}"
--th:each=" 自定义变量的名称，自定义变量状态的名称：${集合变量名称}"
-->
<h3>3、</h3>
<table border="1">
<tr>
<th>名字</th>
<th>电话</th>
</tr>
<tr th:each="c:${cs}">
<td th:text="${c.name}">jeery</td>
<td th:text="${c.tel}">123465798</td>
</tr>
</table>
</body>
</html>
-
th:text 的标签属性中，这个叫做 指令
-
有些情况下，我们的属性名可能本身也是变量，怎么办？
-
ognl提供了类似js的语法方式：
-
例如： ${ user.name} 可以写作 ${user[‘name’]}
-
-
th:each 中使用循环将其评估为迭代器
- th:each="自定义变量的名称：${集合变量名称}"
------------- th:each=“user : ${users}”
---- ${users} 是要遍历的集合，可以是以下类型：- Iterable，实现了Iterable接口的类
- Enumeration，枚举
- Interator，迭代器
- Map，遍历得到的是Map.Entry
- Array，数组及其它一切符合数组结果的对象
- th:each=" 自定义变量的名称，自定义变量状态的名称：${集合变量名称}"
-------------th:each=“user,stat : ${users}”
----stat对象包含以下属性：- index，从0开始的角标
- count，元素的个数，从1开始
- size，总元素个数
- current，当前遍历到的元素
- even/odd，返回是否为奇偶，boolean值
- first/last，返回是否为第一或最后，boolean值
（ https://www.codercto.com/a/50477.html ）
- th:each="自定义变量的名称：${集合变量名称}"
*{…} : 选择表达式
- 选择表达式就像变量表达式一样，它们不是整个上下文变量映射上执行，而是在先前选择的对象
Controller
@RequestMapping("/demo2")
public String to_demo2(Model m) {
Account account1=new Account();
account1.setName("小明");
account1.setTel("77777777");
m.addAttribute("c",account1);
return "demo2";
}
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo2</title>
</head>
<body>
<h1>*{...} : 选择表达式</h1>
<div th:object="${c}">
<span th:text="*{name}">...</span>
<span th:text="*{tel}">...</span>
</div>
</body>
</html>
- 对象由 th:object 属性指定
Thymeleaf表单
Controller
@RequestMapping("/formdemo")
public String to_formdemo(Model m) {
Account account1=new Account();
account1.setName("小明");
account1.setTel("77777777");
account1.setAccount("123");
m.addAttribute("c",account1);
return "formdemo";
}
@RequestMapping("/saveformdemo")
public String to_account(Model m,Account c) {
System.out.println("name:"+c.getName());
return "account";
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>表单演示</h1>
<form th:action="@{/thymeleaf/saveformdemo}" th:object="${c}" method="POST">
<label for="firstName">产品名称:</label>
<input type="text" th:field="*{name}" value="" /><br/>
<label for="firstName">账号:</label>
<input type="text" th:field="*{account}" value="2018-03-28" /> <br/>
<label for="price">手机号码:</label>
<input type="text" th:field="*{tel}" size="10" value="198" /><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
