SpringBoot从小白到精通(四)Thymeleaf页面模板引擎

简介: 前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目。今天我们主要来看看 Thymeleaf 在 Spring Boot 中的整合!

前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目。

今天我们主要来看看 Thymeleaf 在 Spring Boot 中的整合!

这个系列课程的完整源码,也会提供给大家。大家关注我的微信公众号(架构师精进),回复:springboot源码 获取这个系列课程的完整源码。或者点此链接直接下载完整源码

 

一、Thymeleaf 简介

Spring Boot 2主要支持页面模板是 Thymeleaf 和 Freemarker ,当然,作为 Java 最最基本的页面模板 Jsp ,Spring Boot 也是支持的,只是使用比较麻烦。

Thymeleaf 作为新一代 Java 模板引擎,它的功能与 Velocity、FreeMarker 等传统 Java 模板引擎比较类似,但是Thymeleaf  模板后缀为 .html,可以直接被浏览器打开,因此,开发时非常方便。

它既可以让前端工程师在浏览器中直接打开查看样式,也可以让后端工程师结合真实数据查看显示效果,同时,SpringBoot 提供了 Thymeleaf 自动化配置解决方案,因此在 SpringBoot 中使用 Thymeleaf 非常方便。

事实上, Thymeleaf 除了展示基本的 HTML ,进行页面渲染之外,也可以作为一个 HTML 片段进行渲染,例如我们在做邮件发送时,可以使用 Thymeleaf 作为邮件发送模板。

 

二、整合Thymeleaf

新项目整合 Thymeleaf 非常容易,只需要创建项目时勾上 Thymeleaf 即可,这里就不说了。

下面说说怎么在现有的项目中手动整合Thymeleaf:

1、在pom.xml 增加依赖如下

<!-- 引入 thymeleaf 依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-thymeleaf</artifactId>
</dependency>

2、application.properties 文件增加Thymeleaf 相关配置

############################################################
#
# thymeleaf 模板
#
############################################################
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
# 关闭缓存
spring.thymeleaf.cache=false

示例代码说明:spring.thymeleaf.prefix 指定模板页面的路径。


3、增加前台页面

在resource\templates\thymeleaf  目录下增加index.html 页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
Thymeleaf模板引擎
<h1 th:text="${name}">hello Spring Boot~~~~~~~</h1>
</body>
</html>

示例代码说明:

th:text 就是Thymeleaf的标签,用于处理标签体的文本内容。

其他更对的标签及用法,我会在下一篇文章中介绍。

注意:实际开发项目直接放resource\templates目录下就行,不需要加Thymeleaf 目录。我这里是有验证其他模板引擎框架,所以做了个目录区分。


4、创建 Controller

接下来我们就可以创建 Controller 了,实际上引入 Thymeleaf 依赖之后,我们可以不做任何配置。新建的ThymeleafController如下:

package com.weiz.controller;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import com.weiz.pojo.User;
@Controller
@RequestMapping("th")
public class ThymeleafController {
    @RequestMapping("/index")
    public String index(ModelMap map) {
        map.addAttribute("name", "thymeleaf-index");
        return "thymeleaf/index";
    }
}

示例代码说明:

首先,在ThymeleafController 中返回逻辑视图名,逻辑视图名为 index

然后,我们需要在 resources/templates/thymeleaf 目录下提供一个名为 index.htmlThymeleaf 模板文件。

注意:实际开发项目直接放resource\templates目录下就行,不需要加Thymeleaf 目录。我这里是有验证其他模板引擎框架,所以做了个目录区分。

三、运行效果

在浏览器中输入:http://localhost:8080/th/index 查看页面返回结果。

image.png

 

总结

主要向大家简单介绍了 Spring Boot 整合 Thymeleaf,还是比较简单的。下一篇文章会给大家详细介绍Thymeleaf的常用标签和用法。大家也可以阅读 Thymeleaf 官方文档学习 Thymeleaf 的更多用法。

这个系列课程的完整源码,也会提供给大家。大家关注我的微信公众号(架构师精进),回复:springboot源码 获取这个系列课程的完整源码。



推荐阅读:

SpringBoot从小白到精通(三)系统配置及自定义配置

SpringBoot从小白到精通(二)如何返回统一的数据格式

SpringBoot从小白到精通(一)如何快速创建SpringBoot项目

相关文章
|
10天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
29 2
|
10天前
|
前端开发 Java Spring
SpringBoot项目thymeleaf页面支持词条国际化切换
SpringBoot项目thymeleaf页面支持词条国际化切换
32 2
|
2月前
|
Java Spring
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 6
|
2月前
|
Java 网络架构
springboot配合thymeleaf,调用接口不跳转页面只显示文本
springboot配合thymeleaf,调用接口不跳转页面只显示文本
115 0
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
|
前端开发 Java Spring
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
|
3月前
|
Java 数据库 Spring
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
这篇文章介绍了如何在Spring Boot和Thymeleaf框架中使用条件运算符来根据数字字段的值动态替换显示不同的字符串,例如将订单状态的数字0和1替换为"未付款"和"已付款"等。
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
|
3月前
|
消息中间件 Java Kafka
Spring Boot与模板引擎:整合Thymeleaf和FreeMarker,打造现代化Web应用
【8月更文挑战第29天】这段内容介绍了在分布式系统中起到异步通信与解耦作用的消息队列,并详细探讨了三种流行的消息队列产品:RabbitMQ、RocketMQ 和 Kafka。RabbitMQ 是一个基于 AMQP 协议的开源消息队列系统,支持多种消息模型,具有高可靠性及稳定性;RocketMQ 则是由阿里巴巴开源的高性能分布式消息队列,支持事务消息等多种特性;而 Kafka 是 LinkedIn 开源的分布式流处理平台,以其高吞吐量和良好的可扩展性著称。文中还提供了使用这三种消息队列产品的示例代码。
31 0
|
4月前
|
Java 数据处理 Spring
Spring Boot中的模板引擎选择与配置
Spring Boot中的模板引擎选择与配置
下一篇
无影云桌面