慢慢来,是种诚意,加载中 . . .

springboot+Thymeleaf


springboot+Thymeleaf 模板引擎

什么是Thymeleaf

  • Thymeleaf 官网是这么解释的:Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
  • 译过来就是:Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎

简介:

  • 1.Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸引人的特点
  • 2.Thymeleaf 在有网络和无网络的环境下皆可运行,即 它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。
  • 3.Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL 表达式效果,避免每天套模板、改 JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

​ Thymeleaf是新一代模板引擎,它与Velocity、FreeMarker等模板引擎类似,可以完全替代JSP。在spring4.0中推荐使用thymeleaf来做前端引擎。

Thymeleaf官网:https://www.thymeleaf.org/

Thymeleaf在Github的主页:https://github.com/thymeleaf/thymeleaf

Spring官方文档:https://docs.spring.io/spring-boot/docs/current/reference/html/production-ready-features.html#production-ready

模板引擎介绍

模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的html文档。

从字面上理解模板引擎,最重要的就是模板二字,这个意思就是做好一个模板后套入对应位置的数据,最终以html的格式展示出来,这就是模板引擎的作用。

Spring Boot页提供了大量的模板包括:

  • 1.FreeMarker
  • 2.Groovy
  • 3.Mustache
  • 4.Thymeleaf 用户居多
  • 5.Velocity
  • 6.Beetl 国产号称比上边那个快10倍 但是没人用 Beetl蜜蜂

Thymeleaf特点

  • 动静分离: Thymeleaf选用html作为模板页,这是任何一款其他模板引擎做不到的!Thymeleaf使用html通过一些特定标签语法代表其含义,但并未破坏html结构,即使无网络、不通过后端渲染也能在浏览器成功打开,大大方便界面的测试和修改。
  • 开箱即用: Thymeleaf提供标准和Spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • Springboot官方大力推荐和支持,Springboot官方做了很多默认配置,开发者只需编写对应html即可,大大减轻了上手难度和配置复杂度。
  • 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
  • 与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。

Spring Boot页提供了大量的模板包括:

  • 1.FreeMarker
  • 2.Groovy
  • 3.Mustache
  • 4.Thymeleaf 用户居多
  • 5.Velocity
  • 6.Beetl 国产号称比上边那个快10倍 但是没人用 Beetl蜜蜂

在 application.yml 中配置 Thymeleaf 官方推荐使用yaml/yml格式的配置文件

yaml的使用简介

YAML 语言(发音:呀迈欧) yml的设计目标,就是方便人们读写。它实质上是一种通用的数据串行化格式。
它的基本语法规则如下。

  • 1.大小写敏感
  • 2.使用缩进表示层级关系
  • 3.缩进时不允许使用Tab键,只允许使用空格
  • 4.缩进的空格数目不重要,只要相同层级的元素左侧对齐即可
spring:
  thymeleaf:
    cache: false # 开发时关闭缓存,不然没法看到实时页面
    mode: HTML # 用非严格的 HTML  不加nekohtml依赖的话这个模式用不了 
    encoding: UTF-8
    servlet:
      content-type: text/html

Spring官方为什么推荐使用yml格式配置文件

  • 功能强大
  • 能存复杂数据类型 》对象 数组 Map 等等…
  • 配置文件结构清晰

引入

在html页面中引入thymeleaf命名空间,即,此时在html模板文件中动态的属性使用th:命名空间修饰 。

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

引入Thymeleaf
导入依赖:

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

查看源码:

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";
    private Charset encoding;
}

我们只需要把我们的html页面放在类路径下的templates下,thymeleaf就可以帮我们自动渲染了。

th

常用th属性如下:

  • th:text:文本替换;
  • th:utext:支持html的文本替换。
  • th:value:属性赋值
  • th:each:遍历循环元素
  • th:if:判断条件,类似的还有th:unless,th:switch,th:case
  • th:insert:代码块引入,类似的还有th:replace,th:include,常用于公共代码块提取的场景
  • th:fragment:定义代码块,方便被th:insert引用
  • th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。
  • th:attr:设置标签属性,多个属性可以用逗号分隔

这是常用的标签:

Text(tag body modification【标签体改造】)

关键字 功能介绍 案例
th:text 文本替换 <p th:text="${collect.description}">description</p>
th:utext 支持html的文本替换 <p th:utext="${htmlcontent}">conten</p>

IndexController.java内容:

@Controller
public class IndexController {
    @RequestMapping("/test")
    public String test(Model model){
        model.addAttribute("msg","<h1>hello springboot</h1>");
        return "test";
    }
}

test.html内容:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:text="${msg}"></div>
    <div th:utext="${msg}"></div>
</body>
</html>

运行项目,访问localhost:8080/test

image-20210515121308253

Fragment inclusion(片段的包含)

关键字 功能介绍 案例
th:include 布局标签,替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />

Fragment iteration(片段的迭代)

关键字 功能介绍 案例
th:each 属性赋值 <tr th:each="user,userStat:${users}">
th:each 属性取值 <tr th:each="user:${users}" th:text="${user}"></tr>

th:each 属性取值 :

model.addAttribute("users", Arrays.asList("张三","李四"));
<!--建议写法-->
<h3 th:each="user:${users}" th:text="${user}"></h3>
<!--同效果行内写法-->
<h3 th:each="user:${users}">[[${user}]]</h3>

image-20210515142403767

Condition evaluation(条件评估)

关键字 功能介绍 案例
th:if 判断条件 <a th:if="${userId == collect.userId}" >
th:unless 和th:if判断相反 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:switch 多路选择 配合th:case 使用 <div th:switch="${user.role}">
th:case th:switch的一个分支 <p th:case="'admin'">User is an administrator</p>

Local variable definition(局部变量的定义)

关键字 功能介绍 案例
th:object 替换对象 <div th:object="${session.user}">
th:with 变量赋值运算 <div th:with="isEven=${prodStat.count}%2==0"></div>

General attribute modification(通用属性修改)

关键字 功能介绍 案例
th:attr 设置标签属性,多个属性可以用逗号分隔 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。
th:attrappend 将求值的结果附加(后缀)到现有属性值。 <input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />
th:attrprepend 将求值的结果附加(前缀)到现有属性值。 <input type="button" value="Do it!" class="btn" th:attrprepend="class=${' ' + cssStyle}" />

Specific attribute modification(特定属性修改)

关键字 功能介绍 案例
th:value 属性赋值 <input th:value="${user.name}" />
th:href 链接地址 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:src 图片类地址引入 <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

Fragment specification(片段规范)

关键字 功能介绍 案例
th:fragment 布局标签,定义一个代码片段,方便其它地方引用 <div th:fragment="alert">

Fragment removal(片段删除)

关键字 功能介绍 案例
th:remove 删除某个属性 <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。

标准表达式语法:

${...} 变量表达式,Variable Expressions

@{...} 链接表达式,Link URL Expressions

#{...} 消息表达式,Message Expressions

~{...} 代码块表达式,Fragment Expressions

*{...} 选择变量表达式,Selection Variable Expressions

☀ 变量表达式

变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。如下所示:
${session.user.name}

它们将以HTML标签的一个属性来表示:

<span th:text="${book.author.name}">  
<li th:each="book : ${books}">

☀ 选择(星号)表达式

选择表达式很像变量表达式,不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行,如下:
*{customer.name}

被指定的object由th:object属性定义

<div th:object="${book}">  
  ...  
  <span th:text="*{title}">...</span>  
  ...  
</div>

☀ 文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties),用Key索引Value,还可以提供一组参数(可选).

#{main.title}  
#{message.entrycreated(${entryId})}

可以在模板文件中找到这样的表达式代码:

<table>  
  ...  
  <th th:text="#{header.address.city}">...</th>  
  <th th:text="#{header.address.country}">...</th>  
  ...  
</table>

☀ URL表达式

URL表达式指的是把一个有用的上下文或回话信息添加到URL,这个过程经常被叫做URL重写。
@{/order/list}
URL还可以设置参数:
@{/order/details(id=${orderId})}
相对路径:
@{../documents/report}

例如:

引入css

<link rel="stylesheet" th:href="@{index.css}">

引入JavaScript:

<script type="text/javascript" th:src="@{index.js}"></script>

超链接:

<a th:href="@{index.html}">超链接</a>
<form th:action="@{/createOrder}">
    <a href="main.html" th:href="@{/main}">
<div th:object="${session.user}">
      <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
      <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
      <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</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)

所有这些特征可以被组合并嵌套:

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
示例一:    
<h2 th:text="${expression} ? 'Hello' : 'Something else'"></h2>
示例二:       
<!-- IF CUSTOMER IS ANONYMOUS -->    
<div th:if="${customer.anonymous}">        
    <div>Welcome, Gues!</div>    
</div>    
<!-- ELSE -->    
<div th:unless="${customer.anonymous}">        
    <div th:text=" 'Hi,' + ${customer.name}">Hi, User</div>    
</div>

常用的内置对象

  • 一、ctx :上下文对象。
  • 二、vars :上下文变量。
  • 三、locale:上下文的语言环境。
  • 四、request:(仅在web上下文)的 HttpServletRequest 对象。
  • 五、response:(仅在web上下文)的 HttpServletResponse 对象。
  • 六、session:(仅在web上下文)的 HttpSession 对象。
  • 七、servletContext:(仅在web上下文)的 ServletContext 对象

常用的内置方法

  • 一、strings:字符串格式化方法,常用的Java方法它都有。比如:equals,equalsIgnoreCase,length,trim,toUpperCase,toLowerCase,indexOf,substring,replace,startsWith,endsWith,contains,containsIgnoreCase等
  • 二、numbers:数值格式化方法,常用的方法有:formatDecimal等
  • 三、bools:布尔方法,常用的方法有:isTrue,isFalse等
  • 四、arrays:数组方法,常用的方法有:toArray,length,isEmpty,contains,containsAll等
  • 五、lists,sets:集合方法,常用的方法有:toList,size,isEmpty,contains,containsAll,sort等
  • 六、maps:对象方法,常用的方法有:size,isEmpty,containsKey,containsValue等
  • 七、dates:日期方法,常用的方法有:format,year,month,hour,createNow等

Thymeleaf案例

如何创建,步骤如下:

  • 创建程序,添加依赖
  • 编写Controller
  • 编写Thymeleaf页面
  • 访问页面

添加pom依赖

在pom.xml中添加以下依赖:

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
        <version>2.4.5</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-lang/commons-lang -->
    <dependency>
        <groupId>commons-lang</groupId>
        <artifactId>commons-lang</artifactId>
        <version>2.6</version>
    </dependency>
    <!-- Maven依赖关系以获取Thymeleaf 3(核心)-->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf</artifactId>
        <version>3.0.12.RELEASE</version>
    </dependency>
    <!-- Spring 4集成包(这可能是Spring应用程序所需的一切)-->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring4</artifactId>
        <version>3.0.12.RELEASE</version>
    </dependency>
</dependencies>

查看 org.springframework.boot.autoconfigure.thymeleaf

public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";

总结:只要需要使用 thymeleaf ,只需要导入对应的依赖就可以了!我们将 html 放在我们的 templates 目录下即可!

编写controller

在编写Controller和Thymeleaf之前,先看一下项目的目录结构,有个印象和概念:

  • pom.xml:是项目中的Maven依赖,因为Springboot使用Maven来管理外部jar包依赖,我们只需填写依赖名称配置即可引入该依赖,在本系统中引入Spring web模块(Springmvc)和Thymeleaf的依赖.我们不需要自己去招相关jar包。
  • application.properties: 编写Springboot与各框架整合的一些配置内容。
  • controller:用来编写控制器,主要负责处理请求以及和视图(Thymeleaf)绑定。
  • static:用于存放静态资源,例如html、JavaScript、css以及图片等。
  • templates:用来存放模板引擎Thymeleaf(本质依然是.html文件)

项目基于Springboot框架,且选了Spring web(Springmvc)作为mvc框架,其中Thymeleaf就是v(view)视图层,我们需要在controller中指定Thymeleaf页面的url,然后再Model中绑定数据。

controller包下新建IndexController.java

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
    @RequestMapping("/test")
    public String test(Model model){
        model.addAttribute("msg","hello springboot");
        return "test";
    }
}

resources/templates目录下新建test.html

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

运行项目,访问localhost:8080/test,即可看到效果



评论
  目录