惊鸿

SpringBoot中的Thymeleaf 模板引擎

一、Thymeleaf概述

一般来说,常用的模板引擎有JSP、Velocity、Freemarker、Thymeleaf 。

SpringBoot推荐的 Thymeleaf – 语法更简单,功能更强大;

Thymeleaf是一种Java XML/XHTML/HTML5模板引擎,可以在Web和非Web环境中使用。
它更适合在基于MVC的Web应用程序的视图层提供XHTML/HTML5,但即使在脱机环境中,它也可以处理任何XML文件。它提供了完整的Spring Framework集成。

那还学什么Vue! 有Thymeleaf就好了!

二、使用基本步骤

我认为可以大致分为四步:

  1. pom.xml 添加 Thymeleaf 模板引擎。
  2. application.properties 配置 Thymeleaf 信息。
  3. 创建controller类,编写代码。
  4. 创建模板,编写html代码。

1. pom.xml 添加依赖

1
2
3
4
 <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. .properties 配置 Thymeleaf 信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 启用缓存:建议生产开启
spring.thymeleaf.cache=false
# 建议模版是否存在
spring.thymeleaf.check-template-location=true
# Content-Type 值
spring.thymeleaf.servlet.content-type=text/html
# 是否启用
spring.thymeleaf.enabled=true
# 模版编码
spring.thymeleaf.encoding=utf-8
# 模版模式
spring.thymeleaf.mode=HTML5
# 模版存放路径
spring.thymeleaf.prefix=classpath:/templates/
# 模版后缀
spring.thymeleaf.suffix=.html
Thymeleaf常用配置说明
配置项类型默认值建议值说明
spring.thymeleaf.enabledbooltrue默认是否启用
spring.thymeleaf.modeStringHTML默认模板类型,可以设置为HTML5
spring.thymeleaf.cachebooltrue默认是否启用缓存,生成环境建议设置为true
spring.thymeleaf.prefixStringclasspath:/templates/默认模版存放路径
spring.thymeleaf.suffixString.html默认模版后缀
spring.thymeleaf.servlet.content-typeStringtext/html默认Content-Type 值
spring.thymeleaf.encodingStringutf-8模版编码

3. 创建controller类,编写代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Controller
public class Logincontroller {
    @RequestMapping("/yeah")
    public String gotemplemt (Map<String,Object> map) {
        List<String> list = new ArrayList<String>();
        list.add("惊鸿");
        list.add("lzm");
        list.add("www.lzyz.fun");
        list.add("啦啦啦");
        map.put("msg", "这是一条普通的消息...");
        map.put("lists", list);
        return "page1";
    }
}

注意:返回的”page1″是我HTML文件 page1.html的名称哦

4. 创建 page1.html 。编写html代码

只要把写好的HTML页面放在 classpath:/templates/ 下,thymeleaf就能自动渲染。

注意导入:

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

否则没提示哦~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <meta content="text/html;charset=UTF-8"/>
    <title>惊鸿</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
   <h1>templates示例</h1>
    <!-- th:text="" 将h2的文本值视为指定参数 -->
    <hr>
    <h2 th:text="${msg}">这是h2</h2>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>循环</legend>
    </fieldset>
    <table style="text-align: center" class="layui-table" lay-skin="line"  >
        <colgroup>
            <col width="350">
        </colgroup>
        <thead>
            <tr>
                <th>NAME</th>
            </tr>
        </thead>
        <tbody>
            <!-- th循环遍历传来的参数 -->
            <tr th:each="str : ${lists}" >
                <th th:text="${str}" ></th>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

运行效果(样式用的layUI~~):

三、 th标签的使用

官方文档详细的一批:
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

个人感觉th标签比jstl标签强很多,其中也有很多相似的:

th:with 定义局部变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>惊鸿</title>
</head>
<body>
<div th:with="sum=4-2">
    <span th:text="${sum}"></span>
</div>
</body>
</html>

输出:2

th:remove 删除标签

th:remove用于html代码的删除,th:remove值有五个:

  • all 删除本段所有代码
  • body 删除主标签内的所有元素
  • tag 删除主标签,保留主标签所有的元素
  • all-but-first 保留主标签和第一个元素,其他全部删除
  • none 不删除任何标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>惊鸿</title>
</head>
<body>

<div id="all" th:remove="all">
    <span>all</span>
    <span>1</span>
</div>

<div id="body" th:remove="body">
    <span>body</span>
    <span>2</span>
</div>

<div id="tag" th:remove="tag">
    <span>tag</span>
    <span>3</span>
</div>

<div id="all-but-first" th:remove="all-but-first">
    <span>all-but-first</span>
    <span>4</span>
</div>

<div id="none" th:remove="none">
    <span>none</span>
    <span>5</span>
</div>

</body>
</html>
其他标签

th:style 定义样式 <div th:style=”‘color:’+${skinColor}”>
th:onclick 点击事件 <input type=”button” value=” Click ” th:onclick=”‘onsub()'”>
th:href 赋值属性href <a th:href=”${myhref}”></a>
th:value 赋值属性value <input th:value=”${user.name}” />
th:src 赋值src <img th:src=”${img}” />
th:action 赋值属性action <form th:action=”@{/suburl}”>
th:id 赋值属性id <form id=”${fromid}”>
th:attr 定义多个属性 <img th:attr=”src=@{/img/stone.jpg},alt=${alt}” />
th:object 定义一个对象 <div th:object=”${user}”>

表达式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
Simple expressions:(表达式语法)
    Variable Expressions: ${...}:获取变量值;OGNL;
            1)、获取对象的属性、调用方法
            2)、使用内置的基本对象:
                #ctx : the context object.
                #vars: the context variables.
                #locale : the context locale.
                #request : (only in Web Contexts) the HttpServletRequest object.
                #response : (only in Web Contexts) the HttpServletResponse object.
                #session : (only in Web Contexts) the HttpSession object.
                #servletContext : (only in Web Contexts) the ServletContext object.
               
                ${session.foo}
            3)、内置的一些工具对象:
#execInfo : information about the template being processed.
#messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.
#uris : methods for escaping parts of URLs/URIs
#conversions : methods for executing the configured conversion service (if any).
#dates : methods for java.util.Date objects: formatting, component extraction, etc.
#calendars : analogous to #dates , but for java.util.Calendar objects.
#numbers : methods for formatting numeric objects.
#strings : methods for String objects: contains, startsWith, prepending/appending, etc.
#objects : methods for objects in general.
#bools : methods for boolean evaluation.
#arrays : methods for arrays.
#lists : methods for lists.
#sets : methods for sets.
#maps : methods for maps.
#aggregates : methods for creating aggregates on arrays or collections.
#ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

    Selection Variable Expressions: *{...}:选择表达式:和${}在功能上是一样;
        补充:配合 th:object="${session.user}:
   <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>
   
    Message Expressions: #{...}:获取国际化内容
    Link URL Expressions: @{...}:定义URL;
            @{/order/process(execId=${execId},execType='FAST')}
    Fragment Expressions: ~{...}:片段引用表达式
            <div th:insert="~{commons :: main}">...</div>
           
Literals(字面量)
      Text literals: 'one text' , 'Another one!' ,…
      Number literals: 0 , 34 , 3.0 , 12.3 ,…
      Boolean literals: true , false
      Null literal: null
      Literal tokens: one , sometext , main ,…
Text operations:(文本操作)
    String concatenation: +
    Literal substitutions: |The name is ${name}|
Arithmetic operations:(数学运算)
    Binary operators: + , - , * , / , %
    Minus sign (unary operator): -
Boolean operations:(布尔运算)
    Binary operators: and , or
    Boolean negation (unary operator): ! , not
Comparisons and equality:(比较运算)
    Comparators: > , < , >= , <= ( gt , lt , ge , le )
    Equality operators: == , != ( eq , ne )
Conditional operators:条件运算(三元运算符)
    If-then: (if) ? (then)
    If-then-else: (if) ? (then) : (else)
    Default: (value) ?: (defaultvalue)
Special tokens:
    No-Operation: _
简单表达式
  • 变量表达式:${…}
  • 选择变量表达式:*{…}
  • 消息表达式:#{…}
  • 链接表达式:@{…}
  • 片段表达:~{…}
数据的类型
  • 文字:’one text’, ‘Another one!’,…
  • 数字文字:0, 34, 3.0, 12.3,…
  • 布尔文字:true, false
  • NULL文字:null
  • 文字标记:one, sometext, main,…
文本操作
  • 字符串拼接:+
  • 字面替换:|The name is ${name}|
算术运算
  • 二进制运算符:+, -, *, /, %
  • 减号(一元运算符):-
布尔运算
  • 二进制运算符:and, or
  • 布尔否定(一元运算符):!, false
条件运算符
  • 比较值:>, <, >=, <=
  • 相等判断: ==, !=
条件判断
  • (if) ? (then)
  • (if) ? (then) : (else)
  • 三元:(value) ? value : defaultvalue
 

表达式对象:

表达式里面的对象可以帮助我们处理要展示的内容,比如表达式的工具类dates可以格式化时间,这些内置类的熟练使用,可以让我们使用Thymeleaf的效率提高很多。

  • #ctx: 操作当前上下文.
  • #vars: 操作上下文变量.
  • #request: (仅适用于Web项目) HttpServletRequest对象.
  • #response: (仅适用于Web项目) HttpServletResponse 对象.
  • #session: (仅适用于Web项目) HttpSession 对象.
  • #servletContext: (仅适用于Web项目) ServletContext 对象.

表达式实用工具类:

  • #execInfo: 操作模板的工具类,包含了一些模板信息,比如:${ #execInfo.templateName }
  • #uris: url处理的工具
  • #conversions: methods for executing the configured conversion service (if any).
  • #dates: 方法来源于 java.util.Date 对象,用于处理时间,比如:格式化.
  • #calendars: 类似于 #dates, 但是来自于 java.util.Calendar 对象.
  • #numbers: 用于格式化数字.
  • #strings: methods for String objects: contains, startsWith, prepending/appending, etc.
  • #objects: 普通的object对象方法.
  • #bools: 判断bool类型的工具.
  • #arrays: 数组操作工具.
  • #lists: 列表操作数据.
  • #sets: Set操作工具.
  • #maps: Map操作工具.
  • #aggregates: 操作数组或集合的工具.

每个类中的具体方法,点击查看:
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects

发表评论

电子邮件地址不会被公开。 必填项已用*标注

CAPTCHAis initialing...
正在获取,请稍候...
00:00/00:00

隐藏
变装