程序员经验分享-hwhale

Spring Boot——Thymeleaf

2023-05-16

???

哈喽！大家好，我是【】，一位上进心十足的【Java领域博主】！???

【】的写作风格：喜欢用【通俗易懂】的文笔去讲解每一个知识点，而不喜欢用【高大上】的官方陈述。

【】博客的领域是【面向后端技术】的学习，未来会持续更新更多的【后端技术】以及【学习心得】。

如果有对【后端技术】感兴趣的【小可爱】，欢迎关注【】???

感谢各位大可爱小可爱！

目录

一、背景

二、Thymeleaf

2.1特点

2.2使用

三、Thymeleaf语法

3.1 ${}: 标准变量表达式

3.2 选择变量表达式?*{} 和 th:object

3.3 链接(URL)表达式 和 th:href

3.4 th标签之th:action

3.5 th标签之th:each

3.6 th标签之th:switch/th:case

结语

一、背景

我们之前开发，我们需要将前端转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。

jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar的方式，不是war，其二，我们用的还是嵌入式的Tomcat，所以呢，他现在默认是不支持jsp的。

那该怎么办呢？

SpringBoot推荐我们可以来使用模板引擎。

什么是模板引擎？

模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。

SpringBoot给我们推荐的模板引擎就是Thymeleaf，这模板引擎是一个高级语言的模板引擎，他的这个语法更简单，而且功能更强大。

二、Thymeleaf

2.1特点

（1）thymeleaf模板引擎既能用于web环境下，也能用于非web环境下，在非web环境下，它能直接显示模板上的静态数据，在web环境下，它能像jsp一样从后台接收数据并替换掉模板上的静态数据。

（2）thymeleaf是基于html的，以html标签为载体，thymeleaf要寄托在html的标签下实现对数据的展示。

2.2使用

Thymeleaf的使用非常简单，只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。

(1)导入依赖

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

（2）在resources下建立一个目录templates

（3）编写test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

(4)编写 Controller类

package com.yixin.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MyController {
    @RequestMapping("/test")
    public String test1(){
        return "test";
    }
}

（5)运行

测试成功！说明成功访问到了templates目录。

三、Thymeleaf语法

由于Thymeleaf的语法太多了，只在这里讲几个常见的语法，对于其它的语法可以前往官网进行查阅

官网：Thymeleaf

常见的语法

  • ${}: 标准变量表达式
  • 选择变量表达式*{} 和 th:object
  • 链接(URL)表达式 和 th:href
  • th标签之th:action
  • th标签之th:each
  • th标签之th:switch/th:case

前提：

导入thymeleaf的名称空间

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

3.1 ${}: 标准变量表达式

Controller:

@RequestMapping("/test2")
public String test2(Model model) {

        model.addAttribute("msg", "标准变量表达式");

        Blog blog=new Blog();
        blog.setId(1);
        blog.setName("yixin");
        blog.setPwd("123");

        model.addAttribute("blog",blog);
        return "test";
        }

test.html：

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

<br>
<span th:text="${msg}">span默认文本内容</span><br/>
<!--th:text；改变当前元素里面的文本内容；-->
<br>
id: <span th:text="${blog.id}">xx</span>
name: <span th:text="${blog.name}">xxx</span>
pwd: <span th:text="${blog.pwd}">xxx</span>
</body>
</html>

运行：

3.2 选择变量表达式*{} 和 th:object

*{}: 选择变量表达式

标准变量表达式和选择变量表达式可以混合使用 ;

先用 th:object来绑定 blog 对象, 然后用 * 来代表这个 blog对象

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

<span th:text="${msg}">span默认文本内容</span><br/>
<div th:object="${blog}">
    id: <span th:text="*{id}">xxx</span>
    name: <span th:text="*{name}">xxx</span>
    age: <span th:text="*{pwd}">xxx</span>

    <br/>
    id: <span th:text="${blog.id}">xxx</span>
    name: <span th:text="${blog.name}">xxx</span>
    age: <span th:text="${blog.pwd}">xxx</span>
</div>
</body>
</html>

运行：

3.3 链接(URL)表达式 和 th:href

使用说明：

URL表达式

语法：@{…}

URL表达式可用于

（1）绝对URL，比如：

查看

(2)相对URL，相对于页面，比如：

查看

(3)相对于URL，相对于项目上下文，比如：

查看（项目的上下文名会被自动添加）

Controller类：

@RequestMapping("/test2")
public String test2(Model model) {
        model.addAttribute("msg", "标准变量表达式");

        Blog blog=new Blog();
        blog.setId(1);
        blog.setName("yixin");
        blog.setPwd("123");

        model.addAttribute("blog",blog);
        return "test3";
        }

@RequestMapping("/blog")
@ResponseBody
public String getUserById(Integer id) {

        System.out.println("id=" + id);
        return "id=" + id;
        }

test3.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<a href="test.html" th:href="'http://localhost:8080/blog?id=' + ${blog.id}">博客id</a>
<a href="#" th:href="@{'http://localhost:8080/blog?id=' + ${blog.id}}">博客id</a>
</body>
</html>

运行：

3.4 th标签之th:action

Controller类：

@RequestMapping("/test2")
public String test2(Model model) {

        model.addAttribute("msg", "标准变量表达式");
        Blog blog=new Blog();
        blog.setId(1);
        blog.setName("yixin");
        blog.setPwd("123");
        model.addAttribute("blog",blog);

        return "test4";
        }

@RequestMapping("/blog")
@ResponseBody
public String getUserById(Integer id) {
        System.out.println("id=" + id);
        return "id=" + id;
        }

test4.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<form th:action="@{/blog}">
 id:<input type="text" name="id" value=""/>
 <input type="submit" value="提交" />
</form>
</body>
</html>

运行：

3.5 th标签之th:each

Controller类：

@RequestMapping("/test2")
public String test2(Model model) {

        model.addAttribute("msg", "标准变量表达式");
        Blog blog=new Blog();
        blog.setId(1);
        blog.setName("yixin");
        blog.setPwd("123");

        model.addAttribute("blog",blog);
        return "test4";
        }

@RequestMapping("/blogList")
public String hello(Model model) {
        List<Blog> blogList = new ArrayList<>();

        for (int i = 1; i <= 3; i++) {
        Blog blog=new Blog();
        blog.setId(i);
        blog.setPwd("abcd"+i);
        blog.setName("一心"+i);
        blogList.add(blog);
        }

        model.addAttribute("blogList", blogList);
        return "test5";
        }

test5.html：

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

 <p th:each="blog: ${blogList}">
 <span th:text="${blog.id}" >xxx</span>
 <span th:text="${blog.name}" >xxx</span>
 <span th:text="${blog.pwd}" >xxx</span>
</p>

</body>
</html>

运行：

3.6 th标签之th:switch/th:case

Controller类：

@RequestMapping("/test2")
public String test2(Model model) {

        model.addAttribute("msg", "标准变量表达式");

        Blog blog=new Blog();
        blog.setId(1);
        blog.setName("yixin");
        blog.setPwd("123");

        model.addAttribute("blog",blog);
        return "test6";
        }

test6.html：

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

<tr>
 <td>昵称：</td>
 <td th:switch="${blog.id}">
 <span th:case="1">一心</span>
 <span th:case="2">张三</span>
 </td>
</tr>

</body>
</html>

运行：

结语

以上就是【】对Thymeleaf的知识点和基本使用的讲解了，对于Thymeleaf这个模板引擎，说实话还是非常好用的，甚至个人觉得比jsp还强大，大家也可以自己亲手敲一遍代码，这样对知识的巩固有很大帮助，如果文章中有哪些地方讲得不是很好，欢迎大家提出来，让我们共同进步。

最后

深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

小编已加密：aHR0cHM6Ly9kb2NzLnFxLmNvbS9kb2MvRFVrVm9aSGxQZUVsTlkwUnc==出于安全原因，我们把网站通过base64编码了，大家可以通过base64解码把网址获取下来。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Spring

Boot

Thymeleaf

Spring Boot——Thymeleaf 的相关文章

随机推荐

  • jar命令之替换已有jar包依赖库的版本

    背景 由于项目使用的是nacos1 1 4 xff0c 其依赖的fastjson的版本为1 2 58 xff0c 包含了AVD 2022 1243027和AVD 2022 1243027的 fastjson lt 61 1 2 80 反序列

  • Java项目热部署方案之IDEA-HotSwapAgent和DCEVM大法

    一 环境准备 HotSwapAgent xff08 http hotswapagent org xff09 依赖 DCEVM 而 DCEVM要求jdk版本必须对应 xff0c 如果你用的 jdk1 8 xff0c 首先需要确认安装的是jdk

  • 使用rclone将本机文件或文件夹导入minIO

    一 背景 minio大量文件上传 xff0c 通过console xff0c web端控制台上传的话是可以的 xff0c 但是文件量太大 xff0c 效率很低 xff0c 就想办法上传服务器 xff0c 然后读取服务器文件的方式进行 二 过

  • 记录一次docker容器引起的时间相差8h的问题

    一 背景 系统打印日志时间小8h xff0c 部分插入mysql的日期却大8h xff0c 简直诡异 测试时间是上午10 05 经过排查 xff0c mysql设置的时区 xff0c 链接url设置的时区都是ok的 而且有其他服务时间正常

  • c++常见面试题30道

    转自 xff1a http blog csdn net shihui512 article details 9092439 xff1b 1 new delete malloc free 关系 delete会调用对象的析构函数 和 new 对

  • __attribute__ 机制详解

    attribute 语法的来源 GNU C 的一大特色就是 attribute 机制 attribute 可以设置函数属性 xff08 Function Attribute xff09 变量属性 xff08 Variable Attribu

  • 进程和线程的理解

    一 进程和线程的概念 xff08 一句话概述 xff09 进程 xff1a 我们运行的程序通常会对应一个或多个进程 xff0c 进程是操作系统分配内存的基本单位 线程 xff1a 一个进程通常会包含一个或多个线程 xff0c 线程是操作系统

  • ubuntu中sudo apt-get install 出现 failed to fetch

    在ubuntu中 安装samba时 xff08 sudo apt get install samba xff09 出现 failed to fetch 通过以下方式成功解决了 xff1a 我直接更新了下就解决了 通过sudo apt get

  • Docker删除镜像和容器

    一 删除容器 首先需要停止所有的容器 xff08 只停止单个时把后面的变量改为image id即可 xff09 docker stop docker ps a q 删除所有的容器 xff08 只删除单个时把后面的变量改为image id即可

  • 【读书】只读经典

    本文摘自豆瓣上 八百步 的收集的资料 xff1a http book douban com review 5289501 Ch 1 xff1a 管理 1 弗雷德里克 温斯洛 泰勒著 xff0c 科学管理的基本原理 xff0c 1911年出版

  • 卸载Docker

    一 准备工作 xff1a 1 杀死docker有关的容器 xff1a docker kill docker ps a q 2 删除所有docker容器 xff1a docker rm docker ps a q 3 删除所有docker镜像

  • IDEA2020启动Tomcat控制台中文乱码解决

    IDEA2020启动Tomcat控制台中文乱码解决 1 中文乱码原因 基本上大家安装的windows系统本地语言都是选择中文 xff08 不会有人选择英文吧 xff1f 不会吧 xff1f 不会吧 xff1f xff09 xff0c 也就是

  • MyEclipse配置Tomcat 7

    1 打开步骤 xff1a 窗口 gt 首选项 gt MyEclipse gt Servers gt Tomcat gt Tomcat 7 x 2 配置自己本地的Tomcat 7版本 3 关闭MyEclipse自带的Tomcat服务器 4 启

  • mysql之模糊查询的方法

    Mysql模糊查询正常情况下在数据量小的时候 xff0c 速度还是可以的 xff0c 但是不容易看出查询的效率 xff0c 在数据量达到百万级 xff0c 千万级的甚至亿级时mysql查询的效率是很关键的 xff0c 也是很重要的 一 一般

  • Spring Cloud限流详解

    Spring Cloud限流详解 Spring Cloud Spring Cloud 2017 12 01 在高并发的应用中 xff0c 限流往往是一个绕不开的话题 本文详细探讨在Spring Cloud中如何实现限流 在Zuul上实现限流

  • springboot启动注解

    为什么springboot不需要配置文件就可以启动成功 springboot入口SpringBootApplication是一个启动类 xff0c 主要的注解是以下的三个 xff1a 1 SpringBootConfiguration是一个

  • 如何释放linux的内存

    你们知道怎么释放linux的内存吗不知道的话跟着学习啦小编一起来学习怎么释放linux的内存 释放linux的内存的步骤 Linux下操作频繁时 xff0c 物理内存会被快速用完 xff0c 当操作结束后 xff0c 物理内存没有被正常的释

  • 跨域的五种解决方案详解

    1 跨域解决方案一 cors技术 CORS 全称cross origin resource share xff08 资源共享 xff09 工作原理 xff1a 服务器 在返回响应报文的时候 xff0c 在响应头中 设置一个允许的header

  • MySQL 日期时间类型精确到毫秒

    MySQL 常用的日期时间类型常用的是datetime timestamp 其中datetime占用5个字节 xff08 有些文档中说占用8个字节是不对的 xff0c 默认也不会保存毫秒 xff09 DATETIME和TIMESTAMP两种

  • Spring Boot——Thymeleaf

    哈喽 xff01 大家好 xff0c 我是 xff0c 一位上进心十足的 Java领域博主 xff01 的写作风格 xff1a 喜欢用 通俗易懂 的文笔去讲解每一个知识点 xff0c 而不喜欢用 高大上 的官方陈述 博客的领域是 面向后端技

热门标签