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.mzph.cn/news/644894.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 LlamaIndex 部署本地 Mistral-7b 大模型实现 RAG

原理 LlamaIndex的文档链接&#xff1a;Using LLMs - LlamaIndex &#x1f999; 0.9.33 LlamaIndex 的一般使用模式如下&#xff1a; 加载文档&#xff08;手动或通过数据加载器)将文档解析为节点构建索引&#xff08;来自节点或文档)&#xff08;可选&#xff0c;高级&…

2024年 IT 行业就业情况能否回春?很多人说道…

我只能说可以&#xff0c;以前我是看不到的。但是鸿蒙全栈自研让我重新看到希望&#xff01; 2024年1月18日&#xff0c;华为鸿蒙千帆启航发布会。讲到HarmonyOS NEXT作为原生鸿蒙&#xff0c;其系统底座全栈自研&#xff0c;去掉了传统的AOSP 代码&#xff08;“Android 开放…

【latex】在Overleaf的IEEE会议模板中,快速插入参考文献

【LaTeX】在Overleaf的IEEE会议模板中&#xff0c;快速插入参考文献 写在最前面第一步&#xff1a;在文献检索网站导出引用文献的bib文件第二步&#xff1a;编辑overleaf模版方法二&#xff1a;EduBirdie生成参考文献&#xff08;补充&#xff09;使用LaTeX在Overleaf的IEEE会议…

杰卡德距离(Jaccard Distance)

杰卡德距离&#xff08;Jaccard Distance&#xff09;&#xff0c;是用于衡量两个集合差异性的一种指标&#xff0c;它是杰卡德相似系数的补集&#xff0c;可以用来区分集合&#xff08;如知识图谱&#xff09;。 杰卡德相似系数 杰卡德相似系数&#xff08;Jaccard similari…

80.网游逆向分析与插件开发-背包的获取-自动化助手显示物品数据

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;升级Notice类获得背包基址-CSDN博客 码云地址&#xff08;ui显示角色数据 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;3be017de38c50653b1…

【MATLAB源码-第124期】基于matlab的GFDM系统(64QAM/QPSK调制)在AWGN和PA信道误码率对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 广义频分复用&#xff08;GFDM&#xff09;是一种先进的信号调制技术&#xff0c;近年来在无线通信领域获得了广泛的关注。GFDM作为一种多载波调制方案&#xff0c;是对经典的正交频分复用&#xff08;OFDM&#xff09;技术的…

Java内存模型

主内存与工作内存 Java内存模型的主要目标是定义程序中各个变量的访问规则&#xff0c;即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节。此处的变量包括实例变量、静态字段和构成数组对象的元素&#xff0c;但不包括局部变量与方法参数&#xff0c;因为局部变…

什么是DMA?DMA究竟有多快!

原文来自公众号&#xff1a;工程师看海 直接内存访问&#xff08;Direct Memory Access&#xff0c;DMA&#xff09;&#xff1a;在计算机体系结构中&#xff0c;DMA 是一种数据传输方式&#xff0c;允许外部设备直接访问计算机的内存&#xff0c;而无需通过中央处理单元&#…

网络防御保护---防火墙USG6000V接口配置实验

一、实验拓扑 二、实验要求 1.防火墙向下使用子接口分别对应生产区和办公区 2.所有分区设备可以ping通网关 三、实验思路 1、配置各设备的IP地址 2、划分VLAN及VLAN的相关配置 3、配置路由及安全策略 四、实验配置 4.1、配置各设备IP地址 PC1配置 Client1配置 PC2配置…

maven搭建编程环境

Maven – Download Apache Mavenmaven下载官网地址下载后解压&#xff0c;配置系统环境变量&#xff0c; 新建系统变量&#xff0c;在系统path中配置%MAVEN396_HOME%\bincmd中输入mvn -version查询是否成功配置本地仓库地址 创建一个本地文件夹当做本地仓库&#xff0c;名字可以…

应用机器学习的建议 (Advice for Applying Machine Learning)

1.决定下一步做什么 问题&#xff1a; 假如&#xff0c;在你得到你的学习参数以后&#xff0c;如果你要将你的假设函数放到一组 新的房屋样本上进行测试&#xff0c;假如说你发现在预测房价时产生了巨大的误差&#xff0c;现在你的问题是要想改进这个算法&#xff0c;接下来应…

CMS如何调优

业务JVM频繁Full GC如何排查 原则是先止损&#xff0c;再排查。 FGC的原因是对象晋升失败或者并发模式失败&#xff0c;原因都是老年代放不下晋升的对象了。 1.可能是大对象导致的内存泄漏。快速排查方法&#xff1a;观察数据库网络IO是否和FGC时间点吻合&#xff0c;找到对应…

碳排放预测 | Matlab实现LSTM多输入单输出未来碳排放预测,预测新数据

碳排放预测 | Matlab实现LSTM多输入单输出未来碳排放预测&#xff0c;预测新数据 目录 碳排放预测 | Matlab实现LSTM多输入单输出未来碳排放预测&#xff0c;预测新数据预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现LSTM长短期记忆神经网络多输入单输出未来…

推荐收藏!48道数据分析师高频面试题汇总!

大家好&#xff0c;最近很多小伙伴私信我&#xff0c;讲一下数据分析的面试题&#xff0c;今天给大家整理了48道数据分析师面试时被频繁问到的题目&#xff0c;找数据分析岗位的同学一定要码住认真看。 想了解最新的面试动态、最新高频考点、技术交流的同学&#xff0c;可以文…

别不信❗️你离数据专家只差一个CDMP证书

1⃣️为什么选择CDMP证书&#xff1f; &#x1f31f;&#x1f31f;亲爱的朋友们&#xff0c;如果你在寻找一个能让你在数据管理领域大展拳脚的证书&#xff0c;那么CDMP&#xff08;Certified Data Management Professional&#xff09;证书就是你的不二之选&#xff01;&#…

西瓜书读书笔记整理(十二) —— 第十二章 计算学习理论(上)

第十二章 计算学习理论&#xff08;上&#xff09; 12.1 基础知识12.1.1 什么是计算学习理论&#xff08;computational learning theory&#xff09;12.1.2 什么是独立同分布&#xff08;independent and identically distributed, 简称 i . i . d . i.i.d. i.i.d.&#xff0…

一键拥有你的GPT4

这几天我一直在帮朋友升级ChatGPT&#xff0c;现在已经可以闭眼操作了哈哈&#x1f61d;。我原本以为大家都已经用上GPT4&#xff0c;享受着它带来的巨大帮助时&#xff0c;但结果还挺让我吃惊的&#xff0c;还是有很多人仍苦于如何进行升级。所以就想着写篇教程来教会大家如何…

响应拦截器的 return Promise.reject(res.data.message)

今天在看老师讲解代码的时候,解决了我心中的一些疑惑。 在做excel文件导出的时候,没有告诉浏览器文件的格式是Blod产生了报错。 看下图: 可以看到下面的内容:如果业务成功 返回 res.data 如果业务失败,给出错误信息的提示&#xff0c;将这个错误抛出去。 因此我们在发送一个…

基于springboot+vue的网上租赁系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 研究背景…

鸿蒙开发案列一

1、开发需求 案例app一打开是“Hello world” 界面&#xff0c;开发者点击“Hello world”变成“Hello ArkUI”’ 2、源代码 Entry Component struct Hello {State person_name: string Worldbuild() {Row() {Column() {Text(Hello this.person_name).fontSize(50).fontWei…