Перейти к основному содержимому

Введение в веб-банки

· 5 мин. чтения

1. Обзор​

В этом руководстве рассказывается о WebJars и о том, как их использовать в приложении Java.

Проще говоря, WebJars — это зависимости на стороне клиента, упакованные в архивные файлы JAR. Они работают с большинством контейнеров JVM и веб-фреймворков.

Вот несколько популярных WebJars: Twitter Bootstrap , jQuery , Angular JS , Chart.js и т. д .; полный список доступен на официальном сайте .

2. Зачем использовать WebJars?​

На этот вопрос очень простой ответ – потому что это легко.

Ручное добавление и управление зависимостями на стороне клиента часто приводит к сложности поддержки кодовых баз .

Кроме того, большинство разработчиков Java предпочитают использовать Maven и Gradle в качестве инструментов сборки и управления зависимостями.

Основная проблема, которую решает WebJars, — сделать зависимости на стороне клиента доступными в Maven Central и пригодными для использования в любом стандартном проекте Maven.

Вот несколько интересных преимуществ WebJars:

  1. Мы можем явно и легко управлять зависимостями на стороне клиента в веб-приложениях на основе JVM.
  2. Мы можем использовать их с любым широко используемым инструментом сборки, например: Maven, Gradle и т. д.
  3. WebJars ведут себя как любые другие зависимости Maven, а это значит, что мы также получаем транзитивные зависимости.

3. Зависимость от Maven​

Давайте сразу приступим к делу и добавим Twitter 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>

Теперь Twitter Bootstrap и jQuery доступны в classpath проекта; мы можем просто ссылаться на них и использовать их в нашем приложении.

Примечание. Вы можете проверить последнюю версию Twitter Bootstrap и зависимости jQuery на Maven Central.

4. Простое приложение​

Определив эти две зависимости WebJar, давайте теперь настроим простой проект Spring MVC, чтобы иметь возможность использовать зависимости на стороне клиента.

Прежде чем мы перейдем к этому, важно понять, что WebJars не имеют ничего общего со Spring , и мы используем Spring здесь только потому, что это очень быстрый и простой способ настроить проект MVC.

Вот хорошее место для начала настройки проекта Spring MVC и Spring Boot.

И, настроив простой проект, мы определим некоторые сопоставления для наших новых клиентских зависимостей:

@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 Framework версии 4.2 или выше он автоматически обнаружит библиотеку webjars-locator в пути к классам и будет использовать ее для автоматического определения версии любых ресурсов WebJars.

Чтобы включить эту функцию, мы добавим библиотеку webjars-locator в качестве зависимости приложения:

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

В этом случае мы можем ссылаться на ресурсы WebJars, не используя версию; см. следующий раздел для пары фактических примеров.

6. WebJars на клиенте​

Давайте добавим в наше приложение простую HTML-страницу приветствия (это index.html ):

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

Теперь мы можем использовать Twitter Bootstrap и jQuery в проекте — давайте использовать оба на нашей приветственной странице, начиная с Bootstrap:

<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. Тестирование​

Теперь, когда мы добавили Twitter Bootstrap и jQuery на нашу HTML-страницу, давайте проверим их.

Мы добавим предупреждение начальной загрузки на нашу страницу:

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

Обратите внимание, что здесь предполагается некоторое базовое понимание Twitter Bootstrap; вот руководство по началу работы на официальном сайте.

Это покажет предупреждение , как показано ниже, что означает, что мы успешно добавили Twitter Bootstrap в наш путь к классам.

Теперь воспользуемся jQuery. Мы добавим кнопку закрытия в это оповещение:

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

Теперь нам нужно добавить jQuery и bootstrap.min.js для функциональности кнопки закрытия, поэтому добавьте их в тег body файла index.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>

Вот так должно выглядеть приложение. (И предупреждение должно исчезнуть при нажатии кнопки закрытия.)

./5ca3287e6731e6100dd85863382906c6.jpg

8. Заключение​

В этой быстрой статье мы сосредоточились на основах использования WebJars в проекте на основе JVM, что значительно упрощает разработку и обслуживание.

Мы реализовали проект с поддержкой Spring Boot и использовали Twitter Bootstrap и jQuery в нашем проекте с помощью WebJars.

Исходный код приведенного выше примера можно найти в проекте Github — это проект Maven, поэтому его легко импортировать и создавать.