SpringBoot 使用WebJars统一管理静态资源

boyanx3个月前 (09-18)技术教程10

原文地址：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 将项目到公司私服，大功告成。

标签: bootstrap日期控件