11、Spring Boot：使用WebJars

最新推荐文章于 2024-04-15 21:45:22 发布

写代码的老王

最新推荐文章于 2024-04-15 21:45:22 发布

阅读量811

点赞数

分类专栏： Spring Boot

本文链接：https://blog.csdn.net/qtdywp/article/details/85067864

版权

Spring Boot 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

什么是WebJars？

WebJars是被打包成JAR文件 (Java Archive)形式的客户端web资源库（例如：jQuery、Bootstrap等）。

优点：

使用WebJars技术可以对Java web项目的前端资源（例如：jQuery、Bootstrap、CSS等）进行统一的依赖管理。解决了传统的往静态文件夹下（例如/src/main/resources/static/）直接拷贝*.js、*.css等文件造成的不便于依赖管理的问题。
WebJars提供了可以在展示页面（例如JSP）中，对前端资源的引用路径里省略书写版本号的功能。
自动解析引用资源的依赖关系，并且可以通过RequireJS技术自定义导入。

官网写的优点：

简单明了的对基于JVM的web应用程序的客户端依赖资源进行管理。
可由基于JVM的构件工具（例如：Maven, Gradle, sbt, 等）下载客户端依赖资源。
清楚的知道你正在使用的客户端依赖资源都有哪些。
自动解析引用资源的依赖关系，并且可以通过RequireJS技术自定义导入。
WebJars的JAR包部署在Maven中央仓库上。
由JSDELIVR提供公共CDN支持

原理：

任何兼容Servlet 3标准的容器，都会自动把WEB-INF/lib目录中的WebJars的JAR包视作静态资源。

这是因为任何在WEB-INF/lib目录中的JAR包中的META-INF/resources目录中的内容都会自动视作公开的静态资源。

使用方法：

1、pom.xml中添加依赖（WebJars的JAR包部署在Maven中央仓库上。）

        <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>jquery</artifactId>
             <version>3.3.1-1</version>
         </dependency>

2、在页面中引用

<script src="/webjars/jquery/3.3.1-1/jquery.min.js"></script>

测试：

1、新建一个测试TestController：

package com.example.WEB_demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController
{
     @RequestMapping("/test")
     public String testHello()
     {
        return "test";  
     }
}

2、新建一个测试页面test.html：

注意目录应该在：src/main/resources/templates/下

<!DOCTYPE html>
<html>
     <head lang="en">
         <meta charset="UTF-8" />
         <title>写代码的老王</title>
           <script src="/webjars/jquery/3.3.1-1/jquery.min.js"></script>
           <script type="text/javascript">
           function aaa()
           {
               $("#test1").html("<b>Hello world!</b>");
           }
           </script>
     </head>
     <body>
         <p id="test1">测试由WebJars引入的jQuery包是否生效</p>
         <input type="button" onclick="aaa()" value="TEST" />
     </body>
</html>

3、启动Spring Boot项目，打开浏览器，访问http://localhost:8080/test/

4、点击TEST按钮

补充1：

由于在页面引用中使用了版本号做为引用路径的一部分，这违背了WebJars方便版本管理的初衷。因此WebJars为我们准备了忽略版本号引用的方法。

1、在pom.xml中添加自动版本管理引用：

        <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>webjars-locator</artifactId>
             <version>0.30</version>
         </dependency>

2、在页面中的引用方式改为

<script src="/webjars/jquery/jquery.min.js"></script>

特别注意，只可以删掉目录中的版本号部分，否则关联导入可能无法工作。

补充2：

如何知道pom.xml的依赖中version版本写多少？

1、打开https://www.webjars.org官网，找到下方的Popular WebJars

找到要引用的框架（也可以在Search框内输入要引用的框架名称），选择合适的版本号，选择合适的Build Tool，然后直接复制生成的引用代码即可。

补充3：

如何知道引用地址：

1、在WebJars官网找到引用的框架后，点击最后一列对应的Files

2、在打开的页面中观察：

META-INF/resources路径之后的字样就是引用路径。

3、可以在项目工程目录的Maven Dependencies下找到导入的jar包，打开观察目录结构：

写代码的老王

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
11、Spring Boot：使用WebJars

什么是WebJars？WebJars是被打包成JAR文件 (Java Archive)形式的客户端web资源库（例如：jQuery、Bootstrap等）。优点：使用WebJars技术可以对Java web项目的前端资源（例如：jQuery、Bootstrap、CSS等）进行统一的依赖管理。解决了传统的往静态文件夹下（例如/src/main/resources/static/）直...
复制链接

扫一扫