Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 5 - Erste Schritte mit Vue.js und Typescript

Einleitung

Dieser Artikel ist eine Serie von Artikeln, die den Aufbau einer Fullstack Applikation unter DotNet Core und Vue.js beschreiben.

Bisher sind folgende Artikel erschienen:

  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Erste Schritte Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 2 Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 3 - Einbinden PostgreSQL als Datenbank Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 4 - Erweiterung um ein Repository Pattern und Service Layer Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 5 - Erste Schritte mit Vue.js und Typescript Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 6 - Erweiterung um Vuex und Axios Link

In diesen Artikel wenden wir uns nun den Fron-End zu, da die wesentlichen Aktionen im Backend getan wurden, die eine gute Basis für eine professionelle Entwicklung notwendig sind.

In diesen Artikel konzentriere ich mich hauptsächlich darauf, dass wir die ersten Schritte in der Front-End Entwicklung durchführen können und Kleinigkeiten anpassen.

Starten der Applikation und durchführen kleiner Änderungen

Wir können die Applikation sofort starten, da das Template bereits über ein sehr interessantes Feature verfügt:

Dieses Feature unterstützt uns in mehreren Punkten:

  • Führen wir Änderungen im Front-End durch, wird Webpack automatisch gestartet und die Änderungen kompiliert.
  • Nachdem die Änderungen kompiliert werden, werden diese uns direkt am Browser angezeigt ohne das wir einen Reload drücken müssen. (Hotreplacement)

Um das auszuprobieren starten wir die Applikation einfach im Debugger:

Nach wenigen Sekunden bekommen wir den Browser angezeigt.

Ändern wir nun etwas in bspw. der "home.vue.html" Datei, wird dies nach dem Speichern nach wenigen Sekunden automatisch im Browser angezeigt:

Das funktioniert auch mit Programmlogik, bspw. wenn man in "app.ts" die MenuComponent auskommentiert, wird der Code automatisch in JS kompliliert und im Browser aktualisiert:

Baut man einen Fehler ein, dann bekommt man das praktisch sofort auf dem Browser angezeigt:

Wir lassen aber aktuell die Menu Komponente noch wie sie ist.

Änderung der Navigation

Zu Übungszwecken möchten wir nun eine Navigationsleiste am oberen Rand, statt an der linken Seite haben.

Die aktuelle Konfiguration verwendet noch "Bootstrap 3". Unter folgenden Link finden wir eine Beschreibung der Navigationsleiste: https://getbootstrap.com/docs/3.3/components/#navbar

In den Verzeichnis "components" wird ein neues Verzeichnis "toolbar" angelegt. Dort wird eine neue Datei "toolbar.vue.hmtl" mit folgenden Inhalt erstellt:

<template>  
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <router-link to="/fetchdata" class="navbar-brand">
                    Fetch Data
                </router-link>
            </div>  
        </div>
    </nav>
</template>  

In der Datei "app.ts" wird nun eine "ToolbarComponent" hinzugefügt:

Damit nun die neue Toolbar auch angezeigt wird, muss noch die "app.vue.html" entsprechend angepasst werden:

<template>  
    <div id='app-root' class="container-fluid">
        <div class="row">
            <toolbar-component />
        </div>
        <div class="row">
            <div class="col-sm-9">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script src="./app.ts"></script>  

Nach dem Speichern, sollte die Webseite nun wie folgt aussehen:

Mit einen Klick auf "Fetch Data" gelangt man wieder zu den Wetterdaten:

Erster Schritt zu einer dynamischen Navigationsleiste

Selbstverständlich machen Componenten erst dann einen richtigen Sinn, wenn diese auch eine gewisse Logik mitbringen, um dynamisch Ergebnisse zu zeigen.

Ich möchte zunächst beispielhaft zeigen, das die Links in der oberen Leiste dynamisch erzeugt werden. Hierzu benötigen wir in der Komponente eine "v-for" Schleife, die den Wert einer Variable ausliest. Zudem benötigen wir ein Script, das unsere Variable "link" mit Werten versorgt:

<template>  
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div v-for="item in links" class="navbar-header">
                <router-link v-bind:to="item.routepath" class="navbar-brand">
                    {{item.routetext}}
                </router-link>
            </div>  
        </div>
    </nav>
</template>

<script src="./toolbar.ts"></script>  

Das Datei für das TypeScript "toolbar.ts" ist anzulegen:

import Vue from 'vue';  
import { Component } from 'vue-property-decorator';

interface routeLinks {  
    routetext: string;
    routepath: string;
}

@Component
export default class Toolbar extends Vue {  
    links: routeLinks[] = [
        { 
            routetext: 'Home',
            routepath: '/'
        },
        { 
            routetext: 'Fetch Data',
            routepath: '/fetchdata'
        }
    ];
}

Im Script übergeben wir zunächst nur "statische Werte", die werden natürlich im nächsten Schritt auch dynamisiert werden.

Schaut man sich das Ergebnis jetzt im Browser an, haben wir nun zwei funktionierende dynamische Links:

Eine bessere Verwaltung der Links

Anstatt eine Schleife an dieser Stelle einzusetzen, ist es besser wenn man eine weitere Kompoente "toolbarlink" erstellt und dort die notwendigen Definitionen durchführt.

Zunächst kann aber aus der "Toolbar" die Datei "toolbar.ts" wieder entfernt werden und der Link zum Script entfernt. Zudem definieren wir mit "Slot", wo die Kind-Elemente gespeichert werden sollen.

<template>  
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <slot></slot>
        </div>
    </nav>
</template>  

Ein neues Verzeichnis "toolbarlink" wird angelegt und dort zwei Dateien hinzugefügt. Zunächst die Datei "toolbar.vue.html":

<template>  
    <router-link v-bind:to="linkpath" class="navbar-brand">
        {{linktext}}
    </router-link>
</template>

<script src="./toolbarlink.ts"></script>  

Und das Script, damit die Properties "Linkpath" und "Linktext" auch verwendet werden können:

import Vue from 'vue';  
import { Component, Prop } from 'vue-property-decorator';

@Component
export default class Toolbarlinks extends Vue {  
    @Prop({default: 'Linktext'}) linktext: string;
    @Prop({default: 'Linkpath'}) linkpath: string;

}

Diese neue Komponente machen wir nun in "App.ts" bekannt:

Und bauen diese nun in der "app.vue.html" mit ein:

Anschließend funktionieren die Links wieder wie erwartet:

Zusammenfassung

In diesen Artikel haben ich die ersten Schritte für die Front-End-Entwicklung beleuchtet. Es wurden die grundlegenden Konzepte von Components, Slots, Schleifen und die Integration mit Typescript erklärt.

Es lohnt sich durchaus ein wenig mit den Möglichkeiten herum zu spielen.

Der aktuelle Stand ist als v0.0.5 unter Github verfügbar: https://github.com/smoki99/DotNetVueBlog/releases/tag/v0.0.5

Ich wünsche viel Spaß beim ausprobieren!