spring-boot周边游（三）Thymeleaf-1 一个简单的demo以及初识Standard Dialect

时间  2019-12-21
标签 spring boot 周边 thymeleaf 一个 简单 demo 以及 standard dialect 栏目 Spring 繁體版
原文   原文链接

Thymeleaf简介

配置Thymeleaf

这个教程是基于maven环境进行配置的。css

1.在resources文件夹之下新加两个文件夹，分别为templates和static，其中templates用于存放界面HTML文件，而static则用于存储静态文件好比js，css或img。目录格式以下：html

-project
  -src
    -main
      -java
      -resources
        -templates
        -static
        -config
          -application.yml
          -application-test.yml
          -application-validate.yml
    -test
  -pom.xml

2.pom.xml文件中添加依赖：java

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

3.在.properties文件或是.yml文件中添加thymeleaf配置
.properties文件中配置内容以下：web

########################################################
###THYMELEAF (ThymeleafAutoConfiguration)
########################################################
#配置项目的HTML路径
spring.thymeleaf.prefix=classpath:/templates/
#后缀
spring.thymeleaf.suffix=.html
#会开启严格的HTML格式检查，所以若是想要关闭它，就将其值设置为LEGACYHTML5
#spring.thymeleaf.mode=HTML5 #LEGACYHTML5 若是想要关闭强制的语法检查
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
# 关闭了换从，从而支持热部署
spring.thymeleaf.cache=false

.yml文件中配置内容以下：面试

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    content-type: text/html
    cache: false
    mode: LEGACYHTML5

至此环境配置完成。Spring支持多种方式配置Thymeleaf包括代码，XML等等。这里咱们采用yml文件的方式。spring

4.编写demo
在resources/templates目录下新建一个hello.html文件，内容以下：express

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page</title>
</head>
<body>
<!--从上下文中获取name属性并填写到p标签中-->
    <p th:text="'hello, '+${name}">hello! my new friend!</p>
</body>
</html>

这里须要注意的是，要在html标签中加入xmlns:th="http://www.thymeleaf.org"。数组

编写一个controller，内容以下：浏览器

@Controller
@RequestMapping("/")
public class TestController {

    @GetMapping("/hello")
    public String welcome(Model model){
        model.addAttribute("name", "小伙伴");
        return "hello";
    }
}

这一部分的内容涉及Spring-mvc，这里暂时不细讲，各位只需copy代码便可。spring-mvc

完成后运行Application.java启动spring-boot项目，Application.java内容以下：

import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.data.jpa.repository.config.EnableJpaAuditing;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import java.util.Arrays;
@EnableJpaAuditing
@SpringBootApplication
public class Application extends WebMvcConfigurerAdapter{

    public static void main(String[] args){
        SpringApplication.run(Application.class);
    }

    /**
     * 在启动时输出找到的全部的bean
     * @param ctx
     * @return
     */
    @Bean
    public CommandLineRunner commandLineRunner(ApplicationContext ctx) {
        return args -> {

            System.out.println("Let's inspect the beans provided by Spring Boot:");

            String[] beanNames = ctx.getBeanDefinitionNames();
            Arrays.sort(beanNames);
            for (String beanName : beanNames) {
                System.out.println(beanName);
            }

        };
    }

}

启动完毕后在浏览器中输入http://localhost:PORT/hello。这里的PORT是指端口号，能够在配置文件中使用server.port:8080配置。使用yaml配置的话请自行转化。

这是的界面显示以下：

clipboard.png

Thymeleaf basic

1.Thymeleaf支持多种模式(mode)

  • HTML（包括HTML5, HTML 4 and XHTML.）不会进行很是严格的语法检查
  • XML （严格的语法检查，若是不符合标准会抛出异常）
  • TEXT
  • JAVASCRIPT （意味着能够像在HTML中的语法同样在JS中使用）
  • CSS (同上)
  • RAW

2.Standard Dialect

An object that applies some logic to a markup artifact (a tag, some text, a comment, or a mere placeholder if templates are not markup) is called a processor, and a set of these processors – plus perhaps some extra artifacts – is what a dialect is normally comprised of.

dialect由processors和artifacts构成。processor是指将一些逻辑施加于markup元素之上。dialect将在后面继续介绍，它是thymeleaf的一个重要成分。这里想介绍一下，就是Thymeleaf对SpEL有很是良好的支持，并且以前使用ONGL语法的同志也能够很是快速的过渡。同时这种语法优于jsp的优势在于它支持原生的HTML语法，从而在预览的时候不会由于JSP语法而必须先经过服务器渲染。

Standard Dialect

th:text: 更换当前标签之下的text内容，例如 <p th:text="hello"></p>转化后成为 <p>hello</p>
th:utext: 非转义语法，也就是当存在如HTML语义中的标签 <span>不会将其转义为 &lt;span&rt;

Standard Syntax Expression

在官网上列举了全部的标准的语法，有兴趣的能够戳文末的连接去了解。这里简单介绍一下其中的几种并举例说明。
为了便于理解，这里先介绍一下，th:text属性会将所在的标签的内容改变为th:text的值。并且th:text支持动态赋值。

Message Expression #{...}

假设咱们如今想要把一些公共用语放在一个配置文件中，而且这个配置文件能够支持多国语言。那么咱们就能够经过#{}获取配置文件中的内容。Thymeleaf默认每一个HTML的配置文件位于同目录之下的同名的.properties文件中。如今咱们来尝试一下，在以前的hello.html之中添加一段代码，内容以下：

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page</title>
</head>
<body>
    <!--从上下文中获取name属性并填写到p标签中-->
    <p th:text="'hello, '+${name}">hello! my new friend!</p>
    
    <!--添加这一段代码-->
    <p th:utext="#{welcome.login}"></p>
</body>
</html>

而后在同目录下添加一个hello.properties文件，内容以下：

welcome.login:welcome to this <b>damn</b> website

这时开启项目就能够看见第二个<p>的text为配置文件中的内容。

假设这时有一个新需求，好比咱们但愿在欢迎词中包含用户名体现个性化，那么咱们可使用以下的方式：
hello.properties使用{}占位符

welcome.login:welcome to this <b>damn</b> website,{0}

hello.html ${session.user.name}从session中获取用户名做为参数传递给message，股关于${}会在下一小节详细介绍。若是有多个参数须要传递，能够用逗号隔开

<p th:utext="#{welcome.login(${session.user.name})}"></p>

Variable Expressions ${...}

${}属于OGNL语法，而在spring-mvc中会被替代为SpEL，可是两者的语法在大多数场景下基本相同。
下面是一些简单范例：

${person.father.name}: 至关于person.getFather().getName()
${personsByName['Stephen Zucchini'].age}: 获取map对象personByName中名称为Stephen Zucchini的人的年龄
${personsArray[0].name}: 获取personsArray数组对象中第一个对象的name
${person.createCompleteName()} : 容许直接调用对象中的方法

Thymeleaf还考虑到你可能须要在界面中调用到不少的上下文属性，或者是使用一些工具，所以内置了一下对象和方法供你们使用。这里直接摘抄了官网，有兴趣的能够直接去官网进行了解。

clipboard.png

clipboard.png

Selection Variable *{...}

被标记为*{x}将不会再上下文中寻找x属性，而是会去最近选中的对象中寻找x属性。若是没有最近选中的对象，那么*{...}和#{...}所执行的操做相同。
那么咱们如何才能知道是否选中对象呢，这是须要使用th:object属性来标记被选中的对象。下面举个栗子：
好比如今咱们有一本书，而且咱们但愿在界面中展现这本书的详细信息，包括书的ISBN，名称(name)和价格(price)，那么咱们的界面能够是酱的

<div th:object="${book}">
    <p th:text="*{ISBN}"></p>
    <p th:text="*{name}"></p>
    <p th:text="*{price}"></p>
</div>

这段代码等价于

<div>
    <p th:text="${book.ISBN}"></p>
    <p th:text="${book.name}"></p>
    <p th:text="${book.price}"></p>
</div>

可见*{...}能够帮咱们省去不少冗余的选择代码

Link URL Expressions: @{...}

URL在WEB页面中可谓是错综复杂，有各式各样的URL。并且一旦项目重构，由于上下文的改变极可能形成相对路径甚至绝对路径的失效。Thymeleaf将URL归类为一下几种并分别给出了相应的支持。下面给出一些示例：

<a th:href="@{http://www.thymeleaf.org}"/>: 展现绝对路径 http://www.thymeleaf.org
<a th:href="@{/order/list}"/> : 和上下文相对路径,若是咱们的项目部署在 <a th:href="@{/order/list}">,那么等价于 <a href="/myapp/order/list">
<a th:href="@{~/billing-app/showDetails.htm}">: 服务器相对路径，能够指向同一个服务器上另外一个上下文的资源，若是咱们的项目部署在 <a th:href="@{/order/list}">,那么等价于 <a href="/billing-app/showDetails.htm">
<script th:src="@{//scriptserver.example.net/myscript.js}">...</script>: 协议相关路径，本质上是绝对路径，会保证协议的一致性，一般用于引入静态资源如js或css等
<a th:href="@{/order/details(id=3)}">:在URL中添加参数，等价于 <a href="/order/details?id=3">。若是须要传入多个参数，能够用逗号隔开
<a th:href="@{/order/{id}/details(id=3,action='show_all')}">:将传入的参数自动转化为路径变量，这里等价于 <a href="/order/3/details?action=show_all">
<a th:href="@{/home#all_info(action='show')}">定位到界面中id为all_info的部分，等价于 <a href="/home?action=show#all_info">
<a th:href="@{'/details/'+${user.login}(orderId=${o.id})}">view</a>URL自己也能够是一个变量定义的，也一样容许传入参数。

Fragment Expressions: ~{...}

容许将HTML代码块插入到多个地方。好比咱们常常会须要将HTML页面分割为HEADER，SIDEBAR，FOOTER等部分，经过Fragment符号能够将他们分割成单独的文件而且插入到须要他们的页面中。提升了代码的复用性。它经常和th:insert以及th:replace一块儿使用。

Literals

text: th:text="'working web application'"用单引号赋值,还支持字符串拼接操做 th:text="'The name of the user is ' + ${user.name}"
numeric: th:text="2013 + 2"
boolean: th:if="${user.isAdmin()} == false">
null: th:if="${variable.something} == null"

Literals Replacement

在上一节提到了字符串拼接操做，这是一个很经常使用的操做。所以Thymeleaf也专门封装了一个字符串替换符来支持这个操做，所以上面的th:text="'The name of the user is ' + ${user.name}"等价于th:text="|The name of the user is ${user.name}|"从而加强了可读性。
须要注意的是，替换符||中只会对${...}, *{...}, #{...}进行转义，其它的都不会进行转义，所以当遇到如boolean常量时咱们仍是须要使用拼接符将其转化为以下格式th:text="${user.isAdmin()}==false + ' ' + |${twovar}, ${threevar}|"

运算符,比较符，条件符

+ - * /(div) %(mod)
gt (>), lt (<), ge (>=), le (<=), not (!) eq (==), neq/ne (!=)
? :
这些都在Thymeleaf具备良好的支持，这里要强调一个独特的用法就是
th:text="*{age}?: '(no age specified)'"等价于th:text="*{age != null}? *{age} : '(no age specified)'，即?:会自动填入默认值

不进行任何操做_

<span th:text="${user.name} ?: _">no user authenticated</span>
等价于
<span th:text="${user.name} ?: 'no user authenticated'">...</span>
也就是说，当用户名不存在是，则显示span标签中原有的text

预处理 __${expression}__

目前举例的场景是能够在预处理阶段根据locale决定如何解读messages。例如如今有两个地区的.properties文件，能够在预处理阶段根据地区决定使用那个.properties文件。
<p th:text="${__#{article.text('textVar')}__}">Some text here...</p>
若是实在中国地区，就会读取后缀为ch.properties的文件中articale.text的内容

th标签记录

th:attr: 能够更改这个所在的标签的某个的属性的值，例如 th:attr="action=@{/subscribe}"就将action的属性改变为动态生成的@{/subscribe}，还容许对多个属性赋值，每一个属性之间用逗号隔开，如 <img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

th:attr由于其丑陋而致使极少使用。大多数的HTML标签Thymeleaf都为其封装了专门的赋值th标签

clipboard.png

clipboard.png

clipboard.png

这是官网上给的具体封装的标签例子，基本上HTML已有的标签都被疯转为th标签，而且容许你在其中使用Standard Dialect语法。

若是你想对多个th标签赋予相同的值，Thymeleaf连这种状况都帮你想好了，你可使用以下语法简化
th:alt-title="#{logo}"等价于th:alt="#{logo}" th:title="#{logo}"

th:attrappend: 添加值至某个attr，引伸的有 th:classappend, th:styleappend
th:whatever: 这个标签比较神奇，其实它的本质是自定义任何标签均可以。直接看例子 <span th:whatever="${user.name}">...</span>等价于 <span whatever="John Apricot">...</span>

目前刚刚整理完毕了Thymeleaf前误解的内容，会开下一个博客继续介绍(fanyi)后面的内容。内容尊的好多啊QAQ

Refernces

tymeleaf官网

clipboard.png
想要了解更多开发技术，面试教程以及互联网公司内推，欢迎关注个人微信公众号！将会不按期的发放福利哦~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程