Spring Boot学习随笔- 第一个Thymeleaf应用(基础语法th:,request、session作用域取值)

学习视频:【编程不良人】2021年SpringBoot最新最全教程

第十五章、Thymeleaf

Thymeleaf是一种现代化的服务器端Java模板引擎,专门用于Web和独立环境。Thymeleaf在有网络和无网络的环境下皆可运行,即可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。它与Spring Boot集成良好,是Spring Boot官方支持的模板引擎之一。

  • 比较其他模板引擎

    目前主流模板引擎:Thymeleaf、FreeMarker、Groovy和Mustache

    整体来说:FreeMarker在性能方面略有优势,但Thymeleaf在整体上胜出

注意:jsp可以直接在服务器访问,而Thymeleafa必须要经过控制器跳转访问

第一个Thymeleafaf网页

  1. 引入依赖

    <dependency><groupId>org.springframework.boot</groupId><artifactId>**spring-boot-starter-thymeleaf**</artifactId>
    </dependency>
    
  2. 配置thymeleaf模板配置

    # THYMELEAF (ThymeleafAutoConfiguration)
    spring:thymeleaf:cache: false # 开启模板缓存(默认值: true ) 开发过程中改成falsecheck-template: true # 检查模板是否存在,然后再呈现check-template-location: true # 检查模板位置是否正确(默认值 :true )servlet:content-type: text/html #Content-Type 的值(默认值: text/html )enabled: true # 开启 MVC Thymeleaf 视图解析(默认值: true )encoding: UTF-8 # 模板编码excluded-view-names:  # 要被排除在解析之外的视图名称列表,⽤逗号分隔mode: HTML5 # 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值: HTML5)prefix: # 在构建 URL 时添加到视图名称前的前缀(默认值: classpath:/templates/ )suffix: # 在构建 URL 时添加到视图名称后的后缀(默认值: .html )
    
  3. 创建thymeleaf页面

  4. 开发Controller跳转thymeleaf

    @Controller
    @RequestMapping("hello")
    public class HelloController {@RequestMapping("hello")public String hello() {System.out.println("hello thymeleaf ");return "index";}
    }
    

Thymeleaf语法使用

  1. html使用thymeleaf语法,必须引入命名空间

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

    **th 可以用于html标签的任意属性,非常方便,它允许在HTML、XML、JavaScript、CSS甚至纯文本中处理模板。th命名空间允许我们在HTML标签的任何属性中使用Thymeleaf表达式,这样我们可以将模型数据动态地绑定到HTML标签的属性中。**

  2. 基本数据传递,**th:text**属性取值

    @RequestMapping("demo")
    public String demo(HttpServletRequest request, Model model) {System.out.println("hello thymeleaf ");request.setAttribute("name", "小陈");model.addAttribute("age", 22);return "demo";
    }
    
    <!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head><meta charset="UTF-8"><title>测试thymeleaf语法</title>
    </head>
    <body><h1>thymeleaf基本语法</h1>thymeleaf取值的方式和jstl差不多,不过必须要在html标签里使用,通过${},括号
    里面填入作用域存的属性名<h4>获取request作用域的基本数据 <span **th:text="${name}"**></span></h4><h4>获取request作用域的基本数据 <span **th:text="${age}"**></span></h4>
    </body>
    </html>
    
    • th:utext 属性

      **th:utext**会将文本内容作为原始HTML代码进行处理,不会进行HTML转义。这意味着如果后端传递的文本内容包含HTML标签,这些标签会被直接渲染为HTML元素,而不是作为纯文本显示。

    • 直接在标签的value前面加上th前缀,也可以取值,例如:

      <input type="text" name="name" **th:value="${name}"**>
      
  3. 获取对象类型

    <h2>获取对象类型:</h2>
    <table border="1" width="500"><tr><th>id</th><th>name</th><th>salary</th><th>birthday</th></tr><tr><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.salary}"></td><!--格式化日期--><td th:text="${#dates.format(user.birthday,'yyyy-MM-dd HH:mm:ss')}"></td></tr>
    </table>
    
  4. 获取集合类型

    通过th:each属性进行遍历,例如**th:each="user:${users}"**

    <h2>获取集合类型:</h2>
    <!--遍历集合:th:each-->
    <table border="1" width="500"><tr><th>id</th><th>name</th><th>salary</th><th>birthday</th></tr><tr **th:each="user:${users}"**><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.salary}"></td><!--格式化日期--><td th:text="${#dates.format(user.birthday,'yyyy-MM-dd HH:mm:ss')}"></td></tr>
    </table>
    

    执行效果:成功获取

    • 通过遍历状态获取信息

      <tr th:each="user,state:${users}"><td th:text="计数+${state.count}"></td><td th:text="'判断偶数行:'+${state.odd}"></td><td th:text="'判断奇数行:'+${state.even}"></td><td th:text="'集合长度=:'+${state.size}"></td><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.salary}"></td><!--格式化日期--><td th:text="${#dates.format(user.birthday,'yyyy-MM-dd HH:mm:ss')}"></td>
      </tr>
      

      执行效果:

  5. 通过th:if有条件展示数据

    <div th:if="${user.role == 'admin'}"><p>您是管理员,拥有特殊权限。</p>
    </div>
    <div th:if="${user.role == 'manager'}"><p>您是经理,可以管理团队。</p>
    </div>
    <div th:if="${user.role == 'employee'}"><p>您是普通员工,完成日常工作。</p>
    </div>
    
  6. 获取session作用域数据,加上session前缀即可

    <h2>获取session作用域中数据:<span th:text="${session.name}"></span></h2>
    
  7. 获取项目名地址

    通过**th:href=”@{/demo.css}”**的方式获取,常用于重定向跳转的时候访问不到css文件的时候,使用根目录路径

    <link rel="stylesheet" th:href="@{/demo.css}">
    

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

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

相关文章

34. 在排序数组中查找元素的第一个和最后一个位置

34. 在排序数组中查找元素的第一个和最后一个位置 题目链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 代码如下&#xff1a; class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {vector<int> range…

下载MySQL Connector/C++

MySQL :: Download Connector/C

MySQL 一个线程(或事务)在更新表时,另一个线程能否读取这个表

在MySQL中&#xff0c;一个线程&#xff08;或事务&#xff09;在更新表时&#xff0c;另一个线程能否读取这个表主要取决于两个因素&#xff1a;使用的事务隔离级别和锁的类型。MySQL默认使用行级锁&#xff0c;这意味着锁定的范围相对较小&#xff0c;通常不会锁定整个表。下…

智能优化算法应用:基于向量加权平均算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于向量加权平均算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于向量加权平均算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.向量加权平均算法4.实验参数设定…

《C++避坑神器·二十五》简单搞懂json文件的读写之遍历json文件读写

json.hpp库放在文章末尾 1、遍历json文件读写 &#xff08;1&#xff09;插入新键值对到json之情形1 原来json文件如下所示&#xff1a; {"Connection": {"IpAddress": "192.168.20.1","Rock": 0,"Solt": 1}, "Data…

Springboot的测试类出现java.lang.Exception: No runnable methods的解决方法(万能)

目录 1. 问题所示2. 原理分析3. 解决方法4. 补充1. 问题所示 使用Springboot测试的时候出现如下问题: 十二月 24, 2023 6:33:12 下午 org.junit.vintage.engine.discovery.TestCl

opencv入门到精通——形态学转换

目录 目标 理论 1. 侵蚀 2. 扩张 3. 开运算 4. 闭运算 5. 形态学梯度 6. 顶帽 7. 黑帽 结构元素 目标 在这一章当中&#xff0c; 我们将学习不同的形态学操作&#xff0c;例如侵蚀&#xff0c;膨胀&#xff0c;开运算&#xff0c;闭运算等。我们将看到不同的功能&…

前端---html 的介绍

1. 网页效果图 --CSDN 2. html的定义 HTML 的全称为&#xff1a;HyperText Mark-up Language, 指的是超文本标记语言。 标记&#xff1a;就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等&#xff0c;标签大多数都是…

【数据结构】查找与排序

要查询信息&#xff0c;涉及两个问题&#xff1a; 在哪里查&#xff1f;——查找表 怎么查&#xff1f;——查找方法 一.查找 1.查找表的定义&#xff1a; 查找表是由同类型的数据元素构成的集合 2.对查找表的基本操作&#xff1a; 1&#xff09;查询某个数据元素是否在查…

MY FILE SERVER: 1

下载地址 https://download.vulnhub.com/myfileserver/My_file_server_1.ova 首先我们需要发现ip 我的kali是59.162所以167就是靶机的 然后我们拿nmap扫一下端口 nmap -sV -p- 192.168.59.167 扫完发现有七个端口开放 按照习惯先看80 没看到有啥有用信息,用nikto扫一下 nik…

20231225使用荣耀HONOR70的手机通过BLE调试助手接收BLE广播

20231225使用荣耀HONOR70的手机通过BLE调试助手接收BLE广播 2023/12/25 16:33 结论&#xff1a;我买的 荣耀HONOR70的手机&#xff08;CPU型号&#xff1a;骁龙778G&#xff09; 的蓝牙BLE的连接速度明显弱于 Redmi Note12Pro 5G&#xff08;CPU型号&#xff1a;天玑1080&#…

【网安 | 网络协议】ARP协议(地址解析协议)

前言 在使用nmap时可以使用-PR指令&#xff0c;通过发送ARP请求包进行主机存活探测。 那么这一过程的原理是什么呢&#xff1f; 在了解什么是ARP协议后&#xff0c;问题就迎刃而解了。 概念 地址解析协议&#xff0c;即ARP&#xff08;Address Resolution Protocol&#xf…

基于Hexo+GitHub Pages 的个人博客搭建

基于HexoGitHub Pages 的个人博客搭建 步骤一&#xff1a;安装 Node.js 和 Git步骤二&#xff1a;创建Github Pages 仓库步骤二&#xff1a;安装 Hexo步骤三&#xff1a;创建 Hexo 项目步骤四&#xff1a;配置 Hexo步骤五&#xff1a;创建新文章步骤六&#xff1a;生成静态文件…

git命令和docker命令

1、git git是分布式的版本控制工具 git可以通过本地仓库管理文件的历史版本记录 # 本地仓库操作的命令 # 初始化本地库 git init # 添加文件到暂存区 git add . git checkout 暂存区要撤销的文件名称 # 提交暂存区文件 git commit -m 注释# 版本穿梭 # 查看提交记录 git log…

dpdk原理概述及核心源码剖析

dpdk原理 1、操作系统、计算机网络诞生已经几十年了&#xff0c;部分功能不再能满足现在的业务需求。如果对操作系统做更改&#xff0c;成本非常高&#xff0c;所以部分问题是在应用层想办法解决的&#xff0c;比如前面介绍的协程、quic等&#xff0c;都是在应用层重新开发的框…

MongoDB数据库本地部署并结合内网穿透实现navicat公网访问

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 前言 MongoDB是一个基于分布式文件存储的数…

Jave EE 网络原理之网络层与数据链路层

文章目录 1. 网络层1.1 IP 协议1.1.1 协议头格式1.1.2 地址管理1.1.2.1 认识 IP 地址 1.1.3 路由选择 2. 数据链路层2.1 认识以太网2.1.1 以太网帧格式2.1.2 DNS 应用层协议 1. 网络层 网络层要做的事情&#xff0c;主要是两个方面 地址管理 &#xff08;制定一系列的规则&am…

springboot整合thymeleaf

SpringBoot整合Thymeleaf SpringBoot整合Thymeleaf非常简单&#xff0c;只需要在pom.xml中引入Thymeleaf的依赖即可。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> <…

解决ELement-UI三级联动数据不回显

目录 一.处理数据时使用this.$set方法来动态地设置实例中的属性&#xff0c;以确保其响应式。 二.检查数据格式是否正确 三.绑定v-if 确保每次执行 四.完整代码 一.处理数据时使用this.$set方法来动态地设置实例中的属性&#xff0c;以确保其响应式。 二.检查数据格式是否正确…

BFS解决FloodFill算法相关leetcode算法题

文章目录 1.图像渲染2.岛屿数量3.岛屿的最大面积4.被围绕的区域 1.图像渲染 图像渲染 class Solution {int dx[4] {0,0,1,-1};int dy[4] {1,-1,0,0}; public:vector<vector<int>> floodFill(vector<vector<int>>& image, int sr, int sc, int…