thymeleaf

thymeleaf 跟 JSP 一样，就是运行之后，就得到纯 HTML了。区别在与，不运行之前， thymeleaf 也是纯 html 所以 thymeleaf 不需要服务端的支持，就能够被以 html 的方式打开

添加pom支持

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

书写yml配置

spring:
  #thymeleaf 配置
  thymeleaf:
    mode: HTML5
    encoding: UTF-8
    servlet:
      content-type: text/html
    cache: false #关闭缓存，便于调试

书写controller

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {

    @RequestMapping("/hello")
    public String index(Model model){
        model.addAttribute("hello", "hello world");
        return "/thymeleaf/hello";
    }

}

前端html页面

<html xmlns:th="http://www.thymeleaf.org">

声明当前文件是 thymeleaf, 里面可以用th开头的属性

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

如果hello有值就取其中的值，没有则以name代替

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="${hello}" >name</p>
</body>
</html>

URL

前端页面中引入static下的css、js、img等文件

@这种方式会自动获取到项目的上下文路径

    <link rel="stylesheet" type="text/css" media="all" href="../../css/style.css" th:href="@{/css/style.css}" />
    <script type="text/javascript" src="../../js/js.js" th:src="@{/js/js.js}"></script>
    <img src="../../img/img.jpg" th:src="@{/img/img.jpg}">

表达式

1.新建一个实体类product 注意：此处使用了Lombok插件的@Data注解省略了get/set、toString等方法

@Data
public class Product {
    private int id;
    private String name;
    private int price;
}

2.书写controller方法

    @RequestMapping("/product")
    public String addGoods(Model model){
        String htmlContent = "<p style='color:red'> 红色文字</p>";
        Product product = new Product();
        product.setId(1);
        product.setName("测试");
        product.setPrice(15);

        model.addAttribute("htmlContent", htmlContent);
        model.addAttribute("product", product);
        return "/thymeleaf/product";
    }

3.书写前端页面（多种方法取值）

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>product</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    * 1.转义和非转义
    <p th:text="${htmlContent}" ></p>
    <p th:utext="${htmlContent}" ></p>
    
    * 2.获取对象及其属性
    <p th:text="${product}" ></p>
    <p th:text="${product.name}" ></p>
    <p th:text="${product.getName()}" ></p>
    
    * 3.显示当前对象的属性
    <p th:text="*{name}" ></p>
    
    * 4.算数运算 price(15) + 10
    <p th:text="${product.price + 10}" ></p>
</body>
</html>

包含/引入

新建两个include的html文件

footer1 是不带参数的 footer2 是带参数的

<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1">
    <p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)">
    <p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>

在其他html文件中引入

此处的路径是templates下的绝对路径

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>include包含</title>
</head>
<body>
    <!--此处的路径是templates下的绝对路径-->
    <div th:replace="/include/_head::footer1"></div>
    <div th:replace="/include/_head::footer2(2016,2019)"></div>
</body>
</html>

if判断

controller中赋值

    @RequestMapping("/bool")
    public String bool(Model model){
        model.addAttribute("testBoolean", true);
        return "/thymeleaf/bool";
    }

普通判断

<p th:if="${testBoolean}" >如果testBoolean 是 true ，本句话就会显示</p>

取反判断 not/th:unless.

<p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句话就不会显示</p>
<p th:unless="${testBoolean}" >unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示</p>

三元表达式

<p th:text="${testBoolean}?'当testBoolean为真的时候，显示本句话，这是用三相表达式做的':''" ></p>

注意

不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false，规则如下:

boolean 类型并且值是 true, 返回 true
数值类型并且值不是 0, 返回 true
字符类型(Char)并且值不是 0, 返回 true
String 类型并且值不是 "false", "off", "no", 返回 true
不是 boolean, 数值, 字符, String 的其他类型, 返回 true

值是 null, 返回 false

遍历

普通遍历

    <tr th:each="p: ${list}" >
        <td th:text="${p.id}"></td>
        <td th:text="${p.name}"></td>
        <td th:text="${p.price}"></td>
    </tr>

带状态的遍历

status里还包含了如下信息： index 属性, 0 开始的索引值 count 属性, 1 开始的索引值 size 属性, 集合内元素的总量 current 属性, 当前的迭代对象 even/odd 属性, boolean 类型的, 用来判断是否是偶数个还是奇数个 first 属性, boolean 类型, 是否是第一个 last 属性, boolean 类型, 是否是最后一个

    <tr th:class="${status.even}?'even':'odd'"  th:each="p,status: ${list}">
        <td th:text="${p.id}"></td>
        <td th:text="${p.name}"></td>
        <td th:text="${p.price}"></td>
    </tr>

在select上使用

    <select>
        <option th:each="p,status: ${list}" th:value="${p.id}" th:text="${p.name}" th:selected="${p.id==5}"></option>
    </select>

在checkbox上使用

<input type="checkbox" th:each="p,status: ${list}" th:value="${p.id}" th:text="${p.name}" th:checked="${p.id==6}">

thymeleaf内置工具类

日期格式化

后台传的前台的是直接new Date()

    <div class="showing date">
        <h2>格式化日期</h2>
        直接输出日期 ${now}:
        <p th:text="${now}"></p>
        默认格式化 ${#dates.format(now)}:
        <p th:text="${#dates.format(now)}"></p>
        自定义格式化 ${#dates.format(now,'yyyy-MM-dd HH🇲🇲ss')}:
        <p th:text="${#dates.format(now,'yyyy-MM-dd HH🇲🇲ss')}"></p>
    </div>

其他内置工具类

	Execution Info
		获取页面模板的处理信息
	Messages
		在变量表达式中获取外部消息的方法，与使用＃{...}语法获取的方法相同
	URIs/URLs
		转义部分URL / URI的方法
	Conversions
		用于执行已配置的转换服务的方法
	Dates
		时间操作和时间格式化等
	Calendars
		用于更复杂时间的格式化
	Numbers
		格式化数字对象的方法
	Strings
		字符串工具类
	Objects
		一般对象类，通常用来判断非空
	Booleans
		常用的布尔方法
	Arrays
		数组工具类
	Lists
		List 工具类
	Sets
		Set 工具类
	Maps
		常用Map方法
	Aggregates
		在数组或集合上创建聚合的方法
	IDs
		处理可能重复的id属性的方法

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2020/03/31 11:04