本文只适用于不会Java对HTML语言有基础的程序员们,是浏览了各大博客后收集整理,重新编辑的一篇文章,希望能对大家有所帮助。最后本文如果有哪里写错的,希望各位大神们能够批评指正,谢谢大家!

对于Thymeleaf,网上特别官方的解释无非就是:网站或者独立应用程序的新式的服务端java模板引擎,可以执行HTML,XML,JavaScript,CSS甚至纯文本模板。这个解释没有任何问题,它确实是建立在Java的基础之上的,但是像我这种只会前端不懂Java的人,其实也可以运用它。了解angular的人在看到Thymeleaf就会感到惊喜,它们在形式上其实是比较相似的。那么,Thymeleaf需要从那里看起?作为Java小白,刚开始看了网上那么多Thymeleaf文章也看不出个所以然,今天好不容易才整理出头绪,接下来就开始切入正题:

noodles

如上图,后台传出的food.name会将静态数据“noodles”替换掉,若访问静态页面,则显示数据“noodles”。是不是和angular很像?下面我们就来换一种方式,不同于其他博客上的方式来介绍Thymeleaf。

当然,首先大家要先知道th简单表达式:

一、th简单表达式:

①${...}  变量表达式:

上述代码为引用user对象的name属性值。

② *{...}  选择表达式:

Nationality: XXXX.

选择表达式一般跟在th:object后,直接选择object中的属性。

③ #{...}  消息文字表达式:

Welcome to our grocery store!

④ @{...}  链接url表达式:

view

@{……}支持决定路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用(//code.jquery.com/jquery-2.0.3.min.js)。

当URL为后台传出的参数时,代码如下:

当理解了这四个表达式后,我就信心满满的去向下看文档,然后我发现我看不懂了。。。因为我不理解什么是th:field='';th:action='';诸如此类的好多好多,后来在一个博客上看到这一类的是所谓的Thymeleaf的属性,或者是常用的th:标签,下面我们就来整理学习一下这些标签:

这是在一个博客上看到的整理的较全的图片,还有一个更全的,那个太多了,会吓到初学者,不知道你们会不会,反正我是被吓到了。。。

下面我们会详细介绍一些常用的标签:

二、th常用标签:

1.th:id:

类似html标签中的id属性。

2.th:text:与th:utext:

即文本显示,可对表达式或变量求值,并将结果显示在其被包含的HTML标签内,替换原有HTML文本。这里需要与th:utext:区分开,th:text:例子如下:

若restraunt.welcome=welcome to our deliciousrestaurant! 那么,用

deliciousrestaurant! ,

也就是说,会输出 welcome to our <b>delicious</b>restaurant>  当然,我们是不会希望页面上出现<和e>的,这时候,我们就需要使用th:utext:来进行转义,即用

所以最终输出的结果为:welcome to our delicious restaurant!

3.th:object:

用于表单数据对象绑定,将表单绑定到后台controller的一个JavaBean参数,常与th:field一起使用进行表单数据绑定。选择表达式一般跟在th:object后,直接取object中的属性。

这里有一个需要注意的点:*{...}表达式的值是在选定的对象而不是整个context的map。也就是说,如果没有选定的对象,*{...}和${...}没有区别,请看下面的例子:

姓名:noodles

年龄:24

国籍:中国

上面这段代码相当于:

姓名:noodles

年龄:24

国籍:中国

4.th:field:上面提到了一个新标签,th:field:,常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定。

5.th:action:定义后台控制器路径,类似

标签的action属性。

6.th:href:定义超链接,类似标签的href 属性。value形式为@{/logout}.

view

view

view

7.th:src:用于外部资源引入,类似于

8.th:value:用于标签赋值,类似标签的value属性。

soup

9.th:ifor th:unless:条件判断,支持布尔值,数字(非零为true),字符,字符串等.

... I love eating(do something at here) ...

Special desert! /*不能用"<",">"等符号,要用"lt"等替代*/

掌握程度

一般

熟练

精通

这里有两个需要注意的点:先看下面两行代码,

...

...

在这个例子中,==false是写在了\({...}的外边,所以使Thymeleaf本身在支持它,如果写在了\){...}的里边,则变为由OGNL或SpringEL库来支持它。(***这里目前我还未明白是什么意思,希望明白的大神能告诉我这个问题***)

而null值也可以这么使用:

...

th:if不光可以使用布尔值,以下规则都可以:

如果值不为空:如果值为null,th:if将为false

如果值为布尔型并且为true

如果值为数值型并且不为0

如果值为character并且不为0

如果值为String,并且不为"false","off"和"no"

如果值不为布尔型,数值型,character或String的任意类型

● 如果值为null,th:if将为false

th:if还有一个互逆的表达式为th:unless,还继续用之前的例子作一个演示:

查看

下面的是一个th:if 例子,大家可以照着套一下。

食物名称食物价格可现做食客评价醋溜土豆丝2.41yes

2个评价

查看

如果产品有评论,那么我们就创建一个跳转到评论页面的超链接,并且使用产品ID作为参数。

10.th:switch 和th:case:选择语句。 th:case="*"表示default case。注意:一旦一个th:case被判断为真,那么其他的同等级的th:case都将被判断为假

超级管理员用户

管理员用户

其他用户

11.th:with:定义变量,th:with="isEven=${prodStat.count}%2 == 0",定义多个变量可以用逗号分隔。

The name of the first person is Julius Caesar.

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文,以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >标记的范围内。

div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">

The name of the first person is Julius Caesar.

But the name of the second person is

Marcus Antonius.

th:with属性允许重用变量定义在相同的属性:

...

12.th:remove:移除除了第一个外的静态数据,用第一个tr标签进行循环迭代显示:

//将后台传出的 productList 的集合进行迭代,用product参数接收,通过product访问属性值//用count进行统计,有顺序的显示1Red Chair$1232014-12-01White table$20015-Jul-2013Reb table$20015-Jul-2013Blue table$20015-Jul-2013

java th标签_初步认识Thymeleaf:简单表达式和标签。(一)相关推荐

  1. java 数据对_数据表与简单java类(一对多)

    emp表:empno,ename,job,sal,comm,mgr,deptno dept表:deptno,dname,loc 要求可以通过程序描述出如下对应关系 一个部门有多个部员,并且可以输出一个 ...

  2. 数据中台 画像标签_数据中台实战:如何通过标签平台圈出产品高价值用户?...

    这是我的好朋友华仔的文章,华仔是<数据中台实战>的作者,曾任职科大讯飞,现在是富力环球商品贸易港数据中台的产品负责人,他的公众号:改变世界的产品经理 写了很多有关数据中台.产品经理相关的原 ...

  3. svm 图片加标签_基于半监督的SVM多标签图数据分类算法研究

    宋文广 李程文 谭建平 摘   要:传统的图数据分类研究主要集中在单标签集,然而在很多应用中,每个图数据都会同时具有多个标签集.文章研究关于多标签图数据分类问题,并提出基于半监督的SVM多标签图数据分 ...

  4. Pyqt5 多标签_【专访】芬欧蓝泰标签: 升级产品助力细分市 场发展

    导读 针对芬欧蓝泰标签推出的RFID复合胶膜和织物标签的升级产品,<标签与贴标>专访了芬欧蓝泰标签特殊品类事业部亚太区总监刘心敏女士. ▲芬欧蓝泰标签特殊品类事业部亚太区总监刘心敏女士 & ...

  5. java 加法程序_使用JAVAEE编写简单的加法程序

    软件152  罗俊 首先选择菜单file-new-maven project,勾选"Create a &simple project (skip archetype selectio ...

  6. java吸血鬼数字_吸血鬼数字的简单实现

    从think in java上面看到的吸血鬼数字,自己写了一个简单的实现 package com.zyl; import java.util.ArrayList; import java.util.A ...

  7. java番茄钟_个人用的简单番茄时钟

    虽然网上有很多各种各样的番茄时钟,但是我只需要最简单的半小时间隔进行全屏提醒就可以了.但是找来找去,只有一个 daping 软件能够满足我的基本要求,可惜这个软件有广告. 所以为了满足需求,只能动手自 ...

  8. java 多线程 从无到有_多线程断点续传(简单demo)——从无到有

    复杂功能总是由许多小功能组合在一起完成的,一步一步完成多线程断点续传,可以从以下几个方面来考虑. 第一,实现简单的下载: 第二,打断下载线程,实现暂停功能: 第三,从已经下载点进行续传: 第四,引入多 ...

  9. java实现九宫格_浏览器九宫格的简单实现

    九宫格,也叫做快速拨号(Speed dial),是现代浏览器一个非常重要的功能,用户可以在空白页上定制和放置自己喜爱的网站,这样可以方便的打开所需的网站,无需输入和记忆网址. 九宫格页面一般由9个格子 ...

最新文章

  1. row间距 table 某一行_UITableview的一个section下的各行Row之间可以设置间隔一段距离吗?...
  2. 利用Python制作王者荣耀出装小助手,引来了老板的注意!
  3. C运算符解析及优先级
  4. opencv 取roi_opencv实现人脸识别快速入门
  5. 高端企业级存储IBM XIV访谈视频
  6. 从拟物到简约 ------谈网站设计风格的变革
  7. PostgreSQL13逻辑备份pg_dump
  8. eggjs增删改查MySQL_egg-sequelize 实现 增删改查
  9. vue2 递归组件--树形
  10. httpcliet发送body体_解决HTTP GET方法调用带有body问题
  11. Wordpress 2.91 的一些良好改进
  12. wps一直显示正在备份怎么办_做了一天的文档被误删?WPS这个功能随时准备帮你兜底...
  13. Echarts数据可视化echarts实例的相关操作,开发全解+完美注释
  14. 把每列中最大的数据合并一行
  15. Linux下gcc与g++用法以及编写makefile
  16. Spring自动注解装配、自动检测装配Bean配合过滤组件使用
  17. 新概念英语第三册 阅读
  18. MATLAB2014b安装(Ubuntu 14.10)
  19. NYOJ234吃土豆(双层动态规划)
  20. 如何用计算机制作动态图,怎么制作Gif动画?用电脑制作Gif动图

热门文章

  1. mybatis association select 性能分析
  2. 百名高管畅谈2019人工智能走向
  3. 如何放大图片而不影响清晰度?图片无损放大这样做
  4. Java绝对/相对路径获取与getResourceAsStream()方法
  5. 带字幕的Youtube
  6. html5 流星雨,canvas简单流星雨
  7. 1617_MIT 6.828 JOS boot代码分析
  8. 计算机相关的日语词汇,与计算机操作相关的日语词汇(2)
  9. LCD液晶驱动芯片VK0192M LQFP44电路图/技术资料简介
  10. php 二维数组中去重,[转]PHP二维数组去重数组去重