So erstellen Sie eine Single Page Application mit Drupal 8 und Vue JS

Vue.js ist ein progressives JavaScript-Framework zum Erstellen interaktiver Weboberflächen, die zugänglich, vielseitig und leistungsstark sind. Es bietet datenreaktive Komponenten mit einer einfachen und flexiblen API.

Wenn Sie bereits mit den Grundlagen von Vue.js und Drupal 8 vertraut sind, aber das Gefühl haben, dass die Welt der SPAs oder von Headless Drupal beängstigend erscheint, ist dieses Tutorial genau das Richtige für Sie. 

Was werden wir bauen?

Werfen wir einen kurzen Blick darauf, was wir entwickeln werden. Hier werden wir eine Headless-Drupal-Website namens EDMAPP entwickeln, die mittels REST-API mit Drupal interagiert.

Erste Schritte mit Drupal 8

Sobald Sie Drupal 8 auf Ihrem lokalen System installiert haben, können Sie benutzerdefinierte Inhaltstypen erstellen. Sie können Views hinzufügen, die REST-API aktivieren und damit arbeiten. Melden Sie sich zunächst mit den Administrator-Zugangsdaten auf Ihrer Drupal-Website an und folgen Sie einfach den untenstehenden Schritten. Wenn Sie bereits wissen, wie man Views, Inhaltstypen und die REST-API einrichtet, können Sie diesen Schritt überspringen und zum nächsten übergehen.

Wenn Sie Drupal 8 auf Ihrem lokalen System installiert haben, können Sie benutzerdefinierte Inhaltstypen erstellen, Views hinzufügen, die REST-API aktivieren und damit arbeiten.

Schritt 1: REST-API in Drupal aktivieren 

Melden Sie sich auf Ihrer Drupal 8-Website an.  Erweitern →  Diese Module aktivieren → Installieren.

Schritt 2: Benutzerdefinierten Inhaltstyp erstellen

Erstellen Sie zwei benutzerdefinierte Inhaltstypen namens „EDM Album“ und „Artist“ und füllen Sie die entsprechenden Felder aus. 

Für EDM Album

Für EDM Artist

Schritt 3: View hinzufügen und mit REST arbeiten 

Sobald Sie die Daten zu Ihren benutzerdefinierten Inhaltstypen hinzugefügt haben, erstellen Sie die View.

Struktur → Views → View hinzufügen

Und Sie erhalten ein Formular, wie in der Abbildung unten gezeigt.

Benennen Sie die View. Belassen Sie alle Einstellungen wie sie sind und aktivieren Sie „REST-Export bereitstellen“ und fügen Sie einen REST-Exportpfad hinzu, zum Beispiel wird api/edmalbum unsere URL sein, um die Antwortdaten zu erhalten.

Sobald dies erledigt ist, wird Ihr Bildschirm wie in der Abbildung unten aussehen. Wenden Sie ein Filterkriterium an, um relevante Informationen herauszufiltern. Klicken Sie dazu auf Hinzufügen (Filterkriterien) → Inhaltstyp → Inhaltstyp EDM-Alben auswählen und aktivieren.

Machen Sie dasselbe für den 'Artist'. Erstellen Sie eine View und filtern Sie die relevanten Daten heraus. Konzentrieren Sie sich nun auf die Einrichtung von Vue.js.

Wenden Sie Filterkriterien an, aktivieren und wählen Sie die Inhaltstypen EDM-Alben aus. Machen Sie dasselbe für Artist.

Erste Schritte mit Vue.js

In diesem Abschnitt werden wir das Frontend mit Vue.js erstellen und eine Single Page Application entwickeln.

Bevor Sie fortfahren, muss Node.js auf Ihrem System installiert sein. Falls nicht, können Sie diesem Link folgen und die Node.js-Installation entsprechend den Anforderungen Ihres Systems herunterladen. 

Schritt 1: Vue-Projekt mit Vue CLI einrichten

Wir werden die Vue CLI verwenden, um den Prozess zu beschleunigen. Wenn Sie die Vue CLI nicht installiert haben, können Sie sie wie folgt installieren:

npm install -g vue-cli

Hinweis: Für die Zwecke dieses Tutorials habe ich beim Ausführen des untenstehenden Befehls „NEIN“ gewählt, als nach der Code-Auflistung gefragt wurde.

Um das Projekt zu erstellen, führen Sie den folgenden Befehl aus. Geben Sie die abgefragten Informationen entsprechend ein und starten Sie die Anwendung.

vue init webpack <name_of_project folder>
# install dependencies and go!
cd <name_of_project folder>
//install node dependencies from package json
npm install
// run this command to start your project
npm run dev

Nachdem Sie die obigen Befehle ausgeführt haben, sollten Sie Folgendes sehen, wenn Sie localhost:8080 aufrufen:

Schritt 2: Vue Router und Vue Resource zu unserem Projekt hinzufügen

Nun sind wir bereit, unsere Single Page Application zu starten. Wir müssen jedoch noch eine weitere Abhängigkeit installieren, nämlich vue-router und vue-resource.

Vue Router ist der offizielle Router für Vue.js. Er ist tief in den Vue.js-Kern integriert, um die Erstellung von Single Page Applications mit Vue.js zu erleichtern.
Wenn Sie Kenntnisse in Angular und React haben, wissen Sie sicherlich, dass der Vue Router gleichbedeutend mit dem Angular Router oder React Router ist.

Vue Resource ist das Plugin für Vue.js, das Dienste für Webanfragen und die Verarbeitung von Antworten mittels XMLHttpRequest oder JSONP bereitstellt.

Um diese beiden Abhängigkeiten in Ihrem Projekt zu installieren, führen Sie die folgenden Befehle in Ihrem Terminal oder Ihrer Eingabeaufforderung aus.

//install vue-router and save dependency to package.json
npm install vue-router --save
//install vue-resource and save dependency to package.json
npm install vue-resource --save

SCHRITT 3: Lassen Sie uns etwas Code schreiben

Die Struktur sollte nun etwa wie in der Abbildung unten aussehen. Sie können das Projekt auch von GitHub klonen oder forken. 

SCHRITT 3.1: main.js-Datei zur Verwendung von Vue Routern und Vue Resources modifizieren

Öffnen Sie Ihr Projekt in Ihrem bevorzugten Texteditor und navigieren Sie zu src/main.js, um Ihr Projekt für Vue Router und Vue Resource zu konfigurieren.

Kopieren Sie den untenstehenden Code und ersetzen Sie ihn in Ihrer main.js-Datei: 

// Vue-Instanz importieren
import Vue from 'vue'
// App-Komponente importieren
import App from './App'
// Vue Router importieren
import VueRouter from 'vue-router'
// Vue Resource importieren
import VueResource from 'vue-resource'
// Vue anweisen, den Router zu verwenden
Vue.use(VueRouter)
// Vue anweisen, die Resource zu verwenden
Vue.use(VueResource);

// Komponenten für die Router importieren
import Album from './components/Album'
import Artist from './components/Artist'

// Routen definieren
const routes = [

    {
        path: '/',
        component: Album,

    }, {
        path: '/artist',
        component: Artist
    }
]

// Router-Instanz erstellen und die Option 'routes' übergeben

const router = new VueRouter({
    routes, // Kurzform für routes: routes
    mode: 'history'
})


// Vue-Instanz instanziieren

new Vue({
    // Selektor für die Root-Komponente definieren
    el: '#app',
    // Template an die Root-Komponente übergeben
    template: '<App/>',
    // Komponenten deklarieren, auf die die Root-Komponente zugreifen kann
    components: {
        App
    },
     // Router an die Vue-Instanz übergeben
    router

}).$mount('#app') // Router an die App mounten

Wir haben die Vue-Klasse aus den Node-Modulen importiert und anschließend die App-Komponente importiert.

Die App.vue-Komponente ist die Standardkomponente, die von der Vue CLI erstellt wird. Wir haben sie jedoch importiert, um sie als unsere Root-Komponente zu verwenden. Danach importieren wir den Vue Router und informieren dann die Vue-Klasse, damit sie den Vue Router mittels vue.use(vueRouter) verwenden kann.

In der nächsten Zeile importieren wir die Vue Resource und informieren die Vue-Klasse, dass sie die Vue Resource mittels vue.use(vueResource) verwenden kann.

Wir definieren ferner eine 'Konstante' namens 'routes', die ein Array mit dem Pfad für unsere Komponente ist. Als Nächstes erstellen wir unseren Router. Eine Instanz des Vue Routers, der wir zwei Parameter übergeben.

Der erste Parameter ist das 'routes'-Array und der andere ist der Modus. Der Modus-Parameter wurde jedoch übergeben, um zu verhindern, dass unsere URLs das #-Zeichen enthalten, was sich auch als nicht gut für SEO erwiesen hat, wenn URLs das '#'-Zeichen enthalten.

Danach erstellen wir eine neue Vue-Instanz, in der wir die Details unserer Root-Komponente übergeben und den Einhängepunkt des Routers deklarieren. Sobald Sie die Schritte abgeschlossen haben, wird der Bildschirm leer sein, da Vue nicht aktualisiert wurde, wo Komponenten geladen werden sollen. Hier werden wir die Tags <router-view></router-view> verwenden.

Öffnen Sie nun Ihre src/App.vue-Datei und ersetzen Sie den Inhalt durch den folgenden:

SCHRITT 3.2: App.js zur Zusammenarbeit mit dem Router modifizieren

<template>
<div id="app">
  <nav class="navbar  fixed-top navbar-expand-lg justify-content-between">
    <a class="navbar-brand" href="#"><img src="./assets/logo.png" alt="EDM LOGO"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Navigation umschalten">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse " id="navbarSupportedContent">
      <ul class="nav ml-auto navbar-nav">
        <li class="nav-item active">
          <router-link v-bind:to="'/'">EDM-Alben</router-link>
        </li>
        <li class="nav-item">
          <router-link v-bind:to="'/artist'">EDM-Künstler</router-link>
        </li>
        <li class="nav-item">
          <router-link v-bind:to="'/about'">Über mich</router-link>
        </li>
      </ul>
    </div>
  </nav>
// Router-View-Tags zum Laden von Komponenten in den Router
  <router-view ></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<!-- Styling für die Komponente -->
<style type="text/css">
@import url('./assets/style.css');
</style>

Wenn wir uns den obigen Code ansehen, haben wir  <router-view ></router-view> hinzugefügt, um Komponenten in die Router-View zu laden. Wir importieren auch style.css, um unserer App benutzerdefiniertes Styling hinzuzufügen.

Schritt 3.3: App-Komponenten und Router einrichten

Erstellen Sie zwei App-Komponenten: Album.vue und Artist.vue. Hier wird die 'Album'-Komponente unsere Standardkomponente sein, die in die View geladen wird.

Bevor wir weitere Komponenten hinzufügen, fügen wir Bootstrap zu unserer index.html-Datei hinzu. Öffnen Sie die index.html-Datei aus dem Stammverzeichnis Ihres Projekts und fügen Sie die Dateien hinzu. Oder kopieren und ersetzen Sie einfach den unten angegebenen Code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>EDM App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./css/style.css">
    </head>
    <body>
        <div class="container-fluid">
            <br>
            <div id="app">
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </body>
</html>

Nun müssen wir Komponenten für unsere App erstellen, die in unsere Route geladen werden. Gehen Sie dazu einfach in den src-Ordner und erstellen Sie eine Datei namens Album.vue und Artist.vue und fügen Sie den folgenden Code hinzu.

Album.vue

<template >
<div  id="albums">
    <div class="row">
        <div class="col-md-3 col-sm-12"  v-for="album in albums">
            <div class="card">
                <img class="card-img-top album_img " v-bind:src="album.field_album_cover[0].url" v-bind:alt="album.field_album_cover[0].alt" style=";height: 200px;" >
                <div class="card-body">
                    <h5 class="card-title album_title">  {{ album.title[0].value }} </h5>
                    <div class="card-text">
                        <p>
                            <strong>Künstler :</strong>
                            <span>{{ album.field_artist[0].value }}</span>
                        </p>
                        <p>
                            <strong>Genres :</strong>
                            <span v-for ="genre in  album.field_genres ">
                                {{ genre.value }}
                            </span>
                        </p>
                        <p>
                            <strong>Labels :</strong>
                            <span>{{album.field_label[0].value}}</span>
                            <span v-for ="label in  album.field_labels ">
                                {{ label.value }}
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <br>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'albums',
    // Daten initialisieren, die in die Komponente geladen werden sollen
    data() {
        return {
            albums: [],
            albums: this.getAlbums()
        }
    },
    methods: {
        // Anfrage senden, um Promise von der aufgerufenen URL zu erhalten
        getAlbums: function() {
            this.$http.get("http://edm.dd:8083/api/album").then(response => {
                this.albums = response.body;
                // console.log(this.albums);
            }, response => {
                console.log("Fehler beim Abrufen von Daten von der URL. Stellen Sie sicher, dass Ihr Server läuft.");
            });
        }
    }
};
</script>

Album.vue

<template >
<div  id="albums">
<div class="row">
<div class="col-md-3 col-sm-12"  v-for="album in albums">
<div class="card">
<img class="card-img-top album_img " v-bind:src="album.field_album_cover[0].url" v-bind:alt="album.field_album_cover[0].alt" style=";height: 200px;" >
<div class="card-body">
<h5 class="card-title album_title">  {{ album.title[0].value }} </h5>
<div class="card-text">
    <p>
        <strong>Künstler :</strong>
        <span>{{ album.field_artist[0].value }}</span>
    </p>
    <p>
        <strong>Genres :</strong>
        <span v-for ="genre in  album.field_genres ">
            {{ genre.value }}
        </span>
    </p>
    <p>
        <strong>Labels :</strong>
        <span>{{album.field_label[0].value}}</span>
        <span v-for ="label in  album.field_labels ">
            {{ label.value }}
        </span>
</p>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</template>

<script>
export default {
    name: 'albums',
    // Daten initialisieren, die in die Komponente geladen werden sollen
    data() {
        return {
            albums: [],
            albums: this.getAlbums()
        }
    },
    methods: {
        // Anfrage senden, um Promise von der aufgerufenen URL zu erhalten
        getAlbums: function() {
            this.$http.get("http://edm.dd:8083/api/album").then(response => {
                this.albums = response.body;
                // console.log(this.albums);
            }, response => {
                console.log("Fehler beim Abrufen von Daten von der URL. Stellen Sie sicher, dass Ihr Server läuft.");
            });
        }
    }
};
</script>

Lassen Sie sich nicht von 'export default' verwirren; es ist Teil des ES6-Modulsystems. Es wird verwendet, um Funktionen, Objekte, Klassen oder Ausdrücke aus Skriptdateien oder Modulen zu exportieren.
Die data()-Funktion, die ein Array enthält, empfängt Daten von der Methode namens getAlbum.

Die Methode getAlbum in album.vue und getArtist in artist.vue liefert uns eine Antwort von der $http-Anfrage, die von Vue Resource durch Aufruf der URL, die wir in der Drupal 8-Website für den REST-Export definiert haben, gestellt wird. Die Funktion hier gibt ein Promise zurück und ruft die JSON-Antwort von der angegebenen URL ab.

Sobald das Promise erfolgreich zurückkehrt, haben wir unsere Daten in den 'albums'- und 'artists'-Arrays von Objekten, die in unserem Template verwendet werden können, um alle Informationen anzuzeigen, die wir ausgeben möchten.

Zur Anzeige der Daten (aus dem Objekt) haben wir das Listen-Rendering in Vue.js verwendet, das ähnlich funktioniert wie ng-repeat in Angular. Für weitere Details können Sie diesem Link folgen.

Hinweis: Wenn Sie in der Konsole Ihres Browsers einen 'Access-Control-Allow-Origin'-Fehler erhalten, können Sie diese Erweiterung für den Google Chrome-Browser herunterladen.

Failed to load http://edm.dd:8083/api/album: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Herzlichen Glückwunsch! Sie haben Ihre eigene Headless Single Page Application mit Vue.js und Drupal 8 erstellt.

Was kommt als Nächstes?

Sie können den Komplexitätsgrad erhöhen, indem Sie weitere Routen und Komponenten hinzufügen. Oder indem Sie Drupal-Inhalte vom Frontend aus hinzufügen oder bearbeiten.

Wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich unten stellen. Oder kontaktieren Sie uns, um großartige SPAs und Projekte zu realisieren. Senden Sie eine E-Mail an [email protected].