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基础知识的更多相关文章

  1. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  2. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  3. Java基础知识(壹)

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  4. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  5. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理(五) - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

随机推荐

  1. idea配置maven和gradle,阿里云镜像私服

    安装Gradle 从官方网站下载安装包,解压到目录 设置环境变量 PATH=D:\gradle\gradle-3.4.1\bin GRADLE_HOME=D:\gradle\gradle-3.4.1 ...

  2. Tinkphp 教程 一

    1项目生成配置php环境变量在控制台进入项目目录,执行php console build --config build.php命令在application目录创建项目目录,把创建好的目录复制到自定义a ...

  3. poj2823滑动窗口(单调队列)

    题目传送门 题意:给你一个长度为n的数列,然后用一个长度为k的窗口去框(k<n)每次保存k这个窗口中的最大值和最小值,输出. 思路:这道题最朴素的on2的做法铁定超时,然后我想过一个nlogn的 ...

  4. jq得到总价

    <html><head> <title></title> {load href="/static/js/jquery-1.9.1.min.js ...

  5. oracle wm_concat函数 列转行 分组函数

    (1)select mark, wm_concat(status) from DISSENT_INFO t GROUP BY mark; 查出来的数据 mark     status 222      ...

  6. 随性练习:python字典实现文本合并

    主要用到,字典.字符串分割和连接.文件等操作 例如:有以下两个txt文本,要合并成一个 代码: address_book1 = {} address_book2 = {} def read_addre ...

  7. Day03 知识点

    一.单行注释与多行注释 # 用来标记不运行的程序 pycharm 快捷键 ctrl+/ 可以在程序上方 也可以在程序后面 (PEP8) 多行注释 用三引号,一般推荐三双引号来做注释. 二.数据类型 ( ...

  8. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  9. python 运算符-赋值运算

    结果是值 算数运算: a = 10 * 10 赋值运算: a = a + 1  a  +=1  结果是布尔值 比较运算: a  = 1 > 5 逻辑运算: a =  1 > 6 or 1= ...

  10. 使用summernote编辑器上传图片,重写onImageUpload

    JS部分:$('.summernote').summernote({ height: 200,//高度 tabsize: 2,//页面上的summernote编辑框的个数 lang: 'zh-CN', ...