Vue.js Frontend с бэкэндом Spring Boot

Vue.js Frontend with a Spring Boot Backend

1. обзор

В этом руководстве мы рассмотрим пример приложения, которое отображает одну страницу с помощью внешнего интерфейса Vue.js, используя Spring Boot в качестве внутреннего интерфейса.

Мы также будем использовать Thymeleaf для передачи информации в шаблон.

2. Настройка Spring Boot

Приложениеpom.xml использует зависимостьspring-boot-starter-thymeleaf для рендеринга шаблона вместе с обычнымspring-boot-starter-web:


    org.springframework.boot
    spring-boot-starter-web
    2.0.3.RELEASE


    org.springframework.boot
    spring-boot-starter-thymeleaf
    2.0.3.RELEASE

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. Отображение данных в шаблоне

Затем давайте создадим заголовок, который показывает атрибут «eventName», который мы передали из контроллера Spring, и отрендерим его с помощью функций Thymeleaf:


    Name of Event:

Теперь давайте прикрепим атрибут ‘data' к приложению Vue для хранения нашего массива данных игрока, который представляет собой простой массив JSON.

Наше приложение Vue теперь выглядит так:

Теперь Vue.js знает об атрибуте данных с именемplayers.

3.3. Визуализация данных с помощью компонента Vue.js

Затем давайте создадим компонент Vue.js с именемplayer-card, который отображает только одинplayer. Remember to register this component before creating the Vue app.

В противном случае Vue его не найдет:

Vue.component('player-card', {
    props: ['player'],
    template: `
        
            
                {{ player.name }}
            
            
                

                    {{ player.description }}
                
            
        
        `
});

Наконец, давайте переберем набор игроков в объекте приложения и отрендерим компонентplayer-card для каждого игрока:

Логика здесь - директива Vue под названиемv-for,, которая будет перебирать каждого игрока в атрибуте данныхplayers и отображатьplayer-card для каждой записиplayer внутри<li>элемент s.

v-bind:player означает, что компонентуplayer-card будет предоставлено свойство с именемplayer, значение которого будет переменной циклаplayer, с которой в настоящее время работает. v-bind:key требуется, чтобы сделать каждый элемент<li> уникальным.

Как правило,player.id - хороший выбор, поскольку он уже уникален.

Теперь, если вы перезагрузите эту страницу, обратите внимание на сгенерированную разметку HTML вdevtools, и она будет выглядеть примерно так:


    
        
            // contents
        
    
    
        
            // contents

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

Поэтому, чтобы облегчить жизнь, обратитесь кthis article о том, как использовать Spring Bootdevtools и автоматический перезапуск.

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

В этой быстрой статье мы рассмотрели, как настроить веб-приложение, используя Spring Boot для внутреннего интерфейса иVue.js для внешнего интерфейса. Этот рецепт может стать основой для более мощных и масштабируемых приложений, и это только отправная точка для большинства таких приложений.

Как обычно, образцы кода можно найтиover on GitHub.

TOC