SpringBoot | 第十八章：web 應用開發之WebJars 使用

· 發表 2018-09-11 19:14:41

摘要：前言前面一章節我們主要講解了關於檔案上傳的兩種方式。本章節繼續 web開發的相關知識點。通常對於 web開發而言，像 js 、 css 、 images 等靜態資源版本管理是比較混亂的，比如 Jquery 、 Bootstrap 、 Vue.js 可能各個前端框架所依賴的自個元件的...

前言

前面一章節我們主要講解了關於檔案上傳的兩種方式。本章節繼續 web開發 的相關知識點。通常對於 web開發 而言，像 js 、 css 、 images 等靜態資源版本管理是比較混亂的，比如 Jquery 、 Bootstrap 、 Vue.js 可能各個前端框架所依賴的自個元件的版本都不盡相同，一不注意就可能引起不同版本的衝突問題。所以，是否有一種像後端管理 jar 包一樣的解決方案呢？答案當然是有的，今天我們就來重點介紹下關於 WebJars 的使用。前面我們介紹的 Swagger2 也是基於 webJars 進行頁面整合的。

一點知識

原本我們在進行 web 開發時，一般上都是講靜態資原始檔放置在 webapp 目錄下，在 SpringBoot 裡面，一般是將資原始檔放置在 src/main/resources/static 目錄下。而在 Servlet3 中，允許我們直接訪問 WEB-INF/lib 下的 jar 包中的 /META-INF/resources 目錄資源，即 WEB-INF/lib/{*.jar}/META-INF/resources 下的資源可以直接訪問。

Servlet3靜態檔案處理-轉自網路

所以其實， WebJars 也是利用了此功能，將所有前端的靜態檔案打包成一個 jar 包，這樣對於引用放而言，和普通的 jar 引入是一樣的，還能很好的對前端靜態資源進行管理。

WebJars使用

WebJars 是將web前端資源（如jQuery & Bootstrap）打成 jar 包檔案。藉助版本管理工具(Maven、gradle等)進行版本管理，保證這些Web資源版本唯一性。避免了檔案混亂、版本不一致等問題。

WebJar結構

開始使用前，我們看下 Jquery 的 webjars ，藉此來了解下 webjars 包的目錄結構。以下是基於 jquery-3.3.1.jar：

META-INF
└─maven
└─org.webjars.bower
└─jquery
└─pom.properties
└─pom.xml
└─resources
└─webjars
└─jquery
└─3.3.1
└─(靜態檔案及原始碼)

jquery-3.3.1目錄結構

所以可以看出，靜態檔案存放規則： META-INF/resources/webjars/${name}/${version} 。這點官網也有說明的：

webjar目錄官網說明

WebJars實踐

接下來我們以一個簡單的示例，對 webjars 進行簡單的實踐下。

0.在 src/main/resouces 路徑下建立 META-INF/resources/webjars/0.0.1 目錄，同時為了演示效果，拷貝一個圖片到此目錄下。

新建目錄

1.編寫一個簡單的html頁面，放在在 src/main/resources/static 下(當然也可以直接放在webjar下了，只需要後面加個對映關係即可)，內容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello,WebJars</title>
</head>
<body>
<h1>Hello,WebJars</h1>
<img alt="sprinboot" src="webjars/demo/0.0.1/springboot.jpg">
</body>
</html>

2.編寫配置類，新增一個資源對映關係.其實也可以不寫，因為第十五章節也有說過， springboot 預設的四個資源路徑裡面就包含了 /META-INF/resources/ 了。

預設不配置時，從控制檯啟動項也是可以獲悉的：

2018-08-08 23:26:54.874INFO 5900 --- [main] o.s.w.s.handler.SimpleUrlHandlerMapping: Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2018-08-08 23:26:54.874INFO 5900 --- [main] o.s.w.s.handler.SimpleUrlHandlerMapping: Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2018-08-08 23:26:54.917INFO 5900 --- [main] o.s.w.s.handler.SimpleUrlHandlerMapping: Mapped URL path [/**/favicon.ico] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2018-08-08 23:26:54.941INFO 5900 --- [main] oConfiguration$WelcomePageHandlerMapping : Adding welcome page: class path resource [static/index.html]

這裡為了演示下可通過此方法，自定義一些其他路徑的靜態資源目錄：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//配置對映關係
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}

3.編寫控制層，返回此頁面地址。

/**
 * webjar示例
 * @author oKong
 *
 */
@Controller
public class WebJarsDemoController {

@GetMapping("/")
public String index() {
return "index.html";
}

}

4.啟動應用，訪問地址即可：

可以看見圖片已經正確顯示出來了。

5.現在直接將 META-INF 下打成一個 jar ，然後加入依賴進入。在來測試下。

這裡直接建立一個新的工程，存在靜態資源資訊，工程結果如下：

靜態資源工程

然後對應的pom配置主要就加入一個資源拷貝動作：

<build>
<resources>
<resource>
<directory>${project.basedir}/src/main/resources</directory>
<targetPath>${project.build.outputDirectory}/META-INF/resources/webjars</targetPath>
</resource>
</resources>
</build>

之後利用maven打包後，就可以看見其目錄結構了：

資源包目錄結構

然後我們刪除了我們原先的資原始檔或者圖片重新命名下，並引入依賴:

<!-- 靜態資源依賴 -->
<dependency>
<groupId>cn.lqdev.learning</groupId>
<artifactId>springboot-webjars</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>

最後重新啟動應用，再次訪問下，依舊是正常顯示的：

一點技巧

我們可以看見，我們在 index.html 中訪問圖片是這麼訪問的: webjars/demo/0.0.1/springboot.jpg 。咋一看，可能覺得沒問題。但當我們靜態資源版本有更新時，我們不是又需要去改下這個靜態資源的引入路徑，那何來的優雅！所以官方提供了一個 webjars-locator 包，就是來解決此問題的。

0.pom檔案中，加入依賴(這裡注意， Springboot (1.5.15.RELEASE)父類pom檔案中已經指定了此版本為： 0.32-1 ，所以我們可以不需要去新增版本了)：

<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
</dependency>

1.修改 index.html 中的圖片路徑

原來：

<img alt="sprinboot" src="webjars/demo/0.0.1/springboot.jpg">

現在：

<img alt="sprinboot" src="webjars/demo/springboot.jpg">

2.修改配置類，加入 resourceChain 屬性，不然還是去除了版本時路徑找不到的，這裡需要注意。

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//配置對映關係
//即：/webjars/** 對映到 classpath:/META-INF/resources/webjars/ 
registry.addResourceHandler("/webjars/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/")
//新增 resourceChain 配置即開啟快取配置。
//不知道為何不加這個配置 設定了 webjars-locator 未生效。。沒過多糾結。。
.resourceChain(true);//生產時建議開啟快取（只是快取了資源路徑而不是資源內容）,開發是可以設定為false
}
}

這樣之後，我們只需要修改依賴包即可，前端都不需要重新改了。

總結

本章節主要是講解了 webjars 的使用。使用是相對來說比較簡單了，有了這個後，我們之後去管理前端的靜態資源就很方便了，也能引用已經打好 jar 的第三方庫了，是不是很方便！

最後

目前網際網路上很多大佬都有 SpringBoot 系列教程，如有雷同，請多多包涵了。本文是作者在電腦前一字一句敲的，每一步都是實踐的。若文中有所錯誤之處，還望提出，謝謝。