thymeleaf

2021-02-25 本文已影响0人 chirees

Thymeleaf学习笔记

SpringThymeleaf

Web开发离不开动态页面的开发,很早以前企业主要使用JSP技术来开发网页,随着技术的升级更替，目前来说最主流的方案是: Thymeleaf, Thymeleaf 是一个模板框架，它可以支持多种格式的内容动态渲染非常强大，它天然和HTML是相融合的，所以对于前端工程师来说它也是易于理解的。Thymeleaf机制：数据+模板+引擎

初始化Thymeleaf

添加依赖


<dependency>

  <groupId>org.springframework.boot</groupId>

  <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

代码举例：


@Controller

public class SongListControl {

  @Autowired

  private SongListService songListService;

  @RequestMapping("/songlist")

  public String index(@RequestParam("id")String id,Model model){

    SongList songList = songListService.get(id);

    //传递歌单对象到模板当中

    //第一个 songList 是模板中使用的变量名

    // 第二个 songList 是当前的对象实例

    model.addAttribute("songList",songList);

    return "songList";

  }

}

注意：

springboot默认访问的是templates中的内容,也就是说return后面的地址接的是templates中的文件路径.想要访问static中的文件路径,就必须要在return后面接redirect重定向。

Thymeleaf变量

由于Thymeleaf是完全兼容HTML的，所以为了不破坏HTML结构，Thymeleaf 采用了自定义HTML属性的方式来生成动态内容。th:text语法的作用就是会动态替换掉作用HTML标签的内部内容。

代码举例：


<span th:text="${msg}">Hello</span>

渲染结果


<span>你好</span>

一般情况下，模板的变量都是会存放在模板上下文中，所以我们如果想要调用变量，就需要先设置变量到模板上下文中去

扩展：

上下文这个术语在编程里用的比较多，一般泛指在某个具体的实例里，比如说模板上下文, 指的是这个模板运行的实例。

对象变量

注意：
如果对象包含对象，还是可以用.一直点出来的，前提是这个对象是POJO类哦

Thymeleaf循环语句


<ul th:each="song : ${songs}">

  <li th:text="${song.name}">歌曲名称</li>

</ul>

打印列表的索引值

<ul th:each="song,it: ${songs}">

  <li>

    <span th:text="${it.count}"></span>

    <span th:text="${song.name}"></span>

  </li>

</ul>

这个it是作为可选参数，如果定义了就可以通过这个it对象来获取更多关于统计的需求，具体参数如

Thymeleaf表达式

1..${}

字符串处理


<span th:text="'00:00/'+${totalTime}"></span>

静态内容用单引号''包裹起来，和上下文变量之间用+连接。

字符串拼接优化

Thymeleaf做字符串拼接还做了优化工作,我们可以使用上面的代码你还可以这样|围住字符串，这样就不需要在文字后面附加'...'+'...'


<span th:text="|00:00/${totalTime}|"></span>

数据转化

Thymeleaf默认集成了大量的工具类可以方便的进行数据转化，一我们使用最多的是dates


@RequestMapping("/demo")

  public String index(Model model){

    Date dateVar = new Date();

    model.addAttribute("dateVar",dateVar);

    return "demo";

  }

前台显示：

//显示年月日


<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd')}"></p>

<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日')}"></p>

//显示年月日时分秒


<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>

<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>

在这里如果后台的日期类型是LocalDate/LocalDateTime，那么就把#date换成#temporals

注意：需要在pom.xml文件里添加依赖


<dependency>

  <groupId>org.thymeleaf.extras</groupId>

  <artifactId>thymeleaf-extras-java8time</artifactId>

  <version>3.0.4.RELEASE</version>

</dependency>

这个库会自动添加一个新的工具类temporals

工具类的运用和变量不同，变量使用的是${变量名} ,工具类使用的是#{工具类}。

后台代码：


@RequestMapping("/demo")

  public String index(Model model){

    LocalDateTime dateVar = LocalDateTime.now();

    model.addAttribute("dateVar",dateVar);

    return "demo";

  }

前台代码：

//显示年月日


<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd')}"></p>

<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日')}"></p>

````html

//显示年月日时分秒

````html

<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>

<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>

dates/temporals工具类说明

dates和temporals支持的方法是一样的，只是支持的类型不同，dates支持的是Date类, temporals支持的是LocalDate 和LocalDateTime。

java.util.Date类和LocalDateTime类功能是一样的，不同的是LocalDateTime是Java8才出现的，一老的应用还是用Date类的。

strings工具类

Thymeleaf里的其他工具类

各内置对象包含哪些方法可以点此看文档，也可以点这里看官方文档。

Thymeleaf内联表达式

其实就是th:text的另一种写法，直接把变量写在HTML中，格式：[[变量]]


<span>Hello [[${msg}]]</span>

<p>[[ ${#dates.format(dateVar, 'yyyy-MM-dd')} ]]</p>

<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日')}]]</p>

<p>[[${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}]]</p>

<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}]]</p>

注意：

内联表达式[[]]只能替代th:tex不是替代所有的th:标签。

2.*{}

选择表达式（星号表达式）。选择表达式与变量表达式有一个重要的区别：选择表达式计算的是选定的对象，而不是整个环境变量映射。也就是：只要是没有选择的对象，选择表达式与变量表达式的语法是完全一样的。那什么是选择的对象呢？是一个：th:object对象属性绑定的对象。

例如：


<div th:object=" ${session.user}" >

<p>Name: <span th: text=" *{firstName}" >Sebastian</span>. </p>

<p>Surname: <span th: text=" *{lastName}" >Pepper</span>. </p>

<p>Nationality: <span th: text=" *{nationality}" >Saturn</span>. </p>

</div>

上例中，选择表达式选择的是th:object对象属性绑定的session. user对象中的属性。

3.#{}

消息表达式（井号表达式，资源表达式）。通常与th:text属性一起使用，指明声明了th:text的标签的文本是#{}中的key所对应的value，而标签内的文本将不会显示。

例如：

新建/WEB-INF/templates/home.html，段落


<p th: text=" #{home. welcome}" >This text will not be show! </p>

新建/WEB-INF/templates/home.properties，home.welcome：

home.welcome=this messages is from home.properties!

测试结果：

从测试结果可以看出，消息表达式通常用于显示页面静态文本，将静态文本维护在properties文件中也方便维护，做国际化等。

4.@{}

超链接url表达式。

例如：


<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"/>

5.#maps

工具对象表达式。常用于日期、集合、数组对象的访问。这些工具对象就像是java对象，可以访问对应java对象的方法来进行各种操作。用法在上面数据转化已经举例

dates
calendars
numbers
strings
objects
bools
arrays
lists
sets

Thymeleaf条件语句

th:if条件判断除了判断boolean值外，Thymeleaf 还认为如下表达式为true:

• 值非空

• 值是非0数字

• 值是字符串，但是不是false, off or no

• 值不是boolean值，数字，character或字符串

Strings逻辑判断

isEmpty

contains

检查字符串变量是否包含片段


${#strings.contains(name,'abc')}

strings判断语法的其他几个常用方法
strings的字符串操作函数

除了字符串判断语句外，#strings 还支持字符串的数据处理，比如

Thymeleaf表单

Springboot做了自动处理，通过post方式提交表单的时候，需要有一个实体类，去接收表单传递的数据内容，在对象的属性读取中，Thymeleaf 提供了两种方式：1、直接通过${userInfo.username} ，这种实体bean + 属性的方式;2、通过选择表达式*{username}的这种方式。表单input中的name属性值要和实体类的属性保持一致

Spring Validation

在实际的工作中对于数据的保存是离不开数据验证的，比如说name必须要输入，isbn 必须要输入等等校验规则，Spring 对于数据验证支持的也非常好,我们可以借助Spring Validation来处理表单数据的验证。

Validation注解

JSR 380定义了-些注解用于做数据校验，这些注解可以直接设置在Bean的属性上

|注解|说明|备注|

|------|----------|-----------|

|@NotNull |不允许为null对象||

|@AssertTrue|是否为true||

|@Size|约定字符串的长度||

|@Min|字符串的最小长度||

|@Max|字符串的最大长度||

|@Email|是否是邮箱格式||

|@NotEmpty|不允许为null或者为空，可以用于判断字符串、集合，比如Map、数组、List||

|@NotBlank|不允许为null和空格||

注意：

大多数情况下，建议使用NotEmpty替代NotNull、NotBlank


package com.bookstore.model;

import javax.validation.constraints.*;

public class User {

    @NotEmpty(message = "名称不能为 null")

    private String name;

    @Min(value = 18, message = "你的年龄必须大于等于18岁")

    @Max(value = 150, message = "你的年龄必须小于等于150岁")

    private int age;

    @NotEmpty(message = "邮箱必须输入")

    @Email(message = "邮箱不正确")

    private String email;

    // standard setters and getters 

}

校验的注解是可以累加的，如上面的@Min和@Max，系统会按顺序执行校验，任何一条校验触发就会抛出校验错误到上下文中。


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>添加用户</title>

    <style>

        .error {

            color: red;

        }

    </style>

</head>

<body>

    <h2>添加用户</h2>

    <form action="/user/save" th:object="${user}" method="POST">

        <div th:classappend="${#fields.hasErrors('name')} ? 'error' : ''">

        <label>用户名称:</label>

        <input type="text" th:field="*{name}">

        <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></p>

    </div>

    <div th:classappend="${#fields.hasErrors('age')} ? 'error' : ''">

        <label>年龄:</label>

        <input type="text" th:field="*{age}">

        <p th:if="${#fields.hasErrors('age')}" th:errors="*{age}"></p>

    </div>

    <div th:classappend="${#fields.hasErrors('email')} ? 'error' : ''">

        <label>邮箱:</label>

        <input type="text" th:field="*{email}">

        <p th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></p>

    </div>

    <div th:classappend="${#fields.hasErrors('mobile')} ? 'error' : ''">

        <label>手机号码:</label>

        <input type="text" th:field="*{mobile}">

        <p th:if="${#fields.hasErrors('mobile')}" th:errors="*{mobile}"></p>

    </div>

    <div>

        <button type="submit">保存</button>

    </div>

</form>

</body>

</html>

说明：

1.control类中的方法药先new一个实例对象传到页面去，如下代码中的addUser方法。

2.form表单里的th:object="${user}"用于替换对象，使用了这个就不需要每次都编写user. xxx，可以直接操作XXX

3.${#fields.hasErrors('key')} 这个语法是专门为验证场景提供的，这里的 key就是对象的属性名称，比如User对象的name、age、 email 等。

4.<p></p>标签里的th:errors,用于显示错误信息。

5.<div></div>里的th:classappend支持动态管理样式

6.<input></input>里的th:field可以显示上一次输入的内容。


package com.bookstore.control;

import com.bookstore.model.User;

import com.bookstore.service.UserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.validation.BindingResult;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PostMapping;

import javax.validation.Valid;

import java.util.List;

@Controller

public class UserControl {

    @Autowired

    private UserService userService;

    @GetMapping("/user/add.html")

    public String addUser(Model model) {

        User user = new User();

        model.addAttribute("user", user);

        return "user/addUser";

    }

    @PostMapping("/user/save")

    public String saveUser(@Valid User user, BindingResult errors) {

        if (errors.hasErrors()) {

            // 如果校验不通过，返回用户编辑页面

            return "user/addUser";

        }

        userService.saveUser(user);

        // 校验通过，返回成功页面

        return "redirect:/user/list.html";//跳转到@GetMapping("/user/list.html")

    }

    @GetMapping("/user/list.html")

    public String list(Model model) {

        List<User> users = userService.getUsers();

        model.addAttribute("users", users);

        return "user/list";

    }

}

说明：

redirect:这个用于跳转到某-一个页面网址，如果是同一个域名，你可以省略域名，直接写path，比如这里的/user/list. html你也可以跳转到某个网站，比如return "redirect: https: //www. baidu. com";大体上所有的增加、查询行为都是这样的流程。

Thymeleaf布局（Layout）

大多数的网站都有导航、底部等公共的东西，在一个网站里访问页面总是会显示相同的导航、底部之类的内容,layout解决的是模板复用的问题，比如常见的网站是下面这样的

我们推荐使用th:include + th:replace 方案来完成布局的开发

代码实现：

layout.html


<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>布局</title>

    <style>

        .header {background-color: #f5f5f5;padding: 20px;}

        .header a {padding: 0 20px;}

        .container {padding: 20px;margin:20px auto;}

        .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}

    </style>

</head>

<body>

<header class="header">

    <div>

        <a href="/book/list.html">图书管理</a>

        <a href="/user/list.html">用户管理</a>

    </div>

</header>

<div class="container" th:include="::content">页面正文内容</div>

<footer class="footer">

    <div>

        <p style="float: left">&copy; heerh.com 2017</p>

        <p style="float: right">

            Powered by god666hrh

        </p>

    </div>

</footer>

</body>

user/list.html

<!DOCTYPE html>

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

      th:replace="layout">

<div th:fragment="content">

    <h2>用户列表</h2>

    <div>

        <a href="/user/add.html">添加用户</a>

    </div>

    <table>

        <thead>

        <tr>

            <th>

                用户名称

            </th>

            <th>

                用户年龄

            </th>

            <th>

                用户邮箱

            </th>

        </tr>

        </thead>

        <tbody>

        <tr th:each="user : ${users}">

            <td th:text="${user.name}"></td>

            <td th:text="${user.age}"></td>

            <td th:text="${user.email}"></td>

        </tr>

        </tbody>

    </table>

</div>

</html>

总结：

1.在layout页面需要渲染的标签加th:include="::content"

2.在子页面的<html></html>标签里加th:replace="layout"，在渲染内容的标签里加th:fragment="content"，

目的是为了和公共页面（layout）里的标签内容对应上。

小技巧：

由于超链接有默认的打开链接行为，所以对于想要执行onclick 的时候,我们一般设置href="javascript:;"

使用thymeleaf进行数字循环

需求：使用thymeleaf模版根据一个数字在页面循环生成固定的标签

解决方案：需要用到thymeleaf 的#numbers.sequence()函数

示例：


<span th:each="i:${#numbers.sequence(1, 5)}">

   <span th:text="${i}"></span>

</span>

效果如下：


1 2 3 4 5

ThymeLeaf注释

1.在html里是代码，在解析时是注释

注：常用在保持静态html代码的完整性上

举例：


<table>

<tr th:each="x : ${xs}">

...

</tr>

<!--/*-->

<tr>

...

</tr>

<tr>

...

</tr>

<!--*/-->

</table>

2.在html里是注释，在解析时是代码

举例：


<span>hello!</span>

<!--/*/

<div th:text="${...}">

...

</div>

/*/-->

<span>goodbye!</span>

Thymeleaf调用对象的成员变量值

Thymeleaf调用对象的成员变量值、Map值、List值、属性的方法、ctx对象、param、session和application

一、概述

本文会对thymeleaf以下功能进行举例说明：

• 调用对象的成员变量的属性

• 调用Map的对象的属性

• 调用List的对象的属性

• 调用属性的方法

• 使用ctx对象

• param：获取request的请求参数

• session:获取session的属性值

• application：获取application的属性值

二、实例说明

1.调用对象的成员变量的属性

演示如下功能


<!-- 获取family的成员变量father的属性 -->

${family.father.name} --> <input type="text" name="userName" th:value="${family.father.name}" />

输出：


=================== 调用对象的成员变量的属性 ===============================

${family.father.name} --> father

2.调用Map的对象的属性

演示如下功能

通过map的key从hashMap获取对象的属性name值: 可以使用”.”或者使用”[]”获取对象值


<!-- 通过map的key从hashMap获取对象的属性name值: 可以使用"."或者使用"[]"获取对象值 -->

${hashMap.hashMapKey.name} --> <input type="text" name="userName" th:value="${hashMap.hashMapKey.name}" /> <br />

<!-- 等价于这条语句：-->

${hashMap['hashMapKey'].name} --> <input type="text" name="userName" th:value="${hashMap['hashMapKey'].name}" /> <br />

输出:


=================== 调用Map的对象的属性 ===============================

${hashMap.hashMapKey.name} --> hashMap_name

等价于这条语句： 

${hashMap['hashMapKey'].name} --> hashMap_name

3. 调用List的对象的属性

演示如下功能

通过[0]获取List的第一个对象的属性name值


<!-- 通过[0]获取List的第一个对象的属性name值 -->

${family.childList[0].name} --> <input type="text" name="userName" th:value="${family.childList[0].name}" /> <br />

<br />

输出:


=================== 调用List的对象的属性 ===============================

${family.childList[0].name} --> son_1

4. 调用属性的方法

演示如下功能

调用属性的方法


<!-- 调用属性的方法 -->

${family.father.name.toUpperCase()} --> <input type="text" name="userName" th:value="${family.father.name.toUpperCase()}" /> <br />

输出: “–>”的左边是语法，右边是对应的输出


=================== 调用属性的方法 ===============================

${family.father.name.toUpperCase()} --> FATHER

5. 使用ctx对象

演示如下功能
- ctx.locale: 获取#ctx的locale值
- ctx.variables: 获取#ctx的变量中的一个的值
- ctx.variables: 变量中值的一个的值，等价于#ctx.variables
- ctx.httpServletRequest：请求request
- ctx.httpServletResponse：返回response
- ctx.httpSession：返回session
- ctx.servletContext：返回servletContext

在非web的环境里，ctx只是org.thymeleaf.context.IContext的一个实例，而在web的环境里org.thymeleaf.context.IWebContext的一个实例，此接口同时是org.thymeleaf.context.IContext的子类。IWebContext比IContext多了httpServletRequest，httpServletResponse，httpSession，servletContext等属性，详细可以见源代码。


<!-- #ctx是org.thymeleaf.context.IContext -->

${#ctx.locale} --> <input type="text" name="userName" th:value="${#ctx.locale}" /> <br />

<!-- #ctx获取ctx的变量中的一个的值  -->

${#ctx.variables.hashMap} --> <input th:value="${#ctx.variables.hashMap}" ></input> <br />

<!-- vars变量中值的一个的值，等价于#ctx.variables -->

${#ctx.variables.hashMap} --> <input th:value="${#vars.hashMap}" ></input> <br />

<!-- 以下#ctx是org.thymeleaf.context.IWebContext的一个实例，他也是IContext的子类 -->

<!-- #request -->

${#ctx.httpServletRequest} --> <input th:value="${#ctx.httpServletRequest}" ></input> <br />

<!-- #response -->

${#ctx.httpServletResponse} --> <input th:value="${#ctx.httpServletResponse}" ></input> <br />

<!-- #session -->

${#ctx.httpSession} --> <input th:value="${#ctx.httpSession}" ></input> <br />

<!-- #servletContext -->

${#ctx.servletContext} --> <input th:value="${#ctx.servletContext}" ></input> <br />

结果：


=================== 使用ctx对象： Base objects context object ===============================

${#ctx.locale} --> zh_CN

${#ctx.variables.hashMap} -->{hashMapKey=com.hry.spring.support.User@1888a92c}

${#ctx.variables.hashMap} -->{hashMapKey=com.hry.spring.support.User@1888a92c}

${#ctx.httpServletRequest} --> org.apache.catalina.connector.RequestFacade@7fdddbce

${#ctx.httpServletResponse} --> org.apache.catalina.connector.ResponseFacade@6e632047

${#ctx.httpSession} --> 

${#ctx.servletContext} --> org.apache.catalina.core.ApplicationContextFacade@4149c8a4

6.param：获取request的请求参数

演示如下功能

param是org.thymeleaf.context.WebRequestParamsVariablesMap的子，封装了请求参数，下面演示param.size()，param.containsKey('id')，param.get('id')[0]的用法。


<!-- param是org.thymeleaf.context.WebRequestParamsVariablesMap的子类 -->

<!-- 如果 ：http://localhost:8080/expressions/complex?id=1，此时有有一个参数输出1 -->

${param.size()} --> <input th:value="${param.size()}" ></input> <br />

${param.containsKey('id')} --> <input th:value="${param.containsKey('id')}" ></input> <br />

${param.get('id')[0]} --> <input th:value="${param.get('id')[0]}" ></input> <br />

等价于：<br/>

${#ctx.httpServletRequest.getParameter('id')} --> <input th:value="${#ctx.httpServletRequest.getParameter('id')}" ></input> <br />

结果：


================= param：获取request的请求参数 ===============================

${param.size()} --> 1

${param.containsKey('id')} --> true

${param.get('id')[0]} --> 112

等价于：


${#ctx.httpServletRequest.getParameter('id')} --> 112

7. session:获取session的属性值

演示如下功能

session是org.thymeleaf.context.WebSessionVariablesMap的子类


================= session:获取session的属性值  ===============================<br/>

<!-- session是org.thymeleaf.context.WebSessionVariablesMap的子类 -->

${session.size()} --> <input th:value="${session.size()}" ></input> <br />

结果


================= session:获取session的属性值 ===============================

${session.size()} --> 0

8. application：获取application的属性值

演示如下功能

application是org.thymeleaf.context.WebServletContextVariablesMap的子类


================= application：获取application的属性值  ========================<br/>

<!-- application是org.thymeleaf.context.WebServletContextVariablesMap的子类 -->

${application.size()} --> <input th:value="${application.size()}" ></input> <br />

结果：


================= application：获取application的属性值 ========================

${application.size()} --> 9