Spring Boot 3 指南 三、Spring MVC(2)
ztj100 2025-01-02 20:33 17 浏览 0 评论
3-3. 使用Thymeleaf与Spring Boot
问题
你希望使用Thymeleaf来渲染你应用程序的页面。
解决方案
添加Thymeleaf的依赖,并创建一个@Controller来确定视图并填充模型。
它是如何工作的
要开始,你首先需要将spring-boot-starter-thymeleaf作为依赖项添加到你的项目中,以获取所需的Thymeleaf依赖项。
通过添加这个依赖项,您将同时获得Thymeleaf库以及Thymeleaf Spring方言,以便两者能够很好地集成。由于这两个库的存在,Spring Boot将自动配置ThymeleafViewResolver。ThymeleafViewResolver需要一个Thymeleaf ITemplateEngine才能解析和渲染视图。一个特殊的SpringTemplateEngine将预先配置有SpringDialect,这样您就可以在Thymeleaf页面中使用SpEL。
要添加其他Thymeleaf方言,您只需要创建一个@Bean方法,Spring Boot将自动检测并将其与Thymeleaf连接。有些甚至在与Spring Security集成时会自动配置(参见第5章)。
要配置Thymeleaf,Spring Boot在spring.thymeleaf命名空间中公开了几个属性(参见表3-2)。
添加一个索引页面
首先,在我们的应用程序中添加一个索引页面。在src/main/resources/templates目录(默认位置)内创建一个index.html文件。参见列表3-13。
这只是一个带有Thymeleaf一些小改动的基础HTML5页面。首先,有xmlns:th="http://www.thymeleaf.org"来启用Thymeleaf的命名空间。命名空间在链接中通过th:href使用。@{/books.html}部分将被Thymeleaf扩展成一个适当的链接,并放置在链接的实际href属性中。
现在,当运行应用程序时,你应该会看到一个带有指向书籍概览链接的页面(见图3-5)。
添加一个控制器和视图
当点击索引页面提供的链接时,我们希望看到一个页面,该页面显示图书馆中可用的书籍列表(见图3-6)。为此,需要添加两样东西:首先是一个可以处理请求并准备模型的控制器,其次是一个用于渲染书籍列表的视图。
让我们添加一个控制器,它将用书籍列表填充模型,并选择要渲染的视图名称。控制器是一个带有@Controller注解的类,其中包含处理请求的方法(带有@RequestMapping注解的方法,或者像本例中的@GetMapping,这是一个专门的@RequestMapping注解)。参见列表3-14。
BookController 需要 BookService 来获取书籍列表以展示。all 方法有一个参数是 org.springframework.ui.Model,这样我们就可以将书籍列表放入模型中。请求处理方法可以有不同的参数;其中一个就是 Model 类。在方法中,我们使用 BookService 从数据存储中检索所有书籍,并使用 model.addAttribute 将其添加到模型中。现在,书籍列表在模型中以键 books 可用。
最后,我们返回视图名称以渲染books/list。
现在控制器以及请求处理方法已经添加,
我们需要创建视图。在src/main/templates/books目录下创建一个list.html文件。参见列表3-15。
这又是一个使用Thymeleaf语法的HTML5页面。页面将使用th:each表达式渲染书籍列表。它将从模型中的books属性获取所有书籍,并为每本书创建一行。行中的每一列将使用th:text表达式包含一些文本;它将打印书籍的标题、作者和ISBN。表格的最后一列包含指向书籍详情的链接。它使用th:href表达式构建URL。注意括号之间的表达式;这将添加isbn请求参数。
当启动应用程序并点击索引页面上的链接时,您应该会看到一个显示图书馆内容的页面,如前面的图3-6所示。
添加详情页面
最后,当点击表格中的ISBN号码时,您希望显示一个包含详情的页面。链接包含一个名为isbn的请求参数,我们可以在控制器中检索并使用它来查找书籍。通过带有@RequestParam注解的方法参数可以检索请求参数。
以下方法将处理GET请求,将请求参数映射到方法参数,并包括模型,以便我们可以将书籍添加到模型中。
控制器将渲染书籍/详情页面。将details.html文件添加到src/main/resources/templates/books目录中。参见列表3-16。
这个HTML5 Thymeleaf模板将在页面上渲染两个可用块中的一个。如果找到了书籍,它将显示详细信息;如果没有找到,它将显示一个“未找到”的消息。这是通过使用th:if表达式实现的。"未找到"消息的isbn是从请求参数中检索的,使用param作为前缀;${param.isbn}将获取isbn请求参数。
测试一个@Controller
由于你希望确保控制器能够执行其应有的功能,编写一个测试来验证控制器的正确行为。参见列表3-17。
测试使用 @WebMvcTest 创建基于 MockMvc 的集成测试。它将创建一个最小的 Spring Boot 应用程序以便能够运行控制器。控制器需要一个 BookService 的实例,因此我们让框架使用 @MockBean 注解来创建一个模拟对象。在不同的测试方法中,我们模拟预期的行为(比如返回书籍列表,返回一个空的 Optional 等)。
Spring Boot 使用 Mockito 通过 @MockBean 创建模拟对象。
通过 Spring 测试框架的 MockMvc 支持,我们可以检查控制器是否返回了我们所期望的。我们可以检查 HTTP 状态,视图的名称,以及 Model 是否包含了正确的条目。
相关推荐
- 前端案例·程序员的浪漫:流星雨背景
-
如果文章对你有收获,还请不要吝啬【点赞收藏评论】三连哦,你的鼓励将是我成长助力之一!谢谢!(1)方式1:简单版本【1】先看实现效果...
- UI样式iPod classic的HTML本地音乐播放器框架
-
PS:音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...
- JavaScript 强制回流问题及优化方案
-
JavaScript代码在运行过程中可能会强制触发浏览器的回流(Reflow)...
- Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练
-
最近Ai火的同时,Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor,使用免费版本搞一个零基础教程...
- 19年前司机被沉尸水库!凶手落网,竟已是身家千万的大老板
-
]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...
- 全民健身网络热度调查“居家健身”成为第一网络热词
-
]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...
- 取代JavaScript库的10个现代Web API及详细实施代码
-
为什么浏览器内置的API你还在用某个臃肿的Javascript库呢?用内置的API有什么好处呢?Web平台经历了巨大演进,引入了强大的原生API,不再需要臃肿的JavaScript库。现代浏览器现已支...
- 前端文件下载的N种姿势:从简单到高级
-
文件下载是web开发里一个非常常见的功能,无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求,每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...
- JavaScript 性能优化方法(js前端性能优化)
-
JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流,影响性能。使用文档片段(DocumentFragment)或虚拟DOM技术减少直接操作。...
- DOM节点的创建、插入、删除、查找、替换
-
在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...
- 前端里的拖拖拽拽(拖拽式前端框架)
-
最近在项目中使用了react-dnd,一个基于HTML5的拖拽库,“拖拽能力”丰富了前端的交互方式,基于拖拽能力,会扩展各种各样的拖拽反馈效果,因此有必要学习了解,最好的学习方式就是实操!...
- 大模型实战:Flask+H5三件套实现大模型基础聊天界面
-
本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...
- SSE前端(sse前端数据)
-
<!DOCTYPEhtml><htmllang="zh-CN"><head>...
- 课堂点名总尴尬?试试 DeepSeek,或能实现点名自由!(附教程)
-
2025年2月26日"你有没有经历过这样的场景?老师拿着花名册扫视全班:'今天我们来点名...'那一刻心跳加速,默念:'别点我!'但现在,我要...
- 我会在每个项目中复制这10个JS代码片段
-
你是否也有这种感觉:在搭建新项目时,你会想:"这个函数我是不是已经写过了...在某个地方?"是的——我也是。所以在开发了数十个React、Node和全栈应用后,我不再重复造轮子。我创建...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)