叙述：SpringBoot整合Thymeleaf与Bootstrap5：速构建导航栏并抽取公共代码

热爱足球 · 发表于 5 天前

教程概述
在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/

		自动登录	找回密码
密码			立即注册