动力节点王鹤SpringBoot3笔记——第七章 视图技术Thymeleaf
目录
第七章 视图技术Thymeleaf
前言
7.1 表达式
7.2 if-for
第七章 视图技术Thymeleaf
前言
Thymeleaf 是一个表现层的模板引擎, 一般被使用在 Web 环境中,它可以处理 HTML, XML、 JS 等文档,简单来说,它可以将 JSP 作为 Java Web 应用的表现层,有能力展示与处理数据。Thyme leaf 可以让表现层的界面节点与程序逻辑被共享,这样的设计, 可以让界面设计人员、业务人员与技术人员都参与到项目开发中。
这样,同一个模板文件,既可以使用浏览器直接打开,也可以放到服务器中用来显示数据,并且样式之间基本上不会存在差异,因此界面设计人员与程序设计人员可以使用同一个模板文件,来查看静态与动态数据的效果。
Thymeleaf作为视图展示模型数据,用于和用户交互操作。JSP的代替技术。比较适合做管理系统,是一种易于学习,掌握的。我们通过几个示例掌握Thymeleaf基础应用。
创建新的Spring Boot项目Lession19-Admin, Maven构建工具,JDK19。 Spring Web, Thymeleaf , Lombok依赖。包名称:com.bjpowernode.tpl
7.1 表达式
表达式用于在页面展示数据的,有多种表达式语法,最常用的是变量表达式、链接表达式。
| 表达式 | 作用 | 例子 |
|---|---|---|
| $ {...} | 变量表达式,可用于获取后台传过来的值 | <p th:text="${userName}">中国</p> |
| @ {...} | 链接⽹址表达式 | th:href="@{/css/home.css}" |
step1:创建首页在static/mian.html
静态资源默认放在static目录,Spring Boot按约定,可直接访问。main.html就是普通的HTML文件。
<html lang="en">
</head>
<body><div style="margin-left: 200px">1.<a href="exp">表达式</a> <br/></div>
</body>
</html>
step2:创建Controller,提供数据给页面
@Controller
public class ThymeleafController {@GetMapping("/exp")public String exp(Model model){model.addAttribute("name","动力节点IT培训");model.addAttribute("address","北京的大兴区");return "exp";}@GetMapping("/link")public String link(Integer id, String name,Model model){model.addAttribute("id",id);model.addAttribute("myname",name);return "link";}
}
step3:templates/目下创建Thymeleaf的文件
exp.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h3>表达式</h3><div th:text="${name}"></div><div th:text="${address}"></div><br/><a th:href="@{http://www.baidu.com}">连接到百度</a> <br/><a th:href="@{/link}">连接表达式无参数</a> <br/><a th:href="@{/link(id=111,name=lisi)}">连接表达式传递参数</a> <br/></body>
</html>
link.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h3>表达式</h3>id:<div th:text="${id}"></div>姓名:<div th:text="${myname}"></div>
</body>
</html>
7.2 if-for
Thymeaf同样支持if,for语句的使用。
| 表达式 | 作用 | 例子 |
|---|---|---|
| th:if=“boolean表达式” | th:if 当条件满足时,显示代码片段。 条件常用boolean表示,true满足,反之不满足。 | <div th:if=“10>2”> 显示此内容 </div> |
| <tr th:each=”成员遍历:${表达式}”> <td th:text=”${成员}”> 列 </td> </tr> | th:each处理循环,类似jstl中的<c:foreach> | <table> <tr th:each=“item:${list}”> <td th:text=“${item}”> </tr> </table> |
main.html
增加连接
2.<a href="if-for">if和for</a>
创建UserVO
@Data
@AllArgsConstructor
public class UserVO {private Integer id;private String name;private Integer age;
}
创建控制器方法
@GetMapping("if-for")
public String ifFor(Model model){UserVO userVO = new UserVO(10, "李四",20);model.addAttribute("user", userVO);List<UserVO> users = Arrays.asList(new UserVO(11, "张三",21),new UserVO(12, "周行",22));model.addAttribute("users",users);return "base";
}
创建base.html模板页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h3>if,for 表达式</h3><div th:if="${user.age > 18}">成年了</div><br/><table border="1"><thead><th>id</th><th>姓名</th><th>年龄</th></thead><tbody><tr th:each="u:${users}"><td th:text="${u.id}"></td><td th:text="${u.name}"></td><td th:text="${u.age}"></td></tr></tbody></table></body>
</html>
浏览器访问

相关文章:
动力节点王鹤SpringBoot3笔记——第七章 视图技术Thymeleaf
目录 第七章 视图技术Thymeleaf 前言 7.1 表达式 7.2 if-for 第七章 视图技术Thymeleaf 前言 Thymeleaf 是一个表现层的模板引擎, 一般被使用在 Web 环境中,它可以处理 HTML, XML、 JS 等文档,简单来说,它可以将 JSP 作…...
从比特保存和信息保存看数字资源长期保存
引用IBM以色列海法实验室的观点,数字资源长期保存包含两个层面含义,即比特保存与信息保存。也就是说,要实现数字资源的长期保存,必须同时做到比特保存和信息保存。 一 概念 01 比特保存,也叫物理保存,主…...
兰伯特光照模型(Lambert Lighting)和半兰伯特光照模型(Half-Lanbert)
关于漫反射 光打到凹凸不平的平面上,光线会被反射到四面八方,被称为漫反射 关于这种模型,由于光线由于分散,所以进入人眼的光线强度和观察角度没有区别 在A点和B点接收到的光线强度是一样的 在漫反射下,光线强度只和光…...
Python 进阶指南(编程轻松进阶):二、环境配置和命令行
原文:http://inventwithpython.com/beyond/chapter2.html 环境配置是配置你的计算机环境,以便你写代码的过程。这包括安装任何必要的工具,配置它们,以及处理安装过程中的任何问题。没有一键配置这种傻瓜式操作过程,因为…...
求职半年,三月成功拿到阿里offer,分享一波面经...
前言 不论是校招还是社招都避免不了各种⾯试、笔试,如何去准备这些东⻄就显得格外重要。不论是笔试还是⾯试都是有章可循的,我这个“有章可循”说的意思只是说应对技术⾯试是可以提前准备,所谓不打无准备的仗就是这个道理。 以下为大家&…...
餐饮店的运营需要考虑哪些方面
餐饮店的运营需要多方面的考虑和规划,以下是传递宝APP上一些常用的餐饮店运营方法: 1.定位:明确餐饮店的定位和目标客户群体,针对不同的客户需求,提供个性化的服务和产品,比如是附近的上班族,还…...
Multi-modal Alignment using Representation Codebook
Multi-modal Alignment using Representation Codebook 题目Multi-modal Alignment using Representation Codebook译题使用表示代码集的多模态对齐期刊/会议CVPR 摘要:对齐来自不同模态的信号是视觉语言表征学习(representation learning)的…...
关于vector的emplace_back和push_back的区别
实验代码: class A { public:A(int x) {x x;cout << "construct A" << endl;}A(const A& a) {x a.x;cout << "copy construct A" << endl;}A(const A&& a) {cout << "Move construct A"…...
Vue——表单输入绑定
目录 基本用法 文本 多行文本 复选框 选择器 值绑定 复选框 单选按钮 选择器选项 修饰符 .lazy .number .trim 组件上的 v-model 在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定…...
MySQL性能优化(二)索引
文章目录优化手段准备案例索引的本质索引的数据结构不同存储引擎中索引的实践MyIsam (索引没有主次之分、都存放在MYI文件)主键索引其他索引InnoDB(数据即索引、索引即数据)主键索引——聚集索引聚集索引其他索引没有主键的情况&a…...
< 每日闲谈:你真的了解 “ ChatGPT ” 嘛 ? >
< 每日闲谈:你真的了解 “ ChatGPT ” 嘛 ? >👉 前言👉 OpenAI的创立👉 ChatGPT有何过人之处?> 效果演示👉 OpenAI看家之作 — GPT自然语言模型> GPT发展史> 里程碑-GPT3> 从…...
改善Instagram客户服务的6个技巧
Instagram仍然是全球前四大社交网络,按用户数量排名。它通过其创新的过滤器、内容创建工具、视频和卷轴选项继续增长并推动流量。这是一个平台,世界顶级名人和有影响力的人可以为全球用户提供有趣和令人印象深刻的内容。 但不仅仅是一个娱乐平台…...
8年经验之谈:4步解决测试与开发人员有争议的bug问题...
“开发认为不是bug,测试如何处理?”很多面试中,测试工程师都会被问到这个问题,不仅仅是面试,工作中测试人员也会遇到这类问题,甚至可能由于某种原因,无论是开发人员还是开发经理就是不愿修改程序…...
Linux日常小技巧shell脚本
在工作中我们常用shell脚本处理一些问题,这里整理了一些工作中常用的简单shell脚本。 定时备份文件 #!/bin/bash backup_dir="/data1/backup" src_dir="/data1/app" date_time=$(date +%Y%m%d_%H%M%S) tar -czvf ${backup_dir}/${date_time}.tar.gz ${sr…...
技术创业者必读:从验证想法到技术产品商业化的全方位解析
导语 | 技术创业之路往往充满着挑战和不确定性,对于初入创业领域的人来说,如何验证自己的创业想法是否有空间、如何选择靠谱的投资人、如何将技术产品商业化等问题都需要认真思考和解决。在「TVP 技术夜未眠」第六期直播中,正马软件 CTO、腾讯…...
Docker Registry 本地镜像发布到私有库
本地镜像发布到私有库流程 是什么1 官方Docker Hub地址:https://hub.docker.com/,中国大陆访问太慢了且准备被阿里云取代的趋势,不太主流。2 Dockerhub、阿里云这样的公共镜像仓库可能不太方便,涉及机密的公司不可能提供镜像给公…...
Pytorch构建ResNet-50V2
🍨 本文为🔗365天深度学习训练营 中的学习记录博客 🍦 参考文章地址: 365天深度学习训练营-第J2周:ResNet-50V2算法实战与解析 🍖 作者:K同学啊 一、ResNetV2与ResNet结构对比 改进点 (a)origi…...
【01】PointNet论文解析
PointNet的应用 1.点云图像的分类(整片点云是什么物体) 2.点云图像的部件分割(整片点云所代表的物体能拆分的结构) 3.点云图像的语义分割(将三维点云环境中不同的物体用不同的颜色区分开) 补充 PointN…...
nuxt.js 在IE浏览器||其他浏览不识别document/window 情况处理
1 第一步注册到nuxt.config.js文件 2 第二步建立js 文件 import Vue from vue (function(){ if(process.client){ console.log(process.client) }else{ console.log(process.client) } if (!!window.ActiveXObject || "ActiveXObject" i…...
JavaEE简单示例——基于注解的SSM整合
基于注解的SSM整合 在之前我们进行了基于XML配置文件的整合,这次我们介绍基于注解的SSM框架的整合。基于注解的含义是将我们之前所有的配置文件用java类来代替,也就是我们会在Java类中编写之前我们之前在配置文件中编写的内容。 首先我们将之前我们编写…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
