Microservices mit Spring Boot

Das Frontend erstellen: WebJars einbinden und Bootstrap-Rahmen definieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film erstellen Sie ein HTML-Frontend, das zwar über keine eigene Logik verfügt, aber als Spring-Boot-Applikation ausgeführt wird. Legen Sie das Frontend an, fügen Sie Komponenten hinzu und definieren Sie zwei Seiten für Ein- und Ausgabe.

Transkript

Moderne Applikationen, die als Microservices-Applikationen ausgeführt sind, verfolgen ja das Prinzip der Aufgabenteilung. Es gibt ein ''Backend'', das die Daten vorhält und lädt und zurückgibt. Und es gibt ein ''Frontend'', dass diese Daten dann abruft und anzeigt. Das ''Frontend'', was wir in diesem Video erstellen werden, ist ein ''HTML-Frontend''. Das hat kaum serverseitige Logik, wird allerdings als ''Spring-Boot-Applikation'' ausgeführt. Wir werden das ''Frontend'' hier anlegen. Wir werden die benötigten Komponenten hinzufügen und wir werden zwei Seiten anlegen, die nämlich der Eingabe von neun Gästebuchnachrichten und der Anzeige bereits existierender Gästebuchnachrichten dienen werden. Der erste Schritt besteht im Anlegen des Frontend-Projekts. Wir machen dies über ''File'', ''New'', ''Spring Starter Project'' und können hier ein neues Projekt mit dem Namen ''Guestbook-frontend'' anlegen. Die Group-ID lautet ''de.applicity.guestbook''. Das Artefakt ist dann ''guestbook-frontend'' und der Package-Name ist ''de.applicity.guestbook''. Ein Klick auf ''Next'' erlaubt es uns die benötigten ''Dependencies'' auszuwählen. Hier benötigen wir lediglich die Web-Dependency. Ein Klick auf ''Finish'' legt das Projekt an. Nach einigen Sekunden ist dies erledigt und wir können dann das Projekt selber nutzen und weiterbearbeiten. Wir öffnen zunächst die Datei ''pom.xml''. In dieser Datei werden die Abhängigkeiten unseres Projekts verwaltet. Wir wechseln hier in den Reiter ''Dependencies''. Und wir fügen nun zwei Abhängigkeiten hinzu. Beide Abhängigkeiten haben die Group-ID ''org.webjars''. Die erste Abhängigkeit ist das ''Bootstrap-Framework'' für das UI. Dieses liegt in der aktuellen Version 3.3.7 vor. Die zweite Abhängigkeit ebenfalls aus dem ''webjars''-Packet ist ''jQuery''. Und ''jQuery'' liegt in der Version 3.1.1 vor. Ein Klick auf ''Okay'' übernimmt die Einstellungen. Wir können das Projekt speichern und per Rechtsklick auf das Projekt und aus dem Kontextmenü ''Maven'' mit Hilfe der Option ''Update Project'' alle benötigten Komponenten herunterladen lassen. Damit sind unsere vorbereitenden Arbeiten abgeschlossen und wir können uns der Implementierung der HTML-Seiten widmen. Diese HTML-Seiten befinden sich im ''Ressources''-Bereich unserer Seite und dort im Unterverzeichnis ''Static''. Wir legen per Rechtsklick ''New'', ''File'' eine HTML-Seite an. Wir nennen sie ''index.html''. Und wir sollten dort den ''Doctype'' eintragen, das HTML-Wurzelelement hinterlegen und den Head-Bereich hinterlegen. Dieser Head-Bereich enthält den Titel der Seite und drei Meter Angaben, die für Twitter-Bootstrap notwendig sind, damit die Seite korrekt dargestellt wird. Nun können wir das Twitter-Bootstrap-Stylesheet einfügen. Das machen wir mit Hilfe eines Linkelements und dieses Stylesheet liegt unter der Adresse "/webjars/bootstrap/css/" und heißt ''bootstrap.min.css''. Sie werden sich vielleicht wundern, warum Sie jetzt nichts weiter machen müssen, warum wir nicht irgendwas runterladen müssen, oder sonstige Dinge unternehmen müssen. Der Hintergrund ist der, dass wir in der ''pom.xml'' mit Hilfe des Webjars-Projekts die benötigten Abhängigkeiten registriert haben. Die wurden automatisch heruntergeladen und liegen jetzt in diesem virtuellen Pfad. Ebenfalls fügen wir jetzt ''jQuery'' mit ein. Dies machen wir mit Hilfe eines Script-Elementes. Auch hier verweisen wir auf ''webjars'' als Wurzelordner. Dann den Unterordner ''jQuery'' und die Datei, die wir einbinden wollen, heißt ''jQuery.min.js''. Und analog gehen wir für die ''bootstrap-Javascript-Datei'' vor. Die befindet sich in "/webjars/bootstrap/js/" und heißt ''bootstrap.min.js''. Nachdem wir dies erledigt haben, haben wir sowohl ''css-stylesheets'', als auch Javascripte bereits fertig eingebunden und können uns nun der Implementierung der eigentlichen Seiteninhalte widmen. Diese Seiteninhalte werden natürlich innerhalb eines ''Body-Elements'' hinterlegt und wir fügen zunächst einmal ein sogenanntes ''Jumbotron'' ein. Das machen wir mit einem Div mit der CSS-Klasse ''Jumbotron'' und da drin gibt es ein Div mit der CSS-Klasse ''Container'' und innerhalb dieses Divs befindet sich ein ''h2''-Element mit der Überschrift ''Gästebuch''. Wir sollten nun einmal alles das, was wir bisher haben markieren und kopieren. Und fügen eine zweite Seite hinzu. Die nennen wir ''add.html'' und kopieren hier all das, was wir bereits geschrieben haben mit ein. Lediglich den Seitentitel ändern wir. [Typing] Und zwar wird diese Seite dem Hinzufügen eines Eintrages dienen. Und das soll sich natürlich auch im Titel dann niederschlagen. Damit haben wir schon zwei Seiten angelegt und können nun die Applikation einmal starten, bevor wir weitere Schritte unternehmen. Bevor wir sie allerdings starten, sollten wir noch einmal ganz kurz innehalten. Denn wir sehen in unserem ''Project-Explorer'' es gibt ja noch ein zweites Projekt, nämlich das Backend-Projekt. Und dieses Backend-Projekt, wenn es gestartet ist, lauscht auf ''Port 8080''. Wir müssen jetzt dafür sorgen, dass unser Frontend-Projekt auf ein anderen Port lauscht. Zu diesem Zweck öffnen wir die Datei ''application.properties'' und geben hier der Eigenschaft ''server.port'' den Wert 8081. Nachdem wir die Datei gespeichert haben, können wir nunmehr per Rechtsklick und ''Run as'' Spring- Boot-Applikationen, diese Applikation starten und uns das Ergebnis dann im Browser einmal anschauen. Die Applikationen können wir einfach über die Adresse ''http://localhost:8081/ aufrufen und wir sehen, dass die Applikation als solches funktioniert. Wesentlich mehr können wir allerdings nicht erkennen. Darüber hinaus werden wir feststellen, dass die Ausgabe eigentlich nicht so ist, wie man das von einer modernen schick gestalteten Web-Applikation erwartet. Und wir haben ja bereits ''Twitter-bootstrap'' eingebunden. Irgendwas scheint hier noch nicht richtig zu sein, noch nicht richtig zu funktionieren. Die Erklärung ist relativ einfach. In Abhängigkeit von der Spring Boot- Version, die Sie einsetzen, kann es sein, dass der sogenannte Webjars-Locator nicht mit enthalten ist. Das ist hier offensichtlich der Fall und dieses Problem können wir in der Datei ''pom.xml'' durch das Hinzufügen einer weiteren Abhängigkeit sehr einfach beheben. Zu diesem Zweck klicken wir auf die Schaltfläche ''Add'' und geben als Group-ID erneut ''org.webjars'' an. Als Artefakt-ID ''webjars-locator'' und die Version ist 0.32. Ein Klick auf ''Okay'' erlaubt es uns diese Einstellung zu speichern und zu übernehmen. Und nun können wir unsere Applikation beenden und einmal neu starten. Und dann erneut in den Browser wechseln. Und nun werden wir feststellen, dass die Anzeige doch um einiges gefälliger aussieht. Also aktualisieren wir die Seite und ja, das Gästebuch sieht doch jetzt schon deutlich besser aus. Selbiges gilt für die zweite Seite, die wir hinzugefügt haben. Auch hier ist jetzt die Anzeige so, wie wir sie erwarten würden. Und damit haben wir doch eigentlich eine ganze Menge geschafft. Denn wir haben in diesem Video gesehen, wie wir ein Projekt anlegen können, wie wir alle benötigten Komponenten, die wir fürs Frontend brauchen als Referenzen hinzufügen können. Wir haben den Applikationsport geändert. Wir haben zwei Seiten angelegt und wir haben diesen Seiten dann ''Twitter-Bootstrap'' und ''jQuery'' als Frameworks mit hinzugefügt und ein ganz rudimentären Seitenrumpf schon einmal geschaffen. Das ist eine Menge, was wir an Infrastruktur-Tätigkeiten geleistet haben und das ist etwas, worauf wir dann auch aufbauen können.

Microservices mit Spring Boot

Sehen Sie, wie moderne Applikationen für Cloud-Umgebungen entstehen.

2 Std. 14 min (12 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!