SpringBoot整合bootstrap和thymeleaf製做簡單登陸界面
前面的博文寫過經過靜態資源文件夾的形式來製做一個LayUI登陸界面，此次換一種SpringBoot新的靜態資源方式引入HTML頁面所須要的CSS,JS等資源文件，這種方式就是Webjars形式，它是以Maven依賴的方式，把CSS,JS,IMG等資源文件打包成一個Jar包css
Demo效果圖
Demo的目錄結構圖
Demo涉及的靜態資源文件
1.bootstrap.css（官方的CSS,經過webjars形式引入）html
2.signin.css(個性化定製改造官方的CSS經過資源文件夾形式引入)java
3.bootstrap-solid.svg（官方的IMG,經過資源文件夾形式引入）git
資源文件夾形式引入的方式，就是把對應CSS,IMG複製到static文件下 github
Webjars形式就是經過Pom文件的依賴引入，在External Libraries中能找到對應的Jar源碼文件web
Demo涉及到的知識點
1.webjars依賴的相關jar包的查找和引入spring
2.webjars映射的靜態資源文件的原理bootstrap
3.Thymeleaf命名空間引入及資源文件引入th:屬性標籤使用,th:src,th:href瀏覽器
Demo整合的原理及編碼思路記錄
1.webjars依賴的相關jar包的查找和引入（主要找到Bootstrap資源文件），這裏能夠到Webjars官網查找對應JAR的Maven的依賴app
主要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✨