Thymeleaf模板教程(作用特点及使用实例)

Thymeleaf模板教程(作用特点及使用实例)-mikechen

Thymeleaf定义

Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

 

什么是模板引擎

模板引擎这里特指:用于Web开发的模板引擎,是为了使用户界面与业务数据分离而产生的,它可以生成特定格式的文档,比如:网站标准的html等。

市面上开源的第三方的模板引擎也比较多,有Thymeleaf、FreeMaker、Velocity等模板引擎受众较广。

要理解模板引擎,还是从MVC模式,如下图所示:

Thymeleaf模板教程(作用特点及使用实例)-mikechen

我们平时使用JSP页面,能够在JSP页面中写Java相关逻辑,这样在View中混淆了逻辑代码,造成前后端混淆在一起,彼此职责不分明。

所以以Java模板引擎出现,就可以将Java代码从网页中分离出来,使得页面设计者可以专注于版面的设计,而Java程序员可以集中精力编写复杂的代码, 从而实现前后端分离,提升工作效率。

 

Thymeleaf作用

Thymeleaf的主要作用是把Model中的数据渲染到Html中,因此其语法主要是如何解析model中的数据。

 

Thymeleaf特点

Thymeleaf作为被SpringBoot官方推荐的模板引擎,与其它模板引擎相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用。

除此之外,具备如下几大特点:

1.动静分离

Thymeleaf可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。

2.Html模板

Thymeleaf选用Html作为模板页,这是任何一款其他模板引擎做不到的。

Thymeleaf使用Html通过一些特定标签语法代表其含义,但并未破坏html结构,即使无网络、不通过后端渲染也能在浏览器成功打开,大大方便界面的测试和修改。

3.开箱即用

Thymeleaf提供标准和Spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、改JSTL、改标签的困扰。

4.与SpringBoot完美整合

与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器。

Thymeleaf语法

1.变量表达式

变量表达式:${...}

示例:

<div th:object="${book}">

2.选择变量表达式

选择变量表达式和变量表达式用法类似,一般用于从被选定对象而不是上下文中获取属性值。

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

示例:

<p>titile: <span th:text="*{title}">标题</span>.</p>

*{title} 选择变量表达式获取当前指定对象book的title属性值。

3.链接表达式

用于静态资源的引用,form表单的请求等链接。

链接表达式:@{...}

示例:

无参:@{/xxx}
 
有参:@{/xxx(k1=v1,k2=v2)} 对应url结构:xxx?k1=v1&k2=v2
 
引入本地资源:@{/项目本地的资源路径}
 
引入外部资源:@{/webjars/资源在jar包中的路径}

4.国际化表达式

国际化表达式:#{...}

一般用于国际化的场景,示例如下:

th:text="#{msg}"

5.片段引用表达式

片段表达式~{…}用来标记一个片段模板,并根据需要移动或传递给其他模板。

片段引用表达式:~{...}

其中,最常见的用法是使用th:insert或th:replace属性插入片段,示例代码如下:

<divth:insert="~{thymeleafDemo::title}"></div>

上述代码中,使用th:insert属性将title片段模板引用到该标签中。

6.常用内置功能

  • ctx :上下文对象;
  • vars :上下文变量;
  • locale:上下文的语言环境;
  • request:(仅在web上下文)的 HttpServletRequest 对象;
  • response:(仅在web上下文)的 HttpServletResponse 对象;
  • session:(仅在web上下文)的 HttpSession 对象;
  • servletContext:(仅在web上下文)的 ServletContext 对象;

这里以常用的Session举例,如下所示:

// java 代码将用户名放在session中
session.setAttribute("userinfo",username);
// Thymeleaf通过内置对象直接获取
th:text="${session.userinfo}"

7.常用内置方法

  • strings:字符串格式化方法,常用的Java方法它都有,比如:equals,equalsIgnoreCase,length,trim,indexOf,substring,replace,contains等;
  • numbers:数值格式化方法,常用的方法有:formatDecimal等;
  • bools:布尔方法,常用的方法有:isTrue,isFalse等;
  • arrays:数组方法,常用的方法有:length,isEmpty,contains等;
  • lists,sets:集合方法,常用的方法有:toList,size,isEmpty等;
  • maps:对象方法,常用的方法有:size,isEmpty,containsKey等;
  • dates:日期方法,常用的方法有:format,year,month,hour等;

8.常用 th 属性

html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个:

Thymeleaf模板教程(作用特点及使用实例)-mikechen

 

Thymeleaf使用

Thymeleaf被Springboot官方推荐,并且Springboot已成为JavaWeb领域必不可少的技术点,下面构建一个Thymeleaf使用示例。

项目基于Springboot框架,且选了Spring MVC框架,其中Thymeleaf就是view视图层。

1.添加Maven依赖

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

2.编写Controller

Thymeleaf模板教程(作用特点及使用实例)-mikechen

这里会涉及几个与Thymeleaf相关的目录结构:

  • controller(控制器):主要负责处理请求以及和视图绑定。
  • static(存放静态资源):例如html、JavaScript、Css以及图片等。
  • templates(用来存放模板):Thymeleaf后缀是.html的文件。

然后再conroller层创建控制类:

package com.Thymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class urlController {
    @GetMapping("index")//页面的url地址
    public String getindex(Model model)//对应函数
    {
        model.addAttribute("name","mikechen");
        return "index";//与templates中index.html对应
    }
}

以上代码会涉及几个核心注解,我大致说下具体的作用。

  • @controller注解:的意思就是声明这个java文件为一个controller控制器。
  • @GetMapping(“index”) :其中@GetMapping的意思是请求的方式为get方式,而里面的index表示这个页面(接口)的url地址(路径)。
  • model.addAttribute(“name”,”mikechen”) :就是Model存入数据的书写方式。
  • return “index”:这个index就是在templates目录下对应模板本次为Thymeleaf模板的名称,即应该对应index.html这个Thymeleaf文件。

3.编写Thymeleaf模板

在项目的resources目录下的templates文件夹下面创建一个叫index.html的文件。

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
hello 第一个Thymeleaf程序
<div th:text="${name}">name是mikechen</div>
</body>
</html>

th:text=”${name}”就是Thymeleaf取值的一个语法,这个值从后台渲染而来,就是前面controller中在Model中存的值:model.addAttribute(“name”,”mikechen”)。

4.启动程序

访问入口

http://localhost:8080/index

最后显示:

hello 第一个Thymeleaf程序
mikechen

通过以上的步骤,你就完成了第一个Thymeleaf程序并且能够成功运行。

 

陈睿mikechen

10年+大厂架构经验,资深技术专家,就职于阿里巴巴、淘宝、百度等一线互联网大厂。

关注「mikechen」公众号,获取更多技术干货!

后台回复面试即可获取《史上最全阿里Java面试题总结》,后台回复架构,即可获取《阿里架构师进阶专题全部合集

评论交流
    说说你的看法