SpringBoot使用WebJars統(tǒng)一管理靜態(tài)資源的方法

更新時(shí)間：2018年12月26日 11:32:26 作者：yizhiwazi

這篇文章主要介紹了SpringBoot使用WebJars統(tǒng)一管理靜態(tài)資源的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

傳統(tǒng)管理靜態(tài)資源主要依賴于復(fù)制粘貼，不利于后期維護(hù)，為了讓大家往后更舒心，讓W(xué)ebJars給靜態(tài)資源來一次搬家革命吧?。?/p>

學(xué)習(xí)目標(biāo)

簡單兩步！快速學(xué)會使用WebJars統(tǒng)一管理前端依賴。

快速查閱

源碼下載：SpringBoot Webjars Learning

使用教程

一、引入相關(guān)依賴

在 WebJars官網(wǎng) 找到項(xiàng)目中需要的依賴，例如在項(xiàng)目中引入jQuery、BootStrap前端組件等。例如：

版本定位工具：webjars-locator-core
前端組件：jquery 、bootstrap

  <dependency><!--Webjars版本定位工具（前端）-->
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator-core</artifactId>
   </dependency>

   <dependency><!--Jquery組件（前端）-->
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
   </dependency>

二、訪問靜態(tài)資源

在瀏覽器訪問靜態(tài)資源：

快速訪問：http://localhost:8080/webjars/jquery/jquery.js （推薦）
快速訪問：http://localhost:8080/webjars/jquery/3.3.1/jquery.js

新手提問：

有小伙伴可能疑問，既然SpringBoot天然支持WebJars的靜態(tài)資源訪問，為什么還要額外添加定位工具webjars-locator-core呢？

快速答疑：

主要是為了解決訪問WebJars靜態(tài)資源時(shí)必須攜帶版本號的繁瑣問題。舉個(gè)例子，某項(xiàng)目準(zhǔn)備將BootStrap 3.3.x 升級到 4.x 大版本，此時(shí)除了在POM文件調(diào)整之外，還需要大面積的在頁面中調(diào)整因?yàn)榘姹咎栕兏饐栴}的路徑，而使用定位器之后無需輸入版本號自動(dòng)定位。

總結(jié)

使用WebJars對前端依賴進(jìn)行統(tǒng)一管理有什么好處呢？

1、靜態(tài)資源版本化

傳統(tǒng)的靜態(tài)資源需要自行維護(hù)，資源種類繁多，使得項(xiàng)目后期越來越臃腫，維護(hù)版本升級也變得困難，而使用WebJars方式進(jìn)行管理后，版本升級問題迎刃而解。

2、提升編譯速度

經(jīng)測試，使用WebJars的方式管理依賴可以給項(xiàng)目的編譯速度帶來2-5倍的速度提升，還在猶豫的小伙伴快點(diǎn)嘗試起來吧！

3、在WebJars官方找不到自己想要的依賴怎么辦？

解決辦法：將下載好的靜態(tài)資源目錄發(fā)布到公司私服倉庫即可。

例如：新建一個(gè)SpringBoot項(xiàng)目，手工創(chuàng)建目錄 META-INF/resources/ ，將靜態(tài)資源完整復(fù)制進(jìn)去，然后發(fā)布公司Maven私服即可。當(dāng)然，這只是簡潔做法，如果想按照打造標(biāo)準(zhǔn)的WebJars資源請繼續(xù)看下方。

4、將靜態(tài)資源發(fā)布成標(biāo)準(zhǔn)的Webjars格式怎么弄？

解決辦法：以Metronic為例發(fā)布標(biāo)準(zhǔn)的webjars 資源到公司私服。

WebJars發(fā)布流程：

1、新建SpringBoot工程然后在src\main\resources\ 新建目錄 META-INF\resources\webjars\metronic 重點(diǎn)來了這里4.1.9 必須跟POM文件的<version>4.1.9</version>保持一致。

2、修改POM文件填寫項(xiàng)目信息和公司私服地址。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <!--項(xiàng)目信息-->
 <groupId>org.webjars</groupId>
 <artifactId>metronic</artifactId>
 <version>4.1.9</version>
 <packaging>jar</packaging>
 <name>metronic</name>
 <description>metronic</description>

 <!--維護(hù)信息-->
 <developers>
  <developer>
   <name>socks</name>
   <email>https://github.com/yizhiwazi</email>
  </developer>
 </developers>

 <!--發(fā)布地址-->
 <distributionManagement>
  <repository>
   <id>xx-repo</id>
    <!--這里替換成公司私服地址-->
<url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url>
  </repository>
  <snapshotRepository>
   <id>xx-plugin-repo</id>
    <!--這里替換成公司私服地址-->
<url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url>
  </snapshotRepository>
 </distributionManagement>

</project>

3、在本地MAVEN的配置文件指定公司私服的賬號密碼。

<?xml version="1.0" encoding="UTF-8"?>

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">


 <localRepository>D:\dev\mvnrepository</localRepository>

 <mirrors>
   <!-- 阿里云倉庫 -->
   <mirror>
    <id>aliyun</id>
    <mirrorOf>central</mirrorOf>
    <name>aliyun-all</name>
    <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
   </mirror>
  
   <!-- 中央倉庫1 -->
   <mirror>
    <id>repo1</id>
    <mirrorOf>central</mirrorOf>
    <name>Human Readable Name for this Mirror.</name>
    <url>http://repo1.maven.org/maven2/</url>
   </mirror>
  
   <!-- 中央倉庫2 -->
   <mirror>
    <id>repo2</id>
    <mirrorOf>central</mirrorOf>
    <name>Human Readable Name for this Mirror.</name>
    <url>http://repo2.maven.org/maven2/</url>
   </mirror>
 </mirrors> 
 
  <!-- 暫時(shí)在發(fā)布倉庫到213的時(shí)候用到-->
  <servers>
  <!-- 倉庫地址賬號 -->
  <server>
   <id>xx-repo</id>
   <username>admin</username>
   <password>123456</password>
  </server>
  <!-- 插件地址賬號 -->
  <server>
   <id>xx-plugin-repo</id>
   <username>admin</username>
   <password>123456</password>
  </server>
 </servers>

</settings>

4、打開IDEA->Maven->Deploy 將項(xiàng)目到公司私服，大功告成。