Thymeleaf基础知识

Thymeleaf是一个Java类库，它是一个xml/xhtml/html5的模板引擎，可以作为MVC的Web引用的View层。

Thymeleaf还提供了额外的模块与SpringMVC集成，因此推荐使用Thymeleaf来替代JSP

1、引入Thymeleaf

　　下面的diam是一个基本的Thymeleaf模板页面，在这里引入Boostrap（作为样式控制）和jQuery（DOM操作）

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

    <head>

        <meta content="text/html;charset=UTF-8"/>

        <link th:src="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/><!--2-->

        <link th:src="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/><!--2-->

    </head>

    <body>

        <script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script><!--2-->

        <script th:src="@{bootstrap/css/bootstrap.min.js}"></script><!--2-->

    </body>

</html>

Analysize:

　　a、通过xmlns:th=http://www.thymeleaf.org命名空间，将镜头页面转换为动态的视图。需要进行动态处理的元素将使用“th：”为前缀；

　　b、通过“@{}”引用web静态资源，这在JSP下是极易出错的。

2、访问model中的数据

　　通过“${}”访问model中的属性，这和JSP极为相似

<div lass = "panel panel-primary">

    <div class="panel-heading">

        <h3 class="panel-title">访问model</h3>

    </div>

    <div class="panel-body">

        <span th:text="${singlePerson.name}"></span>

    </div>

</div>

Analysize:

　　使用<span th:text="${singlePerson.name}"></span>访问model中的singlePerson的name属性。注意：需要处理的动态内容需要加上“th:”前缀。

3、model中的数据迭代

　　Thymeleaf的迭代和JSP的写法相似

<div class="panel panel-primary">

    <div class="panel-heading">

        <h3 class="panel-title">列表</h3>

    </div>

    <div class="panel-body">

        <ul class="list-group">

            <li class="list-group-item" th:each="person:${people}">

                <span th:text="${person.name}"></span>

                <span th:text="${person.age}"></span>

            </li>

        </ul>

    </div>

</div>

Analysize：

　　使用th:each来做循环迭代（th:each="person:${people}"）,person作为迭代元素来使用。然后像上面一样访问迭代元素中的属性。

4、数据判断

<div th:if="${not #lists.isEmpty(people)}">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">列表</h3>

        </div>

        <div class="panel-body">

            <ul class="list-group">

                <li class="list-group-item" th:each="person:${people}">

                    <span th:text="${person.name}"></span>

                    <span th:text="${person.age}"></span>

                </li>

            </ul>

        </div>

    </div>

</div>

Analysize：

　　通过${not#lists.isEmpty{people}}表达式判断people是否为空。Thymeleaf支持>、<、>=、<=、==、！=作为比较条件，同时也支持将SpringEL表达式语言用于条件中。

5、在JavaScript中访问model

　　在项目中，需要在JavaScript访问model中的值，在Thymeleaf里实现代码如下：

<script th:inline="javascript">

    var single = [[${singlePerson}]];

    console.log(single.name + "/" + single.age)

</script>

Analysize：

　　通过th:inline="javascript"添加到script标签，这样JavaScript代码即可访问model中的属性

　　通过“[[${}]]”格式获得实际的值

还有一种时需要在html的代码里访问model中的属性，例如需要在列表后单击每一行后面的按钮获得model中的值，可做如下处理：

<li class="list-group-item" th:each="person:${people}">

    <span th:text="${person.name}"></span>

    <span th:text="${person.age}"></span>

    <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button>

</li>

Analysize：

　　注意格式th:onclick="'getName(\"+${person.name} + '\');'"。

6、其他知识

　　更多完整的Thymeleaf的知识，可以查看https://www.thymeleaf.org/官网

Thymeleaf基础知识的更多相关文章

.NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
RabbitMQ基础知识
RabbitMQ基础知识一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
Java基础知识（壹）
写在前面的话这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
selenium自动化基础知识
什么是自动化测试? 自动化测试分为:功能自动化和性能自动化功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...
[SQL] SQL 基础知识梳理（一）- 数据库与 SQL
SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...
[SQL] SQL 基础知识梳理（二） - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序这是<SQL 基础知识梳理( ...
[SQL] SQL 基础知识梳理（三） - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序这是<SQL 基础知识梳理 ...
[SQL] SQL 基础知识梳理（四） - 数据更新
SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序这是<SQL 基础知识梳理( ...
[SQL] SQL 基础知识梳理（五） - 复杂查询
SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序这是<SQL 基础知识梳理( ...

随机推荐

An error has occurred. See error log for more details. java.lang.NullPointerException
今天重新新建一个eclipse的空间,就报了这么一个错误,百度找了很多,发现不对头,都不行.后来点开错误一看,原来是web.xml里面没有文件头造成的. 解决办法:只需要在web.xml文件里添加文件 ...
[JSOI2009]瓶子和燃料 BZOJ2257 数学
题目描述 jyy就一直想着尽快回地球,可惜他飞船的燃料不够了.有一天他又去向火星人要燃料,这次火星人答应了,要jyy用飞船上的瓶子来换.jyy的飞船上共有 N个瓶子(1<=N<=1000) ...
PHP命名空间 namespace 及导入 use 的用法
命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.这种情况下只要避免命名重复就可以解决,最常见的一种做法是约定一个前缀. 在PHP中,出现 ...
Java实现几分钟之后调度任务的定时器
几分钟之后执行某一操作,使用定时器Timer可以实现 Timer是jdk中提供的一个定时器工具,使用的时候会在主线程之外起一个单独的线程执行指定的计划任务,可以指定执行一次或者反复执行多次. 具体实现 ...
项目笔记《DeepLung:Deep 3D Dual Path Nets for Automated Pulmonary Nodule Detection and Classification》（三）（上）结果评估
在(一)中,我将肺结节检测项目总结为三阶段,这里我要讲讲这个项目的第三阶段,至于第二阶段,由于数据增强部分的代码我始终看不大懂,先不讲. 结果评估的程序在evaluationScript文件夹下,这个 ...
C语言之基本编程思想与基本概念扫盲
前言:C语言是包含了很多编程的基本思想,理解C能够有助于理解其他高级语言,深刻理解编程很多基本思想:这对新手入门是有很多好处的,正所谓磨刀不误砍柴工,内功与基础修炼扎实了,才能开始盖高楼大厦. 这篇文 ...
POJ3368
http://poj.org/problem?id=3368 给出一个升序数组和 q 个查询.对每个查询,返回 a b 之间出现次数最多的那个元素的出现次数. 这一类区间查询的问题很容易想到用线段树来 ...
Unix shell判断和比较
1. shell 的$! ,$?, $$,$@ $n $1 the first parameter,$2 the second... $# The number of c ...
爬虫初识和request使用
一.什么是爬虫爬虫的概念: 通过编写程序,模拟浏览器上网,让其去互联网上爬取数据的过程. 爬虫的工作流程: 模拟浏览器发送请求->下载网页代码->只提取有用的数据->存放于数据库或 ...
kohana reading session data error（session_start）引起的错误
在项目中碰到一个很奇怪的问题,同一个网站目录下两个项目,手机端访问从A项目切换到B项目,总是报错,session_start抛错,后来排查了很久,终于发现是存储session的时候直接存储的对象,导致 ...

Thymeleaf基础知识

Thymeleaf基础知识的更多相关文章

随机推荐

热门专题