码迷，mamicode.com
首页 > 编程语言 > 详细

SpringBoot:模板引擎 Thymeleaf 基础使用

时间：2018-10-11 11:36:43      阅读：234      评论：0      收藏：0      [点我收藏+]

标签：ret   class   work   特性   优雅   大于   规模   if else   团队   

1    第2-3课：模板引擎 Thymeleaf 基础使用

1.1     模板引擎

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的 HTML 文档。

模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换，便生成了最终需要的业务数据（如网页）。

“置换型”模板引擎实现简单，但其效率低下，无法满足高负载的应用需求（比如有海量访问的网站），因此还出现了“解释型”模板引擎和“编译型”模板引擎等。

1.2     Thymeleaf 介绍

Thymeleaf 是?向 Web 和独?环境的现代服务器端 Java 模板引擎，能够处理 HTML、XML、JavaScript、CSS 甚?纯?本。

Thymeleaf 旨在提供?个优雅的、?度可维护的创建模板的?式。为了实现这??标，Thymeleaf 建?在?然模板的概念上，将其逻辑注?到模板?件中，不会影响模板设计原型，从而改善了设计的沟通，弥合了设计和开发团队之间的差距。

Thymeleaf 从设计之初就遵循 Web 标准——特别是 HTML 5 标准，如果需要，Thymeleaf 允许创建完全符合 HTML 5 验证标准的模板。

Spring Boot 体系内推荐使用 Thymeleaf 作为前端页面模板，并且 Spring Boot 2.0 中默认使用 Thymeleaf 3.0，性能提升幅度很大。

1.2.1   Thymeleaf 特点

简单说，Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP。与其他的模板引擎相比较，它有如下三个极吸引人的特点。

  • Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 HTML 原型，然后在 HTML 标签里增加额外的属性来达到模板 + 数据的展示方式。浏览器解释 HTML 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
  • Thymeleaf 开箱即用的特性。它支持标准方言和 Spring 方言，可以直接套用模板实现 JSTL、 OGNL 表达式效果，避免每天套模板、改 JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速地实现表单绑定、属性编辑器、国际化等功能。

对比

我们可以对比一下 Thymeleaf 和常用的模板引擎：Velocity、Freemaker，和其他模板一起不同的是，它使用了自然的模板技术。这意味着 Thymeleaf 的模板语法并不会破坏文档的结构，模板依旧是有效的 XML 文档。模板还可以用做工作原型，Thymeleaf 会在运行期替换掉静态值。Velocity 与 FreeMarker 则是连续的文本处理器。

下面的代码示例分别使用 Velocity、FreeMarker 与 Thymeleaf 打印出一条消息：

Velocity: <p>$message</p>
FreeMarker: <p>${message}</p>
Thymeleaf: <p th:text="${message}">Hello World!</p>

上面我们可以看出来 Thymeleaf 的作用域在 HTML 标签内，类似标签的一个属性来使用，这就是它的特点。

注意，由于 Thymeleaf 使用了 XML DOM 解析器，因此它并不适合于处理大规模的 XML 文件。

1.3     快速上手

来一个 Thymeleaf 的 Hello World 尝尝鲜。

1.3.1   相关配置

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

在 application.properties 中添加配置：

spring.thymeleaf.cache=false

其中，propertiesspring.thymeleaf.cache=false 是关闭 Thymeleaf 的缓存，不然在开发过程中修改页面不会立刻生效需要重启，生产可配置为 true。

1.3.2   一个简单的页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Hello</title>
</head>
<body>
<h1  th:text="${message}">Hello World</h1>
</body>
</html>

所有使用 Thymeleaf 的页面必须在 HTML 标签声明 Thymeleaf：

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

表明页面使用的是 Thymeleaf 语法。

1.3.3   Controller

@Controller
public class HelloController {
    @RequestMapping("/")
    public String index(ModelMap map) {
        map.addAttribute("message", "http://www.ityouknow.com");
        return "hello";
    }
}

这样就完成了，是不是很简单。启动项目后在浏览器中输入网址：http://localhost:8080/，会出现下面的结果：

http://www.ityouknow.com

说明页面的值，已经成功的被后端传入的内容所替换。

1.4     常用语法

我们新建 ExampleController 来封装不同的方法进行演示。

1.4.1   赋值、字符串拼接

赋值和拼接：

<p th:text="${userName}">neo</p>
<span th:text="‘Welcome to our application, ‘ + ${userName} + ‘!‘"></span>

字符串拼接还有另外一种简洁的写法：

<span th:text="|Welcome to our application, ${userName}!|"></span>

页面 string.html：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Example String </title>
</head>
<body>
    <div >
        <h1>text</h1>
        <p th:text="${userName}">neo</p>
        <span th:text="‘Welcome to our application, ‘ + ${userName} + ‘!‘"></span>
        <br/>
        <span th:text="|Welcome to our application, ${userName}!|"></span>
    </div>
</body>
</html>

后端传值：

@RequestMapping("/string")
public String string(ModelMap map) {
    map.addAttribute("userName", "ityouknow");
    return "string";
}

使用 ModelMap 以 KV 的方式存储传递到页面。

启动项目后在浏览器中输入网址：http://localhost:8080/string，会出现下面的结果：

text
 
ityouknow
 
Welcome to our application, ityouknow! 
Welcome to our application, ityouknow!

1.4.2   条件判断 If/Unless

Thymeleaf 中使用 th:if 和 th:unless 属性进行条件判断，在下面的例子中，<a> 标签只有在 th:if 中条件成立时才显示：

<a th:if="${flag == ‘yes‘}"  th:href="@{http://favorites.ren/}"> home </a>
<a th:unless="${flag != ‘no‘}" th:href="@{http://www.ityouknow.com/}" >ityouknow</a>

th:unless 与 th:if 恰好相反，只有表达式中的条件不成立，才会显示其内容。

页面 if.html：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Example If/Unless </title>
</head>
<body>
<div >
    <h1>If/Unless</h1>
    <a th:if="${flag == ‘yes‘}"  th:href="@{http://favorites.ren/}"> home </a>
    <br/>
    <a th:unless="${flag != ‘no‘}" th:href="@{http://www.ityouknow.com/}" >ityouknow</a>
</div>
</body>
</html>

后端传值：

@RequestMapping("/if")
public String ifunless(ModelMap map) {
    map.addAttribute("flag", "yes");
    return "if";
}

使用 ModelMap 以 KV 的方式存储传递到页面。

启动项目后在浏览器中输入网址：http://localhost:8080/if，会出现下面的结果：

If/Unless
 
home

单击 home 链接会跳转到：http://favorites.ren/ 地址。

1.4.3   for 循环

for 循环在我们项目中使用的频率太高了，一般结合前端的表格来使用。

首先在后端定义一个用户列表：

private List<User> getUserList(){
    List<User> list=new ArrayList<User>();
    User user1=new User("大牛",12,"123456");
    User user2=new User("小牛",6,"123563");
    User user3=new User("纯洁的微笑",66,"666666");
    list.add(user1);
    list.add(user2);
    list.add(user3);
    return  list;
}

按照键 users，传递到前端：

@RequestMapping("/list")
public String list(ModelMap map) {
    map.addAttribute("users", getUserList());
    return "list";
}

页面 list.html 进行数据展示：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Example If/Unless </title>
</head>
<body>
<div >
    <h1>for 循环</h1>
    <table>
        <tr  th:each="user,iterStat : ${users}">
            <td th:text="${user.name}">neo</td>
            <td th:text="${user.age}">6</td>
            <td th:text="${user.pass}">213</td>
            <td th:text="${iterStat.index}">index</td>
        </tr>
    </table>
</div>
</body>
</html>

iterStat 称作状态变量，属性有：

  • index，当前迭代对象的 index（从 0 开始计算）；
  • count，当前迭代对象的 index（从 1 开始计算）；
  • size，被迭代对象的大小；
  • current，当前迭代变量；
  • even/odd，布尔值，当前循环是否是偶数/奇数（从 0 开始计算）；
  • first，布尔值，当前循环是否是第一个；
  • last，布尔值，当前循环是否是最后一个。

在浏览器中输入网址：http://localhost:8080/list，页面展示效果如下：

for 循环
大牛  12  123456  0
小牛  6   123563  1
纯洁的微笑   66  666666  2

1.4.4   URL

URL 在 Web 应用模板中占据着十分重要的地位，需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法@{...}来处理的。如果需要 Thymeleaf 对 URL 进行渲染，那么务必使用 th:href、th:src 等属性，下面是一个例子：

<a th:href="@{http://www.ityouknow.com/{type}(type=${type})}">link1</a>
<a th:href="@{http://www.ityouknow.com/{pageId}/can-use-springcloud.html(pageId=${pageId})}">view</a>

也可以使用@{...}设置背景：

<div th:style="‘background:url(‘ + @{${img url}} + ‘);‘">

几点说明：

  • 上例中 URL 最后的(pageId=${pageId})表示将括号内的内容作为 URL 参数处理，该语法避免使用字符串拼接，大大提高了可读性；
  • @{...}表达式中可以通过{pageId}访问 Context 中的 pageId 变量；
  • @{/order}是 Context 相关的相对路径，在渲染时会自动添加上当前 Web 应用的 Context 名字，假设 context 名字为 app，那么结果应该是 /app/order。

完整的页面内容 url.html：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Example If/Unless </title>
</head>
<body>
<div >
    <h1>URL</h1>
    <a  th:href="@{http://www.ityouknow.com/{type}(type=${type})}">link1</a>
    <br/>
    <a th:href="@{http://www.ityouknow.com/{pageId}/can-use-springcloud.html(pageId=${pageId})}">view</a>
    <br/>
    <div th:style="‘background:url(‘ + @{${img}} + ‘);‘">
        <br/><br/><br/>
    </div>
</div>
</body>
</html>

后端程序：

@RequestMapping("/url")
public String url(ModelMap map) {
    map.addAttribute("type", "link");
    map.addAttribute("pageId", "springcloud/2017/09/11/");
    map.addAttribute("img", "http://www.ityouknow.com/assets/images/neo.jpg");
    return "url";
}

在浏览器中输入网址：http://localhost:8080/url，页面展示效果：

 

1.4.5   三目运算

三目运算是我们常用的功能之一，普遍应用在各个项目中，下面来做一下演示。

三目运算及表单显示：

<input th:value="${name}"/>
<input th:value="${age gt 30 ? ‘中年‘:‘年轻‘}"/>

说明：在表单标签中显示内容使用：th:value;${age gt 30 ? ‘中年‘:‘年轻‘}表示如果 age 大于 30 则显示中年，否则显示年轻。

  • gt：great than（大于） 
  • ge：great equal（大于等于） 
  • eq：equal（等于） 
  • lt：less than（小于） 
  • le：less equal（小于等于） 
  • ne：not equal（不等于） 

结合三目运算也可以将上面的 if else 改成这样：

<a th:if="${flag eq ‘yes‘}"  th:href="@{http://favorites.ren/}"> favorites </a>

完整的页面内容 eq.html：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Example If/Unless </title>
</head>
<body>
<div >
    <h1>EQ</h1>
    <input th:value="${name}"/>
    <br/>
    <input th:value="${age gt 30 ? ‘中年‘:‘年轻‘}"/>
    <br/>
    <a th:if="${flag eq ‘yes‘}"  th:href="@{http://favorites.ren/}"> favorites </a>
</div>
</body>
</html>

后端程序：

@RequestMapping("/eq")
public String eq(ModelMap map) {
    map.addAttribute("name", "neo");
    map.addAttribute("age", 30);
    map.addAttribute("flag", "yes");
    return "eq";
}

在浏览器中输入网址：http://localhost:8080/eq，页面展示效果如下：

EQ
 
neo
年轻
 
favorites

单击 favorites 链接会跳转到：http://favorites.ren/ 地址。

1.4.6   switch 选择

switch\case 多用于多条件判断的场景下，以性别举例：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Example switch </title>
</head>
<body>
<div >
    <div th:switch="${sex}">
        <p th:case="‘woman‘">她是一个姑娘...</p>
        <p th:case="‘man‘">这是一个爷们!</p>
        <!-- *: case的默认的选项 -->
        <p th:case="*">未知性别的一个家伙。</p>
    </div>
</div>
</body>
</html>

后端程序：

@RequestMapping("/switch")
public String switchcase(ModelMap map) {
    map.addAttribute("sex", "woman");
    return "switch";
}

在浏览器中输入网址：http://localhost:8080/switch，页面展示效果如下：

她是一个姑娘...

可以在后台改 sex 的值来查看结果。

1.5     总结

本课介绍了模板引擎、Thymeleaf 的使用特点、应用场景，通过实例演练展示了 Thymeleaf 各种语法特性。通过学习可以了解到，Thymeleaf 是一个非常灵活和优秀的前端页面模板引擎，使用 Thymeleaf 可以非常灵活地展示页面内容。

点击这里下载源码。

 

SpringBoot:模板引擎 Thymeleaf 基础使用

标签：ret   class   work   特性   优雅   大于   规模   if else   团队   

原文地址：https://www.cnblogs.com/zyt528/p/9771066.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！