评论

收藏

[Java] SpringBoot使用WebJars统一管理静态资源的方法

编程语言 编程语言 发布于:2021-10-06 12:55 | 阅读数:427 | 评论:0

这篇文章主要介绍了SpringBoot使用WebJars统一管理静态资源的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
传统管理静态资源主要依赖于复制粘贴,不利于后期维护,为了让大家往后更舒心,让webjars给静态资源来一次搬家革命吧!!
学习目标
简单两步!快速学会使用webjars统一管理前端依赖。
快速查阅
源码下载:springboot webjars learning
使用教程
一、引入相关依赖
在 webjars官网 找到项目中需要的依赖,例如在项目中引入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
新手提问:
有小伙伴可能疑问,既然springboot天然支持webjars的静态资源访问,为什么还要额外添加定位工具webjars-locator-core呢?
快速答疑:
主要是为了解决访问webjars静态资源时必须携带版本号的繁琐问题。举个例子,某项目准备将bootstrap 3.3.x 升级到 4.x 大版本,此时除了在pom文件调整之外,还需要大面积的在页面中调整因为版本号变更引起问题的路径,而使用定位器之后无需输入版本号自动定位。
总结
使用webjars对前端依赖进行统一管理有什么好处呢?
1、静态资源版本化
传统的静态资源需要自行维护,资源种类繁多,使得项目后期越来越臃肿,维护版本升级也变得困难,而使用webjars方式进行管理后,版本升级问题迎刃而解。
2、提升编译速度
经测试,使用webjars的方式管理依赖可以给项目的编译速度带来2-5倍的速度提升,还在犹豫的小伙伴快点尝试起来吧!
3、在webjars官方找不到自己想要的依赖怎么办?
解决办法:将下载好的静态资源目录发布到公司私服仓库即可。
例如:新建一个springboot项目,手工创建目录 meta-inf/resources/ ,将静态资源完整复制进去,然后发布公司maven私服即可。当然,这只是简洁做法,如果想按照打造标准的webjars资源请继续看下方。
4、将静态资源发布成标准的webjars格式怎么弄?
解决办法:以metronic为例 发布标准的webjars 资源到公司私服。
webjars发布流程:
1、新建springboot工程 然后在src\main\resources\ 新建目录 meta-inf\resources\webjars\metronic  重点来了 这里4.1.9 必须跟pom文件的<version>4.1.9</version>保持一致。
DSC0000.png

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 将项目到公司私服,大功告成。
DSC0001.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持CodeAE代码之家
原文链接:https://www.jianshu.com/p/66d1b35bcd9d

关注下面的标签,发现更多相似文章