SpringBoot Thymeleaf教程
1 Thymeleaf常用th标签介绍
关键字 | 功能介绍 | 案例 |
---|---|---|
th:id | 替换id | <input th:id="'xxx' + ${collect.id}"/> |
th:text | 文本替换 | <p th:text="${collect.description}">description</p> |
th:utext | 支持html的文本替换 | <p th:utext="${htmlcontent}">conten</p> |
th:object | 替换对象 | <div th:object="${session.user}"> |
th:value | 属性赋值 | <input th:value="${user.name}" /> |
th:with | 变量赋值运算 | <div th:with="isEven=${prodStat.count}%2==0"></div> |
th:style | 设置样式 | th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" |
th:onclick | 点击事件 | th:onclick="'getCollect()'" |
th:each | 属性赋值 | tr th:each="user,userStat:${users}"> |
th:if | 判断条件 | <a th:if="${userId == collect.userId}" > |
th:unless | 和th:if判断相反 | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> |
th:href | 链接地址 | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> |
th:switch | 多路选择 配合th:case 使用 | <div th:switch="${user.role}"> |
th:case | th:switch的一个分支 | <p th:case="'admin'">User is an administrator</p> |
th:fragment | 布局标签,定义一个代码片段,方便其它地方引用 | <div th:fragment="alert"> |
th:include | 布局标签,替换内容到引入的文件 | <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> |
th:replace | 布局标签,替换整个标签到引入的文件 | <div th:replace="fragments/header :: title"></div> |
th:selected | selected选择框 选中 | th:selected="(${xxx.id} == ${configObj.dd})" |
th:src | 图片类地址引入 | <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> |
th:inline | 定义js脚本可以使用变量 | <script type="text/javascript" th:inline="javascript"> |
th:action | 表单提交的地址 | <form action="subscribe.html" th:action="@{/subscribe}"> |
th:remove | 删除某个属性 | <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 |
th:attr | 设置标签属性,多个属性可以用逗号分隔 | 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。 |
2 在pom.xml文件中加入依赖
<?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>org.example</groupId>
<artifactId>springBoot</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>
<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>
3 在resources目录下新建application.yml进行配置
# Thymeleaf配置
spring:
thymeleaf:
prefix:
classpath: /templates/
check-template-location: true
suffix: .html
encoding: UTF-8
content-type: text/html
mode: HTML5
cache: false
4 在resources目录下新建templates目录用于存放html页面
templates:该目录是安全的。意味着该目录下的内容是不允许外界直接访问的。
5 基础语法详细教程
5.1 文本标签 th:text/th:utext
- th:text 进行文本替换 不会解析html
- th:utext 进行文本替换 会解析html
package com.yctc.study.jsp.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* SpringBoot整合Thymeleaf
*
*
*/
@Controller
public class UserController {
/*
* 处理请求,产生数据
*/
@RequestMapping("/showUser")
public String showUser(Model model){
model.addAttribute("msg","<h1>Thymeleaf第一个案例</h1>");
return "userList";
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Thymeleaf入门</title>
</head>
<body>
<span th:text="${msg} "></span>
<hr/>
<span th:utext="${msg} "></span>
</body>
</html>
5.2 用于声明html中value属性信息 th:value
@RequestMapping("/showUser")
public String showUser(Model model){
model.addAttribute("msg","Thymeleaf案例");
return "userList";
}
<input type="text" th:value="${msg}" />
5.3 条件判断 th:if/th:unless
@RequestMapping("/showUser")
public String showUser(Model model){
model.addAttribute("flag",true);
return "userList";
}
<p th:if="${flag}">if判断</p>
<hr/>
<p th:unless="!${flag}">unless 判断</p>
5.4 条件判断 th:switch/th:case
@RequestMapping("/showUser")
public String showUser(Model model){
model.addAttribute("flag","1");
return "userList";
}
<div th:switch="${flag}">
<p th:case="1">one</p>
<p th:case="2">two</p>
</div>
5.5 遍历集合 th:each
5.5.1 遍历list集合
package com.yctc.study.jsp.pojo;
public class Users {
private Integer userid;
private String username;
private Integer userage;
public Integer getUserid() {
return userid;
}
public void setUserid(Integer userid) {
this.userid = userid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Integer getUserage() {
return userage;
}
public void setUserage(Integer userage) {
this.userage = userage;
}
public Users(Integer userid, String username, Integer userage) {
super();
this.userid = userid;
this.username = username;
this.userage = userage;
}
public Users() {
super();
// TODO Auto-generated constructor stub
}
}
@RequestMapping("/showUser")
public String showUser(Model model){
List<Users> list = new ArrayList<>();
list.add(new Users(1,"张三",20));
list.add(new Users(2,"李四",22));
list.add(new Users(3,"王五",24));
model.addAttribute("list", list);
return "userList";
}
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Index</th>
<th>Count</th>
<th>Size</th>
<th>Even</th>
<th>Odd</th>
<th>First</th>
<th>lase</th>
</tr>
<tr th:each="user,userStatus : ${list}">
<td th:text="${user.userid}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.userage}"></td>
<td th:text="${userStatus.index}"></td>
<td th:text="${userStatus.count}"></td>
<td th:text="${userStatus.size}"></td>
<td th:text="${userStatus.even}"></td>
<td th:text="${userStatus.odd}"></td>
<td th:text="${userStatus.first}"></td>
<td th:text="${userStatus.last}"></td>
</tr>
</table>
- index:当前迭代对象的迭代索引,从0开始,这是索引属性;
- count:当前迭代对象的迭代索引,从1开始,这个是统计属性;
- size:迭代变量元素的总量,这是被迭代对象的大小属性;
- current:当前迭代变量;
- even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算);
- first:布尔值,当前循环是否是第一个;
- last:布尔值,当前循环是否是最后一个
5.5.2 遍历map集合
@RequestMapping("/showUser")
public String showUser(Model model){
Map<String, Users> map = new HashMap<>();
map.put("u1", new Users(1,"张三",20));
map.put("u2", new Users(2,"李四",22));
map.put("u3", new Users(3,"王五",24));
model.addAttribute("maps", map);
return "userList";
}
<table border="1" cellspacing="0">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>MapKey</th>
</tr>
<tr th:each="map : ${maps}">
<td th:each="entry:${map}" th:text="${entry.value.userid}" ></td>
<td th:each="entry:${map}" th:text="${entry.value.username}"></td>
<td th:each="entry:${map}" th:text="${entry.value.userage}"></td>
<td th:each="entry:${map}" th:text="${entry.key}"></td>
</tr>
</table>
5.6 处理String的相关操作#strings
- 字符串转换(toString)
- 检查字符串是否为空(isEmpty)
- 字符串是为空替换操作(defaultString)
- 检查字符串中是否包含某个字符串(contains containsIgnoreCase)
- 检查字符串是以片段开头还是结尾(startsWith endsWith)
- 截取(substring substringAfter)
- 替换(replace)
- 追加(prepend append)
- 字符串长度(replace)
- 字符串是否存在某个字符(replace)
- 变更大小写(toUpperCase toLowerCase)
- 拆分和组合字符串(arrayJoin arraySplit)
- 去空格(trim)
- 缩写文本(abbreviate)
- 字符串连接(concat)
- 更多方法参考 org.thymeleaf.expression.Strings.java
package com.yctc.study.jsp.pojo;
public class Users {
private Integer userid;
private String username;
private Integer userage;
public Integer getUserid() {
return userid;
}
public void setUserid(Integer userid) {
this.userid = userid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Integer getUserage() {
return userage;
}
public void setUserage(Integer userage) {
this.userage = userage;
}
public Users(Integer userid, String username, Integer userage) {
super();
this.userid = userid;
this.username = username;
this.userage = userage;
}
public Users() {
super();
// TODO Auto-generated constructor stub
}
@Override
public String toString() {
return "Users{" +
"userid=" + userid +
", username='" + username + '\'' +
", userage=" + userage +
'}';
}
}
@RequestMapping("/showUser")
public String showUser(Model model){
Users user = new Users(1, "张三", 20);
model.addAttribute("user", user);
model.addAttribute("msg","Thymeleaf案例");
return "userList";
}
<table border="1" cellspacing="0">
<tr>
<th>方法</th>
<th>结果</th>
</tr>
<tr>
<td>toString</td>
<td th:text="${#strings.toString(user)}"></td>
</tr>
<tr>
<td rowspan="2">isEmpty</td>
<td th:text="${#strings.isEmpty(msg)}"></td>
</tr>
<tr>
<td th:text="${#strings.isEmpty(message)}"></td>
</tr>
<tr>
<td>defaultString</td>
<td th:text="${#strings.defaultString(message,'message is null')}"></td>
</tr>
<tr>
<td rowspan="2">contains</td>
<td th:text="${#strings.contains(msg,'T')}"></td>
</tr>
<tr>
<td th:text="${#strings.contains(msg,'Z')}"></td>
</tr>
<tr>
<td rowspan="2">startsWith</td>
<td th:text="${#strings.startsWith(msg,'T')}"></td>
</tr>
<tr>
<td th:text="${#strings.startsWith(msg,'Z')}"></td>
</tr>
<tr>
<td rowspan="2">endsWith</td>
<td th:text="${#strings.endsWith(msg,'案例')}"></td>
</tr>
<tr>
<td th:text="${#strings.endsWith(msg,'Z')}"></td>
</tr>
<tr>
<td rowspan="2">substring</td>
<td th:text="${#strings.substring(msg,3)}"></td>
</tr>
<tr>
<td th:text="${#strings.substring(msg,3,6)}"></td>
</tr>
<tr>
<td>replace</td>
<td th:text="${#strings.replace(msg,'案例','replace')}"></td>
</tr>
<tr>
<td>prepend</td>
<td th:text="${#strings.prepend(msg,'第一个')}"></td>
</tr>
<tr>
<td>append</td>
<td th:text="${#strings.append(msg,'第一个')}"></td>
</tr>
<tr>
<td>toUpperCase</td>
<td th:text="${#strings.toUpperCase(msg)}"></td>
</tr>
<tr>
<td>toLowerCase</td>
<td th:text="${#strings.toLowerCase(msg)}"></td>
</tr>
<tr>
<td>length</td>
<td th:text="${#strings.length(msg)}"></td>
</tr>
<tr>
<td>indexOf</td>
<td th:text="${#strings.indexOf(msg,'leaf')}"></td>
</tr>
<tr>
<td>abbreviate</td>
<td th:text="${#strings.abbreviate(msg,10)}"></td>
</tr>
<tr>
<td>concat</td>
<td th:text="${#strings.concat(msg,'连接')}"></td>
</tr>
<tr>
<td>arraySplit</td>
<td th:text="${#strings.arraySplit(msg,'f')[0]}"></td>
</tr>
</table>
5.7 处理日期数据 生成,转换,获取日期的具体天数 年数#dates
- 格式化日期格式(format)
- 获取年月日(year/month/day)
- 获取月份(month)
- 获取月份名称(monthName)
- 获取所在周的第几天(dayOfWeek)
- 获取星期名称(dayOfWeek)
- 更多方法参考 org.thymeleaf.expression.Dates.java
@RequestMapping("/showUser")
public String showUser(Model model){
model.addAttribute("date", new Date());
return "userList";
}
<table border="1" cellspacing="0">
<tr>
<th>方法</th>
<th>结果</th>
</tr>
<tr>
<td rowspan="2">format</td>
<td th:text="${#dates.format(date)}"></td>
</tr>
<tr>
<td th:text="${#dates.format(date,'yyy/MM/dd')}"></td>
</tr>
<tr>
<td>year</td>
<td th:text="${#dates.year(date)}"></td>
</tr>
<tr>
<td>month</td>
<td th:text="${#dates.month(date)}"></td>
</tr>
<tr>
<td>day</td>
<td th:text="${#dates.day(date)}"></td>
</tr>
<tr>
<td>month</td>
<td th:text="${#dates.month(date)}"></td>
</tr>
<tr>
<td>monthName</td>
<td th:text="${#dates.monthName(date)}"></td>
</tr>
<tr>
<td>dayOfWeek</td>
<td th:text="${#dates.dayOfWeek(date)}"></td>
</tr>
<tr>
<td>dayOfWeekName</td>
<td th:text="${#dates.dayOfWeekName(date)}"></td>
</tr>
</table>
5.8 处理数字数据的转换 #numbers
- 对不够位数的数字进行补0(formatInteger )
- 设置千位分隔符(formatInteger)
- 精确小数点(formatDecimal )
- 显示金钱(formatCurrency)
- 设置百分号(formatPercent )
- 生成数组(sequence )
- 更多方法参考 org.thymeleaf.expression.Numbers.java
@RequestMapping("/showUser")
public String showUser(Model model){
model.addAttribute("num", 10000);
model.addAttribute("num2", 100.234);
return "userList";
}
<table border="1" cellspacing="0">
<tr>
<th>方法</th>
<th>结果</th>
</tr>
<tr>
<td rowspan="3">formatInteger</td>
<td th:text="${#numbers.formatInteger(num,6)}"></td>
</tr>
<tr>
<td th:text="${#numbers.formatInteger(num,3)}"></td>
</tr>
<tr>
<td th:text="${#numbers.formatInteger(num,2,'COMMA')}"></td>
</tr>
<tr>
<td>formatDecimal</td>
<td th:text="${#numbers.formatDecimal(num2,0,3)}"></td>
</tr>
<tr>
<td rowspan="2">formatCurrency</td>
<td th:text="${#numbers.formatCurrency(num)}"></td>
</tr>
<tr>
<td th:text="${#numbers.formatCurrency(num2)}"></td>
</tr>
<tr>
<td>formatPercent</td>
<td th:text="${#numbers.formatPercent(num2,0,2)}"></td>
</tr>
<tr>
<td>sequence</td>
<td>
<div th:each="num : ${#numbers.sequence(2,4)}" >
<p th:text="${num}"></p>
</div>
</td>
</tr>
</table>
更多方法参考thymeleaf架包下的org.thymeleaf.expression包中类方法
5.9 域对象操作
@RequestMapping("/showUser")
public String showUser(HttpServletRequest request, Model model){
request.setAttribute("req", "HttpServletRequest");
request.getSession().setAttribute("sess", "HttpSession");
request.getSession().getServletContext().setAttribute("app", "Application");
return "userList";
}
Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
Session:<span th:text="${session.sess}"></span><br/>
Application:<span th:text="${application.app}"></span>
6.0 URL表达式
基本语法:@{}
写法 | 路径 | 功能 |
---|---|---|
<a th:href="@{http://www.baidu.com}">绝对路径</a> |
绝对路径 | 类似于<a href="http://www.baidu.com">绝对路径</a> |
<a th:href="@{/show}">相对路径</a> |
相对路径 | 相对于项目的上下文的相对路径,相当于http://localhost:8080/show |
<a th:href="@{~/project2/resourcename}">相对于服务器的根</a> |
相对路径 | ~相当于服务器的根目录,通过这个可以取同一服务器不同项目的资源 |
<a th:href="@{/show(id=1,name=zhangsan)}">相对路径-传参</a> |
相对路径 | 相当于http://localhost:8080/show?id=1&name=zhangsan |
<a th:href="@{/userList/{userid}/{username}(userid=1,username=张三)}">相对路径-传参-restful</a> |
相对路径 | http://localhost:8080/userList/1/张三 |