springboot2 thymeleaf 使用layout实现母版功能

简介:        最近在学习springboot,继承母版可以复用我们公共的界面内容,很方便。但是,我在使用thymeleaf layout时遇到了坑,我网上找了好多都是比较老的版本,在新版本中不能正常使用了。

       最近在学习springboot,继承母版可以复用我们公共的界面内容,很方便。但是,我在使用thymeleaf layout时遇到了坑,我网上找了好多都是比较老的版本,在新版本中不能正常使用了。最后花时间解决了,这里记录下来,以便帮助自己或其他人不要踩坑。thymeleaf在springboot1.x和2.x有很大的区别。这里只说2.x,具体如下。

第一步:安装依赖

img_2828ddeeb7171bd0bebbc31095822281.png

第二步:在项目的templates下新建一个母版html文件(如:base.html)

img_2a440cf63b71ba03606717708b496a6c.png

第三步:在项目的templates编写子界面test.html:

img_57a8656e098b20cddf42ec48c9c62b01.png

第四步:编写控制器代码

img_f2c41f14820781a24d4927bc58349c5d.png

第五步:运行测试:运行效果如下

img_34361f4ebf971fd9c1f3d88753606b93.png

至此springboot thymeleaf layout实现母版功能就搞定了。

第六步:既然使用了母版,公共数据怎么传,总不会每个界面都传吧,多麻烦啊。当然是不需要这样麻烦的了,我们可以建一个控制器用于传递公共数据

img_6826998612374a3dddcc26b3f5405699.png

注意这个ModelAttribute是指定前面访问数据的变量名,那么接下来我们就能在base.html中使用它了

img_8f21c7fcbf6cf742e07d4ca7beb082c8.png

运行效果:


img_bddf191c80474314ddeddc6765a72833.png

第七步:总结

至此内容就介绍完了,我也是在学习的路上,不一定说得都是对的。如有问题欢迎留言,我们一起探讨。喜欢我第文章,记得关注哦!

目录
相关文章
|
2月前
|
缓存 NoSQL Java
在 Spring Boot 应用中使用 Spring Cache 和 Redis 实现数据查询的缓存功能
在 Spring Boot 应用中使用 Spring Cache 和 Redis 实现数据查询的缓存功能
96 0
|
4天前
|
Java Maven
构建Springboot项目、实现简单的输出功能、将项目打包成可以执行的JAR包(详细图解过程)
这篇文章详细介绍了构建SpringBoot项目的过程,包括新建工程、选择环境配置、添加依赖、项目结构说明,并演示了如何编写一个简单的Controller控制器实现输出功能,最后讲解了如何使用Maven将项目打包成可执行的JAR包,并提供了运行JAR包的命令和测试效果。
构建Springboot项目、实现简单的输出功能、将项目打包成可以执行的JAR包(详细图解过程)
|
4天前
|
存储 NoSQL Java
基于SpringBoot+Redis实现查找附近用户的功能
使用Redis的GEO命令结合SpringBoot实现查找附近用户的功能,通过`GEOADD`命令添加地理位置信息和`GEORADIUS`命令查询附近用户。
9 0
|
4天前
|
存储 NoSQL Redis
基于SpringBoot+Redis实现点赞/排行榜功能,可同理实现收藏/关注功能,可拓展实现共同好友/共同关注/关注推送功能
在SpringBoot项目中使用Redis的Set和ZSet集合实现点赞和排行榜功能,并通过示例代码展示了如何使用`stringRedisTemplate`操作Redis来完成这些功能。
23 0
|
4天前
|
druid Java 数据库连接
SpringBoot项目整合MybatisPlus持久层框架+Druid数据库连接池,以及实现增删改查功能
SpringBoot项目整合MybatisPlus和Druid数据库连接池,实现基本的增删改查功能。
14 0
|
6天前
|
JavaScript 前端开发 网络协议
WebSocket在Java Spring Boot+Vue框架中实现消息推送功能
在现代Web应用中,实时消息提醒是一项非常重要的功能,能够极大地提升用户体验。WebSocket作为一种在单个TCP连接上进行全双工通信的协议,为实现实时消息提醒提供了高效且低延迟的解决方案。本文将详细介绍如何在Java Spring Boot后端和Vue前端框架中利用WebSocket实现消息提醒功能。
19 0
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
39 1
|
1月前
|
SQL XML JavaScript
【若依Java】15分钟玩转若依二次开发,新手小白半小时实现前后端分离项目,springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
摘要: 本文档详细介绍了如何使用若依框架快速搭建一个基于SpringBoot和Vue3的前后端分离的Java管理后台。教程涵盖了技术点、准备工作、启动项目、自动生成代码、数据库配置、菜单管理、代码下载和导入、自定义主题样式、代码生成、启动Vue3项目、修改代码、以及对代码进行自定义和扩展,例如单表和主子表的代码生成、树形表的实现、商品列表和分类列表的改造等。整个过程详细地指导了如何从下载项目到配置数据库,再到生成Java和Vue3代码,最后实现前后端的运行和功能定制。此外,还提供了关于软件安装、环境变量配置和代码自动生成的注意事项。
537 2
|
2月前
|
存储 Java 分布式数据库
Spring Boot 优雅实现hbase功能
【6月更文挑战第24天】要在 Spring Boot 项目中实现 HBase 和 Memcached 的功能,首先需要理解各自的原理和作用,然后通过实际操作将其集成到 Spring Boot 项目中。
57 6