您好,登錄后才能下訂單哦!
傳統(tǒng)管理靜態(tài)資源主要依賴于復(fù)制粘貼,不利于后期維護(hù),為了讓大家往后更舒心,讓W(xué)ebJars給靜態(tài)資源來(lái)一次搬家革命吧!!
學(xué)習(xí)目標(biāo)
簡(jiǎn)單兩步!快速學(xué)會(huì)使用WebJars統(tǒng)一管理前端依賴。
快速查閱
源碼下載:SpringBoot Webjars Learning
使用教程
一、引入相關(guān)依賴
在 WebJars官網(wǎng) 找到項(xiàng)目中需要的依賴,例如在項(xiàng)目中引入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>
二、訪問(wèn)靜態(tài)資源
在瀏覽器訪問(wèn)靜態(tài)資源:
快速訪問(wèn):http://localhost:8080/webjars/jquery/jquery.js (推薦)
快速訪問(wèn):http://localhost:8080/webjars/jquery/3.3.1/jquery.js
新手提問(wèn):
有小伙伴可能疑問(wèn),既然SpringBoot天然支持WebJars的靜態(tài)資源訪問(wèn),為什么還要額外添加定位工具webjars-locator-core呢?
快速答疑:
主要是為了解決訪問(wèn)WebJars靜態(tài)資源時(shí)必須攜帶版本號(hào)的繁瑣問(wèn)題。舉個(gè)例子,某項(xiàng)目準(zhǔn)備將BootStrap 3.3.x 升級(jí)到 4.x 大版本,此時(shí)除了在POM文件調(diào)整之外,還需要大面積的在頁(yè)面中調(diào)整因?yàn)榘姹咎?hào)變更引起問(wèn)題的路徑,而使用定位器之后無(wú)需輸入版本號(hào)自動(dòng)定位。
總結(jié)
使用WebJars對(duì)前端依賴進(jìn)行統(tǒng)一管理有什么好處呢?
1、靜態(tài)資源版本化
傳統(tǒng)的靜態(tài)資源需要自行維護(hù),資源種類繁多,使得項(xiàng)目后期越來(lái)越臃腫,維護(hù)版本升級(jí)也變得困難,而使用WebJars方式進(jìn)行管理后,版本升級(jí)問(wèn)題迎刃而解。
2、提升編譯速度
經(jīng)測(cè)試,使用WebJars的方式管理依賴可以給項(xiàng)目的編譯速度帶來(lái)2-5倍的速度提升,還在猶豫的小伙伴快點(diǎn)嘗試起來(lái)吧!
3、在WebJars官方找不到自己想要的依賴怎么辦?
解決辦法:將下載好的靜態(tài)資源目錄發(fā)布到公司私服倉(cāng)庫(kù)即可。
例如:新建一個(gè)SpringBoot項(xiàng)目,手工創(chuàng)建目錄 META-INF/resources/ ,將靜態(tài)資源完整復(fù)制進(jìn)去,然后發(fā)布公司Maven私服即可。當(dāng)然,這只是簡(jiǎn)潔做法,如果想按照打造標(biāo)準(zhǔn)的WebJars資源請(qǐng)繼續(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)來(lái)了 這里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的配置文件指定公司私服的賬號(hào)密碼。
<?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> <!-- 阿里云倉(cāng)庫(kù) --> <mirror> <id>aliyun</id> <mirrorOf>central</mirrorOf> <name>aliyun-all</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> </mirror> <!-- 中央倉(cāng)庫(kù)1 --> <mirror> <id>repo1</id> <mirrorOf>central</mirrorOf> <name>Human Readable Name for this Mirror.</name> <url>http://repo1.maven.org/maven2/</url> </mirror> <!-- 中央倉(cāng)庫(kù)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ā)布倉(cāng)庫(kù)到213的時(shí)候用到--> <servers> <!-- 倉(cāng)庫(kù)地址賬號(hào) --> <server> <id>xx-repo</id> <username>admin</username> <password>123456</password> </server> <!-- 插件地址賬號(hào) --> <server> <id>xx-plugin-repo</id> <username>admin</username> <password>123456</password> </server> </servers> </settings>
4、打開IDEA->Maven->Deploy 將項(xiàng)目到公司私服,大功告成。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。