Spring Boot 2.x基础教程:使用 Thymeleaf开发Web页面

通过本系列教程的前几章内容(API开发、数据访问)。我们已经具备完成一个涵盖数据存储、提供HTTP接口的完整后端服务了。依托这些技能,我们已经可以配合前端开发人员,一起来完成一些前后端分离的Web项目,或是一些小程序、或者是App之类的应用开发。

对于Web项目来说,前后端分离模式是目前最为流行的,主要得益于前端框架的完善以及前后端分离方案的日渐成熟。这样的实现模式帮助Web类产品的开发团队更好的拆分任务,以及让开发人员更加聚焦在某一端的开发技术之上。所以,在本教程中,优先介绍了如何开发API,而不是开发Web页面。但是,传统模式的Web页面在一个项目中就可以管理,如果开发人员技能本身就可覆盖全栈,那直接采用传统模板引擎方式开发,也是个不错的选择。尤其对于一些老团队,对模板引擎非常熟悉,可以减少非常多的学习成本,直接上手Spring Boot来开发Web应用。

接下来,我们就来具体讲讲在Spring Boot应用中,如何使用Thymeleaf模板引擎开发Web页面类的应用。

静态资源访问

在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则:

  • /static
  • /public
  • /resources
  • /META-INF/resources

举例:我们可以在src/main/resources/目录下创建static,在该位置放置一个图片文件。启动程序后,尝试访问http://localhost:8080/D.jpg。如能显示图片,配置成功。

渲染Web页面

在之前的示例中,我们都是通过@RestController来处理请求,所以返回的内容为json对象。那么如果需要渲染html页面的时候,要如何实现呢?

模板引擎

在动态HTML实现上Spring Boot依然可以完美胜任,并且提供了多种模板引擎的默认配置支持,所以在推荐的模板引擎下,我们可以很快的上手开发动态网站。

Spring Boot提供了自动化配置模块的模板引擎主要有以下几种:

  • Thymeleaf
  • FreeMarker
  • Groovy

当你使用上述模板引擎中的任何一个,它们默认的模板配置路径为:src/main/resources/templates。当然也可以修改这个路径,具体如何修改,可在后续各模板引擎的配置属性中查询并修改。

补充:Spring Boot从一开始就建议使用模板引擎,避免使用JSP。同时,随着Spring Boot版本的迭代,逐步的淘汰了一些较为古老的模板引擎。

Thymeleaf

Thymeleaf是本文我们将具体介绍使用的模板引擎。它是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。

Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。

示例模板:

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</td>
      <th th:text="#{msgs.headers.price}">Price</td>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
    </tr>
  </tbody>
</table>

可以看到Thymeleaf主要以属性的方式加入到html标签中,浏览器在解析html时,当检查到没有的属性时候会忽略,所以Thymeleaf的模板可以通过浏览器直接打开展现,这样非常有利于前后端的分离。

动手试一下

第一步:新建一个Spring Boot应用,在pom.xml中加入所需的模板引擎模块,比如使用thymeleaf的话,只需要引入下面依赖:

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

第二步:创建一个Spring MVC的传统Controller,用来处理根路径的请求,将解决渲染到index页面上,具体实现如下

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(ModelMap map) {
        map.addAttribute("host", "http://blog.didispace.com");
        return "index";
    }

}

简要说明:

  • 在渲染到index页面的时候,通过ModelMap,往页面中增加一个host参数,其值为http://blog.didispace.com
  • return的值index代表了要使用的模板页面名称,默认情况下,它将对应到src/main/resources/templates/目录下的index.html模板页面

第三步:根据上一步要映射的模板,去模板路径src/main/resources/templates下新建模板文件index.html,内容如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
<h1 th:text="${host}">Hello World</h1>
</body>
</html>

在该页面的body中,包含了一个带有Thymeleaf属性的h1标签,该便签内容将绑定host参数的值。

由于Thymeleaf通过属性绑定的特性。该模板页面同其他模板引擎不同,直接通过浏览器打开html页面,它是可以正常运作的,将会直接展现Hello World标题。这有利于开发页面的时候可以在非启动环境下验证应前端样式的正确性。

如果启动程序后,访问http://localhost:8080/,上面页面就会展示Controller中host的值:http://blog.didispace.com,做到了不破坏HTML自身内容的数据逻辑分离。

更多Thymeleaf的页面语法,可以访问Thymeleaf的官方文档来深入学习使用。

Thymeleaf的配置参数

如有需要修改默认配置的时候,只需复制下面要修改的属性到application.properties中,并修改成需要的值:

# Enable template caching.
spring.thymeleaf.cache=true
# Check that the templates location exists.
spring.thymeleaf.check-template-location=true
# Content-Type value.
spring.thymeleaf.content-type=text/html
# Enable MVC Thymeleaf view resolution.
spring.thymeleaf.enabled=true
# Template encoding.
spring.thymeleaf.encoding=UTF-8
# Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.excluded-view-names=
# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML5
# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html  spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain. spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.

举几个我们常用的配置内容:

Q:不想每次修改页面都重启

A:修改spring.thymeleaf.cache参数,设置为false

Q:不想使用template目录存放模板文件

A:修改spring.thymeleaf.prefix参数,设置为你想放置模板文件的目录

Q:不想使用index作为模板文件的扩展名

A:修改spring.thymeleaf.suffix参数,设置为你想用的扩展名

Q:HTML5的严格校验很烦人

A:修改spring.thymeleaf.mode参数,设置为LEGACYHTML5

更多本系列免费教程连载「点击进入汇总目录」

代码示例

本文的相关例子可以查看下面仓库中的chapter4-1目录:

如果您觉得本文不错,欢迎Star支持,您的关注是我坚持的动力!

欢迎关注我的公众号:程序猿DD,获得独家整理的学习资源和日常干货推送。
如果您对我的专题内容感兴趣,也可以关注我的博客:didispace.com

原文地址:https://www.cnblogs.com/didispace/p/12382242.html

时间: 2024-10-08 00:27:28

Spring Boot 2.x基础教程:使用 Thymeleaf开发Web页面的相关文章

Spring Boot 2.x基础教程:使用Swagger2构建强大的API文档

随着前后端分离架构和微服务架构的流行,我们使用Spring Boot来构建RESTful API项目的场景越来越多.通常我们的一个RESTful API就有可能要服务于多个不同的开发人员或开发团队:IOS开发.Android开发.Web开发甚至其他的后端服务等.为了减少与其他团队平时开发期间的频繁沟通成本,传统做法就是创建一份RESTful API文档来记录所有接口细节,然而这样的做法有以下几个问题: 由于接口众多,并且细节复杂(需要考虑不同的HTTP请求类型.HTTP头部信息.HTTP请求内容

Spring Boot 2.x基础教程:使用国产数据库连接池Druid

上一节,我们介绍了Spring Boot在JDBC模块中自动化配置使用的默认数据源HikariCP.接下来这一节,我们将介绍另外一个被广泛应用的开源数据源:Druid. Druid是由阿里巴巴数据库事业部出品的开源项目.它除了是一个高性能数据库连接池之外,更是一个自带监控的数据库连接池.虽然HikariCP已经很优秀,但是对于国内用户来说,可能对于Druid更为熟悉.所以,对于如何在Spring Boot中使用Druid是后端开发人员必须要掌握的基本技能. 配置Druid数据源 这一节的实践我们

Spring Boot干货系列:(五)开发Web应用JSP篇

Spring Boot干货系列:(五)开发Web应用JSP篇 原创 2017-04-05 嘟嘟MD 嘟爷java超神学堂 前言 上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天来介绍一下如何使用SpringBoot官方不推荐的jsp,虽然难度有点大,但是玩起来还是蛮有意思的. 正文 先来看看整体的框架结构,跟前面介绍Thymeleaf的时候差不多,只是多了webapp这个用来存放jsp的目录,静态资源还是放在resources的static下面. 引入依赖 使用内嵌的to

Spring Boot 2.x基础教程:快速入门

简介 在您第1次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复黏贴的配置有一些厌烦?那么您就不妨来试试使用Spring Boot来让你更易上手,更简单快捷地构建Spring应用! Spring Boot让我们的Spring应用变的更轻量化.我们不必像以前那样繁琐的构建项目.打包应用.部署到Tomcat等应用服务器中来运行我们的业务服务.通过Spring Boot实现的服务,只需要依靠一个Java类,把它打包成jar,并通过j

Spring Boot 2.x基础教程:使用Spring Data JPA访问MySQL

在数据访问这章的第一篇文章<Spring中使用JdbcTemplate访问数据库> 中,我们已经介绍了如何使用Spring Boot中最基本的jdbc模块来实现关系型数据库的数据读写操作.那么结合Web开发一章的内容,我们就可以利用JDBC模块与Web模块的功能,综合着使用来完成一个适用于很多简单应用场景的后端应用了. 然而当我们有一定的开发经验之后,不难发现,在实际开发过程中,对数据库的操作大多可以归结为:"增删改查".就最为普遍的单表操作而言,除了表和字段不同外,语句几

Spring Boot 2.x基础教程:使用JdbcTemplate访问MySQL数据库

在第2章节中,我们介绍了如何通过Spring Boot来实现HTTP接口,以及围绕HTTP接口相关的单元测试.文档生成等实用技能.但是,这些内容还不足以帮助我们构建一个动态应用的服务端程序.不论我们是要做App.小程序.还是传统的Web站点,对于用户的信息.相关业务的内容,通常都需要对其进行存储,而不是像第2章节中那样,把用户信息存储在内存中(重启就丢了!). 对于信息的存储,现在已经有非常非常多的产品可以选择,其中不乏许多非常优秀的开源免费产品,比如:MySQL,Redis等.接下来,在第3章

Spring Cloud Spring Boot mybatis分布式微服务云架构 开发Web应用

静态资源访问在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static/public/resources/META-INF/resources举例:我们可以在src/main/resources/目录下创建static,在该位置放置一个图片文件.启动程序后,尝试访问http://localhost:8080/D.jpg.如能显示图片,配置成功. 渲染Web页面在

Spring Boot 2.0.2 教程 - 目录

Spring Boot 2.0.2 教程 - Hello World - 01 Spring Boot 2.0.2 教程 - Hello World 之 intellij idea 创建web项目 - 02 Spring Boot 2.0.2 教程 - 配置文件application.properties - 03 Spring Boot 2.0.2 教程 - 日志管理 - 04 Spring Boot 2.0.2 教程 - 集成jsp和静态资源css,js,image的访问 - 05 Spri

Spring Boot Log 日志使用教程

我们编写任何 Spring Boot 程序,可能绕不开的就是 log 日志框架(组件). 在大多数程序员眼中日志是用来定位问题的.这很重要. 本项目源码下载 注意本项目提供的源码已在后期重新编写,有部分日期描述不一致. 如果你只是想知道 Spring boot log 如何使用,请直接观看 3.2 使用 Spring Boot Logback 1 Log 日志概述 1.1 Log 日志组件能干什么 日志能干的事情很多,对于学习程序,测试的工程师来说,日志能够定位问题,解决问题,是最大的功能点.