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 基础知识梳理( ...
随机推荐
- DoS(拒绝服务攻击)与DDoS(分布式拒绝服务攻击)
SYN Flood是当前最流行的DoS(拒绝服务攻击)与DDoS(分布式拒绝服务攻击)的方式之一,这是一种利用TCP协议缺陷,发送大量伪造的TCP连接请求,从而使得被攻击方资源耗尽(CPU满负荷或内存 ...
- html5 语音识别 转
- 统计元音(stringstream的-应用)
Problem Description 统计每个元音字母在字符串中出现的次数. Input 输入数据首先包括一个整数n,表示测试实例的个数,然后是n行长度不超过100的字符串. Output ...
- springcloud系列10 整合Hystrix遇到的坑:
首先配置类: @Bean public ServletRegistrationBean getServlet(){ HystrixMetricsStreamServlet streamServlet ...
- C语言中变量的存储类型
在C语言中,对变量的存储类型说明有以下四种: auto 自动变量register 寄存器变量extern 外部变量static 静态变量 自动变量和寄存器变量属于动态存储方式,外部变量和静态变 ...
- P4824 [USACO15FEB]Censoring (Silver) 审查(银)
传送门 一个串的匹配肯定考虑KMP 那就暴力KMP 记录一下到每个字符时匹配的位置 找到一个符合的串就标记然后暴力回跳 感觉好像太暴力了... #include<iostream> #in ...
- UVA12558 Egyptian Fractions (HARD version)(埃及分数)
传送门 题目大意 给出一个真分数 a/b,要求出几个互不相同的埃及分数(从大到小),使得它们之和为 a/b (埃及分数意思是分子为1的分数,详见百度百科) 如果有多组解,则分数数量少的优先 如果分数数 ...
- shell编程中
1.1 条件表达式 1.1.1 文件判断 常用文件测试操作符 常用文件测试操作符 说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 -f文件,f的全拼为file ...
- py---------面向对象基础篇
引子 你现在是一家游戏公司的开发人员,现在你需要开发一款叫做<人猫大战>的小游戏,你就思考呀,人猫大战,那至少需要两个角色,一个是人,一个是猫,且人和猫有不同的技能,比如人拿棍打狗,狗可以 ...
- C# 控制反转(IOC: Inverse Of Control) & 依赖注入(DI: Independence Inject)
举例:在每天的日常生活中,我们离不开水,电,气.在城市化之前,我们每家每户需要自己去搞定这些东西:自己挖水井取水,自己点煤油灯照明,自己上山砍柴做饭.而城市化之后,人们从这些琐事中解放了出来,城市中出 ...