SpringBoot - 模版引擎Thymeleaf

最后更新于 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容