Web开发之Thymeleaf引擎

1. Thymeleaf简介

(1) 模板引擎

模板引擎就是一种用于将动态数据与HTML模板结合,生成最终用户界面的工具 ,它可以帮助开发者以可维护和结构化的方式创建动态Web页面,模板引擎通常支持数据的动态插入、条件渲染、循环等功能

(2) Thymeleaf介绍

Thymeleaf是一个现代的Java模板引擎,适用于Web和独立环境。它可以与Spring框架无缝集成,并提供了一种自然的模板创建方式,使得模板可以在浏览器中直接打开,方便前端开发者查看

(3) Thymeleaf特点
  • 自然模板:Thymeleaf模板可以作为静态HTML文件在浏览器中直接打开,而不需要经过服务器处理,方便前端开发
  • 可扩展性:支持自定义方言,开发者可以根据需求扩展Thymeleaf的功能
  • 条件渲染:通过表达式支持条件判断和循环,能够根据动态数据生成不同的HTML
  • 与Spring集成:与Spring MVC的集成十分简便,能够自动解析模型数据并渲染视图

2. 核心语法

(1) Thymeleaf配置

Thymeleaf的基本配置通常在Spring Boot项目中进行。通过在application.properties中添加以下配置,可以启用Thymeleaf支持:

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

#Thymeleaf配置:不用缓存
spring.thymeleaf.cache=false

在Controller中返回视图时,可以直接使用视图名称,Thymeleaf会根据前缀和后缀自动解析

为了开发时方便测试,关闭Thymeleaf的缓存可以不重启项目即可看到html文件改动的效果

(2) 表达式

Thymeleaf支持多种表达式语言,包括:

  • 标准表达式${...}):用于访问模型中的属性
  • 变量表达式*{...}):用于访问当前上下文中的属性
  • 选择表达式?{...}):用于条件选择,可以进行国际化处理
  • 链接表达式@{...}):用于生成URL
<p th:text="${user.name}">用户名称</p>
<a th:href="@{/user/${user.id}}">查看用户</a>
(3) 常用标签
  • th:设置元素的文本内容
  • th:动态生成链接
  • th:根据条件渲染元素
  • th:循环渲染集合
<ul>
    <li th:each="item : ${items}" th:text="${item.name}"></li>
</ul>

3. 页面布局

(1) 片段表达式

Thymeleaf支持片段表达式,通过th:insertth:replace等方式将模板中的片段引入到其他模板中。这使得页面布局更为灵活和可复用

<!-- 定义片段 -->
<div th:fragment="header">
    <h1>欢迎</h1>
</div>

<!-- 引入片段 -->
<div th:insert="~{header}"></div>
(2) 页面布局

使用Thymeleaf布局功能,可以创建统一的页面结构。例如,可以在main.html中定义基本布局,然后在其他页面中通过layout:decorate引入

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{main}">
<head>
    <title>用户管理</title>
</head>
<body>
    <div layout:fragment="content">
        <h2>用户列表</h2>
    </div>
</body>
</html>

Thymeleaf作为一个强大的Java模板引擎,相比JSP,具有自然模板、良好的可扩展性和与Spring的深度集成等优点,开发者可以高效地创建动态和响应式的Web页面。综合来看,Thymeleaf 在易用性、可维护性、灵活性等方面都优于 JSP,这使得它在现代 Web 开发中更受欢迎

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

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

相关文章

【React】React18.2.0核心源码解读

前言 本文使用 React18.2.0 的源码&#xff0c;如果想回退到某一版本执行git checkout tags/v18.2.0即可。如果打开源码发现js文件报ts类型错误请看本人另一篇文章&#xff1a;VsCode查看React源码全是类型报错如何解决。 阅读源码的过程&#xff1a; 下载源码 观察 package…

IPD流程体系:IPD在硬件产品开发中的应用

目录 1、内容简介 2、开发各阶段介绍 3、PVT阶段 4、资源群更新 作者简介 1、内容简介 在硬件类相关产品的开发过程中&#xff0c; 每个阶段的工作都是需要按照一定的流程、规范和标准去进行的。 整体还是相对瀑布化的流程&#xff0c; 每个阶段的输入、输出、准入、准…

第四天旅游线路预览——从贾登峪到喀纳斯景区入口(贾登峪游客服务中心)

第四天&#xff1a;从贾登峪到喀纳斯风景区入口&#xff0c;晚上住宿贾登峪&#xff1b; 从贾登峪到喀纳斯景区入口&#xff08;贾登峪游客服务中心&#xff09;&#xff1a; 搭乘贾登峪①路车&#xff0c;路过三湾到达景区换乘中心&#xff0c;路程时长约40分钟&#xff1b; …

autodl连接xftp

&#xff08;1&#xff09;首先打开xftp&#xff0c;新建会话 &#xff08;2&#xff09;给会话取个名字&#xff0c;然后填写主机和端口号 &#xff08;3&#xff09; 主机和端口号从autodl实例中找&#xff0c;登入指令那里 &#xff08;4&#xff09;点击复制&#xff0c;然…

展锐平台的手机camera 系统开发过程

展锐公司有自己的isp 图像处理引擎&#xff0c;从2012 年底就开始在智能手机上部署应用。最初的时候就几个人做一款isp的从hal 到kernel 驱动的完整软件系统&#xff0c;分工不是很明确&#xff0c;基本是谁擅长哪些就搞哪些&#xff0c;除了架构和编码实现之外&#xff0c;另外…

Kafka 基于SASL/SCRAM动态认证部署,kafka加账号密码登录部署

文章目录 前言下载 kafka安装启动zookeeper添加账号密码 启动kafka修改kafka配置文件增加jaas授权文件修改启动文件&#xff0c;启动kafka检查是否部署成功 offset explore 连接 前言 其实挺简单的几个配置文件&#xff0c;问大模型一直没说到点上&#xff0c;绕晕了。SASL/SC…

【linux】4张卡,坏了1张,怎么办?

先禁用这张卡 grub 禁用&#xff0c;防止加载驱动 禁用这张卡的 PCI # 禁用 PCI 设备 0000:b1:00.0 (NVIDIA GPU) ACTION"add", SUBSYSTEM"pci", ATTR{vendor}"0x10de", KERNELS"0000:b1:00.0", RUN"/bin/sh -c echo 0000:b1:00…

数据技术进化史:从数据仓库到数据中台再到数据飞轮的旅程

随着大数据时代的到来&#xff0c;数据已经成为企业的核心资产之一。在过去几十年间&#xff0c;数据技术也随之不断演进&#xff0c;从早期的数据仓库到近年来热门的数据中台&#xff0c;再到正在快速发展的数据飞轮概念&#xff0c;每一步都是技术革新的体现。 一、数据仓库&…

股价预测,非线性注意力更佳?

作者:老余捞鱼 原创不易,转载请标明出处及原作者。 写在前面的话: 本文探讨了在 transformer 模型中使用非线性注意力来预测股票价格的概念。我们讨论了黎曼空间和希尔伯特空间等非线性空间的数学基础,解释了为什么非线性建模可能是有利的,并提供了在代码中实现这种…

【二十】【QT开发应用】listwidget右键菜单和删除item

创建项目&#xff0c;添加资源文件 在项目文件夹中创建resources资源文件夹。 在vs中打开qrc文件&#xff0c;选择添加资源文件。 选择我们resources资源文件中的所有文件作为资源文件。 最后不要忘记点击保存。 向ListWidget控件添加item 右键菜单 在.h文件中添加QMenu头…

java项目之编程训练系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的编程训练系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 编程训练系统的主要使用者管…

结合人工智能,大数据,物联网等主流技术实现业务流程的闭环整合的名厨亮灶开源了

明厨亮灶视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。AI技术可以24小时…

1.5 计算机网络的分层结构

欢迎大家订阅【计算机网络】学习专栏&#xff0c;开启你的计算机网络学习之旅&#xff01; 文章目录 前言1 分层设计2 网络体系结构2.1 基本概述2.2 常见的三种网络体系结构 3 各层之间的关系3.1 水平关系3.2 垂直关系 4 数据传输过程4.1 水平视角4.2 垂直视角 前言 在当今数字…

uniapp H5 打开地图 并选中标记点

uniapp H5 打开地图 并选中标记点 先上代码 //打开地图 显示景区位置openMap() {// 支付宝// #ifdef MP-ALIPAYmy.openLocation({longitude: Number(this.detailObj.longitude), // 经度latitude: Number(this.detailObj.latitude), // 纬度name: this.detailObj.scenicName, …

CertiK因发现Apple Vision Pro眼动追踪技术漏洞,第6次获苹果认可

​2024年9月20日&#xff0c;头部Web3.0安全机构CertiK自豪地宣布&#xff0c;CertiK的工程师因发现Apple Vision Pro MR&#xff08;混合现实&#xff09;头显设备中的关键漏洞而获得Apple公司认可&#xff0c;这已经是Apple公司第六次公开发布对CertiK的致谢&#xff0c;Cert…

文件格式转换:EXCEL和CSV文件格式互相转换

目录 1.EXCEl和CSV文件格式互相转换1.1首先安装所需的Python包1.2excel转换为csv代码如下&#xff1a;1.3csv转换为excel代码如下&#xff1a; 由于excel文件在数学建模数据处理当中的局限性&#xff0c;我们通常把excel文件转换为csv文件来处理&#xff0c;下面是相关的代码&a…

IDEA配置全局的maven环境

1、关闭掉所有打开的项目&#xff0c;然后点击All settings 2、配置maven home path、user setting file、local repository。 3、配置JRE的版本 4、配置字节码版本

【第十三章:Sentosa_DSML社区版-机器学习聚类】

目录 【第十三章&#xff1a;Sentosa_DSML社区版-机器学习聚类】 13.1 KMeans聚类 13.2 二分KMeans聚类 13.3 高斯混合聚类 13.4 模糊C均值聚类 13.5 Canopy聚类 13.6 Canopy-KMeans聚类 13.7 文档主题生成模型聚类 13.8 谱聚类 【第十三章&#xff1a;Sentosa_DSML社…

聊天组件 Vue3-beautiful-chat 插槽

前言 Vue3-beautiful-chat 组件有四个插槽可以定制 一、user-avatar(头像) 首先是头像插槽,我们可以直接在 <beautiful-chat></beautiful-chat> 中间使用; 作用: 我们可以在用户头像上添加自定义样式,比如添加节日边框、可以使用首字母作为头像。。。 …

由于安全风险,安全领导者考虑禁止人工智能编码

安全团队与开发团队之间的紧张关系 83% 的安全领导者表示&#xff0c;他们的开发人员目前使用人工智能来生成代码&#xff0c;57% 的人表示这已成为一种常见做法。 然而&#xff0c;72% 的人认为他们别无选择&#xff0c;只能允许开发人员使用人工智能来保持竞争力&#xff0…