新观点SpringBoot整合Thymeleaf与Bootstrap5：速构建导航栏并抽取公共代码
教程概述在SpringBoot中整合Thymeleaf、Bootstrap5速的完成一个页面中导航栏的展示现，看了本篇文章，相信后续结合这种框架，速开发其他页面也会如鱼得水。
创建项目
首先是创建项目，见上篇文章-idea创建SpringBoot项目教程2022版-图文详细且简单，讲诉了如何使用idea速构建一个SpringBoot项目，若不会请先看如何创建，若会则继续往下看
规整项目结构
项目初步创建完成，首先就要规划好项目的目录结构，如图
在与脚本lication入口启动文件所在目录下，创建controller、serce、dao、domain、config四个目录，当然我这里为了区分后台和前台，controller中又做了fron和back的分级
在resources下的static和template中，分别创建back、front，也是区分前后台的页面与静态资源
项目刚创建，配置文件为脚本licationproperties，我建议改为yaml
整合thymeleaf
首步：导入依赖
<!--thymeleaf--
<dependency
<groupIdorgspringframeworkboot<groupId
<artifactIdspring-boot-starter-thymeleaf<artifactId
<dependency
如图在pomxml中导入thymeleaf的依赖
第二步：编写thymeleaf的基本配置
spring:
thymeleaf:
cache:false
encoding:UTF-8
prefix:classpath:templates
suffix:html
mode:HTML5
如图，在脚本licationyaml加入thymeleaf的配置
第步：创建一个页面
在templatesfront下创建也给indexhtml页面，body随便写点内容，例如test
<!DOCTYPEhtml
<htmllang="en"xmlns:th=":wwwthymeleaforg"
<head
<metacharset="UTF-8"
<titletest<title
<head
<body
<h1test<h1
<body
<html
注意：要使用thymeleaf的相关语法，这里有个很重要的点，在html标签中一定要加上
xmlns:th=":wwwthymeleaforg"
如图
第四步：创建主页控制器
在controller的front中创建一个为FrontPageCon的控制器，当然，字你也可以随便起，内容为如下
importorgspringframeworkstereotypeController;
importorgspringframeworkwebbindannotationGetM脚本ing;
importorgspringframeworkwebbindannotationRequestM脚本ing;
@Controller
@RequestM脚本ing("")
publicclassFrontPageCon{
@GetM脚本ing("")
publicStringFrontIndex(){
return"frontindex";
}
}
如图
此控制器中，配置的路径为””，然后直接的frontindex。配置为””表示访问服务的根路径也就是请求到此接口，frontindex，其也就是templates下frontindexhtml页面。
访问页面
启动服务，浏览器访问localhost:80，我的yaml配置的port端口为80，因此访问80，默认是8080，如图可以看到主页能显示了
整合Bootstrap5速构建导航栏
到Bootstrap5-?下载Bootstrap?，如图中点击下载Bootstrap生产文件，下载后得到一个压缩包
解压后，将文件放入项目中resources下的static中，如图
还是来到，左侧下滑可以看到有个navbar，点击后，右侧会出现相关的描述、展示以及代码，点击复制代码，如图
由于导航栏这种东西，各个页面都会使用到，因此这里我们使用thymeleaf的语法将其抽取到一个页面中，其他页码只需引入即可，大幅减少工作量。
如图，在templatesfront下建立comments目录，新建文件HeadNavhtml，将复制的代码放进去，我这里做了个小改动，我将站点logo放在了staticfront下，然后加了个图片在复制的代码中
然后修改indexhtml，还是那句，注意html标签引入
xmlns:th=":wwwthymeleaforg"
<!DOCTYPEhtml
<htmllang="en"xmlns:th=":wwwthymeleaforg"
<head
<metacharset="UTF-8"
<titletest<title
<linkrel="stylesheet"href="bootstrap-530cssbootstrapcss"
<head
<body
<navth:replace="~{frontcommonsHeadNavhtml}"<nav
<scriptsrc="bootstrap-530jsbootstrapjs"<script
<body
<html
如上indexhtml中，我们引入了bootstrap的css和js，然后通过thymeleaf的语法th:replace将公共页面导航栏引入到了index中，如图
ok，再次启动项目，访问我们的根路径，如图可以看到一个导航栏的展示就这样完成了，非常的简单速
结语
以上是幽络源的SpringBoot整合Thymeleaf、Bootstrap5的基础教程，速的构建了一个导航栏，只要整合好了，后续开发其他相关UI会更加速简单。如有疑问可留言或加群询问。
鉴于社会的实际需要，源码网需要改变一些原有的问题，更好的服务于社会，造福于人们。提供经过严格测试的免费源码、各种线上兼职和网络兼职的网创教程、编程及网络相关的技术教程分享，助您轻松获取资源和技术支持。https://www.youluoyuan.com/https://www.youluoyuan.com/wp-content/uploads/2025/04/cd76b3ef-2f58-45ae-9eca-94428de13424.png
页:
[1]