SpringBoot与Thymeleaf模板入门整合篇

本文介绍了Thymeleaf模板引擎的基本概念,强调了它在SpringBoot中的重要性,以及如何进行集成。从创建SpringBoot项目、配置Thymeleaf,到创建模板页面和控制器,逐步讲解Thymeleaf的表达式、属性和对象的使用,包括标准变量表达式、选择变量表达式、URL表达式和th:attr属性。同时,还涵盖了Thymeleaf的字面量、字符串拼接和运算符等内容,以及在模板中使用内置对象如#session。
摘要由CSDN通过智能技术生成

11.1 认识 Thymeleaf
Thymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发
模板引擎是一个技术名词,是跨领域跨平台的概念,在 Java 语言体系下有模板引擎,在 C#、PHP 语言体系下也有模板引擎,甚至在 JavaScript 中也会用到模板引擎技术,Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl(国产) 等。

Thymeleaf 对网络环境不存在严格的要求,既能用于 Web 环境下,也能用于非 Web 环境下。在非 Web 环境下,他能直接显示模板上的静态数据;在 Web 环境下,它能像 Jsp 一样从后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的,以 HTML 标签为载体,Thymeleaf 要寄托在 HTML 标签下实现。

SpringBoot 集成了 Thymeleaf 模板技术,并且 Spring Boot 官方也推荐使用 Thymeleaf 来替代 JSP 技术,Thymeleaf 是另外的一种模板技术,它本身并不属于 Spring Boot,Spring Boot只是很好地集成这种模板技术,作为前端页面的数据展示,在过去的 Java Web 开发中,我们往往会选择使用 Jsp 去完成页面的动态渲染,但是 jsp 需要翻译编译运行,效率低

Thymeleaf 的官方网站:www.thymeleaf.org
Thymeleaf 官方手册:www.thymeleaf.org/doc/tutoria…
11.2 SpringBoot集成 Thymeleaf
11.2.1 新建一个springboot项目,项目名称:037-springboot-thymeleaf-first
创建 Spring Boot 项目,添加 web 和 Thymeleaf 依赖\


按照这种方式创建后,pom.xml  文件下会自动添加如下依赖

<!--SpringBoot 集成 Thymeleaf 的起步依赖-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--SpringBoot 开发 web 项目的起步依赖-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
复制代码

11.2.2 在Springboot的核心配置文件application.properties中对Thymeleaf进行配置

#thymeleaf 页面的缓存开关,默认 true 开启缓存
#建议在开发阶段关闭 thymeleaf 页面缓存,目的实时看到页面
spring.thymeleaf.cache=false
复制代码

其实什么都不用配置就可以工作,因为基本 Thymeleaf 的配置都有默认值

#前缀:
#thymeleaf 模版前缀,默认可以不写
spring.thymeleaf.prefix=classpath:/templates/
#后缀:
#thymeleaf 模版后缀,默认可以不写
spring.thymeleaf.suffix=.html
复制代码

11.2.3 创建 ThymeleafControlle去映射到模板页面(和 SpringMVC基本一致)

@Controller
public class ThymeleafController {
@RequestMapping(value = "/thymeleaf/index")
public String index(Model model) {
        model.addAttribute("data","SpringBoot 成功集成 Thymeleaf 模版!");
        return "index";
    }
}
复制代码

11.2.4 在src/main/resources 的templates  下新建一个 index.html页面用于展示数据

HTML 页面的元素中加入以下属性:

 <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>SpringBoot 集成 Thymeleaf</title>
</head>
<body >
  <!--Thymeleaf 前端框架以 Html 为载体-->
  <span th:text="${data}"></span>
  <span th:text="${data}"></span>
  <p th:text="${data}"></p>
  <div th:text="${data}"></div>
</body>
</html>
复制代码

11.2.5 启动程序,

右键->查看页面源代码

注 意 : Springboot 用 使 用 thymeleaf  作 为 视 图 展 示 , 约 定 将 模 板 文 件 放 置 在src/main/resource/templates  目录下,静态资源放置在 src/main/resource/static  目录下

11.3 Thymeleaf 的表达式

11.3.6 新建一个springboot项目,项目名称:038-springboot-thymeleaf-expression

1)创建SpringBoot的web项目并使用模版引擎

2)pom.xml中应该有如下两个依赖

    <!--SpringBoot 集成 Thymeleaf 模版引擎的起步依赖-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--SpringBoot 的 web 项目起步依赖-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
复制代码

3)在 application.properties中设置 thymeleaf 参数

 #设置 thymeleaf 页面缓存失效
spring.thymeleaf.cache=false
#thymeleaf 模版前缀,默认值,可选项
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf 模版后缀,默认值,可选项
spring.thymeleaf.suffix=.html
复制代码

4)创建实体 User 实体类

创建 User 实体类,为后续演示提供数据

@Data
public class User {
    private Integer id;
    private String name;
    private String phone;
    private String address;
}
复制代码

5)创建 ThymeleafController 类

@Controller
public class ThymeleafController {
    @RequestMapping(value = "/thymeleaf/index")
    public String index(Model model) {
        model.addAttribute("data","SpringBoot 集成 Thymeleaf 模版!");
        return "index";
    }
}
复制代码

6)在src/main/resources/templates 在创建 html 页面

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Thymeleaf'Index</title>
</head>
<body>
	<span th:text="${data}"></span>
</body>
</html>
复制代码

7)测试

11.3.7 标准变量表达式
注意:th:text="" 是Thymeleaf 的一个属性,用于文本的显示
8)语法 ... 9)说明 标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和EL中的{...}\ 9)说明\ 标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和 EL 中的 ... 9)说明 标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和EL中的{} 相同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据
10)案例演示
创建一个方法,将用户信息存放到 model 中,th

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值