SpringBoot - 模版引擎Thymeleaf

2018-05-10 本文已影响74人 BzCoder

最后更新于 2018.5.17

一.什么是模版引擎？

什么是模版引擎？百度告诉我们，模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。所以JSP就是模版引擎中的一种，而SpringBoot推荐使用的Thymeleaf。

二.引入Thymeleaf

查看SpringBoot官方文档。查阅Starter部分。

官方文档

在pom文件中加入以下代码来引入thymeleaf

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

引入后我们可以看到下图，说明引入成功。

引入Thymeleaf

三.Thymeleaf的使用与语法

1.HelloWorld

首先看配置文件。找到ThymeleafProperties中的配置

@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
 //由代码我们可以知道只要我们把HTML页面放入classpath:/templates/中，thymeleaf就可以帮助我们渲染。

看完配置类，我们就惯例参考thymeleaf的官方文档

官方文档中提供的HELLODEMO

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
</head>
<body>
<p th:text="#{success}">Welcome to our grocery store!</p>
</body>
</html>

引入这句话，是让我们的IDE能够开启自动补全的功能

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

我们在controller中写下

 @RequestMapping("/success")
    public String success(Map<String,Object> map)
    {
        map.put("hello","哈咯");
        return "success";
    }

运行后请求得到结果，这样就算初步入门了。

运行结果成功

2.Thymeleaf语法

Thymeleaf的语法内容很多，一下子也无法全部列举，具体的还是要查阅Thymeleaf的官方文档，这里就简单的列举下重要的大纲。

完整的th语法

th语法
注意一下其中的Order，这与执行顺序相关。

表达式

Simple expressions（这五个非常重要）:

Variable Expressions: ${...}
Selection Variable Expressions: *{...}
Message Expressions: #{...}
Link URL Expressions: @{...}
Fragment Expressions: ~{...}

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:
Page 17 of 104
No-Operation: _

看完之后肯定有些晕，因为信息量确实有点大，所以还是通过动手练习解下晕吧！

用例一.文本打印与循环：th:text,th:utext,th:each

th:text ：打印转义特殊字符
th:utext：打印不转义特殊字符
th:each：遍历结构体
controller：

 @RequestMapping("/success")
    public String success(Map<String,Object> map)
    {
        map.put("hello","<h1>哈咯</h1>");
        map.put("users", Arrays.asList("bz","coder","gamer"));
        return "success";
    }

Thymyeleaf模板：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all"
          href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
</head>
<body>
<hr/>
<!--转义特殊字符-->
<p th:text="${hello}"></p>
<!--不会转义特殊字符-->
<p th:utext="${hello}"></p>
<hr/>
<!--遍历user,th:each写在会h4里，所以有四个h4-->
<h4 th:text="${user}"  th:each="user:${users}"></h4>
<hr/>
<!--遍历user,th:each写在会span里，所以有四个span-->
<h4>
    <span th:each="user:${users}">[[${user}]]</span>
</h4>
</body>
</html>

用例二.布局模版：th:insert,th:replace,th:include

有三种模版放入的方式，对应三种结果。
insert:把被引入的片段内容整段插入,保留原有的标签，保留引入标签。
replace:将原有声明替换，去除原有标签，保留引入标签。
include:把被引入的片段内容保留，保留原有标签，去除引入标签。


<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式

<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

效果

<body>

<div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

</body>

标记被引入片段也有两种方法（th:fragment，id）

方法一：
<footer th:fragment="copy">&copy; 2011 The Good Thymes Virtual Grocery</footer>

引入方法：
<div th:replace="commons/bar::copy"></div>

方法二：
<footer id="copy">&copy; 2011 The Good Thymes Virtual Grocery</footer>

引入方法（此处还可以传参数，此处引入了activeUri的参数，值为emps）：
<div th:replace="commons/bar::#copy(activeUri='emps')"></div>

对Thymeleaf的初步了解暂时就到这里，日后继续补充。
To be continued