首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >极简 Spring Boot 整合 Thymeleaf 页面模板

极简 Spring Boot 整合 Thymeleaf 页面模板

作者头像
江南一点雨
发布于 2019-06-18 10:38:05
发布于 2019-06-18 10:38:05
1.5K00
代码可运行
举报
文章被收录于专栏:玩转JavaEE玩转JavaEE
运行总次数:0
代码可运行

虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板,例如邮件发送模板)。

早期的 Spring Boot 中还支持使用 Velocity 作为页面模板,现在的 Spring Boot 中已经不支持 Velocity 了,页面模板主要支持 Thymeleaf 和 Freemarker ,当然,作为 Java 最最基本的页面模板 Jsp ,Spring Boot 也是支持的,只是使用比较麻烦。

松哥打算用三篇文章分别向大家介绍一下这三种页面模板技术。

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

Thymeleaf 简介

Thymeleaf 是新一代 Java 模板引擎,它类似于 Velocity、FreeMarker 等传统 Java 模板引擎,但是与传统 Java 模板引擎不同的是,Thymeleaf 支持 HTML 原型。

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

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

另外,由于 Thymeleaf 模板后缀为 .html,可以直接被浏览器打开,因此,预览时非常方便。

整合

  • 创建项目

Spring Boot 中整合 Thymeleaf 非常容易,只需要创建项目时添加 Thymeleaf 即可:

创建完成后,pom.xml 依赖如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-web</artifactId></dependency>

当然,Thymeleaf 不仅仅能在 Spring Boot 中使用,也可以使用在其他地方,只不过 Spring Boot 针对 Thymeleaf 提供了一整套的自动化配置方案,这一套配置类的属性在 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 中,部分源码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@ConfigurationProperties(prefix = "spring.thymeleaf")public class ThymeleafProperties {        private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;        public static final String DEFAULT_PREFIX = "classpath:/templates/";        public static final String DEFAULT_SUFFIX = ".html";        private boolean checkTemplate = true;        private boolean checkTemplateLocation = true;        private String prefix = DEFAULT_PREFIX;        private String suffix = DEFAULT_SUFFIX;        private String mode = "HTML";        private Charset encoding = DEFAULT_ENCODING;        private boolean cache = true;        //...}
  1. 首先通过 @ConfigurationProperties 注解,将 application.properties 前缀为 spring.thymeleaf 的配置和这个类中的属性绑定。
  2. 前三个 static 变量定义了默认的编码格式、视图解析器的前缀、后缀等。
  3. 从前三行配置中,可以看出来, Thymeleaf 模板的默认位置在 resources/templates 目录下,默认的后缀是 html
  4. 这些配置,如果开发者不自己提供,则使用 默认的,如果自己提供,则在 application.properties 中以 spring.thymeleaf 开始相关的配置。

而我们刚刚提到的,Spring Boot 为 Thymeleaf 提供的自动化配置类,则是 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration ,部分源码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Configuration@EnableConfigurationProperties(ThymeleafProperties.class)@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })public class ThymeleafAutoConfiguration {}

可以看到,在这个自动化配置类中,首先导入 ThymeleafProperties ,然后 @ConditionalOnClass 注解表示当当前系统中存在 TemplateModeSpringTemplateEngine 类时,当前的自动化配置类才会生效,即只要项目中引入了 Thymeleaf 相关的依赖,这个配置就会生效。

这些默认的配置我们几乎不需要做任何更改就可以直接使用了。如果开发者有特殊需求,则可以在 application.properties 中配置以 spring.thymeleaf 开头的属性即可。

  • 创建 Controller

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Controllerpublic class IndexController {    @GetMapping("/index")    public String index(Model model) {        List<User> users = new ArrayList<>();        for (int i = 0; i < 10; i++) {            User u = new User();            u.setId((long) i);            u.setName("javaboy:" + i);            u.setAddress("深圳:" + i);            users.add(u);        }        model.addAttribute("users", users);        return "index";    }}public class User {    private Long id;    private String name;    private String address;    //省略 getter/setter}

IndexController 中返回逻辑视图名+数据,逻辑视图名为 index ,意思我们需要在 resources/templates 目录下提供一个名为 index.htmlThymeleaf 模板文件。

  • 创建 Thymeleaf
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><table border="1">    <tr>        <td>编号</td>        <td>用户名</td>        <td>地址</td>    </tr>    <tr th:each="user : ${users}">        <td th:text="${user.id}"></td>        <td th:text="${user.name}"></td>        <td th:text="${user.address}"></td>    </tr></table></body></html>

Thymeleaf 中,通过 th:each 指令来遍历一个集合,数据的展示通过 th:text 指令来实现,

注意 index.html 最上面要引入 thymeleaf 名称空间。

配置完成后,就可以启动项目了,访问 /index 接口,就能看到集合中的数据了:

另外, Thymeleaf 支持在 js 中直接获取 Model 中的变量。例如,在 IndexController 中有一个变量 username

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Controllerpublic class IndexController {    @GetMapping("/index")    public String index(Model model) {        model.addAttribute("username", "李四");        return "index";    }}

在页面模板中,可以直接在 js 中获取到这个变量:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script th:inline="javascript">    var username = [[${username}]];    console.log(username)</script>

这个功能算是 Thymeleaf 的特色之一吧。

手动渲染

前面我们说的是返回一个 Thymeleaf 模板,我们也可以手动渲染 Thymeleaf 模板,这个一般在邮件发送时候有用,例如我在 resources/templates 目录下新建一个邮件模板,如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p>hello 欢迎 <span th:text="${username}"></span>加入 XXX 集团,您的入职信息如下:</p><table border="1">    <tr>        <td>职位</td>        <td th:text="${position}"></td>    </tr>    <tr>        <td>薪水</td>        <td th:text="${salary}"></td>    </tr></table><img src="http://www.javaboy.org/images/sb/javaboy.jpg" alt=""></body></html>

这一个 HTML 模板中,有几个变量,我们要将这个 HTML 模板渲染成一个 String 字符串,再把这个字符串通过邮件发送出去,那么如何手动渲染呢?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@AutowiredTemplateEngine templateEngine;@Testpublic void test1() throws MessagingException {    Context context = new Context();    context.setVariable("username", "javaboy");    context.setVariable("position", "Java工程师");    context.setVariable("salary", 99999);    String mail = templateEngine.process("mail", context);    //省略邮件发送}
  1. 渲染时,我们需要首先注入一个 TemplateEngine 对象,这个对象就是在 Thymeleaf 的自动化配置类中配置的(即当我们引入 Thymeleaf 的依赖之后,这个实例就有了)。
  2. 然后构造一个 Context 对象用来存放变量。
  3. 调用 process 方法进行渲染,该方法的返回值就是渲染后的 HTML 字符串,然后我们将这个字符串发送出去。
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 江南一点雨 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
CentOS7 安装 mysql8
本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ManagementAndJava/article/details/80039650
庞小明
2018/09/19
5.1K0
CentOS7 安装 mysql8
Docker安装Mysql
提前开放好mysql需要用到的端口号,有的还需要去服务器的控制中心添加放行端口号,CentOS 7有关开放端口号的操作可以看这篇文章:CentOS 7 开启防火墙及开放指定端口
itze
2022/10/31
8560
docker安装mysql及navicat远程连接
解决问题:docker安装mysql,windows使用navicat远程连接数据库 正常安装 一键拉取镜像 docker pull mysql:5.7 启动Mysql docker run --name mysql5.7 -e MYSQL_ROOT_PASSWORD=123456 -p 3307:3306 -d mysql:5.7 登录容器内 启动后之后,默认的root密码是123456,使用如下命令登录进去 docker exec -it mysql5.7 bash mysql -u root -p 修
华创信息技术
2020/06/28
5K0
Docker安装 Mysql主从同步
uname命令用于打印当前系统相关信息(内核版本号、硬件架构、主机名称和操作系统类型等)。
鱼找水需要时间
2023/02/16
1.5K0
Docker安装 Mysql主从同步
Centos 通过 docker 安装MySQL5.7
Docker 应用需要用到各种端口,逐一去修改防火墙设置,非常麻烦,因此建议大家直接关闭防火墙 启动 Docker 前,一定要关闭防火墙!!!
用户11332765
2024/10/28
3780
Centos 通过 docker 安装MySQL5.7
Ubuntu上使用docker安装mysql
1.docker仓库搜索mysql docker search mysql /images/img/20220308164142.png 2.docker仓库拉取mysql8.0镜像 docker pull mysql:8.0 docker pull mysql #拉取最新版本的mysql 3.查看本地镜像是否安装成功 docker images mysql:8.0 /images/img/20220308164232.png 4.安装运行mysql8.0容器 docker run -p 3307:3306 --name mysql -e MYSQL_ROOT_PASSWORD=root -d mysql:8.0 -p 将本地主机的端口(3307)映射到docker容器端口(3306) –name 容器名称 -e 配置信息,root用户原始密码为root -d 镜像名称 注意 记得去服务器防火墙放行3307端口 5.查看mysql8.0容器运行情况 docker ps /images/img/20220308165059.png 6.docker登录mysql docker exec -it mysql bash mysql -uroot -p /images/img/20220308165341.png 7.使用客户端连接工具(navicat)远程登录mysql /images/img/20220308165538.png 会出现下面的2059错误
卢衍飞
2023/02/16
2K0
手拉手入门若依前后端分离脚手架
相关参数解释 : docker run:这是 Docker 的命令,用于创建并运行一个新的容器。 --name redis:这个参数设置了容器的名称为 redis,这样可以更容易地管理和访问该容器。 -p 6379:6379:这表示端口映射,将宿主机的 6379 端口映射到容器的 6379 端口。 --restart=always: 表示如果容器退出或 Docker 服务重启,Docker 都会自动重启该容器。 -v /data/redis/data:/data:这是一个卷映射,将宿主机的 /data/redis/data 目录映射到容器内的 /data 目录。这用于持久化数据,即使容器被删除,数据仍然保存在宿主机上。 -d:这个标志表示以守护进程模式运行容器,即容器将在后台运行。 redis:7.0.12:这是要运行的 Docker 镜像的名称和版本号。 redis-server /etc/redis/redis.conf:这是容器内运行的命令,redis-server 是启动 Redis 服务的命令,/etc/redis/redis.conf 指定了 Redis 服务使用的配置文件路径。
QGS
2025/01/23
2070
CentOS 6/7 下 MySQL 5.7 安装部署与配置
一、前言 可能需要的前置知识? CentOS firewalld服务 firewalld 防火墙操作 vi命令 适用范围? CentOS 6/7 MySQL 5.7.x 二、安装 1、添加包 #CentOS 7 cd /home/downloads wget https://dev.mysql.com/get/mysql57-community-release-el7-9.noarch.rpm sudo rpm -ivh mysql57-community-release-el7-9.noarch.rpm
KenTalk
2018/09/11
1.1K0
CentOS 7 安装 MySQL 5.7
官网下载地址:http://dev.mysql.com/downloads/mysql/
OY
2022/03/17
9950
CentOS 7 安装 MySQL 5.7
Docker实战:Docker安装WordPress,快速搭建自己的博客
WordPress是一种基于php编程语言开发的CMS管理系统,WordPress有丰富的插件和模板,用户可以快速搭建一套功能十分强大的内容管理系统,使用WordPress可以做多种类型的网站,比如新闻发布网站、企业门户、个人技术博客等。
小明互联网技术分享社区
2023/10/31
3.6K0
Docker实战:Docker安装WordPress,快速搭建自己的博客
centos7系统安装mysql8.0完整步骤
Select Operating System: 选择 Red Hat ,CentOS 是基于红帽的,Select OS Version: 选择 linux 7
用户4988085
2021/07/20
13.8K1
Centos7 mini 配置 php7+nginx+mysql 最详细过程,为linux小白送福利
本来不想写这篇的,因为网上都有,但是最近问关于这些环境配置的朋友有点多,于是整理一番,全部都是本人实战验证过的。
躺平程序员老修
2023/09/05
5930
Centos7 mini 配置 php7+nginx+mysql 最详细过程,为linux小白送福利
成功实现Navicat访问Linux中安装的MySQL数据库
成功实现Navicat访问Linux中安装的MySQL数据库 1、安装好MySQL,检查是否正常登录 2、进入mysql数据库配置远程连接 #将所有数据库的所有表(*.*)的所有权限(all privileges),授予通过任何ip(%)访问的root用户,密码为123123,如果要限制只有某台机器可以访问,将其换成相应的IP即可 mysql> grant all privileges on *.* to 'root'@'%' identified by ' '; mysql> flush priv
星哥玩云
2022/08/18
5.5K1
成功实现Navicat访问Linux中安装的MySQL数据库
CentOS7安装MySQL8.0图文教程
网址:https://dev.mysql.com/downloads/mysql/
全栈程序员站长
2022/07/01
6.7K1
CentOS7安装MySQL8.0图文教程
CentOS在线安装Mysql5.7
官方地址:https://dev.mysql.com/downloads/repo/yum/
名山丶深处
2022/05/10
1.3K0
YUM安装MYSQL5.6
创建用户的时候会出现上图中警告的内容,意思是在命令行界面上使用密码是不安全的,直接略过即可。
用户4988376
2021/08/09
1.7K0
Linux&Docker&Mysql&GitWin常用命令
苦于有时候某个命令真的想不起,又得百度,干脆以后操作linux时,打开博文直接查询多爽。
全栈程序员站长
2022/07/01
5870
Linux&Docker&Mysql&GitWin常用命令
docker常用命令总结
个人推荐使用第二种方式,第一种安装方式安装的是 1.13.1 的版本,第二种安装的是最新版,我今天安装完之后是 20.10.8 版本。
栖西
2023/10/17
3240
Docker搭建MySQL服务
前面我们已经安装好了Docker,也简单了解了Docker。那么我们可以尝试搭建一个MySQL服务。
双面人
2019/05/21
2.1K0
使用Docker搭建MySQL数据库服务
在现代应用程序开发中,使用数据库是必不可少的。而Docker作为一种流行的容器化解决方案,可以使数据库的部署和管理变得更加简单和灵活。本文将介绍如何使用Docker搭建MySQL数据库服务,让你在本地环境中快速部署一个MySQL实例。
霍格沃兹测试开发Muller老师
2024/03/25
8320
使用Docker搭建MySQL数据库服务
相关推荐
CentOS7 安装 mysql8
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验