Spring Boot 裡面預設也會加入WebJars的靜態資料夾。/META-INF/resources/webjars/
spring-boot-autoconfigure-xxx.jar->
org.springframework.boot.autoconfigure.web.servlet->WebMvcAutoConfiguration->WebMvcAutoConfigurationAdapter->addResourceHandlers
圖1
WebJars將所有前端的靜態文件打包成一個jar包，這樣能很好的對前端靜態資源進行管理。
圖2
在webjars的網站中，講到了四種應用webjars的方式，分別為NPM WebJars、Bower GitHub WebJars、Classic WebJar、Bower Original WebJars
圖3
本文使用Classic WebJar來介紹使用
專案使用Maven專案
圖4 使用Bootstrap來做測試
圖5 新增 pom.xml dependency
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.1.3</version>
</dependency>
圖6 新增測試用的html
圖7 範例來源
bootstrap Examples ->Custom Components -> Sign-in
圖8 index.html 使用 webjars 裡的bootstrap
<link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css" />
圖9 測試
http://localhost:8080/sign-in/index.html
圖10 如果專案變大了，頁面變多，版本更新網頁還要去調整。
webjars 提供了一個便利包。
使用 Spring Boot 時，webjars-locator-core 庫它會自動檢測類路徑上的版本 ，並使用它為您自動解析任何 WebJar 資產的版本
以後你在pom.xml bootstrap version 更新，會自動切換。
圖11 加入pom.xml dependency
圖12 index.html 使用 webjars 裡的bootstrap 的版本號去掉
原本
<link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css" />
改為
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" />
圖13 測試 http://localhost:8080/sign-in/index.html
用LINE傳送分享
其它文章
- 首頁
- JAVA教學目錄
- JSP教學目錄
- Apache教學目錄
- Google App Engine教學目錄
- JBoss教學目錄
- Android教學目錄
- Grails教學目錄
- SSH教學目錄
- Window教學目錄
- Linux教學目錄
- PHP教學目錄
- C教學/C++教學目錄
- jQuery教學目錄
- HTML5教學/CSS3教學目錄
- JavaScript教學目錄
- MySQL教學目錄
- Oracle教學目錄
- SQL Server教學/PostgreSQL教學/其它資料庫教學目錄
- Eclipse教學及開發相關工具教學目錄
- 程式開發基本資訊目錄
- 其它技術教學目錄
沒有留言:
張貼留言