springboot-thymeleaf - 凉拌西蓝花🥦

认识thymeleaf

什么是thymeleaf？

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.

总而言之 thymeleaf是一个视图渲染技术

使用thymeleaf

打开thymeleaf官网 https://www.thymeleaf.org/download.html
导入maven依赖

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
	<version>2.5.5</version>
</dependency>

hellowrold

一切伟大的行动和思想,都有一个微不足道的开始。 --Albert Camus

关闭缓存

避免一些不必要的麻烦

spring:
  thymeleaf:
    cache: false

编写前端页面

<!doctype html>

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <p>Hello,thymeleaf!</p>
</div>
</body>
</html>

编写视图控制器

package com.lu.springboot.bootdemo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
//@RestController
@RequestMapping("/th")
public class ThymeleafController {
    @GetMapping("/")
    public String hello() {
        return "hello";
    }
}

这里需要注意路径和视图名不能一致,否则会发生冲突.

效果

基础语法

引入命名空间

<html lang="en" xmlns:="http://www.thymeleaf.org" 
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

如果需要 spring security 作为安全认证的的话需要添加 hymeleaf-extras-springsecurity5 依赖

常用th标签

th:text

用于显示控制器穿入的name值

<div th:text="${name}">name</div>

@Controller
@RequestMapping("/th")
public class ThymeleafController {
    @GetMapping("/")
    public String hello(Model model) {
        model.addAttribute("name","Hello,World!");
        return "hello";
    }
}

th:object

用于接收后台传来的对象

<div th:object="${userInfo}">
	<p th:text="*{name}"></p>
	<p th:text="*{age}"></p>
</div>


@Component
class User{
    @Value("luckyFang")
    private String name;
    @Value("22")
    private Integer age;
    public String getName() {
        return name;
    }
    public Integer getAge() {
        return age;
    }
}



@GetMapping("/object")
public String objectTest(Model model){
	model.addAttribute("userInfo",user);
	return "object";
}

th:action

用来指定表单提交地址，替换 name 和 value

<form th:action="@{/article/}+${article.id}" method="POST"></from>

th:value

将对象id的值替换为value的属性

<input type="text" th:value="${article.id}" name="id"/>

th:field

用来绑定后台对象和表单数据

<input type="text" id="title" name="title" th:field="${article.title}"/>
<input type="text" id="title" name="title" th:field="*{title}"/>

URL写法

thymeleaf中通过@来处理URL的，需要使用th:href和th:src等属性

<a th:href="@{http://www.baidu.com/}"></a>
<a th:href="@{/}"> 相对路径</a>
<a th:href="@{css/bootstrap.min.css}">默认访问static下的css文件</a>

条件求值

thymeleaf通过th:if 和 th:unless 属性进行条件判断

<a th:href="@{/login}" th:if="${session.user==null}">Login</a>

th:unless 和 th:if恰恰相反,只有表达式中条件不成立才显示其内容

switch

thymeleaf 支持switch结构

<div th:switch="${user.role}">
	<p th:case="admin">管理员</p>
	<p th:case="vip">VIP会员</p>
	<p th:case="*"> 普通会员</p>
</div>

字符串替换

thymeleaf支持字符串替换拼接

拼接

<span th:text="欢迎您,'+${name}+'!"></span>
<span th:text="欢迎您,${name}!"></span>

运算符

算数运算符

<span th:text="1+2*3">1+2*3</span>
<span th:text="9%2">9%2</span>

条件运算符

<div th:if="${role} eq admin">
	<span>欢迎您,管理员</span>
</div>

eq是表达式

gt 大于
ge 大于等于
eq 等于
lt 小于
le 小于等于
ne 不等于

判断空值

可用if判断是否为空

<span th:if="${name}!=null">不为空</span>
<span th:if="${name}==null">为空</span>

公用对象

thymeleaf提供了公用对象,可用通过 #直接访问

格式化时间

<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}">格式化时间</td>

判断是不是空字符串

<span th:if="${#strings.isEmpty(name)}">空的</span>

循环遍历

thymeleaf支持循环遍历对象

遍历对象

语法: th:each ="OBject:$"

<div th:each="article:${articles}">
	<li th:text="${article.title}">文章内容</li>
	<li th:text="${article.body}">文章内容</li>
</div>

遍历分页

<div th:each="item:${page.content}">
	<li th:text="${item.id}">id</li>
	<li th:text="${item.title}">title</li>
</div>

遍历列表

thymeleaf 可以直接遍历列表

<div th:each="item:${list}">
	...
</div>

遍历数组

thymeleaf还可以遍历数组

<div th:each="item:${arrays}">
	...
</div>

遍历集合

同样 thymeleaf 也可以遍历map
th:text="$" 访问key $ 可以访问value

<div th:each="item:${map}">
	<li th:text="${item.key}"></li>
	<li th:text="${item.value}"></li>
</div>

公用代码块

遇到需要重复使用的代码块可用 th:fragment ，th:include和th:replace标签来处理代码复用问题

标记复用代码块

<div class ="footer" id="head" th:fragment="header">
</div>

调用复用代码块

~{::xxx}

<div th:replace="~{common::header}"></div>
<div th:include="~{common::header}"></div>

replace 替换内容
include 加载内容