最近用Spring boot开发一些测试平台和工具,用到页面展示的部分,

选择的是thymeleaf模版引擎。

页面开发的7788快结束了,下面来总结下此过程中对thymeleaf的使用总结。

什么是Thymeleaf

Thymeleaf是一个Java库。它是一个XML / XHTML / HTML5模板引擎,能够在模板文件上应用一组转换,将程序产生的数据或者文本显示到模板文件上。

Thymeleaf依赖的jar包【如果你不是用Spring boot 项目中引用thymeleaf包,那你需要的jar包可能如下】

要使用Thymeleaf,需要在我们的web应用的classpath路径中引入相关的jar,如下:

thymeleaf-2.1.3.RELEASE.jar
ognl-3.0.6.jar
javassist-3.16.1-GA.jar
unbescape-1.0.jar
servlet-api-2.5.jar
slf4j-api-1.6.1.jar
slf4j-log4j12-1.6.1.jar
log4j-1.2.15.jar
mail-1.4.jar
activation-1.1.jar

 

那下面说说Spring boot+thymeleaf 怎么创建页面,向页面上传数据

使用thymeleaf只需要将文件放入目录 classpath:/tempaltes/ 文件后缀是.html
注意在以前的传统web项目中:静态资源修改后,是不需要重启的;但是Spring boot项目中,修改后要重启

用法介绍:
<p th:text="${welcome}" >welcome to my thymeleaf....</p>
以上,先从${welcome}中取值

th就是替换原来的html的值: th:html属性名=值;
th:xx 【参见第十章】 Attribute Pre
th:text 获取文本值 显示将hello渲染为h1后的值
th:utext 获取文本值(不转义) 显示<h1>hello</h1>

符号:
th:text="${welcome}" 除了$以外,其他符号?

一、th属性
常用th属性解读
html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。其中th属性执行的优先级从1~8,数字越低优先级越高。

一、th:text :设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7
二、th:value:设置当前元素的value值,类似修改指定属性的还有th:src,th:href。优先级不高:order=6
三、th:each:遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细往后看。优先级很高:order=2
四、th:if:条件判断,类似的还有th:unless,th:switch,th:case。优先级较高:order=3
五、th:insert:代码块引入,类似的还有th:replace,th:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。优先级最高:order=1
六、th:fragment:定义代码块,方便被th:insert引用。优先级最低:order=8
七、th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。优先级一般:order=4
八、th:attr:修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙,类似的还有th:attrappend,th:attrprepend。优先级一般:order=5

常用th属性使用
使用Thymeleaf属性需要注意点以下五点:

一、若要使用Thymeleaf语法,首先要声明名称空间: xmlns:th="http://www.thymeleaf.org"
二、设置文本内容 th:text,设置input的值 th:value,循环输出 th:each,条件判断 th:if,插入代码块 th:insert,定义代码块 th:fragment,声明变量 th:object
三、th:each 的用法需要格外注意,打个比方:如果你要循环一个div中的p标签,则th:each属性必须放在p标签上。若你将th:each属性放在div上,则循环的是将整个div。
四、变量表达式中提供了很多的内置方法,该内置方法是用#开头,请不要与#{}消息表达式弄混。
五、th:insert,th:replace,th:include 三种插入代码块的效果相似,但区别很大。

thymeleaf 基本语法
标准表达式语法
1. 简单表达式 simple expressions
${...} 变量表达式 Variable Expressions
*{...} 选择变量表达式 Selection Variable Expressions
#{...} 消息表达式 Message Expressions
@{...} 链接url表达式 Link URL Expressions
~{...} 代码块表达式 Fragment Expressions

字面量
'one text','another text'...文本
0,1,3.0,12.45... 数值
true false 布尔类型
null 空
one,sometext,main 文本字符

文本操作
+ 字符串连接
|The name is ${name}| 字符串连接

算数运算
+ - * / % 二元运算符
- 负号 一元运算符

布尔操作
and or 二元操作符
! not 非 一元操作符

关系操作符
> < >= <= gt lt ge le
== != eq ne

条件判断
(if) ? (then) if-then
(if) ? (then):(else) if-then-else

Thymeleaf的基本语法总结的更多相关文章

  1. thymeleaf 内联语法

    十二. thymeleaf内联语法 内联:th:inline,值有三种:text,javascript,none 12.1 th:inline="text"文本内联 <p t ...

  2. Thymeleaf 2-基础语法

    三.基础语法 1.创建HTML 由上文也可以知道需要在html中添加: <html xmlns:th="http://www.thymeleaf.org"> 这样,下文 ...

  3. thymeleaf的具体语法

    thymeleaf模板引擎是什么?请点击我查看 文章目录 thymeleaf模板引擎是什么?请点击我查看 代码 该实例代码延续[thymeleaf模板引擎](https://blog.csdn.net ...

  4. Thymeleaf 标准表达式语法

    变量表达式${ } 在控制器中往页面传递几个变量: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 @Controller public class IndexController ...

  5. Thymeleaf模板引擎语法

    th:text    用于显示值 th:object      接收后台传来的对象 th:action      提交表单 th:value       绑定值 th:field         绑定 ...

  6. Spring Boot整合Thymeleaf及Thymeleaf页面基本语法

    引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  7. thymeleaf 基本语法

    四.标准表达式语法 · 简单表达式 (simple expressions) ${...}  变量表达式 *{...}  选择变量表达式 #{...}  消息表达式 @{...}  链接url表达式 ...

  8. Thymeleaf系列五 迭代,if,switch语法

      1. 概述 这里介绍thymeleaf的编程语法,本节主要包括如下内容 迭代语法:th:each; iteration status 条件语法:th:if; th:unless switch语法: ...

  9. thymeleaf 语法

    一.语法: 1. 简单表达式 (simple expressions) ${...}  变量表达式 *{...}  选择变量表达式 #{...}  消息表达式 @{...}  链接url表达式 2.字 ...

随机推荐

  1. Linux下MySQL远程链接配置

    配置步骤: 1).首先进入数据库,使用系统数据库mysql mysql -u root -p mysql 2).接着对系统数据库的root账户设置远程访问的密码,与本地的root访问密码并不冲突 gr ...

  2. Python之pytest 基础

    pytest是一个非常成熟的全功能的Python测试框架,主要特点有以下几点:1.简单灵活,容易上手:2.支持参数化:3.能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/appn ...

  3. Python+OpenCV图像处理(十三)—— Canny边缘检测

    简介: 1.Canny边缘检测算子是John F. Canny于 1986 年开发出来的一个多级边缘检测算法. 2.Canny 的目标是找到一个最优的边缘检测算法,最优边缘检测的含义是: 好的检测- ...

  4. Server Library [Apache Tomcat 7.0] unbound解决方案

    问题描述: 当在MyEclipse中导入高版本Eclipse的[Eclipse Dynamic Web]项目后,会发现其Java Build Path(选定项目->Alt+Enter即可打开Pr ...

  5. FFMPEG结构体分析:AVFrame(解码后的数据)

    https://blog.csdn.net/jxcr1984/article/details/52766524 本文转自: http://blog.csdn.net/leixiaohua1020/ar ...

  6. 【react】兄弟组件的通信方式,传统非redux

    很多用过redux开发的朋友们都知道,一般兄弟组件通信可以使用redux. redux也是近期在挤时间学习中.可能也不是很懂,说不定是有错误的理解,若有.现在虽然自己搭建了一个react+router ...

  7. Linux网络管理(一):网卡驱动与Linux内核

    下图简单描述了网卡驱动与Linux内核之间的联系: 关于上图的一些说明: 系统初始化: 1. 协议模块调用 dev_add_pack() 来注册协议处理函数到链表 &ptype_base: 2 ...

  8. thinkphp 检测验证码

    /** * 检测验证码 * @param integer $id 验证码ID * @return boolean 检测结果 */function check_verify($code, $id = 1 ...

  9. sed/awk advance

    $ echo test.file [Group1]cacheways = 19 [Group2]cacheways = 19 $ ls test.sh FILE=test.file2 # Set Gr ...

  10. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...