Разработка приложений с Spring Boot + JS

Этот урок показывает как использовать интерфейс командной строки Spring Boot для создания приложения с поддержкой Spring MVC на стороне сервера и web-интерфейсом с использованием шаблонизатора Thymeleaf и jQuery.

Что вы создадите

Вы создадите web-приложение с использованием Groovy и Spring, а также Thymeleaf и jQuery.

Что вам потребуется

Примерно 15 минут свободного времени
Любимый текстовый редактор или IDE
JDK 6 и выше
Gradle 1.11+ или Maven 3.0+
Вы также можете импортировать код этого урока, а также просматривать web-страницы прямо из Spring Tool Suite (STS), собственно как и работать дальше из него.

Как проходить этот урок

Как и большинство уроков по Spring, вы можете начать с нуля и выполнять каждый шаг, либо пропустить базовые шаги, которые вам уже знакомы. В любом случае, вы в конечном итоге получите рабочий код.

Чтобы начать с нуля, перейдите в Настройка проекта.

Чтобы пропустить базовые шаги, выполните следующее:

Загрузите и распакуйте архив с кодом этого урока, либо кнонируйте из репозитория с помощью Git: git clone https://github.com/spring-guides/gs-spring-boot-cli-and-js.git
Перейдите в каталог gs-spring-boot-cli-and-js/initial
Забегая вперед, создайте Spring приложение

Когда вы закончите, можете сравнить получившийся результат с образцом в gs-spring-boot-cli-and-js/complete.

Установка Spring Boot CLI

Spring Boot включает в себя интерфейс командной строки. Существует несколько способов для его установки.

Вы можете установить его через gvm:

curl -s get.gvmtool.net | bash

После установки gvm, установите CLI:

gvm install springboot
spring --version

Если вы используете Mac, то вы также можете установить CLI через Homebrew:

brew tap pivotal/tap
brew install springboot
spring --version

Воспользовавшись любым из вариантов, вы теперь имеете возможность создать Spring приложение с минимальными усилиями.

Создание Spring приложения

Теперь создайте простейшее приложение:

app.groovy

@Grab("thymeleaf-spring4")

@Controller
class Application {
    @RequestMapping("/greeting")
    public String greeting(@RequestParam(value="name", required=false, defaultValue="World") String name, Model model) {
        model.addAttribute("name", name)
        return "greeting"
    }
}

Этот Spring MVC контроллер определяет REST точку выхода /greeting. Позже мы напишем шаблон для него.

Добавление JavaScript библиотеки

Продемонстрируем это с помощью jQuery анимации. Для начала нам необходимо получить копию jQuery. Простейшим вариантом является добавление Groovy аннотации @Grab в начале вашего приложения, которая автоматически получает библиотеку:

@Grab("org.webjars:jquery:2.0.3-1") // это позволит автоматически получить jquery

Не постесняйтесь прочитать о Spring Boot + webjars.

Написание веб-интерфейса

Давайте создадим Thymeleaf шаблон для поддержки нашей Spring MVC точки выхода:

mkdir templates

Теперь добавьте следующий шаблон:

templates/greeting.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Spring Boot CLI + Javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="webjars/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('p').animate({
                fontSize: '48px'
            }, "slow");
        });
    </script>
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

Т.к. мы используем webjars, jQuery находится в webjars/jquery/<version>/<library>.

Запуск приложения

Теперь запустите приложение:

spring run -cp . app.groovy

Чтобы увидеть анимацию, перейдите по адресу http://localhost:8080/greeting.

Это почти пустое приложение включает большое количество возможностей благодаря Spring Boot.

@Controller говорит о том, что это Spring MVC приложение и Spring Boot будет запускать встроенный контейнеер сервлетов Tomcat
Несколько вариантов для автозагрузки ресурсов(более подробную информацию смотрите на страницах webjars и static web content блога). Поэтому мы разместили наш web шаблон в каталоге /templates

На данном этапе вы можете добавлять RESTful точки выхода, работать с web-интерфейсами и расширять приложение по вашей необходимости.

Итог

Spring Boot CLI предоставляет быстрай способ создания серверного приложения. Он также поддерживает подключение ваших любимых JavaScript ресурсов и HTML шаблонов. Вы также можете добавлять CSS ресурсы. В итоге: вы не создаете файл проекта, вместо этого вы быстро погружаетесь в разработку вашего приложения.

С оригинальным текстом урока вы можете ознакомиться на spring.io.