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/张三

SpringBoot Thymeleaf教程

SpringBoot Thymeleaf教程

1 Thymeleaf常用th标签介绍

2 在pom.xml文件中加入依赖

3 在resources目录下新建application.yml进行配置

4 在resources目录下新建templates目录用于存放html页面

5 基础语法详细教程

5.1 文本标签 th:text/th:utext

5.2 用于声明html中value属性信息 th:value

5.3 条件判断 th:if/th:unless

5.4 条件判断 th:switch/th:case

5.5 遍历集合 th:each

5.5.1 遍历list集合

5.5.2 遍历map集合

5.6 处理String的相关操作#strings

5.7 处理日期数据 生成，转换，获取日期的具体天数 年数#dates

5.8 处理数字数据的转换 #numbers

5.9 域对象操作

6.0 URL表达式

猜你喜欢

5.7 处理日期数据生成，转换，获取日期的具体天数年数#dates