Front-end do Vue.js com um back-end de inicialização Spring

Vue.js Frontend with a Spring Boot Backend

1. Visão geral

Neste tutorial, veremos um aplicativo de exemplo que renderiza uma única página com um front-end Vue.js, enquanto usa Spring Boot como back-end.

Também usaremos o Thymeleaf para passar informações para o modelo.

2. Configuração de inicialização do Spring

O aplicativopom.xml usa a dependênciaspring-boot-starter-thymeleaf para renderização de modelo junto com ospring-boot-starter-web usual:


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


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

Por padrão, o Thymeleaf procura por modelos de visualização emtemplates/, vamos adicionar umindex.html vazio asrc/main/resources/templates/index.html. Atualizaremos seu conteúdo na próxima seção.

Finalmente, nosso controlador Spring Boot estará emsrc/main/java:

@Controller
public class MainController {
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("eventName", "FIFA 2018");
        return "index";
    }
}

Este controlador renderiza um único template com dados passados para a visão por meio do objeto Spring Web Model usandomodel.addAttribute.

Vamos executar o aplicativo usando:

mvn spring-boot:run

Navegue atéhttp://localhost:8080 para ver a página de índice. Estará vazio neste ponto, é claro.

Nosso objetivo é fazer com que a página seja impressa da seguinte forma:

Name of Event: FIFA 2018

Lionel Messi
Argentina's superstar

Christiano Ronaldo
Portugal top-ranked player

3. Renderizando dados usando um componente Vue.Js

3.1. Configuração básica do modelo

No modelo, vamos carregar o Vue.js e o Bootstrap (opcional) para renderizar a interface do usuário:

// in head tag



//  other markup

// at end of body tag

Aqui, carregamos o Vue.js de um CDN, mas você também pode hospedá-lo, se preferir.

Carregamos o Babel no navegador para que possamos escrever algum código compatível com ES6 na página sem precisar executar as etapas de transpilação.

Em um aplicativo do mundo real, você provavelmente usará um processo de compilação usando uma ferramenta como o Webpack e o Babel transpiler, em vez de usar o Babel no navegador.

Agora vamos salvar a página e reiniciar usando o comandomvn spring-boot: _run_. Atualizamos o navegador para ver nossas atualizações; nada de interessante ainda.

A seguir, vamos configurar um elemento div vazio ao qual anexaremos nossa interface de usuário:

Em seguida, configuramos um aplicativo Vue na página:

O que acabou de acontecer? Este código cria um aplicativo Vue na página. Nós o anexamos ao elemento com o seletor CSS#contents.

Isso se refere ao elementodiv vazio na página. O aplicativo agora está configurado para usar o Vue.js!

3.2. Exibindo dados no modelo

A seguir, vamos criar um cabeçalho que mostra o atributo ‘eventName’ que passamos do controlador Spring e renderizá-lo usando os recursos do Thymeleaf:


    Name of Event:

Agora vamos anexar um atributo ‘data' ao aplicativo Vue para armazenar nossa matriz de dados do jogador, que é uma matriz JSON simples.

Nosso aplicativo Vue agora fica assim:

Agora Vue.js conhece um atributo de dados chamadoplayers.

3.3. Renderizando dados com um componente Vue.js.

A seguir, vamos criar um componente Vue.js chamadoplayer-card que renderiza apenas umplayer. Remember to register this component before creating the Vue app.

Caso contrário, o Vue não o encontrará:

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

                    {{ player.description }}
                
            
        
        `
});

Finalmente, vamos percorrer o conjunto de jogadores no objeto do aplicativo e renderizar um componenteplayer-card para cada jogador:

A lógica aqui é a diretiva Vue chamadav-for, que fará um loop sobre cada jogador no atributo de dadosplayers e renderizará umplayer-card para cada entradaplayer dentro de um<li>elemento s.

v-bind:player significa que o componenteplayer-card receberá uma propriedade chamadaplayer, cujo valor será a variável de loopplayer com a qual está sendo trabalhada. v-bind:key é necessário para tornar cada elemento<li> único.

Geralmente,player.id é uma boa escolha, pois já é único.

Agora, se você recarregar esta página, observe a marcação HTML gerada emdevtools, e ela será semelhante a esta:


    
        
            // contents
        
    
    
        
            // contents

Uma nota de melhoria do fluxo de trabalho: rapidamente se tornará complicado ter que reiniciar o aplicativo e atualizar o navegador cada vez que você fizer uma alteração no código.

Portanto, para tornar a vida mais fácil, consultethis article sobre como usar Spring Bootdevtoolse reinicialização automática.

4. Conclusão

Neste artigo rápido, vimos como configurar um aplicativo da web usando Spring Boot para back-end eVue.js para front-end. Esta receita pode formar a base para aplicativos mais poderosos e escalonáveis, e este é apenas um ponto de partida para a maioria desses aplicativos.

Como de costume, os exemplos de código podem ser encontradosover on GitHub.

TOC