当前位置: 首页 > news >正文

动力节点王鹤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 是一个表现层的模板引擎&#xff0c; 一般被使用在 Web 环境中&#xff0c;它可以处理 HTML, XML、 JS 等文档&#xff0c;简单来说&#xff0c;它可以将 JSP 作…...

从比特保存和信息保存看数字资源长期保存

引用IBM以色列海法实验室的观点&#xff0c;数字资源长期保存包含两个层面含义&#xff0c;即比特保存与信息保存。也就是说&#xff0c;要实现数字资源的长期保存&#xff0c;必须同时做到比特保存和信息保存。 一 ​概念 01 比特保存&#xff0c;也叫物理保存&#xff0c;主…...

兰伯特光照模型(Lambert Lighting)和半兰伯特光照模型(Half-Lanbert)

关于漫反射 光打到凹凸不平的平面上&#xff0c;光线会被反射到四面八方&#xff0c;被称为漫反射 关于这种模型&#xff0c;由于光线由于分散&#xff0c;所以进入人眼的光线强度和观察角度没有区别 在A点和B点接收到的光线强度是一样的 在漫反射下&#xff0c;光线强度只和光…...

Python 进阶指南(编程轻松进阶):二、环境配置和命令行

原文&#xff1a;http://inventwithpython.com/beyond/chapter2.html 环境配置是配置你的计算机环境&#xff0c;以便你写代码的过程。这包括安装任何必要的工具&#xff0c;配置它们&#xff0c;以及处理安装过程中的任何问题。没有一键配置这种傻瓜式操作过程&#xff0c;因为…...

求职半年,三月成功拿到阿里offer,分享一波面经...

前言 不论是校招还是社招都避免不了各种⾯试、笔试&#xff0c;如何去准备这些东⻄就显得格外重要。不论是笔试还是⾯试都是有章可循的&#xff0c;我这个“有章可循”说的意思只是说应对技术⾯试是可以提前准备&#xff0c;所谓不打无准备的仗就是这个道理。 以下为大家&…...

餐饮店的运营需要考虑哪些方面

餐饮店的运营需要多方面的考虑和规划&#xff0c;以下是传递宝APP上一些常用的餐饮店运营方法&#xff1a; 1.定位&#xff1a;明确餐饮店的定位和目标客户群体&#xff0c;针对不同的客户需求&#xff0c;提供个性化的服务和产品&#xff0c;比如是附近的上班族&#xff0c;还…...

Multi-modal Alignment using Representation Codebook

Multi-modal Alignment using Representation Codebook 题目Multi-modal Alignment using Representation Codebook译题使用表示代码集的多模态对齐期刊/会议CVPR 摘要&#xff1a;对齐来自不同模态的信号是视觉语言表征学习&#xff08;representation learning&#xff09;的…...

关于vector的emplace_back和push_back的区别

实验代码&#xff1a; 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​ 在前端处理表单时&#xff0c;我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定…...

MySQL性能优化(二)索引

文章目录优化手段准备案例索引的本质索引的数据结构不同存储引擎中索引的实践MyIsam &#xff08;索引没有主次之分、都存放在MYI文件&#xff09;主键索引其他索引InnoDB&#xff08;数据即索引、索引即数据&#xff09;主键索引——聚集索引聚集索引其他索引没有主键的情况&a…...

< 每日闲谈:你真的了解 “ ChatGPT ” 嘛 ? >

< 每日闲谈&#xff1a;你真的了解 “ ChatGPT ” 嘛 &#xff1f; >&#x1f449; 前言&#x1f449; OpenAI的创立&#x1f449; ChatGPT有何过人之处&#xff1f;> 效果演示&#x1f449; OpenAI看家之作 — GPT自然语言模型> GPT发展史> 里程碑-GPT3> 从…...

改善Instagram客户服务的6个技巧

Instagram仍然是全球前四大社交网络&#xff0c;按用户数量排名。它通过其创新的过滤器、内容创建工具、视频和卷轴选项继续增长并推动流量。这是一个平台&#xff0c;世界顶级名人和有影响力的人可以为全球用户提供有趣和令人印象深刻的内容。 但不仅仅是一个娱乐平台&#xf…...

8年经验之谈:4步解决测试与开发人员有争议的bug问题...

“开发认为不是bug&#xff0c;测试如何处理&#xff1f;”很多面试中&#xff0c;测试工程师都会被问到这个问题&#xff0c;不仅仅是面试&#xff0c;工作中测试人员也会遇到这类问题&#xff0c;甚至可能由于某种原因&#xff0c;无论是开发人员还是开发经理就是不愿修改程序…...

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…...

技术创业者必读:从验证想法到技术产品商业化的全方位解析

导语 | 技术创业之路往往充满着挑战和不确定性&#xff0c;对于初入创业领域的人来说&#xff0c;如何验证自己的创业想法是否有空间、如何选择靠谱的投资人、如何将技术产品商业化等问题都需要认真思考和解决。在「TVP 技术夜未眠」第六期直播中&#xff0c;正马软件 CTO、腾讯…...

Docker Registry 本地镜像发布到私有库

本地镜像发布到私有库流程 是什么1 官方Docker Hub地址&#xff1a;https://hub.docker.com/&#xff0c;中国大陆访问太慢了且准备被阿里云取代的趋势&#xff0c;不太主流。2 Dockerhub、阿里云这样的公共镜像仓库可能不太方便&#xff0c;涉及机密的公司不可能提供镜像给公…...

Pytorch构建ResNet-50V2

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客 &#x1f366; 参考文章地址&#xff1a; 365天深度学习训练营-第J2周&#xff1a;ResNet-50V2算法实战与解析 &#x1f356; 作者&#xff1a;K同学啊 一、ResNetV2与ResNet结构对比 改进点 (a)origi…...

【01】PointNet论文解析

PointNet的应用 1.点云图像的分类&#xff08;整片点云是什么物体&#xff09; 2.点云图像的部件分割&#xff08;整片点云所代表的物体能拆分的结构&#xff09; 3.点云图像的语义分割&#xff08;将三维点云环境中不同的物体用不同的颜色区分开&#xff09; 补充 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配置文件的整合&#xff0c;这次我们介绍基于注解的SSM框架的整合。基于注解的含义是将我们之前所有的配置文件用java类来代替&#xff0c;也就是我们会在Java类中编写之前我们之前在配置文件中编写的内容。 首先我们将之前我们编写…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...