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

逃离我推掉我的手 2024-04-19 09:27 186阅读 0赞

推荐使用Webjars的三大理由:

    1. 将静态资源版本化,更利于升级和维护。
    1. 剥离静态资源,提高编译速度和打包效率。
    1. 实现资源共享,有利于统一前端开发。

学习目标

简单两步!快速学会使用WebJars统一管理前端依赖。

快速查阅

源码下载:SpringBoot Webjars Learning

专题阅读:《SpringBoot 布道系列》

使用教程

一、引入相关依赖

首先在 WebJars官网 找到项目所需的依赖,例如在pom.xml引入 jQuery、BootStrap前端组件等。例如:

  • 版本定位工具:webjars-locator-core 用于省略版本号访问静态资源
  • 前端组件:jquerybootstrap


    org.webjars
    webjars-locator-core
    1. <dependency><!--Jquery组件(前端)-->
    2. <groupId>org.webjars</groupId>
    3. <artifactId>jquery</artifactId>
    4. <version>3.3.1</version>
    5. </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文件 填写项目信息和公司私服地址。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  4. <modelVersion>4.0.0</modelVersion>
  5. <!--项目信息-->
  6. <groupId>org.webjars</groupId>
  7. <artifactId>metronic</artifactId>
  8. <version>4.1.9</version>
  9. <packaging>jar</packaging>
  10. <name>metronic</name>
  11. <description>metronic</description>
  12. <!--维护信息-->
  13. <developers>
  14. <developer>
  15. <name>socks</name>
  16. <email>https://github.com/yizhiwazi</email>
  17. </developer>
  18. </developers>
  19. <!--发布地址-->
  20. <distributionManagement>
  21. <repository>
  22. <id>xx-repo</id>
  23. <!--这里替换成公司私服地址-->
  24. <url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url>
  25. </repository>
  26. <snapshotRepository>
  27. <id>xx-plugin-repo</id>
  28. <!--这里替换成公司私服地址-->
  29. <url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url>
  30. </snapshotRepository>
  31. </distributionManagement>
  32. </project>

3、在本地MAVEN的配置文件指定公司私服的账号密码。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
  5. <localRepository>D:\dev\mvnrepository</localRepository>
  6. <mirrors>
  7. <!-- 阿里云仓库 -->
  8. <mirror>
  9. <id>aliyun</id>
  10. <mirrorOf>central</mirrorOf>
  11. <name>aliyun-all</name>
  12. <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
  13. </mirror>
  14. <!-- 中央仓库1 -->
  15. <mirror>
  16. <id>repo1</id>
  17. <mirrorOf>central</mirrorOf>
  18. <name>Human Readable Name for this Mirror.</name>
  19. <url>http://repo1.maven.org/maven2/</url>
  20. </mirror>
  21. <!-- 中央仓库2 -->
  22. <mirror>
  23. <id>repo2</id>
  24. <mirrorOf>central</mirrorOf>
  25. <name>Human Readable Name for this Mirror.</name>
  26. <url>http://repo2.maven.org/maven2/</url>
  27. </mirror>
  28. </mirrors>
  29. <!-- 暂时在发布仓库到213的时候用到-->
  30. <servers>
  31. <!-- 仓库地址账号 -->
  32. <server>
  33. <id>xx-repo</id>
  34. <username>admin</username>
  35. <password>123456</password>
  36. </server>
  37. <!-- 插件地址账号 -->
  38. <server>
  39. <id>xx-plugin-repo</id>
  40. <username>admin</username>
  41. <password>123456</password>
  42. </server>
  43. </servers>
  44. </settings>

4、打开IDEA->Maven->Deploy 将项目到公司私服,大功告成。

转载于:https://my.oschina.net/abcijkxyz/blog/3057128

发表评论

表情:
评论列表 (有 0 条评论,186人围观)

还没有评论,来说两句吧...

相关阅读

    相关 SpringBoot使用WebJars

    本人主要做的是java,但是从第一份工作开始,就一直在做一个写前端又写后端的程序员,相信很多朋友和我一样,不仅要会后台代码,还要懂得很多的前端代码,例如javascipt和cs