SpringBoot07:Thymeleaf模板引擎

news/2025/1/11 11:51:12/

目录

一、Thymeleaf

1、模板引擎

2、引入Thymeleaf

3、Thymeleaf分析

二、测试

1、编写一个TestController

2、编写一个测试页面welcome.html放在templates目录下

3、启动项目请求测试

三、Thymeleaf语法学习

1、修改测试请求,增加数据传输

2、要使用thymeleaf,需要在html文件中导入命名空间的约束,方便提示;

3、前端页面

4、启动测试​编辑

 5、注意:

1.可以使用任意的th:arr来替换html中原生属性的值;     ​编辑

2.能写的表达式有哪些?

一、Thymeleaf

1、模板引擎

前端交给我们的页面,是html页面。如果是我们以前开发,需要把它们转成jsp页面;

  • jsp的好处就是当查出一些数据转发到JSP页面以后,可以用jsp轻松实现数据的显示及交互等。
  • jsp支持非常强大的功能,包括能写Java代码,但是SpringBoot这个项目默认不支持jsp,它是以jar的方式,不是war打包,其次用的是嵌入式的Tomcat;
  • 那不支持jsp,如果我们直接用纯静态页面的方式,给我们开发会带来非常大的麻烦,所以怎么办呢?

SpringBoot推荐你可以来使用模板引擎:
模板引擎,其实jsp就是一个模板引擎,还有用的比较多的freemarker,包括SpringBoot给我们推荐的Thymeleaf,模板引擎有非常多,但思想都是一样的:

 模板引擎的思想:
模板引擎的作用就是我们来写一个页面模板,动态值的获取方式是写一些表达式,

  • 后台封装数据:我们需要在后台封装一些数据,然后把这个模板和这个数据交给模板引擎;
  • 前台填充数据到指定位置:模板引擎按照这个数据使用表达式解析,填充到指定的位置,然后把这个数据最终生成一个我们想要的内容给写出去,这就是模板引擎。
  • 此处主要介绍SpringBoot推荐的Thymeleaf模板引擎。
    • Thymeleaf是一个高级语言的模板引擎;
    • 他们的语法更简单,功能更强大;
    • 每种语法引擎的语法有点儿不一样。

2、引入Thymeleaf

关于Thymeleaf的三个网址:

Thymeleaf官网:Thymeleaf
Thymeleaf在Github的主页:https://github.com/thymeleaf/thymeleaf
Spring官方文档:找到我们对应的版本        https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter
找到对应的pom依赖,可以适当点进原码看下本来的包:

<!--thymeleaf-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Maven会自动下载jar包:

3、Thymeleaf分析

首先按照SpringBoot的自动配置原理看一下这个Thymeleaf的自动配置规则(ThymeleafProperties.java)类,再按照这个规则使用:

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;public static final String DEFAULT_PREFIX = "classpath:/templates/";public static final String DEFAULT_SUFFIX = ".html";private boolean checkTemplate = true;private boolean checkTemplateLocation = true;private String prefix = DEFAULT_PREFIX;private String suffix = DEFAULT_SUFFIX;private String mode = "HTML";private Charset encoding = DEFAULT_ENCODING;

我们可以在其中看到默认的前缀和后缀!

只需要把html页面放在类路径下的Template下,thymeleaf就可以自动渲染页面了。

二、测试

1、编写一个TestController

@Controller
public class TestController {@GetMapping("/hello")public String hello(Model model){return "welcome";}
}

2、编写一个测试页面welcome.html放在templates目录下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
欢迎进入首页
</body>
</html>

3、启动项目请求测试

三、Thymeleaf语法学习

语法学习可以参考官网文档说明。

1、修改测试请求,增加数据传输

    @GetMapping("/hello")public String hello(Model model){model.addAttribute("userList", Arrays.asList("liwanyu","zhangsan"));model.addAttribute("msg","<h1>hello,world!!!<h1>");return "welcome";}

2、要使用thymeleaf,需要在html文件中导入命名空间的约束,方便提示;

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

3、前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
欢迎进入首页
<div th:text="${msg}"></div>
<div th:utext="${msg}"></div>
<div th:each="user:${userList}" th:text="${user}"></div>
</body>
</html>

4、启动测试

 5、注意:

1.可以使用任意的th:arr来替换html中原生属性的值;
     

2.能写的表达式有哪些?

Simple expressions:Variable Expressions: ${...}Selection Variable Expressions: *{...}Message Expressions: #{...}Link URL Expressions: @{...}Fragment Expressions: ~{...}
LiteralsText literals: 'one text' , 'Another one!' ,…Number literals: 0 , 34 , 3.0 , 12.3 ,…Boolean literals: true , falseNull literal: nullLiteral tokens: one , sometext , main ,…
Text operations:String concatenation: +Literal substitutions: |The name is ${name}|
Arithmetic operations:Binary operators: + , - , * , / , %Minus sign (unary operator): -
Boolean operations:Binary operators: and , orBoolean negation (unary operator): ! , not
Comparisons and equality:Comparators: > , < , >= , <= ( gt , lt , ge , le )Equality operators: == , != ( eq , ne )
Conditional operators:If-then: (if) ? (then)If-then-else: (if) ? (then) : (else)Default: (value) ?: (defaultvalue)
Special tokens:Page 17 of 106No-Operation: _

完结,撒花✿✿ヽ(°▽°)ノ✿·~~~~~~~


http://www.ppmy.cn/news/819823.html

相关文章

面试问题总结目录

目录 一 vue 面试题keep-alive理解父子组件传值$nextTick的理解和作用虚拟dom和真实dom 二 vue 生命周期面试题vue生命周期理解第一次加载页面会触发的钩子函数常用钩子函数适用的场景vue 父子组件的渲染顺序vue父子组件销毁的顺序 三 vuex面试题vuex是什么vuex属性及使用方法 …

瑞芯微 RK356x 基于Android11移植usb接口rtl8723du wifi和蓝牙一体化

开发环境 平台: 瑞芯微RK356x 操作系统&#xff1a;Android11 WiFi、蓝牙芯片:RTL8723DU 通讯类型&#xff1a;USB协议 RTL8723du介绍 Realtek RTL8723DU是一个高度集成的单片机802.11b/g/n 1T1R WLAN&#xff0c;和一个集成的蓝牙2.1/4.2单片机&#xff0c;USB 2.0多功能。…

Markdown语法

Markdown语法 目录 Markdown语法简介&#xff08;不需要的朋友可以跳过&#xff09;Markdown是什么举个例子更为官方的定义Markdown的背景 Markdown可以用来做什么呢&#xff1f; 标题篇效果 这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题 语法另…

HTML 教程(一文彻底搞懂HTML)

目录 HTML 教程- (HTML5 标准) HTML 简介 什么是HTML? HTML 标签 HTML 元素 Web 浏览器 HTML 网页结构 HTML版本 声明 通用声明 中文编码 HTML 编辑器 HTML 编辑器推荐 VS Code HTML 基础- 4个实例 HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 元素 HTML …

打印系统开发(56)——打印机驱动程序设计指南

一、打印机驱动程序设计指南&#xff08;微软&#xff09; https://docs.microsoft.com/zh-cn/windows-hardware/drivers/print/ 1、GPD 文件简介 https://docs.microsoft.com/zh-cn/windows-hardware/drivers/print/introduction-to-gpd-files 2、PPD 文件 https://docs.…

计算机执行某种操作的命令被称为___,计算机应用基础作业一-答案

《计算机应用基础作业一-答案》由会员分享,可在线阅读,更多相关《计算机应用基础作业一-答案(4页珍藏版)》请在人人文库网上搜索。 1、作业一一、单选题( 40 1分)1、一般认为,世界上第一台电子数字计算机诞生于 。A : 1946年 B :1952年 C : 1959年 D : 1962年 答案: A2…

个人电脑数据的安全防护之------《硬盘的日常保养》

写在前面的话 从去年离职回家到现在也有一段时间了,曾经到昨天为止问过我有关这个问题的朋友有很多,索性今天写篇文档记录一下.省得下次还有朋友问题这样的问题.或者避免还有朋友可能会出现这样的问题.让朋友做到提前预防的目的.从而做到减少重要文件(数据)丢失的损失.现在就索…

个人电脑数据的安全防护之------硬盘的日常保养

写在前面的话 从去年离职回家到现在也有一段时间了,曾经到昨天为止问过我有关这个问题的朋友有很多,索性今天写篇文档记录一下.省得下次还有朋友问题这样的问题.或者避免还有朋友可能会出现这样的问题.让朋友做到提前预防的目的.从而做到减少重要文件(数据)丢失的损失.现在就索…