Thymeleaf系列二 简单表达式: 变量、消息、Literals、文本、算术、比较和条件表达式

1. 概述

本节主要介绍thymeleaf的语法:简单表达式。包括以下内容:
- 变量表达式:Variable Expressions
- 消息表达式:Message Expressions
- Literals
- 文本操作符: Text operations
- 算术表达式:Arithmetic operations
- 比较操作符:Comparisons and equality
- 条件操作符: Conditional operators

2. 例子

2.1 公共类

User

public class User {
    private String name;
    private boolean isAdmin;
    private String other;
    private int age;
// set/get 略
}

Family

public class Family {
    private User father;
    private List childList;
    // set/get 略
}

ExpressionsCtl:Control类
此类初始化测试类,当访问此URL,并转到expressions/simple.html。

@Controller
@RequestMapping("/expressions")
public class ExpressionsCtl {

    /**
     * 简单表达式
     */
    @RequestMapping("/simple")
    public String simpleExpressions(ModelMap map){
        // 变量表达式:Variable Expressions
        User user = new User("simple_name");
        user.setAge(new Random().nextInt(100));
        map.put("user", user);
        return "expressions/simple";
    } 
    ... 
}

下面的代码都在此simple.html页面中。

2.2 变量表达式(Variable Expressions)

实现功能:

  • 简单的表达式
  • 变量值和字符串拼接
==================== 变量表达式(Variable Expressions) ===============================<br/>

${user.name} --> <input type="text" name="userName" value="James Carrot" th:value="${user.name}" /> <br />

'The name of the user is ' + ${user.name} --> <span th:text="'The name of the user is ' + ${user.name}" >span> <br />
<br />

输出: “–>”的左边是语法,右边是对应的输出

==================== 变量表达式(Variable Expressions) ===============================
${user.name} --> simple_name

'The name of the user is ' + ${user.name} --> The name of the user is simple_name 

2.3 消息表达式:Message Expressions

实现功能:

  • 直接从属性文件中获取值
  • 从属性文件中获取值,并替换占位符


#{home.welcome} --> <span th:text="#{home.welcome}">Welcome to our grocery store!span> <br />

#{home.welcome.replace(${user.name})} --> <span th:text="#{home.welcome.replace(${user.name})}">span> <br />
<br />

输出: “–>”的左边是语法,右边是对应的输出

=====================消息表达式:Message Expressions =================================
#{home.welcome} --> welcome thymeleaf 
#{home.welcome.replace(${user.name})} --> welcome thymeleaf, simple_name! 

2.4 Literals

实现功能:

  • 文本 Text literals
  • 数字 Number literals
  • 布尔值
  • Null值
========================== Literals =======================================<br/>

<div>
  Now you are looking at a <span th:text="'working web application'">template filespan>.
div>


<div>仅仅输出数字 th:text="2013" --> <span th:text="2013">1492span>.div>
<div>数字计算 th:text="2013 + 2" --> <span th:text="2013 + 2">1494span>.div>


${user.isAdmin()} == false --> <span th:if="${user.isAdmin()} == false"> false span> <br />


${user.other} == null --> <span th:if="${user.other} == null"> nullspan>
<br />

输出: “–>”的左边是语法,右边是对应的输出

========================== Literals =======================================
Now you are looking at a working web application.
仅仅输出数字 th:text="2013" --> 2013.
数字计算 th:text="2013 + 2" --> 2015.
${user.isAdmin()} == false --> false 
${user.other} == null --> null 

2.5 文本操作符: Text operations

实现功能:

  • +:字符串拼接字体串
  • 简化字符中拼接操作: Literal substitutions(使用”|”包围字符串,不需要对字符串使用”’”)

'The name of the user is ' + ${user.name} + '_' + ${user.age} --> <span th:text="'The name of the user is ' + ${user.name} + '_' + ${user.age}"> span> <br/>

|Welcome to our application, ${user.name}!| --> <span th:text="|Welcome to our application, ${user.name}!|">span> <br />
等价于这条语句:<br />
'Welcome to our application, ' + ${user.name} + '!' --> <span th:text="'Welcome to our application, ' + ${user.name} + '!'"> span>
<br />

输出: “–>”的左边是语法,右边是对应的输出

========================== 文本操作符: Text operations: ==================================
'The name of the user is ' + ${user.name} + '_' + ${user.age} --> The name of the user is simple_name_52 
|Welcome to our application, ${user.name}!| --> Welcome to our application, simple_name! 
等价于这条语句:
'Welcome to our application, ' + ${user.name} + '!' --> Welcome to our application, simple_name! 

2.6 算术表达式:Arithmetic operations

实现功能:

  • 二进制运算符: Binary operators: +, -, *, /, %
  • Boolean operations: true,false, !, not
  • Binary operators: and, or

${user.age} % 2 == 0 --> <span th:text="${user.age} % 2 == 0"> span> <br />


true --> <span th:text="true"> span> <br />
!(${user.age} % 2 == 0 --> <span th:text="!(${user.age} % 2 == 0)"> span> <br />


(${user.age} % 2 == 0) and true --> <span th:text="(${user.age} % 2 == 0) and true"> span><br />

输出: “–>”的左边是语法,右边是对应的输出

========================== 算术表达式:Arithmetic operations ==================================
${user.age} % 2 == 0 --> true 
true --> true 
!(${user.age} % 2 == 0 --> false 
(${user.age} % 2 == 0) and true --> true

2.7 比较操作符:Comparisons and equality

实现功能:

  • 比较符号Comparators: >, <, >=, <= (gt, lt, ge, le)
  • Equality operators: ==, != (eq, ne)
========================== 比较操作符:Comparisons and equality ==================================<br/>

${user.age} > 18 --> <span th:if="${user.age} > 18"> 大人 span> <br />

${user.age} != 18 --> <span th:if="${user.age} != 18"> 大人_no_equality span> <br />
<br />

输出: “–>”的左边是语法,右边是对应的输出

========================== 比较操作符:Comparisons and equality ==================================
${user.age} > 18 --> 大人 
${user.age} != 18 --> 大人_no_equality 

2.8 条件操作符: Conditional operators

实现功能:

  • If-then: (if) ? (then)
  • If-then-else: (if) ? (then) : (else)
  • 如果null值,则使用?:后面的值: Default: (value) ?: (defaultvalue)

${user.age}%2==0 ? 'even' --> <span th:text="${user.age}%2==0 ? 'even'"> span> <br />

${user.age}%2==0 ? 'even' : 'odd' --> <span th:text="${user.age}%2==0 ? 'even' : 'odd'"> span> <br />

${user.age} ?:'18' --> <span th:text="${user.age} ?:'18'"> span> <br />

输出: “–>”的左边是语法,右边是对应的输出

========================== 条件操作符: Conditional operators ==================================
${user.age}%2==0 ? 'even' --> even 
${user.age}%2==0 ? 'even' : 'odd' --> even 
${user.age} ?:'18' --> 52 

3. 代码

详细代码见Github

你可能感兴趣的:(web前端,thymeleaf,Thymeleaf学习总结)