AngularJSspringboot中Thymeleaf的下

一. 什么是Thymeleaf

Thymeleaf是面向Web和独立环境之当代服务器端Java模板引擎。
Thymeleaf的重中之重目标是吗您的出工作流程带来优雅的自模板 –
可以正确显示在浏览器被的HTML,也堪看做静态原型工作,从而在支付组织中开展更强的合作。
随着Spring框架的模块,与您太欢喜的家伙的合龙,以及插入自己的作用的能力,Thymeleaf是当代HTML5
JVM Web开发之帅选择,尽管它好做的重多。

吓吧,我肯定刚才那段是Thymeleaf官方的验证,我只不过机翻了一晃。下面我们说接触人话。Thymeleaf就是jsp的高端升级版。

二. 什么状况称采取Thymeleaf

Thymeleaf显然是一个开页面的技能,现在各种前端技术层出不穷,比如现在主流的Vue、React、AngularJS等。很多总人口或许会见使咨询,这个Thymeleaf相对于这些前端框架究竟发生吗优势。
实际上,Thymeleaf跟那些前端框架根本不是一个档的物,也绝非啥可比性。

Thymeleaf和知名的jsp属于非前后分离之思绪来出的。后端通过数量渲染html的模板,渲染后模板就是单总体的html页面,将页面返回给告求方。

主流的前端框架是因前后端分离之思路来出的,前端页面通过ajax来调用后端平的rest接口来获取数据,再经js进行渲染页面(不管什么前端技术其实都是对准js进行了打包,js依然是底层核心)。

动前后分离主要有下面几乎单便宜

  1. 因为每次要服务器获取之数码由全方位页面变成了就是核心数据,加载速度明显提升。
  2. 前端人员和后端人员好相互独立开发,最后以经接口联调即可。以前是无分前端工程师、后端工程师的,现在内外分离后,才面世了这么的归类。而且现在前端技术吗尤为先进。前后分离后可一本万利简单条技术途径的人口分头钻研自己之技艺。
  3. 前端页面脱离后端服务器后,可以跟后端分开部署。这时就足以针对前者页面的服务器进行一些特别的网络优化进一步提高访问速度。
  4. 后端只需要一致模仿rest接口就足以同时服务为电脑页面、IOS客户端、安卓客户端。甚至现在还生头前端技术好一直将前端页面打包改成IOS、安卓的客户端。
  5. ……

说了如此多前后分离之利益,你可能就是假设问了,那咱们为何还要用很看起那么low的模版引擎呢?

为速度。前后分离方式,前端页面通过ajax来调用后端的rest接口来获取数据,再通过js进行渲染页面。获取数据和透过js渲染页面的代码,很多时刻可比页面本身要多之大多,而且通过js来操作dom进行渲染,稍微复杂些的页面往往就是会管渲染逻辑来的错综复杂。相信从jsp时代同步移动至现在之老程序员都深知工作量是成倍的往上译。

固然刚才列举了内外分离之样好处,但这些利益大多数且是汇总在app开发及,其他某些场景下这些好处并无显。最突出的一个场景就是是治本后台。管理后台往往针对页面的花哨性要求无高,并发量也未充分,而且意义往往还非丢掉。这种景象下,前后分离技术上导致的工作量大增加,人员上分别造成额外的联调成本还改为了众多之负。Thymeleaf作为模板引擎这时候优势就是可怜大。只待以html原型的页面上小加几只标签,即可成功渲染。而且丰富的价签并无影响原型页面一直通过html打开。

说了这么多,总结一下,Thymeleaf是一个供后端人员用的,为快开页面而生的Java模板引擎。

三. 如何在Springboot中引入Thymeleaf

Thymeleaf作为spring官方推荐的模版引擎,在spring体系受到采取大方便。这里坐gradle构建的型为例来说明。
率先,你一旦先行修改build.gradle引入Springboot对Thymeleaf提供的依赖包。在dependencies中增如下配置。

compile('org.springframework.boot:spring-boot-starter-thymeleaf')

等gradle帮你自己生充斥了仗包后,你可看来引入的Thymeleaf的版。

Thymeleaf依赖包

啊?springboot1.5.7默认引用的Thymeleaf依赖包竟要2.1.5版。最新的Thymeleaf不是曾经更新3.x版本了么。如果自身思以最新版本的Thymeleaf要怎么惩罚为。
在build.gradle文件中,buildscript下加部署,完整的部署如下图

ext['thymeleaf.version'] = '3.0.7.RELEASE'
ext['thymeleaf-layout-dialect.version'] = '2.2.2'

完整gradle配置

候gradle下充斥完成,你得看看引入的Thymeleaf已经是风靡版本了。

四. 快速入门

通下去要当品种中利用Thymeleaf了,这里用一个简易的单表查询来选个栗子。
貌似的话,开发一个待渲染数据的页面,分为三单步骤。

  1. 出静态页面,即经常说之模型。
  2. 获取数据。
  3. 采用数据对静态页面进行渲染。

此我们先举行第一个步骤,开发静态页面。为了简单,就无开另外css了,下面是页面的源码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
  <strong>标题</strong>
  <form action="list.html" method="post">
    <input type="hidden" name="pageNumber">
    用户名:<input type="text" name="username">
    <br/>
    姓名:<input type="text" name="name">
    <br/>
    <button type="submit">提交</button> <button type="reset">重置</button>
  </form>
  <table>
    <thead>
      <tr>
        <th class="am-hide-sm-only">id</th>
        <th>用户名</th>
        <th>姓名</th>
        <th class="am-hide-sm-only">电话</th>
        <th class="am-hide-sm-only">邮箱</th>
        <th class="am-hide-sm-only">是否可用</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>id</td>
        <td>用户名</td>
        <td>姓名</td>
        <td>电话</td>
        <td>邮箱</td>
        <td>
          可用不可用
        </td>
        <td><button>修改</button><button>删除</button></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

一直采用浏览器打开该页面,长成这样。

静态页面

今发生了静态页面,该获取数据了。下面是controller层的代码。

/**
 * 用户管理
 */
@Controller
@RequestMapping("/users")
public class UserController
{
    @Autowired
    private UserRepository userRepository;

    @Value("${pageSize}")
    private Integer pageSize;

    /**
     * 分页查询信息
     */
    @RequestMapping(method = {RequestMethod.GET, RequestMethod.POST})
    public String list(Model model, User user, @RequestParam(value = "pageNumber", required = false, defaultValue = "0") Integer pageNumber)
    {
        ExampleMatcher matcher = ExampleMatcher.matching().withStringMatcher(ExampleMatcher.StringMatcher.CONTAINING);
        PageRequest pageRequest = new PageRequest(pageNumber, pageSize);

        Page<User> page = userRepository.findAll(Example.of(user, matcher), pageRequest);

        //分页查询数据
        model.addAttribute("page", page);
        //查询条件
        model.addAttribute("user", user);
        //页面标题
        model.addAttribute("title", "用户管理");
        //转到待渲染模板,所有模板都在templates文件夹下,users/list指templates文件夹下的users文件夹下的list.html页面。
        return "users/list";
    }
}

这里用spring-data-jpa从数据库里询问到了记录并跟询问条件、页面标题并转到需要渲染的模版。这里,我们用方底静态页面文件复制到对应之岗位。如下图。

Thymeleaf模板摆放位置

下面,我们而针对性该公文进行适宜的改造,使的成为一个Thymeleaf模板文件。先贴上改造后底文书。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title th:text="${title}">标题</title>
  <meta charset="UTF-8">
</head>
<body>
  <strong th:text="${title}">标题</strong>
  <form th:action="@{/users}" th:object="${user}" method="post">
    <input type="hidden" name="pageNumber" th:value="${page.number}">
    用户名:<input type="text" name="username" th:value="*{username}">
    <br/>
    姓名:<input type="text" name="name" th:value="*{name}">
    <br/>
    <button type="submit">提交</button> <button type="reset">重置</button>
  </form>
  <table>
    <thead>
      <tr>
        <th class="am-hide-sm-only">id</th>
        <th>用户名</th>
        <th>姓名</th>
        <th class="am-hide-sm-only">电话</th>
        <th class="am-hide-sm-only">邮箱</th>
        <th class="am-hide-sm-only">是否可用</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="user : ${page.content}">
        <td th:text="${user.id}">id</td>
        <td th:text="${user.username}">用户名</td>
        <td th:text="${user.name}">姓名</td>
        <td th:text="${user.phone}">电话</td>
        <td th:text="${user.email}">邮箱</td>
        <td th:switch="${user.enabled}">
          可用不可用
        </td>
        <td><button>修改</button><button>删除</button></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

得视,我们针对html代码的结构丝毫勿改变,只是在片标签中加加了th:xxx="yyy"的属性。
咱俩重新利用浏览器打开Thymeleaf改造了之html文件。发现虽然我们加加了那基本上th:xxx="yyy"的价签,但是,页面甚至与前面一样。

Thymeleaf改造后页面

下我们启动服务,通过controller定义的万分url来拜会渲染后的页面。

渲染后底页面

及一个文本,浏览器直接打开就是原型,服务器渲染后打开就是是真性的功力页面。
此间我们就可以看出Thymeleaf的一个主导职能,就是拿其逻辑注入及模板文件中,不见面影响模板被作为设计原型。做到了原型就是页面。

Thymeleaf的骨干语法就是th:xxx="yyy",即设置html标签中xxx属性的值为yyy对应的价。

五. 设置属性

咱们事先来说无异游说th:xxx的组成部分,即设置属性。

Thymeleaf的主干作用就是是经过在html标签中加属性。可以设置的性能很多,详细的可参考
Thymeleaf所有属性的还不曾犯文档。这里我们便挑些常用之选几个例,其他大家好举一反三推断出用法。

  • th:object="yyy"
    将目标作为一个限制外可用的变量。一般与甄选表达式*{zzz}相当下,选择表达式后面会讲到。

  • th:text="yyy"
    这个特性可以加上到几乎所有分为头尾两组成部分<></>的html标签中,如<title></title><td><td/>等。th:text="yyy"的意图是将表达式yyy对应之价加加至标签的中。
    <td th:text="user">用户名</td>渲染后哪怕是<td>user<td/>

  • th:value="${title}"
    这个特性一般和<input />签搭配使用,用来设置<input />标签的value值。
    <input th:value="username" />渲染后便是<input value="username" />

六. 表达式

下我们再次来对这些th:xxx="yyy""yyy"的有进行讲解。这个yyy我们一般叫表达式。
Thymeleaf里面表达式主要出以下几栽。

  • ${yyy}
    变量表达式,用来博上下文对象中的值(controller返回的model)。还是以上给之事例来说明,如果自己想如果抱到page靶中之number属性,使用${page.number}即可。

变量表达式

  • #{yyy}
    消息表达式,根据信息之key来博取信息内容。一般是因此来做国际化用的。
  • *{yyy}
    选择表达式,跟变量表达式用法差不多,但变量表达式是取得上下文里的目标,选择表达式是得到一个选择的靶子。
    选取表达式一般与th:object=签配合以,还是以上给之例证来证实。
    先用th:object="${user}"择了左右文中的user对象,下面想使user对象的username性时,直接动用*{username}不怕好了。
    卿恐怕想要问,我直接以${user.username}切莫是平可找到user对象的username属于性么,为什么还要再打个选择表达式?
    因为${user.username}举凡先期打下上文找到user,对象,再从user对象里找到username属性;而*{username}凡是直接由user目标里找到username属性。当需要从一个对象里获得很多性之时段,使用选择表达式可以提高效率。

挑选表达式

  • @{yyy} 链接表达式
    设置超链接时用之表达式,一般和th:actionth:href相当下。

链接表达式

  • ~{page :: fragment}
    分段表达式,主要用作公共模块的复用,一般与th:insertth:replace搭配使用。以后提模块复用的上还细说。

  • yyy
    文字。可以啊字符串、数字、布尔、null。如<td th:text="user">用户名</td>渲染后呢<td>user</td>

  • _
    无操作。下划线是thymeleaf表达式的特殊字符,如果表达式就一个下划线,则什么啊非举行。例如<td th:text="_">用户名</td>渲染后仍是<td>用户名</td>

七. 迭代器

咱在渲染页面时,经常用对一个list进行巡回处理,最登峰造极的气象就是是运用表格展示多长数据。这时,就需要使用到thymeleaf的迭代器th:each

<tr th:each="user : ${users}">
  <td th:text="${user.id}">id</td>
  <td th:text="${user.username}">用户名</td>
</tr>

于这例子中,users是一个list,通过迭代器th:each对该展开遍历,每次迭代取到的靶子啊user。在th:each属性之应和之价签中<tr th:each="user : ${users}">...</tr>,为user目标的得力限制。

奇迹,我们还惦记要理解迭代器的有的态属性,如总数,当前目录等。可以经过如下方法赢得。

<tr th:each="user,stat : ${users}">
<td th:text="${stat.index}">index</td>  
<td th:text="${user.id}">id</td>
  <td th:text="${user.username}">用户名</td>
</tr>

th:each=""的第二单变量stat,就是迭代器的状态变量,从夫状态变量里面可以抱到不少咱想只要之习性,主要出脚这些。

  • stat.index 当前目标在list中之目。从0开始。
  • stat.count
    index差不多,也是眼下目标在list中的目录,不过是打1开头。
  • stat.size 迭代器中元素的总额。
  • stat.current 当前迭代底靶子。
  • stat.even 当前迭代的目是否是奇数,索引指stat.index
  • stat.odd 当前迭代底目是否是偶数,索引指stat.index
  • stat.first 当前迭代的目标是否是迭代器中之率先单。
  • stat.last 当前迭代底对象是否是迭代器中之终极一个。

八. 条件语句

th:if="boolean"
th:if的表达式需呢boolean值。如果为true,则标签显示,如果也false,则标签不示。
th:unless="boolean"
th:unlessth:if反而,表达式也需呢boolean值。如果为true,则标签不形,如果也false,则标签显示。

偶
奇

规范判断

th:swtich 一般和 th:case重组使用
。和java语言中的swtich case语法用法类似。

<td th:switch="${user.enabled}">
  可用不可用
</td>

switch

九. 工具类

Thymeleaf提供了有器类,这里选出个大概的事例展示下用法,其他详细的可以查看Thymeleaf工具类官方文档。

#lists 数组工具类

总共有1条记录

#lists

相关文章