Spring Boot视图技术_springboot 视图-优快云博客

本文介绍了Spring Boot支持的视图技术，重点讲解了Thymeleaf的基本语法和使用，包括常用标签、标准表达式如变量、选择变量、消息和链接表达式，以及Thymeleaf的模板设置、静态资源访问和数据页面展示的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Spring Boot视图技术

Spring Boot支持的视图技术
Thymeleaf基本语法
Thymeleaf基本使用
- Thymeleaf模板基本设置
- 静态资源访问
使用Thymeleaf完成数据的页面展示

Spring Boot支持的视图技术

前端引擎技术的出现，使前端开发人员无须关注后端业务的具体实现，值关注自己呈现的效果即可，从而解决了前端代码错综复杂的问题，实现了前后端分离开发。Spring Boot对很多模块引擎技术提供了支持，具体介绍如下：
（1）FreeMarker：FreeMarker是一个基于模板生成输出文本的模板引擎，不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入开发产品的组件。
（2）Groovy：Groovy是一种基于JVM的敏捷开发语言，结合了Ruby和Smakktalk的欠打特性，能够与Java代码很好的结合，也能扩招现有的代码运行在JVM上，可以使用Java语言编写的其他库。
（3）Thymeleaf：是一种用于Web和独立环境的现代服务器端的Java模板引擎，主要目标是将优雅的Java模板带到开发流程中，将HTML在浏览器中政企显示，并且可以作为静态原型。
（4）Mustache：Mustache是轻逻辑的模板引擎，是一种JSP模板，用于对JS进行分离展示，优势在于可以应用到JavaScript、PHP、Python。
Spring Boot不太支持JSP模板，没有提供对应的整合配置，这是因为使用嵌入式Spring容器的Spring Boot应用程序对于JSP模板存在一些限制，具体如下所示：
（1）Spring Boot默认使用嵌入式Servlet容器以JAR包的方式进行项目打包JAR打包不支持JSP模板。
（2）使用Undertow嵌入式容器部署Spring Boot项目是，不支持JSP模板
（3）Spring Boot默认提供一个处理请求路径“/error”，统一错误处理器，使用JSP模板时不能使用Spring Boot自带的异常处理器，只能根据要求在Spring项目上指定位置定制错误页面。

Thymeleaf基本语法

常用标签

在Html上常用Thymeleaf标签，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/getvg.css" th:href="@{/css/gtvg.css}">
    <title>Title</title>
</head>
<body>
  <p th:text="#{hello}">欢迎进入Thymeleaf</p>
</body>
</html>

上述代码中的xmlns:th="http://www.thymeleaf.org"是用于引入Thymeleaf模板引擎。
Thymeleaf提供了许多标签

th:标签	说明
th:insert	页面片段包含
th:replace	页面片段包含
th:each	元素遍历（类似JSP中的c:forEach标签）
th:if	条件判断，条件成立时显示th标签内容
th:unless	条件判断，条件不成立时显示th标签的内容
th:switch	条件判断，进行选择性匹配
th:case	th:switch分支的条件判断
th:object	用于替换对象
th:atr	通用属性修改
th:with	定义局部变量
th:attroepend	通用属性修改将计算结果追加前缀到现有属性值。
th:attrprepend	通用属性修改，将计算结果后缀到现有属性值
th:value	属性值修改，指定标签属性值
th:utext	用于指定标签显示的文本内容，对特殊标签不转义
th:fragment	声明片段
th:remove	移除片段

上述操作是以HTML为基础嵌入Thymeleaf模板引擎，并使用th:*属性进行了页面需求开发，在Thymeleaf页面使用th:是不允许的，我们如果需要使用Thymeleaf可以使用data-th-。

标准表达式

Thymeleaf模板引擎提供了多种表达式语法。
Thymeleaf主要表达式语法

说明	表达式语法
变量表达式	${…}
选择变量表达式	*{…}
消息表达式	#{…}
链接URL表达式	@{…}
片段表达式	~{…}

变量表达式

变量表达式主要用于获取上下文中的变量值，示例代码：

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

上述代码中，如果当程序没有启动或者当前上下文中不存在title变量，该片段会显示标签默认值“这是标题”，如果当前上下文中存在title变量并且程序已经启动，当前p标签中的默认文本内容将会被title边两所替换，从而达到模板引擎页面数据动态替换的效果。
Thymeleaf为变量所在的域提供了一些内置对象没具体如下所示：
（1）#ctx：上下文对象
（2）#vars：上下文变量
（3）#locale：上下文区域设置
（4）#request：（仅限Web Context）HttpServletRequest对象
（5）#response：（仅限Web Context）HttpServletResponse对象
（6）#session：（仅限Web Context）HttpSession对象
（7）#servletContext：（仅限Web Context）ServletContext
示例代码如下：

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

选择变量表达式

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

<div th:object="${session.user}">
	<p>Name:<span: th:text="${object.firstName}">Sebastian</span></p>
	<p>SurName:<span th:text="${session.user.lastName}">Pepper</span>
	<p>Nationality:<span th:text="*{nationality}">nationality</span></p>
</div>

上述表达式${object.firstName}变量表达式使用Thymeleaf模板提供的内置对象object，当前上下文对象中的firstName属性值, ${session.user.lastName}变量表达式获取当前user对象lastName属性值。*{nationality}选择变量表达式获取当前指定对象user的nationality属性值。

消息表达式

消息表达式主要用于Thymeleaf模板页面国际化内容的动态替换和展示。

链接表达式

链接表达式@{…}一般用于页面跳转或者资源的引入，代码如下：

<a href="details.html"
	th:href="@http://localhost:8080/gtvg/datails(orderId=${o.id})">view</a>
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

片段表达式

片段表达式是一种用来将标记片段移动到模板中的方法，其中最常见的用法是将th:insert或th:replace属性插入片段
代码示例

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

Thymeleaf基本使用

Thymeleaf模板基本设置

在Spring Boot项目中使用Thymeleaf必须先引用Thymeleaf依赖
示例代码

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

然后在全局变量中配置一些参数

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

静态资源访问

Spring Boot默认设置了静态资源的访问路径，默认将/**所有访问映射到以下目录
（1）classpath:/META-INF/resources/:项目类路径下的META-INF文件夹下的resource文件夹下所有的文件
（2）classpath:/resources/：项目类路径下的resource文件夹下的所有文件
（3）classpath:/static/:项目类路径的static文件夹下的所有文件
（4）classpath:/public：项目类路径下的public文件夹下所有文件

使用Thymeleaf完成数据的页面展示

（1）创建Spring Boot项目，引入Thymeleaf依赖
在这里插入图片描述
（2）编写配置文件
打开application.properties全局配置文件，在该文件中对Thymeleaf模板页面进行设置

#关闭模板缓存
spring.thymeleaf.cache=false

（3）创建Web控制类

package com.itheima.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Calendar;

@Controller
public class LoginController {
    @GetMapping("/toLoginPage")
    public String toLoginPage(Model model){
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login";
    }
}

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

<!DOCTYPE html>
<html lang="en">
<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/boosstrap.min.css}" rel="stylesheet">
    <link th:href="@{/login/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
  <form class="form-signin">
    <img class="mb-4" th:src="@{/img/login.jpg}" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
    <input type="text" class="form-control" placeholder="密码" required="">
    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remeber-me">记住我
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    <p class="mt-5 mt-3 text-muted"><span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
  </form>
</body>
</html>

“th:href”和“th:src”分别引入了两个外联的样式文件和一个图片。
（5）效果测试
访问http://localhost:8080/toLoginPage

在这里插入图片描述
下面的年数为2022-2023而不是2018-2019说明Spring Boot与Thymeleaf整合。