springboot之thymeleaf模板引擎-CFANZ编程社区

模板引擎：jsp，velocity，freemarker，thymeleaf

springboot之thymeleaf模板引擎_spring

1、引入thymeleaf

springboot之thymeleaf模板引擎_html_02

springboot之thymeleaf模板引擎_html_03

springboot之thymeleaf模板引擎_html_04

添加依赖

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

springboot之thymeleaf模板引擎_html_05

springboot之thymeleaf模板引擎_运算符_06

springboot之thymeleaf模板引擎_html_07

切换thymeleaf版本

springboot之thymeleaf模板引擎_spring_08

2、thymeleaf语法

springboot之thymeleaf模板引擎_spring_09

springboot之thymeleaf模板引擎_spring_10

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

   private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

   public static final String DEFAULT_PREFIX = "classpath:/templates/";

   public static final String DEFAULT_SUFFIX = ".html";

只要我们把html页面放在classpath:/templates/，thymeleaf就能自动渲染

测试;

controller里

springboot之thymeleaf模板引擎_html_11

package com.cnstrong.springboot04webrestfulcrud.controller;

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

@Controller
public class HelloController {

    @ResponseBody
    @RequestMapping("/hello")
    public String hello(){
        return "Hello world";
    }

    @RequestMapping("/success")
    public String success(){
        //classpath:/templates/success.html
        return "success";
    }
}
resources/templates下编写success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>成功</h1>
</body>
</html>

springboot之thymeleaf模板引擎_运算符_12

3、使用

导入thymeleaf的名称空间

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

HelloController中

//查出一些数据，在页面显示
@RequestMapping("/success")
public String success(Map<String,Object> map){
    //classpath:/templates/success.html
    map.put("hello","你好");
    return "success";
}

resources/templates/success.html中

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>成功</h1>
    <!--th:text   :  将div里面的文本内容设置为xxx-->
    <div th:text="${hello}">这里是显示欢迎信息</div>
</body>
</html>

运行

springboot之thymeleaf模板引擎_spring_13

4、语法规则

th:text 改变当前元素里面的文本内容

th:任意html属性替换原生属性的值

springboot之thymeleaf模板引擎_spring_14

springboot之thymeleaf模板引擎_html_15

springboot之thymeleaf模板引擎_spring_16

springboot之thymeleaf模板引擎_spring_17

能写什么表达式？

简单表达式：
变量表达式：$ {...} 获取变量值 OGNL

可以使用获取对象的属性、调用方法

使用内置的基本对象

#ctx：上下⽂对象。

#vars：上下⽂变量。

#locale：上下⽂区域设置。

#request :(仅在Web Contexts中）HttpServletRequest对象。

#response：（仅在Web上下⽂中）HttpServletResponse对象。

#session :(仅在Web上下⽂中）HttpSession对象。

#servletContext :(仅在Web上下⽂中）ServletContext对象。

详细用法参见手册附录A

springboot之thymeleaf模板引擎_html_18

使用内置的一些工具对象

#execInfo：有关正在处理的模板的信息。

#messages：⽤于在变量表达式中获取外部化消息的⽅法，与使⽤＃ {...}语法获得的⽅式相同。

#uris：转义URL / URI部分的⽅法

#conversions：执⾏配置的转换服务（如果有的话）的⽅法。

#dates：java.util.Date对象的⽅法：格式化，组件提取等

#calendars：类似于#dates，但对于java.util.Calendar对象。

#numbers：⽤于格式化数字对象的⽅法。

#strings：String对象的⽅法：contains，startsWith，prepending / appending等

#objects：⼀般对象的⽅法。

#bools：布尔评估的⽅法。

#arrays：数组的⽅法。

#lists：列表的⽅法。

#sets：集合的⽅法。

#maps：地图⽅法。

#aggregates：在数组或集合上创建聚合的⽅法。

#ids：处理可能重复的id属性的⽅法（例如，作为迭代的结果）。

详细用法参见附录B

springboot之thymeleaf模板引擎_spring_19

选择变量表达式：* {...}

这两种⽅式有⼀个重要的区别：星号语法计算所选对象⽽不是整个上下⽂的表达式。也就是说，只要没有选定的对象，$和*语法就会完全相同。
什么是选定对象？使⽤th：object属性的表达式的结果。

我们在⽤户个⼈资料（userprofile.html）⻚⾯中使⽤⼀个：

Name: Sebastian .

Surname: Pepper.

Nationality: Saturn.

</div>
这完全等同于：
<div>

Name: Sebas tian.

Surname: Pep per.

Nationality: Saturn.

</div>

消息表达式：＃{...}
链接⽹址表达式：@{...} 定义url

<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(ord erId=${o.id})}">view</a>
 如果需要⼏个参数，这些参数将以逗号分隔：@ {/ order / process（execId = $ {execId}，execType ='FAST'）}
⽚段表达式：〜{...}
⽂字
⽂字⽂字： 'one text' , 'Another one!'
数字字⾯值：0,34,3.0,12.3，...
布尔⽂字：true，false
空字⾯值：null
⽂字Token：one，sometext，main，...
⽂本操作
字符串连接：+
⽂本替换：|The name is ${name}|
算术运算符
⼆进制运算符：+，-，\*，/，%
负号（⼀元运算符）：
布尔运算符
⼆进制运算符：and 、or
布尔否定（⼀元运算符）：！，not
⽐较和相等运算符：
 ⽐较运算符：>，<，> =，<=（gt，lt，ge，le）
 相等运算符：==，！=（eq，ne）
条件运算符：
 If-then:$if$ ? $then$
 If-then-else:$if$ ? $then$ : $else$
 Default:$value$ ?: $defaultvalue$
特殊符号：
 哑操作符：\_
所有这些功能可以组合和嵌套：
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

5、测试

HelloController中

//查出一些数据，在页面显示@RequestMapping("/success")public String success(Map<String,Object> map){
    //classpath:/templates/success.html
    map.put("hello","<h1>你好</h1>");
    map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
    return "success";
}

success.html

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org" ><head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>成功</h1>
    <!--th:text   :  将div里面的文本内容设置为xxx-->
    <div th:text="${hello}">
        这里是显示欢迎信息
    </div>
    <hr />
    <div th:text="${hello}"></div>
    <div th:utext="${hello}"></div>
    <hr />
    <!-- th:each 每次遍历都会生成当前这个标签   3个h4-->
    <h4 th:text="${user}" th:each="user:${users}"></h4>
    <hr />
    <h4>
        <!--3个span-->
        <span th:each="user:${users}">[[${user}]]</span>
    </h4>
</body>
</html>