目录：

在这里插入图片描述

Thymeleaf

Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎，类似JSP。它可以轻易的与SpringMVC等Web框架进行集成作为Web应用的模板引擎。SpringBoot推荐使用Thymeleaf编写动态页面。

Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。

Thymeleaf在有服务和无服务的环境下皆可运行，它即可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果

没有服务时，Thymeleaf的模板可以展示静态数据；当有数据返回到页面时，Thymeleaf会动态地替换掉静态内容，使页面动态显示。

  1. 创建SpringBoot项目

  2. 引入SpringMVC和Thymeleaf起步依赖

<!--添加Thymeleaf起步依赖-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
  1. 创建视图index.html
<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>thymeleaf入门</title>
</head>
<body>
<!-- 静态页面显示中北小萌新，动态页面使用后端传来的msg数据代替 -->
<!-- thymeleaf支持el表达式 -->
<h2 th:text="${msg}">中北小萌新</h2>
</body>
</html>
  1. template中的html文件不能直接访问，需要编写Controller跳转到页面中
@Controller
public class PageController {
  // 页面跳转
  @GetMapping("/show")
  public String showPage(Model model){
    model.addAttribute("msg","Hello Thymeleaf");
    return "index";
   }
}
  1. 进行springboot配置
#日志格式
logging.pattern.console=%d{HH:mm:ss.SSS} %clr(%-5level) ---  [%-15thread] %cyan(%-50logger{50}):%msg%n
  1. 启动项目，访问http://localhost:8080/show及静态页面

变量输出

语法作用
th:text将model中的值作为内容放入标签中
th:value将model中的值放入input标签的value属性中

准备模型数据

@GetMapping("/show")
public String showPage(Model model){
  model.addAttribute("msg","Hello Thymeleaf");
  return "index";
}

在视图展示model中的值

<span th:text="${msg}"></span>
<hr/>
<input th:value="${msg}">

操作字符串&时间

Thymeleaf提供了一些内置对象可以操作数据，内置对象可直接在模板中使用，这些对象是以#引用的。

操作字符串
操作字符串的内置对象为strings。

方法说明
${#strings.isEmpty(key)}判断字符串是否为空，如果为空返回true，否则返回false
${#strings.contains(msg,‘T’)}判断字符串是否包含指定的子串，如果包含返回true，否则返回false
${#strings.startsWith(msg,‘a’)}判断当前字符串是否以子串开头，如果是返回true，否则返回false
${#strings.endsWith(msg,‘a’)}判断当前字符串是否以子串结尾，如果是返回true，否则返回false
${#strings.length(msg)}返回字符串的长度
${#strings.indexOf(msg,‘h’)}查找子串的位置，并返回该子串的下标，如果没找到则返回-1
${#strings.substring(msg,2,5)}截取子串，用法与JDK的subString方法相同
${#strings.toUpperCase(msg)}字符串转大写
${#strings.toLowerCase(msg)}字符串转小写

使用方式：

<span th:text="${#strings.isEmpty(msg)}"></span>
<hr/>
<span th:text="${#strings.contains(msg,'s')}"></span>
<hr/>
<span th:text="${#strings.length(msg)}"></span>

操作时间
操作时间的内置对象为dates

方法说明
${#dates.format(key)}格式化日期，默认的以浏览器默认语言为标准进行格式化
${#dates.format(key,‘yyyy/MM/dd’)}按照自定义的格式做日期转换
${#dates.year(key)}取年
${#dates.month(key)}取月
${#dates.day(key)}取日

准备数据

model.addAttribute("date",new Date(130,0,1));

使用内置对象操作时间

<span th:text="${#dates.format(date)}"></span>
<hr/>
<span th:text="${#dates.format(date,'yyyy/MM/dd')}"></span>
<hr/>
<span th:text="${#dates.year(date)}"></span>
<span th:text="${#dates.month(date)}"></span>
<span th:text="${#dates.day(date)}"></span>

条件判断

语法作用
th:if条件判断

准备数据

model.addAttribute("sex","女");

进行条件判断

<div>
  <span th:if="${sex} == '男'">
     性别：男
  </span>
  <span th:if="${sex} == '女'">
     性别：女
  </span>
</div>
语法作用
th:switch/th:caseth:switch/th:case与Java中的switch语句等效。th:case="“表示Java中switch的default，即没有case的值为true时显示th:case=”"的内容。

准备数据

model.addAttribute("id","12");

进行条件判断

<div th:switch="${id}">
  <span th:case="1">ID为1</span>
  <span th:case="2">ID为2</span>
  <span th:case="3">ID为3</span>
  <span th:case="*">ID为*</span>
</div>

迭代遍历

语法作用
th:each迭代器，用于循环迭代集合

遍历集合
编写实体类

public class User {
  private String id;
  private String name;
  private int age;
  // 省略getter/setter/构造方法
}

准备数据

List<User> users = new ArrayList();
users.add(new User("1","sxt",23));
users.add(new User("2","baizhan",22));
users.add(new User("3","admin",25));
model.addAttribute("users",users);

在页面中展示数据

<table border="1" width="50%">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <!-- 遍历集合的每一项起名为user -->
  <tr th:each="user : ${users}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="${user.age}"></td>
  </tr>
</table>

遍历Map
准备数据

Map<String,User> map = new HashMap();
map.put("user1",new User("1","sxt",23));
map.put("user2",new User("2","baizhan",22));
map.put("user3",new User("3","admin",25));
model.addAttribute("map",map);

遍历map

<table border="1" width="50%">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
    <th>Key</th>
  </tr>
  <!-- 遍历出的是一个键值对对象，key获取键，value获取值 -->
  <tr th:each="m : ${map}">
    <td th:text="${m.value.id}"></td>
    <td th:text="${m.value.name}"></td>
    <td th:text="${m.value.age}"></td>
    <td th:text="${m.key}"></td>
  </tr>
</table>

使用状态变量

thymeleaf将遍历的状态变量封装到一个对象中，通过该对象的属性可以获取状态变量：

状态变量含义
index当前迭代器的索引，从0开始
count当前迭代对象的计数，从1开始
size被迭代对象的长度
odd/even布尔值，当前循环是否是偶数/奇数，从0开始
first布尔值，当前循环的是否是第一条，如果是返回true，否则返回false
last布尔值，当前循环的是否是最后一条，如果是则返回true，否则返回false

使用状态变量

<!--冒号前的第一个对象是遍历出的对象，第二个对象是封装状态变量的对象-->
<tr th:each="user,status : ${users}">
  <td th:text="${user.id}"></td>
  <td th:text="${user.name}"></td>
  <td th:text="${user.age}"></td>
  <td th:text="${status.index}"></td>
  <td th:text="${status.count}"></td>
  <td th:text="${status.size}"></td>
  <td th:text="${status.odd}"></td>
  <td th:text="${status.even}"></td>
  <td th:text="${status.first}"></td>
  <td th:text="${status.last}"></td>
</tr>

获取域中的数据

thymeleaf也可以获取request，session，application域中的数据，方法如下：

准备数据

request.setAttribute("req","HttpServletRequest");
session.setAttribute("ses","HttpSession");
session.getServletContext().setAttribute("app","application");

获取域数据

request:<span th:text="${req}"></span><hr/>
session: <span th:text="${session.ses}"/><hr/>
application: <span th:text="${application.app}"/>

URL写法

在Thymeleaf中路径的写法为@{路径}

<a th:href="@{http://www.baidu.com}">百度</a>
<a th:href="@{http://www.baidu.com?id=1&name=sxt}">静态参数一</a>
<a th:href="@{http://www.baidu.com(id=2,name=bz)}">静态参数二</a>

添加动态参数
准备数据

model.addAttribute("id","100");
model.addAttribute("name","bzcxy");

在URL中添加参数

<a th:href="@{'http://www.baidu.com?id='+${id}+'&name='+${name}}">动态参数一</a>
<a th:href="@{http://www.baidu.com(id=${id},name=${name})}">动态参数二</a>

添加RESTful风格的参数

<a th:href="@{http://www.baidu.com/{id}/{name}(id=${id},name=${name})}">restful格式传递参数方式</a>

相关配置

在SpringBoot配置文件中可以进行Thymeleaf相关配置

配置项含义
spring.thymeleaf.prefix视图前缀
spring.thymeleaf.suffix视图后缀
spring.thymeleaf.encoding编码格式
spring.thymeleaf.servlet.content-type响应类型
spring.thymeleaf.cache=false页面缓存，配置为false则不启用页面缓存，方便测试
spring:
  thymeleaf:
   prefix: classpath:/templates/
   suffix: .html
   encoding: UTF-8
   cache: false
   servlet:
    content-type: text/html

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力
在这里插入图片描述

# java
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊