Spring Boot中使用Thymeleaf进行页面渲染

简介: Spring Boot中使用Thymeleaf进行页面渲染

Spring Boot中使用Thymeleaf进行页面渲染

今天我们将探讨如何在Spring Boot应用中使用Thymeleaf模板引擎进行页面渲染,这是构建现代化Web应用不可或缺的一部分。

Spring Boot中使用Thymeleaf进行页面渲染

Thymeleaf是一款优秀的Java模板引擎,特别适合用于构建Spring MVC Web应用。它不仅提供了强大的模板功能,还能与Spring Boot完美集成,使得开发者可以通过简单的标记语言构建动态页面,同时保持良好的可维护性和扩展性。

第一步:配置Spring Boot集成Thymeleaf

添加Thymeleaf依赖

在Spring Boot项目的pom.xml文件中添加Thymeleaf依赖:

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

配置Thymeleaf模板位置

默认情况下,Thymeleaf会自动查找位于src/main/resources/templates/目录下的HTML模板文件。您可以在application.properties中配置自定义的模板路径:

# Thymeleaf模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

创建Thymeleaf模板文件

src/main/resources/templates/目录下创建Thymeleaf模板文件,例如index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot Thymeleaf Demo</title>
</head>
<body>
    <h1>Welcome to Spring Boot Thymeleaf Demo</h1>
    <p th:text="'Hello, ' + ${user.name} + '!'" />
</body>
</html>

第二步:在Spring Boot控制器中使用Thymeleaf

编写控制器

创建一个简单的控制器类,处理HTTP请求并返回Thymeleaf模板:

package cn.juwatech.springbootthymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import cn.juwatech.springbootthymeleaf.model.User;

@Controller
public class HomeController {
   

    @GetMapping("/")
    public String home(Model model) {
   
        User user = new User("Alice");
        model.addAttribute("user", user);
        return "index";
    }
}

模型数据绑定

在控制器方法中,通过Model对象将数据传递给Thymeleaf模板。在这个例子中,我们创建了一个User对象,并通过${user.name}在模板中显示其名字。

第三步:Thymeleaf模板引擎的标记语言

使用Thymeleaf标签

Thymeleaf提供了丰富的标签和属性,用于动态渲染HTML页面。例如,${user.name}用于显示用户的名字,th:text属性用于在元素内部显示动态文本。

结语

通过本文的介绍,您了解了如何在Spring Boot应用中集成和使用Thymeleaf进行页面渲染。Thymeleaf不仅简化了HTML页面的开发,还提供了强大的模板功能和灵活的扩展性,适合构建现代化的Web应用程序。

相关文章
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
53 2
|
1月前
|
前端开发 Java Spring
SpringBoot项目thymeleaf页面支持词条国际化切换
SpringBoot项目thymeleaf页面支持词条国际化切换
69 2
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
37 0
|
3月前
|
Java Spring
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
53 6
|
3月前
|
Java 网络架构
springboot配合thymeleaf,调用接口不跳转页面只显示文本
springboot配合thymeleaf,调用接口不跳转页面只显示文本
152 0
|
4月前
|
Java Spring
Spring boot +Thymeleaf 本地图片加载失败(图片路径)的问题及解决方法
这篇文章详细讲解了在Spring Boot应用程序中本地图片无法加载的问题原因,并提供了两个示例来说明如何通过使用正确的相对路径或Thymeleaf语法来解决图片路径问题。
|
4月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
4月前
|
前端开发 Java Spring
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
|
4月前
|
Java 数据库 Spring
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
这篇文章介绍了如何在Spring Boot和Thymeleaf框架中使用条件运算符来根据数字字段的值动态替换显示不同的字符串,例如将订单状态的数字0和1替换为"未付款"和"已付款"等。
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
下一篇
DataWorks