TOC

Введение в WebJars

Введение в WebJars

1. обзор

Это руководство знакомит с веб-файлами и их использованием в приложении Java.

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

Вот несколько популярных веб-журналов:Twitter Bootstrap,jQuery,Angular JS,Chart.js и т. Д .; полный список доступен наofficial website.

2. Зачем использовать веб-журналы?

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

Manually adding and managing client side dependencies often results in difficult to maintain codebases.

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

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

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

  1. Мы можем явно и легко управлять клиентскими зависимостями в веб-приложениях на основе JVM

  2. Мы можем использовать их с любым обычно используемым инструментом сборки, например: Maven, Gradle и т. Д.

  3. WebJars ведут себя как любая другая зависимость Maven - это означает, что мы также получаем транзитивные зависимости

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

Давайте сразу перейдем к нему и добавим Twitter Bootstrap и jQuery вpom.xml: __ 


    org.webjars
    bootstrap
    3.3.7-1


    org.webjars
    jquery
    3.1.1

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

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

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

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

Однако прежде чем мы перейдем к этому, важно понять, чтоWebJars have nothing to do with Spring, и мы используем здесь только Spring, потому что это очень быстрый и простой способ настроить проект MVC.

Here’s a good place to start, чтобы настроить проект Spring MVC и Spring Boot.

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

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/webjars/**")
          .addResourceLocations("/webjars/");
    }
}

Конечно, мы можем сделать это и через XML:

5. Версионно-Агностические Зависимости

При использовании Spring Framework версии 4.2 или выше он автоматически обнаружит библиотекуwebjars-locator в пути к классам и будет использовать ее для автоматического определения версии любых ресурсов WebJars.

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


    org.webjars
    webjars-locator
    0.30

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

6. Веб-журналы на клиенте

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


    
        WebJars Demo

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

Для независимого от версии подхода:

Добавить jQuery:

И версионно-независимый подход:

7. тестирование

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

Мы добавим на нашу страницу бутстрапalert: 



    

        Success! It is working as we expected.

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

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

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

×

Теперь нам нужно добавитьjQuery иbootstrap.min.js для функции кнопки закрытия, поэтому добавьте их внутри тега телаindex.html,, как показано ниже:

Примечание. Если вы используете независимый от версии подход, обязательно удалите из пути только версию, иначе относительный импорт может не сработать:

Вот как должна выглядеть наша последняя страница приветствия: 


    
        
        
        WebJars Demo
        
    
    
        


            

                ×
                Success! It is working as we expected.

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

webjarsdemo

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

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

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

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

Related