WebJars简介

最新推荐文章于 2024-03-18 09:58:50 发布

原创最新推荐文章于 2024-03-18 09:58:50 发布 · 3.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #jvm #开发语言

1. 概述

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

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

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

2. 为什么使用WebJars ？

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

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

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

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

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

我们可以显式且轻松地管理基于JVM的Web应用程序中的客户端依赖关系
我们可以将它们与任何常用的构建工具一起使用，例如：Maven，Gradle等
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项目的一种非常快速和简单的方法。

这是开始设置弹簧 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 - 让我们在欢迎页面中同时使用两者，从引导开始：

<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

对于与版本无关的方法：

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

添加 jQuery：

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

与版本无关的方法：

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

7. 测试

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

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

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

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

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

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

<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

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

<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

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

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

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

<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>

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