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

news2024/10/7 20:34:34

文章目录

  • 4.1 Spring Boot支持的视图技术
  • 4.2 Thymaleaf基本语法
    • 常用标签
    • 标准表达式
      • 1.变量表达式
      • 2.选择变量表达式
      • 3.消息表达式
      • 4.链接表达式
      • 5.片段表达式
  • 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中的使用

  1. 在Spring Boot项日中使用Thymeleaf模板，必须保证引入Thymeleaf依赖。
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  1. 其次，在全局配置文件中配置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完成页面的数据展示

搭建步骤：

  1. 创建Spring Bootl项目，引入Thymeleaf依赖
  2. 编写配置文件，对Thymeleaf模板的页面数据缓存进行设置
    • spring.thymeleaf.cache=false
    • thymeleaf页面缓存设置（默认为true),开发中方便调试应设置为false,上线稳定后应保持默认true
  3. 创建控制类：@Controller
@Controller
public class LoginController{
	/**
	*获取并封装当前年份，跳转到登录页login,html
	*/
	@RequestMapping("/toLoginPage")
	public String toLoginPage (Model model){
		model.addAttribute("currentYear",Calendar.getInstance().get (Calendar.YEAR));
		return "login";
	}
}
  1. 创建模板页面并引入静态资源文件在这里插入图片描述
    文件4-3中，先通过“mlns:th="http:/www.thymeleaf.org"”引入了Thymeleaf模板标签；然后，在第8、9、14行代码中使用“th:href”和“th:src”分别引入了两个外联的样式文件和一个图片；最后，在第25~26行代码中使用“th:text”引入了后台动态传递过来的当前年份currentYear.
  2. 效果测试

4.5 使用Thymaleaf配置国际化页面

  1. 编写多语言国际化文件及配置文件
    • 在项目的类路径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,因此，后续如果需要引入自定义国际化文件，必须在项目的全局配置文件中进行国际化文件的基础名配置。
  2. 编写配置文件
    • 打开项目的application.properties全局配置文件在文件中添加国际化文件的基础名，内容如文件4-7所示。
      在这里插入图片描述
    • 文件4-7中，根据国际化配置文件位置和名称，在项目全局配置文件中使用“spring messages.basename:=i18n.login”设置了自定义国际化文件的基础名。其中，i18n表示国际化文件相对项目类路径resources的位置，login表示多语言文件的前缀名。如果开发者完全按照 Spring Boot默认识别机制，在项目类路径resources下编写messages.properties等国际化文件，可以省略国际化文件基础名的配置。
  3. 定制区域信息解析器
    • 在完成上一步中多语言国际化文件的编写和配置后，就可以正式在前端页面中结合 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)。
  4. 页面国际化使用
    • 打开项目templates模板文件夹中的用户登录页面login.html,结合Thymeleaf模板引擎实现国际化功能，内容如文件4-9所示。
      在这里插入图片描述
      在这里插入图片描述
    • 文件4-9中，使用Thymeleaf模块的#{}消息表达式设置了国际化展示的一部分信息。当对记住我rememberme进行国际化设置时，需要在<input>标签外部设置国际化的rememberme,这里使用了行内表达式[[#{login.rememberme}]]动态获取国际化文件中的login.rememberme信息。
  5. 整合效果测试
    • 从图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”选项。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1686674.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android面试题之Kotlin常见集合操作技巧

Android面试题之Kotlin常见集合操作技巧

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 list 创建和修改 不可变list,listOf var list listOf("a","d","f") println(list.getOrElse(3){"Unkn…
阅读更多...
NebulaGraph

NebulaGraph

文章目录 关于 NebulaGraph客户端支持安装 NebulaGraph关于 nGQLnGQL 可以做什么2500 条 nGQL 示例原生 nGQL 和 openCypher 的关系 Backup&Restore功能 导入导出导入工具导出工具 NebulaGraph ImporterNebulaGraph ExchangeNebulaGraph Spark ConnectorNebulaGraph Flink …
阅读更多...
临时工说：为什么成熟的数据库企业都在云上部署产品，并把主要力量放到云上...

临时工说：为什么成熟的数据库企业都在云上部署产品，并把主要力量放到云上...

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;共2320人左右 1 …
阅读更多...
网站笔记：huggingface——can you run it？

网站笔记：huggingface——can you run it？

Can You Run It? LLM version - a Hugging Face Space by Vokturz 1 配置设置部分 Model Name就是需要测量的模型名称 GPU Vendor ——GPU供应商 Filter by RAM (按RAM过滤) 筛选出所有内存容量在选择范围之间的GPU GPU 下拉菜单选择具体的GPU型号 LoRa % trainable param…
阅读更多...
如何用VSCode debug Python文件

如何用VSCode debug Python文件

诸神缄默不语-个人CSDN博文目录 需求&#xff1a;我其实一般都用print大法来“调试”程序&#xff0c;但是有时对于机械性比较强但是又有些复杂的程序&#xff0c;还是debug比较方便。 debug功能我之前用过NetBeans和eclipse&#xff0c;应该可以明显看出来我是Java转Python党…
阅读更多...
做好智慧校园的顶层设计，助力教育信息化发展

做好智慧校园的顶层设计，助力教育信息化发展

教育信息化已被视为我国教育事业发展的重要支撑。随着国家教育信息化一系列重大工程的部署和实施&#xff0c;我国教育信息化进入快速发展时期&#xff0c;取得了显著成绩。我们认识到国家教育信息化正由初步应用融合阶段向着全面融合创新阶段过度&#xff0c;无论从国家地区的…
阅读更多...
上位机图像处理和嵌入式模块部署（mcu之芯片选择）

上位机图像处理和嵌入式模块部署（mcu之芯片选择）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 目前市面上的mcu很多&#xff0c;有国产的&#xff0c;有进口的&#xff0c;总之种类很多。以stm32为例&#xff0c;这里面又包括了stm32f1、stm32…
阅读更多...
local dimming（局部调光）介绍

local dimming（局部调光）介绍

文章目录 1. 什么是local dimming2. 工作原理3. 类型4. 优点5. 缺点和局限7. 技术发展趋势 1. 什么是local dimming local dimming&#xff08;局部调光&#xff09;是电视和显示器中用于提升画面对比度和画质的背光技术。其基本原理是将背光源&#xff08;通常是LED&#xff…
阅读更多...
python写接口性能测试

python写接口性能测试

import time import requestsdef measure_response_time(api_url):try:start_time time.time()response requests.get(api_url, timeout10) # 设置超时时间为10秒end_time time.time()response_time end_time - start_timeprint(f"接口 {api_url} 的响应时间为&#…
阅读更多...
UE5 OnlineSubsystem Steam创建会话失败解决方法

UE5 OnlineSubsystem Steam创建会话失败解决方法

连接上Steam但是创建会话失败 解决方法 在DefaultEngine.ini中加上bInitServerOnClienttrue,这个其实在官方文档里用注释给出了&#xff0c;直接取消注释就行 删除项目目录中的Saved、Internmediate、Binaries目录 右键你的项目.uproject选择Generate Visual Studio project f…
阅读更多...
QT 圆盘百分比

QT 圆盘百分比

1. /* 设置抗锯齿 */painter.setRenderHints(QPainter::Antialiasing, true);/* 最外层的圆 */QRect drawRect event->rect();QRadialGradient gradient1(drawRect.center(), drawRect.width() / 2, drawRect.center()); gradient1.setColorAt(0, Qt::transparent); gradi…
阅读更多...
志愿者招募|基于SSM＋vue的志愿者招募网站系统的设计与实现(源码+数据库+文档)

志愿者招募|基于SSM＋vue的志愿者招募网站系统的设计与实现(源码+数据库+文档)

志愿者招募网站 目录 基于SSM&#xff0b;vue的志愿者招募网站系统的设计与实现 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台登录模块 5.2.1管理员功能 5.2.2用户功能 5.2.3志愿组织功能 四、数据库设计 五、核心代码 六、论文参考 七、最新计…
阅读更多...
【Qt常用控件】—— 布局管理器

【Qt常用控件】—— 布局管理器

目录 前言 &#xff08;一&#xff09;垂直布局 &#xff08;二&#xff09;水平布局 &#xff08;三&#xff09;网格布局 &#xff08;四&#xff09;表单布局 &#xff08;五&#xff09;分组布局 &#xff08;六&#xff09;Spacer 总结 前言 之前使⽤Qt在界⾯上…
阅读更多...
【软件工程】【23.10】p2

【软件工程】【23.10】p2

关键字&#xff1a; 软件复用技术、过程途径、特定需求是文档核心、数据字典条目、高内聚低耦合独立性、数据流图映射模块结构图、UML依赖、用例图关系、RUB迭代、程序规格说明等价类划分、有效性测试的目标、喷泉模型面向对象、软件验证过程、CMMI
阅读更多...
15.回归问题

15.回归问题

回归问题是机器学习领域中的核心问题之一&#xff0c;它旨在通过拟合数据点来建立数学模型&#xff0c;以预测因变量的值。回归问题不仅广泛应用于金融、医疗、工程等领域&#xff0c;也是数据分析和机器学习算法研究的重要基础。本文将深入探讨回归问题的基本概念、数学原理、…
阅读更多...
Java | Leetcode Java题解之第100题相同的树

Java | Leetcode Java题解之第100题相同的树

题目&#xff1a; 题解&#xff1a; class Solution {public boolean isSameTree(TreeNode p, TreeNode q) {if (p null && q null) {return true;} else if (p null || q null) {return false;}Queue<TreeNode> queue1 new LinkedList<TreeNode>();…
阅读更多...
回文排列00

回文排列00

题目链接 回文排列 题目描述 注意点 回文串不一定是字典当中的单词 解答思路 因为本题中回文串不一定是字典当中的单词&#xff0c;所以使用Map存储每个字符出现的次数&#xff0c;并统计出现次数为奇数的字符的数量&#xff0c;如果多余1个&#xff0c;则不是回文排列 代…
阅读更多...
Mia for Gmail for Mac：Mac用户的邮件管理首选

Mia for Gmail for Mac：Mac用户的邮件管理首选

对于追求高效工作的Mac用户来说&#xff0c;Mia for Gmail for Mac无疑是邮件管理的首选工具。它以其卓越的性能和丰富的功能&#xff0c;为用户带来了前所未有的高效邮件管理体验。 Mia for Gmail for Mac不仅支持多帐号登录和标签选择功能&#xff0c;还提供了邮件分类、垃圾…
阅读更多...
如何选择序列化协议：关键因素与场景分析

如何选择序列化协议：关键因素与场景分析

如何选择序列化协议&#xff1a;关键因素与场景分析 序列化协议的选择直接影响着系统的性能、可维护性及跨平台兼容性。以下是针对不同场景下&#xff0c;几种常见序列化协议的选择建议&#xff1a; 1. 公司间系统调用&#xff08;性能要求宽松&#xff09; SOAP (基于XML)&a…
阅读更多...
【Python】 Python脚本中的#!（Shebang）：使用指南与最佳实践

【Python】 Python脚本中的#!（Shebang）：使用指南与最佳实践

基本原理 在Python脚本编程中&#xff0c;#!&#xff08;通常称为shebang&#xff09;是一个特殊的行&#xff0c;它告诉操作系统使用哪个解释器来执行脚本。在Unix-like系统中&#xff0c;shebang是必需的&#xff0c;因为它允许脚本作为独立的程序运行&#xff0c;而不需要显…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023