Thymeleaf入门与基本概述

  • A+
所属分类:java 前端技术

一、概述

1.是什么

简单说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。

2.feature

1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

       2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
       3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

  3.文档

    官方教程http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#what-is-thymeleaf

    推荐教程http://blog.didispace.com/springbootweb/

         http://blog.csdn.net/u012706811/article/details/52185345

 二、HelloWorld

1.引入依赖

springboot直接引入:

  1. <dependency>
  2.       <groupId>org.springframework.boot</groupId>
  3.       <artifactId>spring-boot-starter-thymeleaf</artifactId>
  4.     </dependency>

非springboot项目使用如下依赖:

  1. <dependency>
  2.     <groupId>org.thymeleaf</groupId>
  3.     <artifactId>thymeleaf</artifactId>
  4.     <version>2.1.4</version>
  5. </dependency>

默认的模板映射路径是:src/main/resources/templates,

  springboot1.4之后,可以使用thymeleaf3来提高效率,并且解决标签闭合问题,配置方式:

  1. <properties>
  2.     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  3.     <!-- set thymeleaf version -->
  4.     <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
  5.     <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
  6.     <!--set java version-->
  7.     <java.version>1.8</java.version>
  8.   </properties>

model/modelMap/modelAndView等页面数据传递参考

  1. package com.learndemo.controller;
  2. import java.util.HashMap;
  3. import java.util.Map;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.ui.Model;
  6. import org.springframework.ui.ModelMap;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.servlet.ModelAndView;
  9. @Controller
  10. @RequestMapping(value = "/return")
  11. public class LearnReturnType {
  12.     /**
  13.      * Model本身不能设置页面跳转的url地址别名或者物理跳转地址,那么我们可以通过控制器方法的返回值来设置跳转url
  14.      * 地址别名或者物理跳转地址
  15.      * 
  16.      * @param model
  17.      *            一个接口, 其实现类为ExtendedModelMap,继承了ModelMap类
  18.      * @return 跳转url地址别名或者物理跳转地址
  19.      */
  20.     @RequestMapping(value = "/index1")
  21.     public String index1(Model model) {
  22.         model.addAttribute("result""后台返回index1");
  23.         return "result";
  24.     }
  25.     /**
  26.      * ModelMap对象主要用于传递控制方法处理数据到结果页面,类似于request对象的setAttribute方法的作用。 用法等同于Model
  27.      * 
  28.      * @param model
  29.      * @return 跳转url地址别名或者物理跳转地址
  30.      */
  31.     @RequestMapping(value = "/index2")
  32.     public String index2(ModelMap model) {
  33.         model.addAttribute("result""后台返回index2");
  34.         return "result";
  35.     }
  36.     /**
  37.      * ModelAndView主要有两个作用 设置转向地址和传递控制方法处理结果数据到结果页面
  38.      * @return 返回一个模板视图对象
  39.      */
  40.     @RequestMapping(value = "/index3")
  41.     public ModelAndView index3() {
  42.         ModelAndView mv = new ModelAndView("result");
  43.         // ModelAndView mv = new ModelAndView();
  44.         // mv.setViewName("result");
  45.         mv.addObject("result""后台返回index3");
  46.         return mv;
  47.     }
  48.     /**
  49.      * map用来存储递控制方法处理结果数据,通过ModelAndView方法返回。
  50.      * 当然Model,ModelMap也可以通过这种方法返回
  51.      * @return 返回一个模板视图对象
  52.      */
  53.     @RequestMapping(value = "/index4")
  54.     public ModelAndView index4() {
  55.         Map<String, String> map = new HashMap<String, String>();
  56.         map.put("result""后台返回index4");
  57.         return new ModelAndView("result", map);
  58.     }
  59. }

2.配置thymeleaf视图解析器

这点与springMVC是相类似的:

  1. #thymeleaf start
  2. spring.thymeleaf.mode=HTML5
  3. spring.thymeleaf.encoding=UTF-8
  4. spring.thymeleaf.content-type=text/html
  5. #开发时关闭缓存,不然没法看到实时页面
  6. spring.thymeleaf.cache=false
  7. #thymeleaf end

实际项目中可能会有不太严格的HTML格式,此时设置mode=HTML5将会对非严格的报错,可以参考以下配置:

spring.thymeleaf.mode=LEGACYHTML5
你可能会发现在默认配置下,thymeleaf对.html的内容要求很严格,比如<meta charset="UTF-8" />,
如果少最后的标签封闭符号/,就会报错而转到错误页。也比如你在使用Vue.js这样的库,
然后有<div v-cloak></div>这样的html代码,也会被thymeleaf认为不符合要求而抛出错误。
因此,建议增加下面这段:
spring.thymeleaf.mode = LEGACYHTML5
spring.thymeleaf.mode的默认值是HTML5,
其实是一个很严格的检查,改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。 需要注意的是,LEGACYHTML5需要搭配一个额外的库NekoHTML才可用。
  1. <dependency>
  2.        <groupId>net.sourceforge.nekohtml</groupId>
  3.        <artifactId>nekohtml</artifactId>
  4.        <version>1.9.22</version>
  5. </dependency>
最后重启项目就可以感受到不那么严格的thymeleaf了。

这样,需要的配置项如下:

  1. # 一项是非严格的HTML检查,一项是禁用缓存来获取实时页面数据,其他采用默认项即可
  2.   thymeleaf:
  3.     mode: LEGACYHTML5
  4.     cache: false

// 完整配置项参考类ThymeleafProperties

3。编写控制器

  1. /**
  2.  * 测试demo的controller
  3.  *
  4.  * @author zcc ON 2018/2/8
  5.  **/
  6. @Controller
  7. public class HelloController {
  8.     private static final Logger log = LoggerFactory.getLogger(HelloController.class);
  9.     @GetMapping(value = "/hello")
  10.     public String hello(Model model) {
  11.         String name = "jiangbei";
  12.         model.addAttribute("name", name);
  13.         return "hello";
  14.     }
  15. }

4.编写模板html

  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <title>hello</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6. </head>
  7. <body>
  8.     <!--/*@thymesVar id="name" type="java.lang.String"*/-->
  9.     <p th:text="'Hello!, ' + ${name} + '!'">3333</p>
  10. </body>
  11. </html>

其中,注释是通过alt+enter进行自动生成的,便于IDEA补全,如果不加,IDEA将会报错cannot reslove,

  当然也可以通过如下方式解决,解决之前推荐在maven项目中reimport一下!(据说新版本的IDEA中已经修复此问题,待更新至2017.3以后)

Thymeleaf入门与基本概述

5.测试

Thymeleaf入门与基本概述

 三、基础语法

1.创建HTML

    由上文也可以知道需要在html中添加:

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

这样,下文才能正确使用th:*形式的标签!

 2.获取变量值${...}

通过${…}进行取值,这点和ONGL表达式语法一致!

  1. <!--/*@thymesVar id="name" type="java.lang.String"*/-->
  2.     <p th:text="'Hello!, ' + ${name} + '!'">3333</p>

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

  1. <div th:object="${session.user}">
  2.     <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  3.     <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
  4.     <p>Nationality: <span th:text={nationality}">Saturn</span>.</p>
  5. </div> 
  6. 等价于
  7. <div>
  8.     <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p> 
  9.     <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p> 
  10.     <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
  11. </div>

至于p里面的原有的值只是为了给前端开发时做展示用的.这样的话很好的做到了前后端分离。

这也是Thymeleaf非常好的一个特性:在无网络的情况下也能运行,也就是完全可以前端先写出页面,模拟数据展现效果,后端人员再拿此模板修改即可!

  3.链接表达式: @{…} 

  用来配合link src href使用的语法,类似的标签有:th:hrefth:src

  1. <!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) --> 
  2. <a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a> <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
  3. <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
  4. <a href="details.html" th:href="@{order/{orderId}/details(orderId=${o.id})}">Content路径,默认访问static下的order文件夹</a>

4.文本替换

  1. <span th:text="'Welcome to our application, ' + ${user.name} + '!'">

或者下面的表达方式:(只能包含表达式变量,而不能有条件判断等!)

<span th:text="|Welcome to our application, ${user.name}!|">

5.运算符

数学运算

  • 二元操作:+, - , * , / , %
  • 一元操作: - (负)

    逻辑运算

  • 一元 : and or
  • 二元 : !,not

    比较运算(为避免转义尴尬,可以使用括号中的英文进行比较运算!)

  • 比较:> , < , >= , <= ( gt , lt , ge , le )
  • 等于:== , != ( eq , ne )

    条件运算

  • If-then: (if) ? (then)
  • If-then-else: (if) ? (then) : (else)
  • Default: (value) ?: (defaultvalue)
  • 'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

    6.条件

if/unless

使用th:if和th:unless属性进行条件判断,th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。

  1. <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

switch

  1. <div th:switch="${user.role}">
  2.   <p th:case="'admin'">User is an administrator</p>
  3.   <p th:case="#{roles.manager}">User is a manager</p>
  4.   <p th:case="*">User is some other thing</p>
  5. </div>

7.循环

通过th:each

  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <title>hello</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6. </head>
  7. <body>
  8.     <!-- 不存在则忽略,显示hello null!(可以通过默认值进行设置)-->
  9.     <p th:text="'Hello ' + (${name}?:'admin')">3333</p>
  10.     <table>
  11.         <tr>
  12.             <th>ID</th>
  13.             <th>NAME</th>
  14.             <th>AGE</th>
  15.         </tr>
  16.         <tr th:each="emp : ${empList}">
  17.             <td th:text="${emp.id}">1</td>
  18.             <td th:text="${emp.name}">海</td>
  19.             <td th:text="${emp.age}">18</td>
  20.         </tr>
  21.     </table>
  22. </body>
  23. </html>

后台:

  1. @GetMapping(value = "/hello")
  2.     public String hello(Model model) {
  3.         List<Emp> empList = new ArrayList<>();
  4.         empList.add(new Emp(1"校长"24));
  5.         empList.add(new Emp(2"书记"28));
  6.         empList.add(new Emp(3"小海"25));
  7.         model.addAttribute("empList", empList);
  8.         return "hello";
  9.     }

HelloController

效果:

Thymeleaf入门与基本概述

更多循环深入,iterStat等示例,参考http://blog.csdn.net/sun_jy2011/article/details/40710429

  8.内置对象Utilites

  一般不推荐在前端进行这些处理,前端页面以减少逻辑为宜

  1. #dates :
  2. utility methods for java.util.Date objects: formatting, component extraction, etc. #calendars : analogous to #dates , but for java.util.Calendar objects.
  3. #numbers :
  4. utility methods for formatting numeric objects.
  5. #strings :
  6. utility methods for String objects: contains, startsWith, prepending/appending, etc. #objects : utility methods for objects in general.
  7. #bools :
  8. utility methods for boolean evaluation. #arrays : utility methods for arrays.
  9. #lists :
  10. utility methods for lists.
  11. #sets :
  12. utility methods for sets.
  13. #maps :
  14. utility methods for maps.
  15. #aggregates :
  16. utility methods for creating aggregates on arrays or collections.
  17. #messages :
  18. utility methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{...} syntax.
  19. #ids :
  20. utility methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

常用示例:

  1. /*
  2.  * Format date with the specified pattern
  3.  * Also works with arrays, lists or sets
  4.  */
  5. ${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
  6. ${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
  7. ${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
  8. ${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
  9. /*
  10.  * Create a date (java.util.Date) object for the current date and time
  11.  */
  12. ${#dates.createNow()}
  13. /*
  14.  * Create a date (java.util.Date) object for the current date (time set to 00:00)
  15.  */
  16. ${#dates.createToday()}

#dates

  1. /*
  2.  * Check whether a String is empty (or null). Performs a trim() operation before check
  3.  * Also works with arrays, lists or sets
  4.  */
  5. ${#strings.isEmpty(name)}
  6. ${#strings.arrayIsEmpty(nameArr)}
  7. ${#strings.listIsEmpty(nameList)}
  8. ${#strings.setIsEmpty(nameSet)}
  9. /*
  10.  * Check whether a String starts or ends with a fragment
  11.  * Also works with arrays, lists or sets
  12.  */
  13. ${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
  14. ${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*
  15. /*
  16.  * Compute length
  17.  * Also works with arrays, lists or sets
  18.  */
  19. ${#strings.length(str)}
  20. /*
  21.  * Null-safe comparison and concatenation
  22.  */
  23. ${#strings.equals(str)}
  24. ${#strings.equalsIgnoreCase(str)}
  25. ${#strings.concat(str)}
  26. ${#strings.concatReplaceNulls(str)}
  27. /*
  28.  * Random
  29.  */
  30. ${#strings.randomAlphanumeric(count)}

String

完整参考点击查看

四、常用标签

  Thymeleaf入门与基本概述

   // 类似于th:object和th:field等进行表单参数绑定还是很有用的!使用与注意事项,参见:这里

   参考博文https://www.cnblogs.com/hjwublog/p/5051732.html

       

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: