玩转SpringBoot集成 Thymeleaf 模版引擎

随着互联网技术的发展,在前后端分离开发模式已经逐渐成为主流的今天,前后端技术的划分也越来越清晰,社会分工进一步细化,职业岗位也更加细分,慢慢开始就有了前端攻城狮和后端攻城狮,技术也进一步细分,出现了以HTML、JS等为主的页面技术,以Java、Python为主的后端开发语言技术。

 

在Javaweb开发领域有着很多很优秀的页面技术,有静态页面技术,如:HTML/HTML5等,有动态页面技术,如:jsp。这些优秀的页面技术,使Java在web开发领域有着举足轻重的地位。

今天咱们就来介绍一个在Java开发领域非常流行的模板引擎技术-Thymeleaf,用过SpringBoot的同学可能都知道,SpringBoot在自己体系里面默认支持的页面技术不是JSP,而是一个叫Thymeleaf的模板引擎技术,当然它也是有一网页技术。

 

为什么SpringBoot在web开发的时候不是默认支持JSP了呢,做过web开发的同学可能都知道,其实JSP本身就是Servlet,在生产环境中,SpringBoot重新编译JSP可能会导致较大的性能损失,并且很难追查到问题根源。

所以SpringBoot官方推荐的官方推荐使用Thymeleaf,今天咱们就来一起学习一下SpringBoot集成Thymeleaf模板引擎技术做web开发。

究竟是什么样的一个技术,竟然可以得到SpringBoot的青睐,那这个我必须要好好研究一番。

 

什么是模板引擎

在传统的页面开发过程中通常采用的HTML+ JS技术,而现在大部分网站都采用标签化+模块化 的设计。模板引擎其实就是根据这种方式,使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档在原有的HTML页面中来填充数据。最终达到渲染页面的目的。而模板引擎技术主要分两种:

 

常用的模板引擎技术:

  • Thymeleaf
  • FreeMarker
  • Velocity

今天咱们就来学习Thymeleaf.

 

什么是Thymeleaf

Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。

Thymeleaf的主要目标是提供一种优雅且高度可维护的模板创建方式。为此,它以自然模板的概念为基础,以不影响模板用作设计原型的方式将其逻辑注入模板文件。这样可以改善设计沟通,并缩小设计团队与开发团队之间的差距。

Thymeleaf也已经从一开始就设计了Web标准-尤其是HTML5-如果需要的话,允许您创建完全验证的模板

在现代web开发领域,前后端分离已经成了标配,前端可以独立部署成为服务,前后端从物理上完全进行隔离,降低程序耦合度。但是SpringBoot官方依然为我们提供了模版引擎用于一些无需前后端分离的场景。Thymeleaf是新一代的模板引擎,在Spring Boot 中,官方推荐使用Thymeleaf来做前端模版引擎。

 

Thymeleaf的主要特点:

Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板 数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 Thymeleaf 的模板可以静态地运行;当有数据返回到页面时Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL表达式效果,避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

 

Thymeleaf渲染 Web 页面

添加pom依赖

首先我们要根据之前学习SpringBoot的文章,先创建一个最简单的SpringBoot工程,然后第一步添加Thymeleaf的依赖。

<dependency> 

 

   <groupId>org.springframework.boot</groupId> 

   <artifactId>spring-boot-starter-thymeleaf</artifactId> 

</dependency>

 

添加Thymeleaf相关属性配置

在application.properties文件中添加Thymeleaf相关配置

#Thymeleaf配

编码类型

spring.thymeleaf.encoding=utf-8

模板文件解析模式

spring.thymeleaf.mode=HTML5

模板文件位置前缀

spring.thymeleaf.prefix=classpath:/templates/

模板文件位置后缀

spring.thymeleaf.suffix=.html

 

创建HTML

创建html文件,放在template文件夹中

导入thymeleaf的名称空间

<htmllang="en"xmlns:th="http://www.thymeleaf.org">

thymeleaf基础语法

 

创建html页面,我们使用的th:text;可以改变当前元素里面的文本内容;

<html lang="en" xmlns:th="http://www.thymeleaf.org"> 

<head> 

  <meta charset="UTF-8"> 

  <title>SpringBoot集成thymeleaf</title> 

</head> 

  <body> 

      <h1>thymeleaf模板引擎</h1> 

 

      <p th:text="${hello}">这是的内容将被替换</p> 

  </body> 

</html>

 

创建controller测试

在写controller的时候,一定要注意这次controller我们使用注解是@Controller,因为我们要跳转到html,不再是返回JSON数据了。

/**

* SpringBoot集成thymeleaf

*/

@Controller

public class ThymeleafController {

  @RequestMapping("/demo")

  public String demo(Map<String,Object> map) {

      map.put("hello", "课工场, 更可靠的IT教育!!!");

      // 返回到模板引擎地址

      return "/demo";

  }

}

最后启动SpirngBoot工程,在浏览器地址栏中输入http://localhost:8080/demo就可以了。

 

如果你看到了以上几个大字,说明你已经掌握了SpringBoot在web开发领域的重要技能了。

这节主要是把SpirngBoot集成模板引擎Thymeleaf中的步骤梳理了一下,希望同学们可以有所收获。

 

喜欢我们的文章吗?还想了解互联网哪些技术,欢迎留言告诉我们

【AI课工场】互联网知识也能如此好玩~

更多热门互联网技术文章抢先知微信公众号【kgc-cn】

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值