SpringBoot详细讲解视图整合引擎thymeleaf

目录
  • 1. 支持的视图技术
  • 2. Thymeleaf
    • 2.1 Thymeleaf语法
    • 2.2 标准表达式
      • 1. 变量表达式 ${…}
      • 2. 选择变量表达式 *{…}
      • 3. 消息表达式 #{…}
      • 4. 链接表达式 @{…}
      • 5. 片段表达式 ~{…}
  • 3. 基本使用
    • 3.1 Thymeleaf模板基本配置
    • 3.2 静态资源的访问
    • 3.3 完成数据的页面展示
      • 1. 创建Spring Boot项目
      • 2. 编写配置文件
      • 3. 创建web控制类
      • 4. 创建模板页面并引入静态资源文件
      • 5.效果测试

1. 支持的视图技术

前端模板引擎技术的出现,使前端开发人员无需关注后端业务的具体实现,只关注自己页面的呈现效果即可,并且解决了前端代码错综复杂的问题、实现了前后端分离开发。Spring Boot框架对很多常用的

模板引擎技术(如:FreeMarker、Thymeleaf、Mustache等)提供了整合支持

Spring Boot不太支持常用的JSP模板,并且没有提供对应的整合配置,这是因为使用嵌入式Servlet容器的Spring Boot应用程序对于JSP模板存在一些限制 :

  • 在Jetty和Tomcat容器中,Spring Boot应用被打包成war文件可以支持JSP。但Spring Boot默认使用嵌入式Servlet容器以JAR包方式进行项目打包部署,这种JAR包方式不支持JSP。
  • 如果使用Undertow嵌入式容器部署Spring Boot项目,也不支持JSP模板。(Undertow 是红帽公司开发的一款基于 NIO 的高性能 Web 嵌入式服务器)
  • Spring Boot默认提供了一个处理请求路径“/error”的统一错误处理器,返回具体的异常信息。使用JSP模板时,无法对默认的错误处理器进行覆盖,只能根据Spring Boot要求在指定位置定制错误页面。

上面对Spring Boot支持的模板引擎进行了介绍,并指出了整合JSP模板的一些限制。接下来,对其中常用的Thymeleaf模板引擎进行介绍,并完成与Spring Boot框架的整合实现

2. Thymeleaf

Thymeleaf是一种现代的基于服务器端的Java模板引擎技术,也是一个优秀的面向Java的XML、XHTML、HTML5页面模板,它具有丰富的标签语言、函数和表达式,在使用Spring Boot框架进行页面设计时,一般会选择Thymeleaf模板

2.1 Thymeleaf语法

常用标签

在HTML页面上使用Thymeleaf标签,Thymeleaf 标签能够动态地替换掉静态内容,使页面动态展示。为了大家更直观的认识Thymeleaf,下面展示一个在HTML文件中嵌入了Thymeleaf的页面文件,示例代

码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" media="all"
     href="../../css/gtvg.css" rel="external nofollow"  th:href="@{/css/gtvg.css}" rel="external nofollow"  />
  <title>Title</title>
</head>
<body>
  <p th:text="${hello}">欢迎进入Thymeleaf的学习</p>
</body>
</html>

上述代码中,“xmlns:th=“http://www.thymeleaf.org”“ 用于引入Thymeleaf模板引擎标签,使用关键字“th”标注标签是Thymeleaf模板提供的标签,其中,“th:href”用于引入外联样式文件,“th:text”用于动态显示标签文本内容。

除此之外,Thymeleaf模板提供了很多标签,接下来,通过一张表罗列Thymeleaf的常用标签

2.2 标准表达式

Thymeleaf模板引擎提供了多种标准表达式语法,在正式学习之前,先通过一张表来展示其主要语法及说明

1. 变量表达式 ${…}

变量表达式${…}主要用于获取上下文中的变量值,示例代码如下:

<p th:text="${title}">这是标题</p>

示例使用了Thymeleaf模板的变量表达式${…}用来动态获取P标签中的内容,如果当前程序没有启动或者当前上下文中不存在title变量,该片段会显示标签默认值“这是标题”;如果当前上下文中存在title变量

并且程序已经启动,当前P标签中的默认文本内容将会被title变量的值所替换,从而达到模板引擎页面数据动态替换的效果

同时,Thymeleaf为变量所在域提供了一些内置对象,具体如下所示

# ctx:上下文对象
# vars:上下文变量
# locale:上下文区域设置
# request:(仅限Web Context)HttpServletRequest对象
# response:(仅限Web Context)HttpServletResponse对象
# session:(仅限Web Context)HttpSession对象
# servletContext:(仅限Web Context)ServletContext对象

结合上述内置对象的说明,假设要在Thymeleaf模板引擎页面中动态获取当前国家信息,可以使用#locale内置对象,示例代码如下

The locale country is: <span th:text="${#locale.country}">US</span>.

上述代码中,使用th:text="${#locale.country}"动态获取当前用户所在国家信息,其中标签内默认内容为US(美国),程序启动后通过浏览器查看当前页面时,Thymeleaf会通过浏览器语言设置来识别当前用户所在国家信息,从而实现动态替换

2. 选择变量表达式 *{…}

选择变量表达式和变量表达式用法类似,一般用于从被选定对象而不是上下文中获取属性值,如果没有选定对象,则和变量表达式一样,示例代码如下

<div th:object="${book}">
 <p>titile: <span th:text="*{title}">标题</span>.</p>
</div

*{title} 选择变量表达式获取当前指定对象book的title属性值。

3. 消息表达式 #{…}

消息表达式#{…}主要用于Thymeleaf模板页面国际化内容的动态替换和展示,使用消息表达式#{…}进行国际化设置时,还需要提供一些国际化配置文件。

4. 链接表达式 @{…}

链接表达式@{…}一般用于页面跳转或者资源的引入,在Web开发中占据着非常重要的地位,并且使用也非常频繁,示例代码如下:

<a th:href="@{http://localhost:8080/order/details(orderId=${o.id})}" rel="external nofollow" >view</a>
<a  th:href="@{/order/details(orderId=${o.id},pid=${p.id})}" rel="external nofollow" >view</a>

上述代码中,链接表达式@{…}分别编写了绝对链接地址和相对链接地址。在有参表达式中,需要按照@{路径(参数名称=参数值,参数名称=参数值…)}的形式编写,同时该参数的值可以使用变量表达式来传递动态参数值

5. 片段表达式 ~{…}

片段表达式~{…}用来标记一个片段模板,并根据需要移动或传递给其他模板。其中,最常见的用法是使用th:insert或th:replace属性插入片段,示例代码如下:

<div th:insert="~{thymeleafDemo::title}"></div>

上述代码中,使用th:insert属性将title片段模板引用到该标签中。thymeleafDemo为模板名称,Thymeleaf会自动查找 “/resources/templates/” 目录下的thymeleafDemo模板,title为片段名称

3. 基本使用

3.1 Thymeleaf模板基本配置

首先 在Spring Boot项目中使用Thymeleaf模板,首先必须保证引入Thymeleaf依赖,示例代码如下:

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

其次,在全局配置文件中配置Thymeleaf模板的一些参数。一般Web项目都会使用下列配置,示例代码如:

spring.thymeleaf.cache = true    #启用模板缓存
spring.thymeleaf.encoding = UTF_8  #模板编码
spring.thymeleaf.mode = HTML5    #应用于模板的模板模式
spring.thymeleaf.prefix = classpath:/templates/ #指定模板页面存放路径
spring.thymeleaf.suffix = .html   #指定模板页面名称的后缀

上述配置中,spring.thymeleaf.cache表示是否开启Thymeleaf模板缓存,默认为true,在开发过程中通常会关闭缓存,保证项目调试过程中数据能够及时响应;spring.thymeleaf.prefix指定了Thymeleaf模板页面的存放路径,默认为classpath:/templates/;spring.thymeleaf.suffix指定了Thymeleaf模板页面的名称后缀,默认为.html

3.2 静态资源的访问

开发Web应用时,难免需要使用静态资源。Spring boot默认设置了静态资源的访问路径。

使用Spring Initializr方式创建的Spring Boot项目,默认生成了一个resources目录,在resources目录中新建public、resources、static三个子目录下,Spring boot默认会挨个从public、resources、static里面查找静态资源

3.3 完成数据的页面展示

1. 创建Spring Boot项目

引入Thymeleaf依赖

2. 编写配置文件

打开application.properties全局配置文件,在该文件中对Thymeleaf模板页面的数据缓存进行设置

# thymeleaf页面缓存设置(默认为true),开发中方便调试应设置为false,上线稳定后应保持默认
true
spring.thymeleaf.cache=false

使用“spring.thymeleaf.cache=false”将Thymeleaf默认开启的缓存设置为了false,用来关闭模板页面缓存

3. 创建web控制类

在项目中创建名为com.lagou.controller的包,并在该包下创建一个用于前端模板页面动态数据替换效果测试的访问实体类LoginController

@Controller
public class LoginController {
  /**
    * 获取并封装当前年份跳转到登录页login.html
   */
  @RequestMapping("/toLoginPage")
  public String toLoginPage(Model model){
    model.addAttribute("currentYear",
Calendar.getInstance().get(Calendar.YEAR));
    return "login";
 }

toLoginPage()方法用于向登录页面login.html跳转,同时携带了当前年份信息currentYear。

4. 创建模板页面并引入静态资源文件

在“classpath:/templates/”目录下引入一个用户登录的模板页面login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,shrink-
to-fit=no">
  <title>用户登录界面</title>
  <link th:href="@{/login/css/bootstrap.min.css}" rel="external nofollow"  rel="stylesheet">
  <link th:href="@{/login/css/signin.css}" rel="external nofollow"  rel="stylesheet">
</head>
<body class="text-center">
<!-- 用户登录form表单 -->
<form class="form-signin">
  <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
  <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
  <input type="text" class="form-control"
     th:placeholder="用户名" required="" autofocus="">
  <input type="password" class="form-control"
     th:placeholder="密码" required="">
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> 记住我
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit" >登录</button>
  <p class="mt-5 mb-3 text-muted"> <span
th:text="${currentYear}">2019</span>-<span
th:text="${currentYear}+1">2020</span></p>
</form>
</body>
</html>

通过“xmlns:th=“http://www.thymeleaf.org””引入了Thymeleaf模板标签;

使用“th:href”和“th:src”分别引入了两个外联的样式文件和一个图片;

使用“th:text”引入了后台动态传递过来的当前年份currentYear

5.效果测试

到此这篇关于SpringBoot详细讲解视图整合引擎thymeleaf的文章就介绍到这了,更多相关SpringBoot thymeleaf内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Springboot整合freemarker和相应的语法详解

    FreeMarker 是⼀款 模板引擎: 即⼀种基于模板和要改变的数据, 并⽤来⽣成输出⽂本(HTML⽹⻚,⼦邮件,配置⽂件,源代码等)的通⽤⼯具. 是⼀个Java类库. FreeMarker 被设计⽤来⽣成 HTML Web ⻚⾯,特别是基于 MVC 模式的应⽤程序,将视图从业务逻辑抽离处理,业务中不再包括视图的展示,⽽是将视图交给 FreeMarker 来输出.虽然 FreeMarker 具有些编程的能⼒,但通常由 Java 程序准备要显示的数据,由 FreeMarker ⽣成⻚⾯,通过模板

  • springboot整合freemarker的踩坑及解决

    目录 springboot整合freemarker踩坑 报错 问题原因 解决方法 springboot freemarker基础配置及使用 1.基础配置 2.基础使用 springboot整合freemarker踩坑 报错 2021-04-23 02:01:18.148 ERROR 9484 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatc

  • SpringBoot整合Thymeleaf与FreeMarker视图层技术

    目录 整合Thymeleaf 1. 创建工程添加依赖 2. 配置Thymeleaf 3. 配置控制器 4. 创建视图 5. 运行 整合FreeMarker 1. 创建项目添加依赖 2. 配置FreeMarker 3. 控制器 4. 创建视图 5. 运行 整合Thymeleaf Thymeleaf是新一代Java模板引擎,类似于Velocity.FreeMarker等传统Java模板引擎.与传统Java模板引擎不同的是,Thymeleaf支持HTML原型,既可以让前端工程师在浏览器中直接打开查看样

  • SpringBoot超详细讲解Thymeleaf模板引擎

    Jsp是最早的模板技术,用来处理视图层的,用来做数据显示的模板 B S结构: B:浏览器:用来显示数据,发送请求,没有处理能力 发送一个请求,访问a.jsp,a.jsp在服务器端变成Servlet,在将输出的数据返回给浏览器,浏览器就可以看到结果数据,jsp最终翻译过来也是个html页面 模板技术你就可以把它们当成字符串的替换,比如说:这里{data}这里有一个字符串,你把它换成固定值其他值,但是这个替换有一些附加的功能,通过模板技术处理视图层的内容 第一个例子: pom.xml:Thymele

  • Springboot整合Freemarker的实现详细过程

    基本配置.测试 1.导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> 2.准备一个Freemarker模板(.ftl) 3.注入Configuration对象(freemarker.template包下) 4.生成商品详情模

  • SpringBoot整合Freemarker的基本步骤

    添加pom依赖 <!-- springboot整合freemarker --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> 在application.yml中添加相关配置 # 配置freemarker spring:

  • Springboot整合FreeMarker的实现示例

    目录 一.项目搭建 1.新建模块 2.导入依赖 :将不相关的依赖删掉 3.新建软件包,放入student实体类 4.新建StudentMapper接口 5.Springboot04Application内引用mapper 6.application.yml文件配置 7.测试 8.将切面.util包.启动器导入 9.新建service层 10.新建controller层 11.运行启动类Springboot04Application,访问localhost:8080网址 二.freemarker介

  • SpringBoot中使用Thymeleaf模板详情

    目录 一.什么是Thymeleaf 二.SpringBoot中使用Thymeleaf模板 1.pom.xml中添加thymeleaf依赖 2.关闭thymeleaf缓存 3.创建thymeleaf模板页面 4.创建一个类(用于与上述html页面交互) 5.访问服务路径 一.什么是Thymeleaf 官网原话:Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本. Thymeleaf的主要目标是提供一种优雅且高度

  • Springboot详解如何整合使用Thymeleaf

    目录 引入Thymeleaf 取值 有无转义 循环 模板引擎的作用就是我们来写一个页面模板,比如有些值呢,是动态的,我们写一些表达式.而这些值,从哪来呢,就是我们在后台封装一些数据.然后把这个模板和这个数据交给我们模板引擎,模板引擎按照我们这个数据帮你把这表达式解析.填充到我们指定的位置,然后把这个数据最终生成一个我们想要的内容给我们写出去,这就是我们这个模板引擎 如果我们没有模板引擎的话,在页面中会提示500 引入Thymeleaf 在项目中加入依赖 <!--thymeleaf--> <

  • SpringBoot详细讲解视图整合引擎thymeleaf

    目录 1. 支持的视图技术 2. Thymeleaf 2.1 Thymeleaf语法 2.2 标准表达式 1. 变量表达式 ${…} 2. 选择变量表达式 *{…} 3. 消息表达式 #{…} 4. 链接表达式 @{…} 5. 片段表达式 ~{…} 3. 基本使用 3.1 Thymeleaf模板基本配置 3.2 静态资源的访问 3.3 完成数据的页面展示 1. 创建Spring Boot项目 2. 编写配置文件 3. 创建web控制类 4. 创建模板页面并引入静态资源文件 5.效果测试 1. 支

  • SpringBoot详细讲解静态资源导入的实现

    目录 SpringBootWeb开发 1. 静态资源导入 webjars 使用自己的静态资源 总结 2.制作特殊的首页 图标转变 Thymeleaf模板引擎 引入Thymeleaf 取值 有无转义 循环 SpringBootWeb开发 回顾一下: springboot帮助我们配置了什么,能不能进行修改,能修改哪些,能否扩展? xxxAutoConfiguration:向容器中自动配置组件 xxxProperties:自动配置类,装配配置文件中自定义的一些内容 开发要解决的问题: 导入静态资源 首

  • Springboot详细讲解RocketMQ实现顺序消息的发送与消费流程

    目录 一.创建Springboot项目添加rockermq依赖 二.配置rocketmq 三.新建一个controller来做消息发送 四.创建消费端监听消息消费消息 五.启动服务测试顺序消息发送与消费 如何实现顺序消息? 需要程序保证发送和消费的是同一个 Queue rocketmq默认发送的消息是进入多个消息队列,然后消费端多线程并发消费,所以默认情况,不是順序消费消息的:有時候,我们需要顺序消费一批消息,比如电商系统 订单创建.支付.完成操作,需要順序执行: RocketMQTemplat

  • SpringBoot详细讲解通过自定义classloader加密保护class文件

    目录 背景 maven插件加密 注意事项 自定义classloader 隐藏classloader 被保护class手动加壳 总结 背景 最近针对公司框架进行关键业务代码进行加密处理,防止通过jd-gui等反编译工具能够轻松还原工程代码,相关混淆方案配置使用比较复杂且针对springboot项目问题较多,所以针对class文件加密再通过自定义的classloder进行解密加载,此方案并不是绝对安全,只是加大反编译的困难程度,防君子不防小人,整体加密保护流程图如下图所示 maven插件加密 使用自

  • SpringBoot详细讲解异步任务如何获取HttpServletRequest

    目录 原因分析 解决方案 前置条件 pom配置 requrest共享 自定义request过滤器 自定义任务执行器 调用示例 原因分析 @Anysc注解会开启一个新的线程,主线程的Request和子线程是不共享的,所以获取为null 在使用springboot的自定带的线程共享后,代码如下,Request不为null,但是偶发的其中body/head/urlparam内容出现获取不到的情况,是因为异步任务在未执行完毕的情况下,主线程已经返回,拷贝共享的Request对象数据被清空 Servlet

  • springBoot详细讲解使用mybaties案例

    首先创建springBoot项目,jdk选择1.8 然后倒入mybaties的相关依赖 我们用的springBoot,当然spring全家桶里面含有mybaties,所以我们直接使用升级版的mybaties-plus. 引入这3个 lombok省的我每次创建对象,都需要get.set方法,以及toString (IDEA里面也要安装lombok插件->file->setting->plugin->搜索lombok安装,完后重启idea,这样lombok在idea中不报错) myba

  • SpringBoot详细讲解多个配置文件的配置流程

    目录 配置文件加载顺序 验证 前期准备 验证配置文件加载顺序 验证属性互补 总结 一般情况下,springboot默认会在resource目录下生成一个配置文件(application.properties或application.yaml),但其实springboot允许配置多个配置文件(application.properties或application.yaml),但是这并不意味着这些配置文件一定会替换默认生成的配置文件,它们是互补的存在.如果在某些场景下需要把配置文件单独拿出来并且启动的

  • SpringBoot详细讲解如何创建及刷新Spring容器bean

    目录 一.前期准备 1.1 创建工程 1.2 创建Controller 二.探究过程 2.1 启动类 2.2 SpringApplication 2.3 ApplicationContextFactory 2.4 SpringApplication 2.5 结论 参考视频:https://www.bilibili.com/video/BV1Bq4y1Q7GZ?p=6 通过视频的学习和自身的理解整理出的笔记. 一.前期准备 1.1 创建工程 创建springboot项目,springboot版本为

  • SpringMVC超详细讲解视图和视图解析器

    目录 SpringMVC-视图和视图解析器 1.基本介绍 2.自定义视图 1.为什么要自定义视图 2.自定义视图实例-代码实现 3.自定义视图工作流程小结 自定义视图-小结 自定义视图-工作流程 4.目标方法直接指定转发或重定向 1.使用实例 2.指定请求转发流程-Debug源码 3.指定重定向流程-Debug源码 SpringMVC-视图和视图解析器 1.基本介绍 在 springMVC 中的目标方法最终返回都是一个视图(有各种视图). 返回的视图都会由一个视图解析器来处理 (视图解析器有很多

随机推荐