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.hqwc.cn/news/297825.html

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

相关文章

概率中的 50 个具有挑战性的问题 [05/50]:正方形硬币

一、说明 我最近对与概率有关的问题产生了兴趣。我偶然读到了弗雷德里克莫斯特勒&#xff08;Frederick Mosteller&#xff09;的《概率论中的五十个具有挑战性的问题与解决方案》&#xff09;一书。我认为创建一个系列来讨论这些可能作为面试问题出现的迷人问题会很有趣。每篇…

Axios 中的文件上传 File对象的方法

使用 FormData 对象 FormData是一个用于创建表单数据的 API&#xff0c;可用于发送包含文件和其他表单数据的multipart/form-data请求。这是处理文件上传的常用方法。通过FormData对象&#xff0c;可以将文件数据添加到表单中&#xff0c;然后使用 Axios 的post或put方法发送请…

“VR全景+”理念下的智慧教育,让VR教学成为趋势

随着VR技术的发展&#xff0c;“VR全景”理念下的智慧教育&#xff0c;从智慧学习环境和新型教学模式两个方面来促进教育进一步革新。VR技术应用在教育领域&#xff0c;对于教学来说是一个飞跃的发展&#xff0c;5G课堂、VR直播教学、沉浸式教学等教学模式的创新&#xff0c;让…

面向对象进阶

第一章 类 1.1 如何定义类 类的定义格式如下: 修饰符 class 类名 {// 1.成员变量&#xff08;属性&#xff09;// 2.成员方法 (行为) // 3.构造方法 &#xff08;初始化类的对象数据的&#xff09; }例如: public class Student {// 1.成员变量public String name ;public c…

sql-labs服务器结构

双层服务器结构 一个是tomcat的jsp服务器&#xff0c;一个是apache的php服务器&#xff0c;提供服务的是php服务器&#xff0c;只是tomcat向php服务器请求数据&#xff0c;php服务器返回数据给tomcat。 此处的29-32关都是这个结构&#xff0c;不是用docker拉取的镜像要搭建一下…

【贪心】最小生成树Kruskal算法Python实现

文章目录 [toc]问题描述最小生成树的性质证明 Kruskal算法时间复杂性Python实现 个人主页&#xff1a;丷从心 系列专栏&#xff1a;贪心算法 问题描述 设 G ( V , E ) G (V , E) G(V,E)是无向连通带权图&#xff0c; E E E中每条边 ( v , w ) (v , w) (v,w)的权为 c [ v ] …

Python入门学习篇(七)——列表切片字符串切片

1 列表切片 1.1 语法结构 列表的变量名[start:end:step] """ start表示截取的开始位置(下标从0 开始)&#xff0c;不填是默认是0 end截取的最后一个元素位置1, 不填是截取到最后一个元素 step 每隔几个(step-1)去获取值,默认没填时,step值为1 因而 取值范围为…

java并发编程十 原子累加器和Unsafe

文章目录 原子累加器cas 锁原理之伪共享 UnsafeUnsafe CAS 操作 原子累加器 累加器性能比较 private static <T> void demo(Supplier<T> adderSupplier, Consumer<T> action) {T adder adderSupplier.get();long start System.nanoTime();List<Thread…

嵌入式开发——DMA外设到内存

学习目标 加强理解DMA数据传输过程加强掌握DMA的初始化流程掌握DMA数据表查询理解源和目标的配置理解数据传输特点能够动态配置源数据学习内容 需求 uint8_t data; 串口接收(&data);data有数据了 实现串口的数据接收,要求采用dma的方式。 数据交互流程 CPU配置好DMA外…

基于Java+SpringMvc+Vue求职招聘系统详细设计实现

基于JavaSpringMvcVue求职招聘系统详细设计实现 &#x1f345; 作者主页 专业程序开发 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 文章目录 基于JavaSpringMvcVue求职招聘系统详细设计实现一、前言介…

鸿蒙开发语言介绍--ArkTS

1.编程语言介绍 ArkTS是HarmonyOS主力应用开发语言。它在TypeScript (简称TS)的基础上&#xff0c;匹配ArkUI框架&#xff0c;扩展了声明式UI、状态管理等相应的能力&#xff0c;让开发者以更简洁、更自然的方式开发跨端应用。 2.TypeScript简介 自行补充TypeScript知识吧。h…

【MySQL学习笔记008】多表查询

1、多表关系 概述&#xff1a;项目开发中&#xff0c;在进行数据库表结构设计时&#xff0c;会根据业务需求及业务模块之间的关系&#xff0c;分析并设计表结构&#xff0c;由于业务之间相互关联&#xff0c;所以各个表结构之间也存在着各种联系&#xff0c;基本上可分为三种&a…