WebJars简介

一时失言乱红尘 2023-09-26 11:39 58阅读 0赞

### **1. 概述** ###

本教程介绍 WebJars 以及如何在 Java 应用程序中使用它们。

简单地说，WebJars 是打包到 JAR 归档文件中的客户端依赖项。它们适用于大多数 JVM 容器和 Web 框架。

以下是一些流行的WebJars：*witter Bootstrap*, *jQuery*, *Angular JS*, *Chart.js*等;完整的列表可在[官方网站][Link 1]上找到。

### **2. 为什么使用**WebJars **？** ###

这个问题有一个非常简单的答案 - 因为它很容易。

**手动添加和管理客户端依赖项通常会导致难以维护代码库**。

此外，大多数 Java 开发人员更喜欢使用 Maven 和 Gradle 作为构建和依赖关系管理工具。

WebJars 解决的主要问题是使客户端依赖项在 Maven 中心上可用，并且可以在任何标准 Maven 项目中使用。

以下是网络任务的一些有趣优势：

1.  我们可以显式且轻松地管理基于JVM的Web应用程序中的客户端依赖关系
2.  我们可以将它们与任何常用的构建工具一起使用，例如：Maven，Gradle等
3.  WebJars 的行为类似于任何其他 Maven 依赖项 – 这意味着我们也获得了可传递依赖项

### **3.** Maven**依赖** ###

让我们直接进入它，并将推特Bootstrap 和jQuery添加到*pom.xml*：

<dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.3.7-1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.1.1</version>
    </dependency>

现在，推特Bootstrap 和jQuery在项目类路径上可用;我们可以简单地引用它们并在我们的应用程序中使用它们。

注意：您可以查看最新版本的Bootstrap和[jQuery][]依赖项。

### **4.简单的应用程序** ###

定义了这两个 WebJar 依赖项后，现在让我们设置一个简单的 Spring MVC 项目，以便能够使用客户端依赖项。

然而，在我们开始之前，重要的是要了解**WebJars与Spring无关**，我们在这里只使用Spring，因为它是设置MVC项目的一种非常快速和简单的方法。

[这是开始][Link 2]设置弹簧 MVC 和弹簧启动项目的好地方。

而且，通过简单的 projet 设置，我们将为新的客户端依赖项定义一些映射：

@Configuration
    @EnableWebMvc
    public class WebConfig implements WebMvcConfigurer {
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry
              .addResourceHandler("/webjars/**")
              .addResourceLocations("/webjars/");
        }
    }

我们当然也可以通过XML来做到这一点：

<mvc:resources mapping="/webjars/**" location="/webjars/"/>

### **5. 与版本无关的依赖关系** ###

使用Spring框架4.2或更高版本时，它将自动检测类路径上的*webjars定位器*库，并使用它来自动解析任何WebJars资源的版本。

为了启用此功能，我们将*添加 webjars 定位器*库作为应用程序的依赖项：

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

在这种情况下，我们可以在不使用版本的情况下引用 WebJars 资源;有关几个实际示例，请参阅下一节。

### **6. 客户端上的**WebJars ###

让我们向应用程序添加一个简单的纯 HTML 欢迎页面（这是*索引.html*）：

<html>
        <head>
            <title>WebJars Demo</title>
        </head>
        <body> 
        </body>
    </html>

现在我们可以在项目中使用Twitter引导和jQuery - 让我们在欢迎页面中同时使用两者，从引导开始：

对于与版本无关的方法：

添加 jQuery：

与版本无关的方法：

### **7. 测试** ###

现在我们已经在 HTML 页面中添加了推特引导和 jQuery，让我们来测试它们。

我们将在页面中添加引导*警报*：

<div class="container"><br/>
        <div class="alert alert-success">         
            <strong>Success!</strong> It is working as we expected.
        </div>
    </div>

请注意，这里假设对推特引导的一些基本理解;这是官方[的入门指南][Link 3]。

这将显示一个*警报*，如下所示，这意味着我们已成功将 Twitter 引导程序添加到我们的类路径中。

现在让我们使用 jQuery。我们将为此警报添加一个关闭按钮：

现在我们需要为关闭按钮功能添加*jQuery*和*bootstrap.min.js*，因此将它们添加到*索引.html*的正文标记中，如下所示：

注： 如果您使用的是与版本无关的方法，请确保仅从路径中删除版本，否则，相对导入可能不起作用：

这是我们最终的欢迎页面应该是什么样子的：

<html>
        <head>
            <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
            <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
            <title>WebJars Demo</title>
            <link rel="stylesheet" 
              href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
        </head>
        <body>
            <div class="container"><br/>
                <div class="alert alert-success">
                    <a href="#" class="close" data-dismiss="alert" 
                      aria-label="close">×</a>
                    <strong>Success!</strong> It is working as we expected.
                </div>
            </div>
        </body>
    </html>

这是应用程序的外观。（单击关闭按钮时，警报应该会消失。

![7f0ebe012fda47ecb2feba83a6fe63b9.jpeg][]

### **8. 结论** ###

在这篇快速文章中，我们重点介绍了在基于 JVM 的项目中使用 WebJars 的基础知识，这使得开发和维护变得更加容易。

我们实现了一个弹簧启动支持的项目，并在使用 WebJars 的项目中使用了推特引导和 jQuery。

上面使用的示例的源代码可以在[Github项目][Github]中找到 - 这是一个Maven项目，因此应该很容易导入和构建。

[Link 1]: http://www.webjars.org/
[jQuery]: https://mvnrepository.com/artifact/org.webjars/jquery
[Link 2]: https://www.baeldung.com/thymeleaf-in-spring-mvc
[Link 3]: https://getbootstrap.com/components/
[7f0ebe012fda47ecb2feba83a6fe63b9.jpeg]: https://img-blog.csdnimg.cn/7f0ebe012fda47ecb2feba83a6fe63b9.jpeg
[Github]: https://github.com/eugenp/tutorials/tree/master/spring-boot-modules/spring-boot-artifacts