SpringBoot整合bootstrap和thymeleaf制作簡單登錄界面
前面的博文寫過通過靜態資源文件夾的形式來制作一個LayUI登錄界面，這次換一種SpringBoot新的靜態資源方式引入HTML頁面所需要的CSS,JS等資源文件，這種方式就是Webjars形式，它是以Maven依賴的方式，把CSS,JS,IMG等資源文件打包成一個Jar包
Demo效果圖
Demo的目錄結構圖
Demo涉及的靜態資源文件
1.bootstrap.css（官方的CSS,通過webjars形式引入）
2.signin.css(個性化定制改造官方的CSS通過資源文件夾形式引入)
3.bootstrap-solid.svg（官方的IMG,通過資源文件夾形式引入）
資源文件夾形式引入的方式，就是把對應CSS,IMG復制到static文件下
Webjars形式就是通過Pom文件的依賴引入，在External Libraries中能找到對應的Jar源碼文件
Demo涉及到的知識點
1.webjars依賴的相關jar包的查找和引入
2.webjars映射的靜態資源文件的原理
3.Thymeleaf命名空間引入及資源文件引入th:屬性標簽使用,th:src,th:href
Demo整合的原理及編碼思路記錄
1.webjars依賴的相關jar包的查找和引入（主要找到Bootstrap資源文件），這里可以到Webjars官網查找對應JAR的Maven的依賴
主要Pom文件依賴如下，需要把Bootstrap版本改一下改成3.3.7，再引入Web和模板引擎的依賴即可
<!--模板引擎-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- Web開發-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--bootstrap-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
2.webjars映射的靜態資源文件的原理，這里可以去找一下 WebFluxAutoConfiguration的addResourceHandlers
public class WebFluxAutoConfiguration {
public void addResourceHandlers(ResourceHandlerRegistry registry) {
if (!registry.hasMappingForPattern("/webjars/**")) {
ResourceHandlerRegistration registration = registry.addResourceHandler(
new String[]{"/webjars/**"}).addResourceLocations(new String[] {"classpath:/META-INF/resources/webjars/"});
this.configureResourceCaching(registration);
this.customizeResourceHandlerRegistration(registration);
}
}
}
里面有一段代碼，具體的意思就是當我們發送/webjars/任意請求時，會到類路徑下的/META-INF/resources/webjars/找具體的文件，換句話說：發送http:localhost:8080/webjars/bootstrap/3.3.7/css/bootstrap.css請求
其實是去到jar包下找到對應的bootstrap.css
在瀏覽器頁面會輸出bootstrap.css源碼文件，至此Webjars的原理就算理清楚了
3.Thymeleaf和Webjars結合，制作簡約的登錄界面（login.html）
關鍵代碼如下
<!-- xmlns:th="http://www.thymeleaf.org" 命名空間 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
xmlns:th="http://www.thymeleaf.org" 是Thymeleaf命名空間，需要引入才能提示使用th:src和th:href
<head>
<title>學生管理系統登錄界面</title>
<!-- Bootstrap core CSS Webjars形式引入-->
<link th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.css}" rel="stylesheet">
<!-- Custom styles for this template 資源文件夾形式引入 -->
<link th:href="@{/css/signin.css}" rel="stylesheet">
</head>
<!--LOGO圖片引入-->
<img class="mb-4" th:src="@{img/bootstrap-solid.svg}" alt="" width="72" height="72">
其中th:href="@{}"是Thymeleaf的動態路徑的語法，這里只需要記住應用就好
Demo整合之后的思考
Webjars有何優點，為何SpringBoot推出並推薦使用這種方式引用資源文件？
1.回答這個問題之前，不妨想想我們自己是如何手動引入資源文件的，先去官網把Bootstrap的源碼包下載下來，然后新建資源文件夾，再導入下載好的CSS,JS,IMAGES和Html頁面放在相同目錄，前后要三個步驟。
Webjars引入依賴后則一步到位，直接可以使用，簡化步驟，且SpringBoot把html頁面和資源文件分離開。2
2.我們手動引入資源文件，會可能存在什么問題？
現在是應用Bootstrap3.3.7版本，如果要統一升級到最新的4.0.X版本及以上，那么又要手工去官網下載，導入，再打包運行，升級會變得繁瑣。
Webjars則需要改變依賴Version即可快速方便升級
3.假設有多名開發者共同開發一個項目，而眾所周知Bootstrap一些交互的效果又需要依賴jQuery才能實現，那么可能可能會出現A開發者手動引入1.0.X版本jQuery，B開發者引入2.0.X版本jQuery，C開發者引入3.0.X版本jQuery，隨着項目的擴大，那么各個模塊及頁面之間的jQuery依賴會變得混亂，而且有些新特性需要最新版本的
jQuery才能支持，這時容易造成手工導入出錯，版本混亂等問題。
Webjars則可以避免該問題，由項目構建者統一將項目所需的技術JAR包打包部署到公司的Maven私服倉庫，其他開發者統一去私服中引用同一版本的jQuery
Demo整合之后的總結
Webjars的優點可以總結為以下三點：
- 靜態資源用依賴管理版本，更利於升級和維護。
- 靜態資源和模板頁面分離開，提高編譯速度和打包效率。
- 資源共享，有利於多個開發者協同引用統一版本開發。
🔨Github源碼
如有幫助到你，請給個starts✨
