1. Обзор
В этом уроке мы рассмотрим пример приложения, которое отображает одну страницу с Vue.js frontend, используя Spring Boot в качестве бэкенда.
Мы также будем использовать Thymeleaf для передачи информации в шаблон.
2. Установка пружинной загрузки
Приложение pom.xml использует зависимость spring-boot-starter-thymeleaf для рендеринга шаблона наряду с обычной spring-boot-starter-web :
org.springframework.boot spring-boot-starter-web 2.4.0 org.springframework.boot spring-boot-starter-thymeleaf 2.4.0
Thymeleaf по умолчанию ищет шаблоны представлений в templates/ , мы добавим пустой index.html к src/main/resources/templates/index.html . Мы обновим его содержание в следующем разделе.
Наконец, наш контроллер загрузки Spring будет находиться в src/main/java :
@Controller
public class MainController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute("eventName", "FIFA 2018");
return "index";
}
}
Этот контроллер отображает один шаблон с данными, передаваемыми в представление через объект веб-модели Spring с помощью model.AddAttribute .
Давайте запустим приложение с помощью:
mvn spring-boot:run
Перейдите к http://localhost:8080 для просмотра страницы индекса. На данный момент, конечно, он будет пуст.
Наша цель состоит в том, чтобы сделать страницу распечатанной примерно так:
Name of Event: FIFA 2018 Lionel Messi Argentina's superstar Christiano Ronaldo Portugal top-ranked player
3. Визуализация данных с помощью Vue.Компонент Js
3.1. Базовая настройка шаблона
В шаблоне давайте загрузим Vue.js и Bootstrap (необязательно) для визуализации пользовательского интерфейса:
// in head tag // other markup // at end of body tag
Здесь мы загружаем Vue.js с CDN, но вы также можете разместить его, если это предпочтительнее.
Мы загружаем Babel в браузере, чтобы мы могли написать на странице код, совместимый с ES6, без необходимости выполнять шаги транспиляции.
В реальном приложении вы, скорее всего, будете использовать процесс сборки с использованием таких инструментов, как Webpack и Babel transpiler, вместо использования Babel в браузере.
Теперь давайте сохраним страницу и перезапустим ее с помощью команды mvn spring-boot : run . Мы обновляем браузер, чтобы увидеть наши обновления; пока ничего интересного.
Далее, давайте настроим пустой элемент div, к которому мы прикрепим наш пользовательский интерфейс:
Затем мы настроим приложение Vue на странице:
Что только что произошло? Этот код создает приложение Vue на странице. Мы прикрепляем его к элементу с помощью селектора CSS #contents .
Это относится к пустому элементу div на странице. Теперь приложение настроено на использование Vue.js!
3.2. Отображение данных в Шаблоне
Затем давайте создадим заголовок, который показывает атрибут ” имя события “, который мы передали из Spring controller, и визуализируем его с помощью функций Thymeleaf:
Name of Event:
Теперь давайте прикрепим атрибут ‘ data’ к приложению Vue для хранения нашего массива данных плеера, который представляет собой простой JSONArray.
Наше приложение Vue теперь выглядит следующим образом:
Сейчас Vue.js знает об атрибуте данных под названием players .
3.3. Визуализация данных с помощью Vue.js Компонент
Далее, давайте создадим Vue.js компонент с именем player-card , который отображает только один player . Не забудьте зарегистрировать этот компонент перед созданием приложения Vue.
В противном случае Vue не найдет его:
Vue.component('player-card', {
props: ['player'],
template: `
{{ player.name }}
{{ player.description }}
`
});Наконец, давайте пройдемся по набору игроков в объекте приложения и отрисоваем компонент player-card для каждого игрока:
Логика здесь заключается в директиве Vue под названием v-for, которая будет циклически перебирать каждого игрока в атрибуте данных players и отображать карточку игрока для каждой записи player внутри элемента .
v-bind:player означает, что компоненту player-card будет присвоено свойство с именем player , значением которого будет переменная цикла player , с которой в данный момент ведется работа. v-bind:ключ необходим для того, чтобы сделать каждый элемент уникальным.
Как правило, player.id – хороший выбор, так как он уже уникален.
Теперь, если вы перезагрузите эту страницу , обратите внимание на сгенерированную HTML-разметку в devtools , и она будет выглядеть примерно так:
-
// contents
-
// contents
Примечание по улучшению рабочего процесса: необходимость перезагрузки приложения и обновления браузера при каждом внесении изменений в код быстро станет обременительной.
Поэтому, чтобы облегчить жизнь, пожалуйста, обратитесь к этой статье о том, как использовать Spring Boot devtools и автоматический перезапуск.
4. Заключение
В этой краткой статье мы рассмотрели, как настроить веб-приложение с помощью Spring Boot для бэкенда и Vue.js для интерфейса. Этот рецепт может стать основой для более мощных и масштабируемых приложений, и это всего лишь отправная точка для большинства таких приложений.
Как обычно, примеры кода можно найти на GitHub .