SpringBoot | 第十八章：web 應(yīng)用開發(fā)之WebJars 使用
2018-09-12 來源：importnew
前言
前面一章節(jié)我們主要講解了關(guān)于文件上傳的兩種方式。本章節(jié)繼續(xù)
web開發(fā)的相關(guān)知識(shí)點(diǎn)。通常對(duì)于web開發(fā)而言，像js、css、images等靜態(tài)資源版本管理是比較混亂的，比如Jquery、Bootstrap、Vue.js可能各個(gè)前端框架所依賴的自個(gè)組件的版本都不盡相同，一不注意就可能引起不同版本的沖突問題。所以，是否有一種像后端管理jar包一樣的解決方案呢？答案當(dāng)然是有的，今天我們就來重點(diǎn)介紹下關(guān)于WebJars的使用。前面我們介紹的Swagger2也是基于webJars進(jìn)行頁面集成的。
一點(diǎn)知識(shí)
原本我們?cè)谶M(jìn)行web開發(fā)時(shí)，一般上都是講靜態(tài)資源文件放置在webapp目錄下，在SpringBoot里面，一般是將資源文件放置在src/main/resources/static目錄下。而在Servlet3中，允許我們直接訪問WEB-INF/lib下的jar包中的/META-INF/resources目錄資源，即WEB-INF/lib/{*.jar}/META-INF/resources下的資源可以直接訪問。
Servlet3靜態(tài)文件處理-轉(zhuǎn)自網(wǎng)絡(luò)
所以其實(shí)，WebJars也是利用了此功能，將所有前端的靜態(tài)文件打包成一個(gè)jar包，這樣對(duì)于引用放而言，和普通的jar引入是一樣的，還能很好的對(duì)前端靜態(tài)資源進(jìn)行管理。
WebJars使用
WebJars是將web前端資源（如jQuery & Bootstrap）打成jar包文件。借助版本管理工具(Maven、gradle等)進(jìn)行版本管理，保證這些Web資源版本唯一性。避免了文件混亂、版本不一致等問題。
WebJar結(jié)構(gòu)
開始使用前，我們看下
Jquery的webjars，借此來了解下webjars包的目錄結(jié)構(gòu)。以下是基于jquery-3.3.1.jar：META-INF └─maven └─org.webjars.bower └─jquery └─pom.properties └─pom.xml └─resources └─webjars └─jquery └─3.3.1 └─(靜態(tài)文件及源碼)
jquery-3.3.1目錄結(jié)構(gòu)
所以可以看出，靜態(tài)文件存放規(guī)則：META-INF/resources/webjars/${name}/${version}。這點(diǎn)官網(wǎng)也有說明的：
webjar目錄官網(wǎng)說明
WebJars實(shí)踐
接下來我們以一個(gè)簡(jiǎn)單的示例，對(duì)
webjars進(jìn)行簡(jiǎn)單的實(shí)踐下。
0.在src/main/resouces路徑下創(chuàng)建META-INF/resources/webjars/0.0.1目錄，同時(shí)為了演示效果，拷貝一個(gè)圖片到此目錄下。
新建目錄
1.編寫一個(gè)簡(jiǎn)單的html頁面，放在在src/main/resources/static下(當(dāng)然也可以直接放在webjar下了，只需要后面加個(gè)映射關(guān)系即可)，內(nèi)容如下：
<!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.編寫配置類，添加一個(gè)資源映射關(guān)系.其實(shí)也可以不寫，因?yàn)榈谑逭鹿?jié)也有說過，springboot默認(rèn)的四個(gè)資源路徑里面就包含了/META-INF/resources/了。
默認(rèn)不配置時(shí)，從控制臺(tái)啟動(dòng)項(xiàng)也是可以獲悉的：
2018-08-08 23:26:54.874 INFO 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.874 INFO 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.917 INFO 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.941 INFO 5900 --- [ main] oConfiguration$WelcomePageHandlerMapping : Adding welcome page: class path resource [static/index.html]
這里為了演示下可通過此方法，自定義一些其他路徑的靜態(tài)資源目錄：
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//配置映射關(guān)系
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.啟動(dòng)應(yīng)用，訪問地址即可：
可以看見圖片已經(jīng)正確顯示出來了。
5.現(xiàn)在直接將META-INF下打成一個(gè)jar，然后加入依賴進(jìn)入。在來測(cè)試下。
這里直接創(chuàng)建一個(gè)新的工程，存在靜態(tài)資源信息，工程結(jié)果如下：
靜態(tài)資源工程
然后對(duì)應(yīng)的pom配置主要就加入一個(gè)資源拷貝動(dòng)作：
<build>
<resources>
<resource>
<directory>${project.basedir}/src/main/resources</directory>
<targetPath>${project.build.outputDirectory}/META-INF/resources/webjars</targetPath>
</resource>
</resources>
</build>
之后利用maven打包后，就可以看見其目錄結(jié)構(gòu)了：
資源包目錄結(jié)構(gòu)
然后我們刪除了我們?cè)鹊馁Y源文件或者圖片重命名下，并引入依賴:
<!-- 靜態(tài)資源依賴 --> <dependency> <groupId>cn.lqdev.learning</groupId> <artifactId>springboot-webjars</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency>
最后重新啟動(dòng)應(yīng)用，再次訪問下，依舊是正常顯示的：
一點(diǎn)技巧
我們可以看見，我們?cè)?code>index.html中訪問圖片是這么訪問的:webjars/demo/0.0.1/springboot.jpg。咋一看，可能覺得沒問題。但當(dāng)我們靜態(tài)資源版本有更新時(shí)，我們不是又需要去改下這個(gè)靜態(tài)資源的引入路徑，那何來的優(yōu)雅！所以官方提供了一個(gè)webjars-locator包，就是來解決此問題的。
0.pom文件中，加入依賴(這里注意，Springboot(1.5.15.RELEASE)父類pom文件中已經(jīng)指定了此版本為：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">
現(xiàn)在：
<img alt="sprinboot" src="webjars/demo/springboot.jpg">
2.修改配置類，加入resourceChain屬性，不然還是去除了版本時(shí)路徑找不到的，這里需要注意。
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//配置映射關(guān)系
//即：/webjars/** 映射到 classpath:/META-INF/resources/webjars/
registry.addResourceHandler("/webjars/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/")
//新增 resourceChain 配置即開啟緩存配置。
//不知道為何不加這個(gè)配置 設(shè)置了 webjars-locator 未生效。。沒過多糾結(jié)。。
.resourceChain(true);//生產(chǎn)時(shí)建議開啟緩存（只是緩存了資源路徑而不是資源內(nèi)容）,開發(fā)是可以設(shè)置為false
}
}
這樣之后，我們只需要修改依賴包即可，前端都不需要重新改了。
相關(guān)資料
- https://www.webjars.org/contributing
- 靜態(tài)文件處理這篇講的不錯(cuò)，可以看看：https://blog.csdn.net/xichenguan/article/details/52794862
總結(jié)
本章節(jié)主要是講解了
webjars的使用。使用是相對(duì)來說比較簡(jiǎn)單了，有了這個(gè)后，我們之后去管理前端的靜態(tài)資源就很方便了，也能引用已經(jīng)打好jar的第三方庫了，是不是很方便！
最后
目前互聯(lián)網(wǎng)上很多大佬都有
SpringBoot系列教程，如有雷同，請(qǐng)多多包涵了。本文是作者在電腦前一字一句敲的，每一步都是實(shí)踐的。若文中有所錯(cuò)誤之處，還望提出，謝謝。
標(biāo)簽： 互聯(lián)網(wǎng) 網(wǎng)絡(luò)
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
