SpringBoot基础系列学习(四):Thymeleaf模板

news/2024/11/15 6:17:46/

文章目录

  • 一丶什么是模板引擎
  • 二丶Thymeleaf 介绍
  • 三丶使用
    • 引入依赖
    • 代码
    • html
    • 页面响应

一丶什么是模板引擎

模板引擎是一种将数据和模板结合起来生成最终结果的工具,它将一个模板和一个数据对象作为输入,通过模板解析和渲染生成最终的结果。通俗地说,模板引擎就是用来生成 HTML 等标记的工具。
比如
我想买裙子,这时候我会打开某宝,直接在搜索框输入“裙子”,就会出现跟裙子相关的一系列商品,各种颜色,各种样式。那我们来想一下,这么多商品的各种信息是直接全部写死在页面上的嘛?那我们每次查找的商品都不一样,需要的内存就太大了
很显然,并不是,所以这里就体现了我们模板引擎的作用,它可以根据从数据库中实时提取出来的数据对html页面实时的渲染,这,就是模板引擎。

Thymeleaf__6">二丶Thymeleaf 介绍

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP,Velocity,FreeMaker 等模板引擎类似,也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比,Thymeleaf 最大的特点是,即使不启动 Web 应用,也可以直接在浏览器中打开并正确显示模板页面 。

特点

  • 支持无网络环境下运行,由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。所以它可以让前端小姐姐在浏览器中查看页面的静态效果,又可以让程序员小哥哥在服务端查看带数据的动态页面效果。
  • 开箱即用,为Spring提供方言,可直接套用模板实现JSTL、 OGNL表达式效果,避免每天因套用模板而修改JSTL、 OGNL标签的困扰。同时开发人员可以扩展自定义的方言。
  • SpringBoot官方推荐模板,提供了可选集成模块(spring-boot-starter-thymeleaf),可以快速的实现表单绑定、属性编辑器、国际化等功能。

三丶使用

引入依赖

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

代码

java">  import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;/*** @author Administrator*/
@Controller
public class ThymeleafController {@GetMapping("/index")public ModelAndView index() {ModelAndView view = new ModelAndView();view.setViewName("index");// 设置属性view.addObject("title", "我的第一个WEB页面");view.addObject("name","白菜治");view.addObject("age","33");return view;}
}

html

java"><!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title th:text="${title}">Thymeleaf语法练习</title>
</head>
<body>
<h1 th:text="'Hello, ' + ${name} + '!'"></h1>
<p th:text="'今年, ' + ${age} + '!'"></p>
</body>
</html>

页面响应

在这里插入图片描述


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

相关文章

Instagram 青少年账户:安全新升级

2024 年 9 月份的 Meta 新闻报道中提到 Meta 在 Instagram 推出针对 18 岁以下用户的新 “青少年账户”。这一改变意义重大&#xff0c;旨在为家长守护青少年网络安全。新账户有诸多内置保护功能&#xff0c;像设置每日使用时长限制、特定时段限制访问&#xff0c;还能监控孩子…

Android GPU纹理数据拷贝

在 Android 开发中读取纹理数据有以下几种方法&#xff1a; glReadPixelsImageReaderPBO&#xff08;Pixel BufferObject&#xff09; HardwareBuffer 1. glReadPixels glReadPixels 是 OpenGL ES 的 API&#xff0c;通常用于从帧缓冲区中读取像素数据&#xff0c;OpenGL ES…

opencv实时弯道检测

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

微服务容器化部署实践(FontConfiguration.getVersion)

文章目录 前言一、整体步骤简介二、开始实战1.准备好微服务2.将各个微服务打包为镜像第一种第二种3. 将各个打包好的镜像,通过docker-compose容器编排,运行即可总结前言 docker容器化部署微服务: 将微服务容器化部署到 Docker 容器中是一个常见的做法,可以提高应用的可移…

Elasticsearch的数据类型

Elasticsearch(简称 ES)支持多种数据类型,主要分为以下几类: 1. 基本数据类型 Text:用于全文搜索的文本字段。ES 会对其内容进行分词处理。Keyword:适用于精确匹配的字段,例如名称、标签等。ES 不会对其内容分词处理。Integer:整数类型,包括 byte、short、integer 和…

显存占用 显存测试

目录 显存测试 显存占用示例 一个模型多卡占用 显存测试 import torch# 计算张量的大小&#xff08;例如&#xff1a;每个 float 占用 4 字节&#xff09; # 40GB 40 * 1024 * 1024 * 1024 字节 # 每个 float 4 字节&#xff0c;因此需要的 float 数量为 (40 * 1024 * 1024…

github高分项目 WGCLOUD - 运维实时管理工具

GitHub - tianshiyeben/wgcloud: Linux运维监控工具&#xff0c;支持系统硬件信息&#xff0c;内存&#xff0c;CPU&#xff0c;温度&#xff0c;磁盘空间及IO&#xff0c;硬盘smart&#xff0c;GPU&#xff0c;防火墙&#xff0c;网络流量速率等监控&#xff0c;服务接口监测&…

《应用数学和力学》

作者须知 1.《应用数学和力学》(Applied Mathematics and Mechanics)于1980年由我国著名科学家钱伟长先生在重庆交通大学创办&#xff0c;创刊时为季刊&#xff0c;翌年增为双月刊&#xff0c;1985年起扩大为月刊。期刊主要刊登力学、力学中的数学方法和与现代力学紧密相关的应…