学习小片段——thymeleaf入门

1: 概述

thymeleaf是一个跟 Velocity、FreeMarker 类似的模板引擎，和以前学的jsp相近，但性能上无疑是比jsp好。

参考文档官方文档：https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#what-is-thymeleaf

本文环境：win10，jdk1.8， idea2018， maven3.5.4， springboot1.5.19，

2：引入依赖

pom.xml 中加入thymeleaf依赖

     <dependency>

       <groupId>org.springframework.boot</groupId>

       <artifactId>spring-boot-starter-thymeleaf</artifactId>

     </dependency>

springboot1.4版本之后，也可以使用thymeleaf3来提高效率，与thymeleaf3匹配的是thymeleaf layout2 ：

   <properties>

     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

     <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>

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

   </properties>

因为在默认配置下，thymeleaf对html的内容要求很严格，比如<meta charset=”UTF-8″ />，所以可能会造成一些不便

可选择更改application配置文件 spring.thymeleaf.mode=HTML

或者修改配置 spring.thymeleaf.mode=LEGACYHTML5 并搭配额外的NekoHTML

 <dependency>

        <groupId>net.sourceforge.nekohtml</groupId>

        <artifactId>nekohtml</artifactId>

        <version>1.9.22</version>

 </dependency>

然后创建html文件

在<html>标签中添加 xmlns:th="http://www.thymeleaf.org" ，引入名称空间，

<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

</body>

</html>

3：表达式语法

 public class User {

     private Integer id;

     private String name;

     private Byte age;

     private Boolean sex;

     private Set<String> hobbys;

     private Object other;

     //getter和setter

 }

     @RequestMapping("/test")

     public String test(Map<String, Object> map){

         User user = new User();

         user.setId(1);

         user.setName("Adam");

         user.setAge((byte) 20);

         user.setSex(true);

         user.addHobby("A");

         user.addHobby("C");

         user.addHobby("D");

         map.put("user", user);

         return "test";

     }

3.1：简单表达式

${...} 变量表达式
*{...} 选择变量表达式
#{...} 消息表达式
@{...} 链接url表达式

 <!--/*@thymesVar id="name" type="java.lang.String"*/-->

 <h2 th:text="${user.id}"></h2>

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

     <h3 th:text="*{age}"></h3>

     <h3 th:text="*{sex}"></h3>

 </div>

 <a th:href="@{/index.html}">to index page</a>

消息表达式 用于从消息源中提取消息内容实现国际化。 详解：https://blog.csdn.net/skyupward/article/details/54987618变量表达式和星号表达式：

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

     <h3 th:text="*{age}"></h3>

     <h3 th:text="*{sex}"></h3>

 </div>

等价于：

 <div>

     <h3 th:text="${user.age}"></h3>

     <h3 th:text="${user.sex}"></h3>

 </div>

两者也可混合使用：

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

     <h3 th:text="${user.age}"></h3>

     <h3 th:text="*{sex}"></h3>

 </div>

3.2：字面量

'one text','another one!',... 字符串

0,34,3.0,12.3,... 数值

true false 布尔类型

null 空指针

3.3：字符串操作

+ 字符串连接

|The name is ${name}| 字符串替换

3.4：算数运算

+-*/% 二元运算符

- 单目运算符

3.5：布尔

and, or 二元操作符

!, not 一元运算符

3.6：比较运算

> , < , >= , <= ,== , != (gt , lt , ge , le, eq, ne)

3.7：条件运算

(if) ? (then)

(if) ? (then) : (else)

(value) ?:(defaultvalue)

3.8：th:*

th:text, th:utext 改变当前元素里面的文本内容；

th:（任意html属性）替换原生属性的值；

th:insert，th:replace 片段包含，如同 jsp:include

th:each 遍历，如同c:forEach

th:if , th:unless, th:switch, th:case 条件判断， c:id

th:object, th:with 变量声明, c:set

th:attr,th:attrprepend, th:attrappend 任意属性修改

th:value, th:href, th:src...... 修改指定属性默认值

......

一些小示例：

  <!--字符串-->

  <h2 th:text="|hello ${user.name}|"></h2>

  <!--条件判断-->

  <a th:if="${user.id != null}" th:href="@{/index}">to index page</a>

  <a th:unless="${user.other == null}" th:href="@{/other}">to other page</a>

  <!--遍历-->

  <!--/*@thymesVar id="hobbys" type="java.util.Set"*/-->

  <ul>

      <li th:each="hobby,iterStat : ${user.hobbys}" th:text="|${iterStat.index+1}, ${hobby} |"></li>

  </ul>

iterStat是状态变量，属性有：

index:当前迭代对象的 index（从0开始计算）

count: 当前迭代对象的 index(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个

暂时到此，