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项目

相关文章
|
2月前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
16 0
springboot从控制器请求至页面时js失效的解决方法
|
2月前
|
Java 数据库连接 mybatis
springboot访问jsp页面变成直接下载?
springboot访问jsp页面变成直接下载?
65 0
|
2月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
16 0
|
1月前
|
SQL 前端开发 JavaScript
Spring Boot + Thymeleaf 使用PageHelper实现分页
Spring Boot + Thymeleaf 使用PageHelper实现分页
|
5月前
|
Java 应用服务中间件 nginx
springboot项目打包后页面访问不到
springboot项目打包后页面访问不到
62 1
|
2月前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
32 0
|
2月前
|
安全 Java 数据安全/隐私保护
SpringBoot启动后出现Please sign in页面
项目启动后,出现莫名其妙的Please sign in页面
55 0
|
3月前
|
SQL 前端开发 Java
springboot + thymeleaf + layui 初尝试
springboot + thymeleaf + layui 初尝试
|
4月前
|
Java
Springboot视图解析与模板引擎~
Springboot视图解析与模板引擎~
|
4月前
|
Java
SpringBoot thymeleaf自定义错误页面
SpringBoot thymeleaf自定义错误页面
23 0