spring boot 与 thymeleaf (2): 常用表达式

在asp.net mvc 中, 有一个视图解析器, 可以支持Razor语法. 使用起来, 是非常的方便, 并且, 写在前台页面的后台方法, 是可调试的.

但是在java中, 目前我还没有接触到, 像.net vs 那么强大的功能.

对于mvc来说, 视图的解析, 是必不可少的. 实现的功能, 和上面是一样的, 而且, 有很多种, 例如: jsp, freemarker, thymeleaf 等.

这里, 我主要记录 thymeleaf 的一些学习笔记. 这里不牵涉原理, 只记录使用方法.

一. 添加依赖

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

这里如果只添加到这里, 引用的版本, 是比较低的, 如果要使用自己特定的版本, 只需要在 pom.xml 的properties 中指定版本就行了.

<thymeleaf.version>3.0.5.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>

二. spring boot 中, thymeleaf 的默认配置

这里首先看一下, 默认配置接收的类

/*
 * Copyright 2012-2017 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package org.springframework.boot.autoconfigure.thymeleaf;

import java.nio.charset.Charset;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.util.MimeType;

/**
 * Properties for Thymeleaf.
 *
 * @author Stephane Nicoll
 * @since 1.2.0
 */
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

    private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");

    private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");

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

    public static final String DEFAULT_SUFFIX = ".html";

    /**
     * Check that the template exists before rendering it (Thymeleaf 3+).
     */
    private boolean checkTemplate = true;

    /**
     * Check that the templates location exists.
     */
    private boolean checkTemplateLocation = true;

    /**
     * Prefix that gets prepended to view names when building a URL.
     */
    private String prefix = DEFAULT_PREFIX;

    /**
     * Suffix that gets appended to view names when building a URL.
     */
    private String suffix = DEFAULT_SUFFIX;

    /**
     * Template mode to be applied to templates. See also StandardTemplateModeHandlers.
     */
    private String mode = "HTML5";

    /**
     * Template encoding.
     */
    private Charset encoding = DEFAULT_ENCODING;

    /**
     * Content-Type value.
     */
    private MimeType contentType = DEFAULT_CONTENT_TYPE;

    /**
     * Enable template caching.
     */
    private boolean cache = true;

    /**
     * Order of the template resolver in the chain. By default, the template resolver is
     * first in the chain. Order start at 1 and should only be set if you have defined
     * additional "TemplateResolver" beans.
     */
    private Integer templateResolverOrder;

    /**
     * Comma-separated list of view names that can be resolved.
     */
    private String[] viewNames;

    /**
     * Comma-separated list of view names that should be excluded from resolution.
     */
    private String[] excludedViewNames;

    /**
     * Enable MVC Thymeleaf view resolution.
     */
    private boolean enabled = true;

    ......
}

从这里可以看到, 默认的是 html 格式的, 且放在 classpath:/templates/ 目录下. 一般情况下, 我们不需要再对thymeleaf进行配置, 但是在开发的过程中, 可能要屏蔽缓存功能.  最后我们要做的, 只是将路径拼接进去就行了.

application.yml文件中, 可以禁用缓存.

spring:
  thymeleaf:
    cache: false

三. 基本使用

1. 表达式

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

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

　　URL表达式: @{...}

　　消息表达式: #{...}

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

2. 文字

　　文本: '123', 'abc'

　　数字: 1,2,0.5

　　布尔: true, false

　　空: null

3. 文本操作

　　字符串连接: +

　　文本替换: |双竖线隔起来 ${name}|

4. 算数运算符

　　二进制运算法(加减乘除,取模): +    -    *    /    %

5. 负号: -

6. 布尔运算符

　　and   or    not    !

7. 比较和相等运算符

　　比较运算符(这里建议使用英文字符代替 >  >=  <  <=)   gt    ge    lt     le

　　相等运算符: ==   !=

8. 条件运算符

　　三元运算符:  if(...)? 'then' : 'else'

　　if(...)? 'then'  这里没有else, 因为else默认为 ''

　　为空判断   (aaa)?:bbb   如果aaa为空, 则使用bbb的值, 否则使用aaa

9. 哑操作符  _  (一个下划线)

接下来对以上部分进行测试.

controller:

package org.elvin.learn.springboot.controller;

import org.elvin.learn.springboot.pojo.Book;
import org.joda.time.DateTime;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.thymeleaf.util.MapUtils;

import java.util.*;

@Controller
@RequestMapping("thy")
public class ThyController {

    @GetMapping("index")
    public String index(Model model) {
        model.addAttribute("book0", null);

        Book book = new Book("springmvc", new DateTime().toString("yyyy-MM-dd"), 10000L);
        model.addAttribute("book", book);

        Book book1 = new Book("springboot", new DateTime().toString("yyyy-MM-dd"), 21000L);
        model.addAttribute("book1", book1);

        model.addAttribute("color", "red");
        model.addAttribute("msg", "welcome");
        model.addAttribute("nowTime", new Date());       

        return "thy/index";
    }
}

html:

大体框架

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Title</title>
    <!--@ { } 链接网址表达式, 会自动加入虚拟路径-->
    <link th:href="@{/bootstrap-3.3.7/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/bootstrap-3.3.7/css/bootstrap-theme.css}" rel="stylesheet"/>
    <style th:inline="css">
        /*通过[ [ $ { }]]的方式访问model中的属性*/
        .bgcolor {
            background-color: [[${color}]]
        }
    </style>
</head>
<body>

<script th:src="@{/js/jquery1.11.1/jquery-1.11.1.js}" type="text/javascript"></script>
<script th:src="@{/bootstrap-3.3.7/js/bootstrap.js}" type="text/javascript"></script>
<script th:inline="javascript">
    $(function () {
        var book = [[${book}]];
        console.log(book.name);
    });
</script>
</body>
</html>

数据准备:

在messages.properties中加入以下数据:

welcome=welcome here! {0}
hello={0} say hello to {1}
startWorkd=start from here

在templates中新建文件夹 common, 在下面建两个文件 footer.html, header.html

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <div th:fragment="footerDiv">
        <p>common.footer 底部菜单</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <div id="headerDiv">
        <p>common.header 头部菜单</p>
    </div>
</body>
</html>

接下来, 就是在里面添加内容了.

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">URL表达式 / 消息表达式</h3>
        <!--
            URL 表达式
        -->
        <a style="background-color: #0f0f0f" th:href="@{/thy/index(lang='en_US')}">English(US)</a>
        <a style="background-color: #0f0f0f"
           th:href="@{http://localhost:8080/springboot/thy/index?lang=zh_CN}">简体中文</a>
    </div>
    <div class="panel-body">
        <!--
       1. # { }消息表达式 : 替换文本
       1.1 文本中, 预留参数
       1.2 消息key用变量替换
   -->
        <!--1.1 在消息中加入参数, 多个参数, 在传值的时候用逗号隔开-->
        <p th:text="#{startWorkd}"></p>
        <p th:utext="#{welcome(${book.name})}">hahaha</p>
        <p th:utext="#{hello(${book.name}, ${bookList[1].name})}">hahaha</p>
        <!--1.2 消息用变量替换-->
        <p th:utext="#{${msg}(${book.name})}">hahaha</p>
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">选择变量表达式</h3>
    </div>
    <div class="panel-body">
        <!-- 选择变量表达式 * { } -->
        <p th:object="${book0 ?: book1}">
            <span th:text="*{name}"></span>
            <span th:text="*{price gt 10000}?'大于100元':'小于等于100元'"></span>
            <span th:text="*{publishTime.length() ge 10}?'时间长度过长'"></span>
        </p>

        <p>
            <!--星号语法计算所选对象而不是整个上下文的表达式,
            所以, 只要没有选定的对象, $ 和 * 语法就完全相同-->
            <span th:text="*{book.name}"></span>
            <span th:text="*{book.price} / 100 + '元'"></span>
            <span th:text="*{book.publishTime}"></span>
        </p>
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">选择变量表达式</h3>
    </div>
    <div class="panel-body">
        <div style="display:none">
            <!--assert 都成立才会执行, 否则抛出异常
             th:assert="${!#strings.isEmpty(onevar)},${!#strings.isEmpty(twovar)}"
            -->
            <!--这里将模板定义成了函数的方式,
            temp1表示函数名, name1, name2 表示参数, 不同的是, 可以不写在这里, 直接在下面用的时候会写也可以-->
            <div th:fragment="temp1(name1, name2)">
                <span th:utext="|book: ${name1} , book1: ${name2}|"></span>
            </div>
            <!--th:assert="${price > 100}, ${!#strings.isEmpty(name)}"-->
            <div th:fragment="temp2">
                <span th:utext="'book: ' + ${name} + ', price: ' + ${price}"></span>
            </div>
        </div>

        <!--replace可以替换能成insert,但是他们之间是有区别的, insert会保留当前标签-->
        <div th:replace=":: temp1(${book.name}, ${book1.name})"></div>
        <div th:insert="~{:: temp2(name=${book.name}, price=${book.price})}"></div>
        <!--include官方3.0后不推荐使用-->
        <div th:include=":: temp1(name1=${book.name}, name2=${book1.name})"></div>

        <!--引入外部的文件中的某一部分内容-->
        <div th:insert="~{common/header :: #headerDiv}"></div>
        <div th:insert="~{common/footer :: footerDiv}"></div>

        <!--这里可以通过判断表达式来控制插入什么, 或者什么也不插入-->
        <div th:insert="_">啥也不插入, 也不替换任何东西</div>
        <div th:insert="${book0 == null}? ~{:: temp1(${book.name}, ${book1.name})}:~{}"></div>
    </div>
</div>

结果: