Java学习 - Spring Boot整合 Thymeleaf 实例

news2024/11/13 14:51:40

什么是 Thymeleaf

  • Thymeleaf 是新一代的 Java 模板引擎,类似于 Velocity、FreeMarker 等传统引擎,其语言和 HTML 很接近,而且扩展性更高;

  • Thymeleaf 的主要目的是将优雅的模板引入开发工作流程中,并将 HTML 在浏览器中正确显示。同时能够作为静态引擎,让开发成员之间更方便协作开发;

  • Spring Boot 官方推荐使用模板,而且 Spring Boot 也为 Thymeleaf 提供了完整的自动化 配置解决方案;

  • Thymeleaf 使用教程请戳 Tutorial: Using Thymeleaf,配合 Spring 使用的教程请戳 Tutorial: Thymeleaf + Spring。

整合过程

准备过程

正式开始整合过程之前,这里先给出本文的搭建环境,方便大家进行后续内容的学习。

  • JDK 11(理论上其他版本的 JDK 也是可以的,但是更为推荐 JDK 1.8 及以后的版本)
  • IDEA(这里没有啥要求,但我个人的话是出新的版本我就会更新,虽然臃肿,但是更新了确实好用 😂)
  • SpringBoot 2.x(现在主流应该都是 2.x 版本,1.x 的都是老一点的版本了)

添加 Thymeleaf 依赖

添加 Thymeleaf 依赖有两种方式:

  1. 第一种

在新建项目时添加,在 Templeate Engines 中勾选 Thymeleaf;

在这里插入图片描述

  1. 第二种

对于忘记在新建项目时未添加 Thymeleaf 依赖的项目,可以直接在项目的 pom.xml 中手动添加依赖即可;

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

编写实体类和 Controller

  1. 新建实体类 User

这里因为使用 Lombok,所以省去了各种 settergetter,同时还省去了各种构造方法和重写 toString() 等方法,大大简化了代码。而我们所要做的,仅仅是在 pom.xml 中添加 Lombok 的依赖,然后在我们的实体类中加入对应的注解即可。

以下是在 pom.xml 中插入 Lombok 依赖的对应代码。

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

然后我们就可以编写我们的实体类,这里主要用到了 @Data@Component@AllArgsConstructorNoArgsConstructor 四个注解,其中各个注解的含义如下:

  • @Component:把类实例化到 Spring 容器,相当于在配置文件中配置;

  • @Data :给类的所有属性提供 getset 方法,此外还有 equals、canEqual、hashCode、toString 方法以及 默认参数为空的构造方法

  • @AllArgsConstructor:为类提供一个 全参构造方法,但此时不再提供默认构造方法;

  • @NoArgsConstructor:因为使用了 AllArgsConstructor 会导致类没有默认空参构造方法,所以此时需要它为类提供一个 无参构造方法

package com.cunyu.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.stereotype.Component;

/**
 * @className : User
 * @description : User 实体类
 */

@Component
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private int age;
    private String name;
    private String email;
}
  1. 编写 Controller

此时主要需要注意的是 setViewName()addObject(),前者表示方法对应的前端页面,也就是我们模板中对应文件名的 .html 文件,而后者则主要给属性注入值,然后将属性传递到前端模板。

package com.cunyu.controller;

import com.cunyu.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * @className : UserController
 * @description : UserController
 */

@Controller
public class UserController {

    // 访问 ip:port/index
    @GetMapping("/index")
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView();
        // 设置跳转的视图,即位于 templates/index.html
        modelAndView.setViewName("index");
        modelAndView.addObject("title", "Thymeleaf 使用");
        modelAndView.addObject("desc", "Spring Boot 整合 Thymeleaf");

        User author = new User(25, "村雨遥", "747731461@qq.com");

        modelAndView.addObject("author", author);
        return modelAndView;
    }
}

创建Thymeleaf 模板

第上面的代码中,我们设置了跳转的视图为 index,所以我们需要在 src/main/resources/templates 中创建 index.html

在这里插入图片描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 即 Controller 中的 title 属性 -->
    <title th:text="${title}"></title>
    
</head>
<body>
<!-- 即 Controller 中的 desc 属性 -->
<h1 th:text="${desc}" th:align="center"></h1>
    
<!-- 即 Controller 中的 author 信息 -->
<h2 th:align="center">=====作者信息=====</h2>
<p th:text="${author?.name}"></p>
<p th:text="${author?.age}"></p>
<p th:text="${author?.email}"></p>
</body>
</html>

测试

启动项目,然后在浏览器中访问 http://localhost:8080/index,如果出现下图中的信息,说明整合成功。

在这里插入图片描述

注意事项

为了方便使用,我们在使用 Thymeleaf 模板时,可以添加一些自己的配置。而添加的位置则是项目的配置文件 application.yml,项目默认配置文件应该是 application.properties,但 SpringBoot 更加推荐使用 yml 来配置,所以我们这里需要手动将其改为 yml 的格式。

spring:
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML
    encoding: UTF-8
    servlet:
      content-type: text/html

总结

好了,以上就是我们今天的所有内容了。今天主要介绍了 Themeleaf 的相关简介,然后对利用 SpringBoot 整合 Thymeleaf 的过程进行了描述,最后则是使用 Thymeleaf 中常用的一些相关配置的注意事项。

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

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

相关文章

IEEE官方列表会议 | 第三届能源与环境工程国际会议(CFEEE 2024)

会议简介 Brief Introduction 2024年第三届能源与环境工程国际会议(CFEEE 2024) 会议时间&#xff1a;2024年12月2日-4日 召开地点&#xff1a;澳大利亚凯恩斯 大会官网&#xff1a;CFEEE 2024-2024 International Conference on Frontiers of Energy and Environment Engineer…

信创改造叠加等保/密评合规,服务器定期改密难落实?

信创国产化改造是我国党政、金融、电信、电力等行业信息安全建设的主旋律。在信创改造背景下还叠加了等保、密评等合规性要求&#xff0c;因此党政、金融等行业单位在建设信创应用、终端、服务器时必须满足等保、密评要求。 在数据中心运维场景&#xff0c;受行业监管、密评、…

SQL 注入漏洞详解 - Union 注入

1)漏洞简介 SQL 注入简介 SQL 注入 即是指 Web 应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在 Web 应用程序中事先定义好的查询语句的结尾上添加额外的 SQL 语句,在管理员不知情的情况下实现非法操作,以此来实现欺骗数据库服务器执行非授权的任意查询,…

javaScrip的学习(一)

目录 引言 一、java和JavaScript的联系 二、js中的弹出框 1.alert弹出框 2.confirm带确认取消的按钮弹框 3.prompt带有提示信息且带有输入框的弹框 4.输出到网页中 ​三、js引入方式 1. 放在script标签中 2.放在外部js文件中 四、执行顺序 五、书写规范 1. 语句结…

专业技能(挖坑填坑)——Java核心基础知识,对集合、线程

熟悉Java核心基础知识&#xff0c;对集合、线程等都有了解&#xff0c;能运用模块化、面向对象的方式编程。 1.Java八种基本数据类型 Java的数据类型分为两大类&#xff1a;①基本数据类型 ②引用数据类型 2.面向对象三大特性 封装、继承、多态。 简要介绍一下/谈一下你的…

为什么 FPGA 的效率低于 ASIC?

FPGA是“可重构逻辑”器件。先制造的芯片&#xff0c;再次设计时“重新配置”。 ASIC 不需要“重新配置”。你先设计&#xff0c;把它交给代工厂&#xff0c;然后制造芯片。 现在让我们看看这些芯片的结构是什么样的&#xff0c;以及它们的不同之处。 ● 逻辑单元&#xff1a;F…

(leetcode学习)21. 合并两个有序链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[]示例…

Ethernet/IP转ModbusTCP协议转化网关(经典通讯案例)

怎么样把EtherNet/IP和ModbusTCP网络通讯连接起来呢?最近有很多朋友咨询这个问题&#xff0c;在这里统一为大家详细说明一下。其实有一个设备可以很轻松地解决这个问题&#xff0c;名为YC-EIP-TCP&#xff0c;下面是详细信息。 一&#xff0c;设备主要功能 1YC-EIP-TCP工业级…

数据结构(5.3_1)——二叉树的先中后序遍历

先序遍历——根左右——前缀表达式 中序遍历——左根右——中缀表达式 后序遍历——左右根——后缀表达式 二叉树的遍历(手算) 先序遍历代码 struct ElemType {int value; }; //二叉树的结点(链式存储) typedef struct BiTNode {ElemType data;//数据域struct BiTNode *lchil…

数据采集产品 搭建智能水房实现远程控制的案例分享

一、系统简介 随着科技的逐步发达&#xff0c;在各个领域都迫切的希望有一种控制系统能代替传统的操作方式&#xff0c;智能水房控制系统则是一种符合人们要求的系统&#xff0c;他可代替传统的人工机械操控&#xff0c;真正实现控制智能化。通过水房的各种数据采集可以实现24小…

学习记录——day15 数据结构 链表

链表的引入 顺序表的优缺点 1、优点:能够直接通过下标进行定位元素&#xff0c;访问效率高&#xff0c;对元素进行查找和修改比较快 2、不足:插入和删除元素需要移动大量的元素&#xff0c;效率较低 3、缺点:存储数据元素有上限&#xff0c;当达到MAX后&#xff0c;就不能再…

VScode tab不能正常使用

现象不能够在文本编辑器中按下tab键&#xff0c;如果按下了&#xff0c;就焦点会跑到终端或者是其他地方&#xff0c;猜测是因为装了某些插件导致的。 解决方案比较简单&#xff1a; 删除掉其他的按键 比如这样的&#xff0c;保存就可以了

mysql1055报错解决方法

目录 一、mysql版本 二、 问题描述 三、解决方法 1.方法一&#xff08;临时&#xff09; 2.方法二&#xff08;永久&#xff09; 一、mysql版本 mysql版本&#xff1a;5.7.23 二、 问题描述 在查询时使用group by语句&#xff0c;出现错误代码&#xff1a;1055&#xf…

Facebook的创新之路:科技驱动的社交革命

Facebook自2004年创立以来&#xff0c;已经从一个大学校园内的社交网站发展成为全球最大的社交媒体平台。其成功的背后&#xff0c;不仅仅是广泛的用户基础和高效的运营模式&#xff0c;更在于其不断推进的技术创新。本文将探讨Facebook在技术创新方面的诸多努力&#xff0c;如…

MYSQL 六、mysql锁 1

一、概述 在数据库中&#xff0c;除传统的计算资源&#xff08;如CPU、RAM、I/O等&#xff09;的争用以外&#xff0c;数据也是一种供许多用户共享的 资源。为保证数据的一致性&#xff0c;需要对 并发操作进行控制 &#xff0c;因此产生了 锁 。同时 锁机制 也为实现MySQL 的各…

GitHub Actions是什么

目录 GitHub Actions是什么 GitHub Actions的使用方法 示例 注意事项 GitHub Actions配置文件中-工作流的 :Workflow 一、自动化任务执行 二、规范团队协作 三、灵活配置和定制 四、提高开发效率 五、集成GitHub生态 六、可复用性和共享性 仓库中的“Actions”部分…

新生上大学提前去西藏旅游有什么要注意的,语言上该怎么办?

新生前往西藏旅游并提前适应大学生活是一次充满挑战与发现的旅程。在准备过程中&#xff0c;重要的是要对高原反应有所准备&#xff0c;了解其症状并采取预防措施&#xff0c;同时携带必要的防晒和保暖衣物以应对极端的气候条件。在交通和饮食方面&#xff0c;选择安全可靠的选…

奔跑利润如何释放?来看看怎么分析现货黄金的跟踪止损位

跟踪止损位是现货黄金交易和资金管理中一个重要的概念。我们做现货黄金的时候&#xff0c;将仓位分成两部分&#xff08;或以上&#xff09;。第一部分&#xff0c;我们在首个目标位获利离场&#xff0c;剩下那部分就可以让它奔跑&#xff0c;看看市场会不会走出大行情&#xf…

springboot系列十一:Thymeleaf

文章目录 官方文档基本介绍Thymeleaf机制说明Thymeleaf语法表达式运算符th属性迭代条件运算使用Thymeleaf th属性需要注意点 Thymeleaf综合案例需求说明思路分析代码实现 作业布置 官方文档 在线文档: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 离线…

自动导入unplugin-auto-import+unplugin-vue-components

文章介绍 接下来将会以Vite Vue3 TS的项目来举例实现 在我们进行项目开发时&#xff0c;无论是声明响应式数据使用的ref、reactive&#xff0c;或是各种生命周期&#xff0c;又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能使用&#xff1a; …