thymeleaf常用语法大全

有时候需要借鉴别人的代码,发现一个相似的功能点,但是自己的是html页面别人的是jsp页面,那如果不了解thymeleaf的话还是要费点功夫的。

什么是thymeleaf,通俗点,jsp中的${},以及jstl中的if标签什么的都不能用,在html中要使用thymeleaf,比如${}变成了[[${}]]等。

我使用thymeleaf将下面的jsp页面完全转化为了html页面,我总结下常用语法!

一、首先thymeleaf的引入:

<html lang="en" xmlns:th="http://www.thymeleaf.org">

引入依赖 <!--使用thymeleaf-->

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

然后就能用了

二、常用语法

1、页面插入,比如翻页功能就经常单独作为一个页面然后插入到主页面中

page.html中最外面加个div标签包住(使用fragment标记)

<div th:fragment="flag">
<table width="95%" align="center"  cellpadding="0" cellspacing="0">

.........

</div>  

主页面中插入

<div th:insert="/common/page :: flag"></div>  意思是插入page页面中的被包住的flag那一段

2、<input th:vlaue="${user.name}"> 为了防止user以及name为null页面报错,写成如下格式<input th:vlaue="${user?.name}"> 所有的.前面加个?就行了,如${list?.user?.name}

3、select选项标签

<select name="film_type_id" id="film_type_id" style="width:155px">
            <option value="0">请选择</option> 
          <option th:selected="${option.film_type_id} == ${film?.film_type_id}" th:each="option : ${filmTypes}" th:value="${option.film_type_id}" th:text="${option.film_type_name}"></option>
      </select>

th:selected用于编辑页面数据回显,th:each是遍历filmTypes,option是遍历出的单值,th:value是提交上去的数据,th:text是显示在页面上的数据

4、复选框功能实现

<span th:each="subString : ${'09:00、11:00、13:00、15:00、17:00、19:00、 21:00、23:00'.split('、')}">
            <input type="hidden" id="film_scene" name="film_scene" th:value="${film?.film_scene}" /> 
            <input th:value="${subString}" type="checkbox" name="film_scenes" th:checked=="${#strings.contains(film.film_scene==null?'1':film.film_scene, subString)}"/><label>[[${subString}]]</label>&nbsp;&nbsp;
            </span>

这个是图片中 复选框功能的实现,th:each遍历的数据是自己分割的,th:checked也是用于编辑页面数据回显,""中的判断结果为true则选中,${#strings.contains()}是thymeleaf中的内置对象,就是各种函数,这里的包含函数作用是判断前面的是否包含后面的,最后的[[${}]]常用于标签之间比如<label>[[${subString}]]</label>,[[${}]]判空如下

<span>[[${film!=null && film.film_id!=0?'编辑':'添加'}]]电影</span>

5、if判断

<div th:if="${film!=null && film.film_id!=0}">
              <input type="button" id="editBtn" Class="btnstyle" value="编 辑"/> 
            </div>

这个是替换Jsp中的if标签

6、实现根据传递过来的film参数是否为null动态调整标签为 添加/编辑 页面标题功能

两种,其一:直接在th:text里面判断

<TD class="edittitle" th:text="${film!=null && film.film_id!=0?'编辑':'添加'}+'电影'"></TD>

其二:使用th:if和th:unless,这两个是个组合

<TD class="edittitle" th:if="${film!=null && film.film_id!=0}" th:text="编辑电影"></TD>
              <TD class="edittitle" th:unless="${film!=null && film.film_id!=0}" th:text="添加电影"></TD>

7、<img/>标签

<td align="left" colspan="3">
            <img id="userImg" th:src="${('/upload/'+film.film_pic)}" width="70" height="80" style="border:0px;"/>
            &nbsp;<span id="op" style="display:none"><img src="images/image/loading004.gif"  height="80" /></span>
          </td>

th:src加载图片,这里的/upload是虚拟路径,映射到F盘的某个图片文件,film是接收的参数

下面还有一个img加载的是本地的图片就没有必要用thymeleaf,要接收参数时用

8、iframe语法

将整个Html页面引入到另一个html中去

<iframe name="uploadPage" th:replace="sys/uploadImg :: html" width="100%" height="50" marginheight="0" marginwidth="0" scrolling="no" frameborder="0"></iframe>

意思是将uploadImg.html整个html引入,不需要在uploadImg.html中标记fragment

但是这样引入是有些不好的地方(具体可见下一篇),当然一般情况下没问题,建议用以下方法:

springboot项目中假设静态资源指向static文件夹,直接将要引入的页面放在static文件夹下,然后代码如下 

<iframe name="uploadPage" src="/uploadImg.html" width="100%" height="50" marginheight="0" marginwidth="0" scrolling="no" frameborder="0"></iframe>

意思是在resources根目录下开始找uploadImg.html

9、${#lists.size()}内置对象函数,判断传过来的list参数

<div th:if="${#lists.size(films)>0 && films!=null}"></div>

10、遍历中的count计数器

<tr class="list0" onmouseover="tr_mouseover(this)" onmouseout="tr_mouseout(this)" th:each="m,count:${films}"> 
     <td width="" align="center"><input type="checkbox" name="chkid" th:value="${m.film_id}" style="vertical-align:text-bottom;"/></td>
     <td width="" align="center">[[${count.index+1}]]</td>
     <td width="" align="center">[[${m.film_name}]]</td>
     <td width="" align="center">[[${m.film_type_name}]]</td>
     <td width="" align="center">[[${m.film_actors}]]</td>
     <td width="" align="center">¥[[${m.film_price}]]</td>
     <td width="" align="center">[[${m.film_date}]]</td>
     <td width="" align="center">[[${m.film_scene}]]</td>
     <td width="" align="center">[[${m.film_room}]]</td>
     <td width="" align="center">[[${m.film_score}]]</td>
     <td width="" align="center">

th:each="m,count:${films}" 其中,m为遍历单值,count计数

11、a标签格式

<a th:href="@{/book/page(book=${bookId}, page=${pageNumber})}" //其中book和page为携带的参数

12、点击事件

th:onclick="'javascript:openBox(\''+${curCabNo}+'\',\''+${box.no}+'\')'"

13、script格式

<script th:inline="javascript" type = "text/javascript">

var flag = [[${tip}]];

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/346396.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

文件包含技术总结

开发人员一般会把重复使用的函数写到单个文件中&#xff0c;需要使用某个函数时直接调用此文件&#xff0c;而无需再次编写&#xff0c;这中文件调用的过程一般被称为文件包含。 allow_url_fopen On&#xff08;是否允许打开远程文件&#xff09; allow_url_include On&…

编译安装Nginx和使用五种算法实现Nginx反向代理负载均衡

目录 Ubuntu中安装Nginx 概念介绍 负载均衡 几种负载均衡算法 反向代理 环境规划 配置反向代理 加权负载均衡&#xff08;Weighted Load Balancing&#xff09; 轮询&#xff08;Round Robin&#xff09; IP 哈希&#xff08;IP Hash&#xff09; 最少连接&#xff…

多元跨界、戮力谐老!2024深圳国际户外运动展览会再创运动生活新方式

COSP Shenzhen 2024国际户外运动用品与时尚展 2024年3.14-16日 深圳会展中心(福田馆&#xff09; COSP Shanghai 2024国际户外运动用品与时尚展 2024年9.05-07日 上海世博展览馆&#xff08;浦东&#xff09; 展会概述&#xff1a; 作为国内最具影响力的户外运动展会之一…

聚观早报 | 马云大幅增持阿里股票;苹果下调自动驾驶目标

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 1月25日消息 马云大幅增持阿里股票 苹果下调自动驾驶目标 华硕天选5 Pro锐龙版正式发布 Redmi K70至尊版细节曝光…

《如何画好架构图》学习笔记

看了一堂《如何画好架构图》的公开课&#xff0c;结合网上的资料与经验做一些思考总结。文中的例子和图片大多是从课程中摘录的。 1. 4R架构定义 4R架构定义其实是软件架构定义经过归纳提炼后的简称。 软件架构定义&#xff1a;软件架构是指软件系统的顶层&#xff08;Rank&am…

基于cubeMX的正点原子miniSTM32对W25Q64的存储使用

一、实现目标 使用cubeMX建立项目工程&#xff0c;结合正点原子提供的hal库对W25Q64闪存调用的例程&#xff0c;实现W25Q64的读写。 二、实现过程 1、首先建立cubeMX工程&#xff0c;其他项设置不再叙述&#xff0c;只看连接W25Q64的SPI设置&#xff0c;这里使用SPI1&#xf…

01.领域驱动设计:微服务设计为什么要选择DDD学习总结

目录 1、前言 2、软件架构模式的演进 3、微服务设计和拆分的困境 4、为什么 DDD适合微服务 5、DDD与微服务的关系 6、总结 1、前言 我们知道&#xff0c;微服务设计过程中往往会面临边界如何划定的问题&#xff0c;不同的人会根据自己对微服务的理 解而拆分出不同的微服…

AI大模型中的Bert

1.全方位上下文理解&#xff1a;与以前的模型&#xff08;例如GPT&#xff09;相比&#xff0c;BERT能够双向理解上下文&#xff0c;即同时考虑一个词 的左边和右边的上下文。这种全方位的上下文理解使得BERT能够更好地理解语言&#xff0c;特别是在理解词义、 消歧等复杂任务上…

苹果AI新动向:隐秘收购与人才招募揭示其下一代AI技术布局

AI圈的隐形“大佬” 苹果公司于2023年7月被传出正在积极涉足生成式AI领域&#xff0c;据传正在开发名为“AJAX”的大型语言模型。他们甚至为员工内部开发了类似 ChatGPT的聊天机器人&#xff0c;可能被称为“Apple GPT”。这一创新工作由苹果公司的机器学习与AI部门主管John G…

视频汇聚/云存储平台EasyCVR级联上级播放后一直发流是什么原因?

可视化云监控平台/安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;同时…

Oracle篇—分区表的管理(第二篇,总共五篇)

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

【LeetCode每日一题】2865. 美丽塔 I

2024-1-24 文章目录 [2865. 美丽塔 I](https://leetcode.cn/problems/beautiful-towers-i/) 2865. 美丽塔 I 初始化变量 ans 为0&#xff0c;用于记录最大的和值。获取整数列表的长度&#xff0c;保存到变量 n 中。使用一个循环遍历列表中的每个位置&#xff0c;从0到n-1。在循…

如何使用phpStudy软件测试本地PHP及环境搭建

各位同学朋友们大家好&#xff01;我是咕噜铁蛋&#xff01;我们经常需要在本地进行PHP代码的开发和测试。而phpStudy作为一个集成了Apache、MySQL和PHP的软件套装&#xff0c;提供了方便快捷的环境搭建和测试工具。今天铁蛋为大家详细介绍如何使用phpStudy来测试本地PHP及环境…

智能家居20年,从「动手」到「用脑」

【潮汐商业评论/原创】 正在装修新家的Carro最近陷入了纠结之中&#xff0c;“还没想好要怎么装一套完整的智能家居&#xff0c;家里的基装就已经开始了。” 事实上&#xff0c;Carro对智能家居也不了解&#xff0c;并不知道该如何下手&#xff0c;心想“要是能一次性设计好就…

WIFI电路原理时序检修思路

uart是串口&#xff0c;bt是蓝牙&#xff0c;hsic是高速接口。pcm是音频接口。时序图的第五步是发出就绪信号&#xff0c;然后第六步与门发出就绪信号。 wifi芯片是u8_rf。 特别说明&#xff1a;short表示短接。xw表示实际是看不到物体的&#xff0c;是直接相连的。 找信号50_…

【JavaWeb】MVC架构模式

文章目录 MVC是什么&#xff1f;一、M &#xff1a;Model 模型层二、V&#xff1a;View 视图层三、C&#xff1a;Controller 控制层四、非前后端分离MVC五、前后端分离MVC总结 MVC是什么&#xff1f; MVC&#xff08;Model View Controller&#xff09;是软件工程中的一种**软件…

音乐证书通过率发布,市场对持有者需求旺盛

音乐证书的考试难度备受关注&#xff0c;通过率终于揭晓。据官方公布的数据&#xff0c;该证书的通过率相对较低&#xff0c;需要考生在音乐技能和表现方面有出色的表现。然而&#xff0c;持有音乐证书的人才在市场上需求旺盛&#xff0c;各种音乐机构和企业对其表现出强烈兴趣…

深入理解stressapptest

文章目录 一、概述二、安装2.1、源码编译安装2.2、命令行安装2.3、安装确认三、重要参数详解3.1、查询支持的参数3.2、参数说明 四、实例4.1、随机测试&#xff08;默认模式&#xff09;4.2、循环测试4.2、全内存测试 团队博客: 汽车电子社区 一、概述 stressapptest是一款免费…

gin路由篇

1. 基本路由 gin 框架中采用的路由库是基于httprouter做的 import ("net/http""github.com/gin-gonic/gin" )func main() {// 1.创建路由r : gin.Default()// 2.绑定路由规则&#xff0c;执行的函数// gin.Context&#xff0c;封装了request和responser.…

《PCI Express体系结构导读》随记 —— 第I篇 第3章 PCI总线的数据交换(1)

前言中曾提到&#xff1a;本章详细阐述了PCI总线的数据传送方式&#xff0c;与Cache相关的内容和预读机制是本章的重点。 PCI Agent设备之间、以及HOST处理器和PCI Agent设备之间可以使用存储器读写和I/O读写等总线事务进行数据传送。在大多数情况下&#xff0c;PCI桥不直接与P…
最新文章