«Введение в веб-банки» - Spring на русском

«1. Обзор

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

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

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

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

На этот вопрос очень простой ответ — потому что это просто.

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

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

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

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

We can explicitly and easily manage the client-side dependencies in JVM-based web applications
We can use them with any commonly used build tool, eg: Maven, Gradle, etc
WebJars behave like any other Maven dependency – which means that we get transitive dependencies as well

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 доступны в пути к классам проекта; мы можем просто ссылаться на них и использовать их в нашем приложении.

Примечание. Вы можете проверить последнюю версию 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>

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

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

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

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

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

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