Vue.js Frontend mit Spring Boot Backend

Vue.js Frontend with a Spring Boot Backend

1. Überblick

In diesem Tutorial werden wir eine Beispielanwendung durchgehen, die eine einzelne Seite mit einem Vue.js-Frontend rendert und Spring Boot als Backend verwendet.

Wir werden Thymeleaf auch verwenden, um Informationen an die Vorlage zu übergeben.

2. Spring Boot Setup

Die Anwendungpom.xml verwendet die Abhängigkeit vonspring-boot-starter-thymeleaf für das Rendern von Vorlagen zusammen mit den üblichenspring-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

Wenn Thymeleaf standardmäßig nach Ansichtsvorlagen beitemplates/ sucht, fügen wirsrc/main/resources/templates/index.html leereindex.html hinzu. Wir werden den Inhalt im nächsten Abschnitt aktualisieren.

Schließlich wird unser Spring Boot-Controller insrc/main/java angegeben:

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

Dieser Controller rendert eine einzelne Vorlage mit Daten, die über das Spring Web Model-Objekt mitmodel.addAttribute an die Ansicht übergeben werden.

Führen Sie die Anwendung aus mit:

mvn spring-boot:run

Navigieren Sie zuhttp://localhost:8080, um die Indexseite anzuzeigen. Zu diesem Zeitpunkt ist es natürlich leer.

Unser Ziel ist es, die Seite so auszudrucken:

Name of Event: FIFA 2018

Lionel Messi
Argentina's superstar

Christiano Ronaldo
Portugal top-ranked player

3. Rendern von Daten mit einer Vue.Js-Komponente

3.1. Grundlegendes Setup der Vorlage

Laden Sie in der Vorlage Vue.js und Bootstrap (optional), um die Benutzeroberfläche zu rendern:

// in head tag



//  other markup

// at end of body tag

Hier laden wir Vue.js von einem CDN, aber Sie können es auch hosten, wenn dies vorzuziehen ist.

Wir laden Babel in den Browser, damit wir ES6-kompatiblen Code in die Seite schreiben können, ohne Transpilierungsschritte ausführen zu müssen.

In einer realen Anwendung verwenden Sie wahrscheinlich einen Erstellungsprozess mit einem Tool wie Webpack und Babel-Transpiler, anstatt Babel im Browser zu verwenden.

Speichern Sie nun die Seite und starten Sie sie mit dem Befehlmvn spring-boot: _run_ neu. Wir aktualisieren den Browser, um unsere Updates anzuzeigen. noch nichts interessantes.

Als nächstes richten wir ein leeres div-Element ein, an das wir unsere Benutzeroberfläche anhängen:

Als Nächstes richten wir eine Vue-Anwendung auf der Seite ein:

Was ist gerade passiert? Dieser Code erstellt eine Vue-Anwendung auf der Seite. Wir hängen es mit dem CSS-Selektor#contents an das Element an.

Dies bezieht sich auf das leerediv-Element auf der Seite. Die Anwendung ist jetzt für die Verwendung von Vue.js eingerichtet!

3.2. Anzeigen von Daten in der Vorlage

Als Nächstes erstellen wir einen Header, der das Attribut "eventName" anzeigt, das wir vom Spring-Controller übergeben haben, und rendern es mit den folgenden Funktionen von Thymeleaf:


    Name of Event:

Fügen wir nun der Vue-Anwendung ein Attribut 'data'' hinzu, um unser Array von Player-Daten zu speichern, bei dem es sich um ein einfaches JSON-Array handelt.

Unsere Vue-App sieht jetzt so aus:

Jetzt kennt Vue.js ein Datenattribut namensplayers.

3.3. Rendern von Daten mit einer Vue.js-Komponente

Als Nächstes erstellen wir eine Vue.js-Komponente mit dem Namenplayer-card, die nur einplayer rendert. Remember to register this component before creating the Vue app.

Andernfalls findet Vue es nicht:

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

                    {{ player.description }}
                
            
        
        `
});

Lassen Sie uns abschließend die Gruppe der Spieler im App-Objekt durchlaufen und für jeden Spieler eineplayer-card-Komponente rendern:

Die Logik hier ist die Vue-Direktive namensv-for,, die jeden Spieler im Datenattributplayers durchläuft undplayer-card für jedenplayer-Eintrag innerhalb eines<li>-Eintrags rendert. s Element.

v-bind:player bedeutet, dass die Komponenteplayer-card eine Eigenschaft namensplayer erhält, deren Wert die Schleifenvariableplayer ist, mit der gerade gearbeitet wird. v-bind:key ist erforderlich, um jedes<li>-Element eindeutig zu machen.

Im Allgemeinen istplayer.id eine gute Wahl, da es bereits eindeutig ist.

Wenn Sie diese Seite neu laden, beobachten Sie das generierte HTML-Markup indevtools, und es sieht ungefähr so aus:


    
        
            // contents
        
    
    
        
            // contents

Hinweis zur Verbesserung des Workflows: Es wird schnell mühsam, die Anwendung neu zu starten und den Browser jedes Mal zu aktualisieren, wenn Sie den Code ändern.

Um das Leben zu vereinfachen, lesen Sie bittethis article zur Verwendung von Spring Bootdevtools und zum automatischen Neustart.

4. Fazit

In diesem kurzen Artikel wurde erläutert, wie Sie eine Webanwendung mit Spring Boot für das Backend undVue.js für das Frontend einrichten. Dieses Rezept kann die Grundlage für leistungsfähigere und skalierbarere Anwendungen bilden, und dies ist nur ein Ausgangspunkt für die meisten dieser Anwendungen.

Wie üblich finden sich Codebeispiele inover on GitHub.

TOC