Spring Boot企业级开发教程-第4章Spring Boot视图技术

最新推荐文章于 2024-10-07 08:57:49 发布

Ciian

最新推荐文章于 2024-10-07 08:57:49 发布

阅读量879

点赞数 12

分类专栏： Spring boot 文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/rc4gyyc/article/details/137741966

版权

Spring boot 专栏收录该内容

6 篇文章 4 订阅

订阅专栏

文章目录

4.1 Spring Boot支持的视图技术
4.2 Thymaleaf基本语法
4.3 Thymaleaf基本使用
- 4.3.1 Thymeleaf模板基本配置
- 4.3.2 静态资源的访问
4.4 使用Thymaleafs完成页面的数据展示
4.5 使用Thymaleaf配置国际化页面

章节概要
Spring Boot框架为简化项目的整体开发，对一些常用的视图技术实现了整合支持，共主要推荐整合模板引擎技术来实现前端页面的动态化内容。
本章将对Spring Boot支持的视图技术进行介绍，并使用SpringBoot整合其中常用的Thymeleaf模板引擎进行视图页面的实现。

4.1 Spring Boot支持的视图技术

Spring Boot可整合的模板引擎技术
1.FreeMarker
2.Groory
3.Thymeleaf
4.Mustache
前端模板引擎技术的出现，使前端开发人员无需关注后端业务的具体实现，只关注自己页面的呈现效果即可，并且解决了前端代码错综复杂的问题、实现了前后端分离开发。Spring Boot框架对很多常用的模板引擎技术提供了整合支持，具体介绍如下。
- FreeMarker:FreeMarker是一个基于模板生成输出文本(HTML页面、电子邮件、配置文件等)的模板引擎，同时它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入所开发产品的组件。
- Groory:Groory是一种基于JVM(Java虚拟机)的敏捷开发语言，它结合了Python、Ruby和Smalltalk的许多强大特性，Groovy代码能够与Java代码很好地结合，也能扩展现有代码。由于Groory运行在JVM上的特性，因此Groovy可以使用其他Java语言编写的库。
- Thymeleaf:Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎，该模板主要以静态HTML页面嵌入标签属性，浏览器可以直接打开模板文件，便于前后端联调。
- Mustache:Mustache是轻逻辑的模板引擎(Logic-less templates),它是一个JS模板，用于对JS的分离展示。Mustache的优势在于可以应用在JavaScript、PHP、Python、Perl等多种编程语言中。
Spring Boot不太支持常用的JSP模板，并且没有提供对应的整合配置，这是因为使用嵌入式Servle容器的Spring Boot应用程序对于JSP模板存在一些限制，具体如下所示。
- Spring Boot默认使用嵌入式Servlet容器以JAR包方式进行项目打包部署，这种JAR包方式不支持JSP模板。
- 如果使用Undertow嵌入式容器部署Spring Boot项目，也不支持JSP模板。

4.2 Thymaleaf基本语法

常用标签

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"th:href-"@(/css/gtvg.css)">
	<title>Title</title>
</head>
<body>
	<p th:text="#{hello}">欢迎进入Thymeleaff的学习<p>
</body>
</html>

上述代码中，“"mIns:th="http:/www.thymeleaf.org"用于引入Thymeleaf模板引擎标签，使用关键字"th"标注标签是hymeleaf模板提供的标签，其中，"th:href"用于引入外联样式文件，"th:text"用于动态显示标签文本内容
在Thymeleaf页面中使用的th:*属性是HTML5规范所不允许的。如果我们想要使用Thymeleaf模板进行纯HTML5的页面开发，可以使用data-th-*属性替换th:*属性进行页面开发。

标准表达式

Thymeleaf主要语法
在这里插入图片描述

1.变量表达式

变量表达式${…}主要用于获取上下文中的变量值，示例代码如下。
<pth:text="${title}">这是标题</p>
上述示例使用了Thymeleaf模板的变量表达式${…}用来动态获取p标签中的内容，如果当前程序没有启动或者当前上下文中不存在tt变量，该片段会显示标签默认值“这是标题”；如果当前上下文中存在title变量并且程序已经启动，当前p标签中的默认文本内容将会被title变量的值所替换，从而达到模板引擎页面数据动态替换的效果。
同时，Thymeleaf为变量所在域提供了一些内置对象，具体如下所示。
- (1)#ctx:上下文对象
- (2)#vars:上下文变量
- (3)#locale:上下文区域设置
- (4)#request:(仅限Web Context)HttpServletRequest对象
- (5)#response:(仅限Web Context)HttpServletResponse对象
- (6)#session:(仅限Veb Context)HttpSession对象
- (7)#servletContext:(仅限Web Context)ServletContext对象
结合上述内置对象的说明，假设要在Thymeleaf模板引擎页面中动态获取当前国家信息，可以使用#locale内置对象，示例代码如下。
The locale country is:<span th:text="$(#locale.country}">US</span>.
上述代码中，使用th:text="${#locale.country}"动态获取当前用户所在国家信息，其中<Span>标签内默认内容为US(美国)，程序启动后通过浏览器查看当前页面时，Thymeleaf会通过浏览器语言设置来识别当前用户所在国家信息，从而实现动态替换。

2.选择变量表达式

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

<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>
	<p>Nationality:<span th:text="*{nationality}">Saturn</span>.</p>
</div>

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

3.消息表达式

消息表达式#{…}主要用于Thymeleaf模板页面国际化内容的动态替换和展示。使用消息表达式#{…}进行国际化设置时，还需要提供一些国际化配置文件。关于消息表达式的使用，后续小节会详细说明，这里作为了解即可。

4.链接表达式

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

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

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

5.片段表达式

片段表达式~{…}是一种用来将标记片段移动到模板中的方法。其中，最常见的用法是使用th:insert或th:replace属性插入片段，示例代码如下：
<div th:insert="~{thymeleafDemo::title}"></div>
上述代码中，使用th:insert属性将title片段模板引用到该<div>标签中。thymeleafDemo为模板名称，Thymeleaf会自动查找“classpath:/resources/templates/"目录下的hymeleafDemo模板，title为声明的片段名称。

4.3 Thymaleaf基本使用

4.3.1 Thymeleaf模板基本配置

Thymeleaf在Spring Boot中的使用

在Spring Boot项日中使用Thymeleaf模板，必须保证引入Thymeleaf依赖。

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

其次，在全局配置文件中配置Thymeleaf模板的一些参数。

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

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

4.3.2 静态资源的访问

开发Web应用时，难免需要使用静态资源。Spring Boot默认设置了静态资源的访问路径，默认将/**所有访问映射到以下目录。
- (1)classpath:/META-INF/resources:项目类路径下的META-INF文件夹下的resources文件夹下的所有文件。
- (2)classpath:/resources/:项目类路径下的resources文件夹下的所有文件。
- (3)classpath:/static/:项目类路径下的static文件夹下的所有文件。
- (4)classpath:public/:项目类路径下的public文件夹下的所有文件。
使用Spring Initializr方式创建的Spring Boot项目会默认生成一个resources目录，在resources目录中新建public、resources、static3个子目录，Spring Boot默认会依次从public、resources、static里面查找静态资源。

4.4 使用Thymaleafs完成页面的数据展示

搭建步骤：

创建Spring Bootl项目，引入Thymeleaf依赖
编写配置文件，对Thymeleaf模板的页面数据缓存进行设置
- spring.thymeleaf.cache=false
- thymeleaf页面缓存设置（默认为true),开发中方便调试应设置为false,上线稳定后应保持默认true
创建控制类：@Controller

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

创建模板页面并引入静态资源文件
文件4-3中，先通过“mlns:th="http:/www.thymeleaf.org"”引入了Thymeleaf模板标签；然后，在第8、9、14行代码中使用“th:href”和“th:src”分别引入了两个外联的样式文件和一个图片；最后，在第25~26行代码中使用“th:text”引入了后台动态传递过来的当前年份currentYear.
效果测试

4.5 使用Thymaleaf配置国际化页面

编写多语言国际化文件及配置文件
- 在项目的类路径resources下创建名称为i18n的文件夹，并在该文件夹中根据需要编写对应的多语言国际化文件login.properties、login_zh_CN.properties和login_en_US.properties文件，内容如文件4-4、文件4-5和文件4-6所示。
- 文件4-4、文件4-5和文件4-6中，login.properties为自定义默认语言配置文件，login_.zhCN.properties为自定义中文国际化文件，login._en_US.properties为自定义英文国际化文件。
- 需要说明的是，Spring Boot默认识别的语言配置文件为类路径resources下的messages. properties；其他语言国际化文件的名称必须严格按照“文件前缀名_语言代码_国家代码.properties”的形式命名。
- 本示例中，在项目类路径resources下自定义了一个i18n包用于统一配置管理多语言配置文件，并将项目默认语言配置文件名自定义为login.properties,因此，后续如果需要引入自定义国际化文件，必须在项目的全局配置文件中进行国际化文件的基础名配置。
编写配置文件
- 打开项目的application.properties全局配置文件在文件中添加国际化文件的基础名，内容如文件4-7所示。
- 文件4-7中，根据国际化配置文件位置和名称，在项目全局配置文件中使用“spring messages.basename:=i18n.login”设置了自定义国际化文件的基础名。其中，i18n表示国际化文件相对项目类路径resources的位置，login表示多语言文件的前缀名。如果开发者完全按照 Spring Boot默认识别机制，在项目类路径resources下编写messages.properties等国际化文件，可以省略国际化文件基础名的配置。
定制区域信息解析器
- 在完成上一步中多语言国际化文件的编写和配置后，就可以正式在前端页面中结合 Thymeleaf模板相关属性进行国际化语言设置和展示了，不过这种实现方式默认是使用请求头中的语言信息（浏览器语言信息）自动进行语言切换的，有些项目还会提供手动语言切换的功能，这就需要定制区域解析器了。
- 在chapter04项目中创建名为com.itheima.config的包，并在该包下创建一个用于定制国际化功能区域信息解析器的自定义配置类MyLocalResovel,内容如文件4-8所示。
- 文件4-8中，MyLocalResovel配置类实现了LocaleResovel接口，并重写了LocaleResove接口的resolveLocale()方法解析自定义语言。使用@Bean注解将当前配置类注册成Spring容器中一个Bean组件。这样就可以覆盖默认的LocaleResolver组件。在重写的resolveLocale()方法中，可以根据不同的需求切换语言信息从而获取请求的参数，只有请求参数不为空时，才可以进行语言的切换。
- 需要注意的是，在请求参数1的语言手动切换组装时，使用的是下划线“_”进行的切割，这是由多语言配置文件的格式决定的（例如login_zh_CN.properties)；而在请求头参数 Accept–Language的语言自动切换组装时，使用的是短横线“-”进行的切割，这是由浏览器发送的请求头信息样式决定的（例如Accept–Language:en-US,en:q=0.9,zh-CN;q=0.8,Zh;q=0.7)。
页面国际化使用
- 打开项目templates模板文件夹中的用户登录页面login.html,结合Thymeleaf模板引擎实现国际化功能，内容如文件4-9所示。
- 文件4-9中，使用Thymeleaf模块的#{}消息表达式设置了国际化展示的一部分信息。当对记住我rememberme进行国际化设置时，需要在<input>标签外部设置国际化的rememberme,这里使用了行内表达式[[#{login.rememberme}]]动态获取国际化文件中的login.rememberme信息。
整合效果测试
- 从图4-4可以看到，访问的项目登录页出现了中文乱码的情况。
- 在打开的IDEA开发工具中，依次选择【File】→【Settings】选项，打开项目设置窗口，在窗口中搜索“File Encodings”关键字，效果如图4-5所示。
- 在图4-5所示的“File Encodings”编码设置面板中，将“Default encoding for propertiesfiles”选项默认的GBK格式更换为【UTF-8】格式，同时勾选后面的“Transparent native-to-ascii conversion”选项。