SpringBoot 使用WebJars统一管理静态资源
文章标签:
bootstrap 日期控件
原文地址:https://dwz.cn/uIYZCLgW
作者:yizhiwazi
推荐使用Webjars的三大理由:
- 将静态资源版本化,更利于升级和维护。
- 剥离静态资源,提高编译速度和打包效率。
- 实现资源共享,有利于统一前端开发。
学习目标
简单两步!快速学会使用WebJars统一管理前端依赖。
使用教程
一、引入相关依赖
首先在 WebJars官网 找到项目所需的依赖,例如在pom.xml引入 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>
二、访问静态资源
好了,就是这么简单,启动系统直接访问静态资源:
快速访问:http://localhost:8080/webjars/jquery/jquery.js (推荐)
快速访问:http://localhost:8080/webjars/jquery/3.3.1/jquery.js
三、发布静态资源(私服)
通常很多时候 WebJars官网 并不一定都有我们项目所需的依赖,此时咱们可以根据实际需求将静态资源打包并发布至公司的Maven私服仓库,然后在项目引用即可。
例如将Bootstrap的Metronic静态资源 发布至远程仓库,步骤如下:
1、新建SpringBoot工程 然后在src\main\resources\ 新建目录 META-INF\resources\webjars\metronic 重点来了 这里4.1.9 必须跟POM文件的<version>4.1.9</version>保持一致。
2、修改POM文件 填写项目信息和公司私服地址。
<?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> <!--项目信息--> <groupId>org.webjars</groupId> <artifactId>metronic</artifactId> <version>4.1.9</version> <packaging>jar</packaging> <name>metronic</name> <description>metronic</description> <!--维护信息--> <developers> <developer> <name>socks</name> <email>https://github.com/yizhiwazi</email> </developer> </developers> <!--发布地址--> <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> <!-- 暂时在发布仓库到213的时候用到--> <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 将项目到公司私服,大功告成。