Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Microservices mit Spring Boot

Das Frontend erstellen: Übersichtsseite bauen und ans Backend anbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Legen Sie die Startseite für das Gästebuch an. Anschließend werden die Daten aus dem Backend geladen und mithilfe von jQuery visualisiert. Wie das alles funktioniert, erklärt Ihnen Karsten Samaschke in diesem Video.

Transkript

Das, was ein Benutzer bei einem Gästebuch als erstes zu Gesicht bekommt, ist die eigentliche Gästebuchhauptseite. Dort werden die letzten Gästebucheinträge angezeigt und der Benutzer kann von dort aus weiterführende Funktionalitäten, wie zum Beispiel neu Laden oder das Hinzufügen von anderen neuen Einträgen ausführen. Wir werden in diesem Video genau diese Startseite erstellen, wir werden aus dem Backend die Daten laden und wir werden Sie mit Hilfe von jQuery visualisieren. Zunächst einmal öffnen wir die Datei "index.html", die ja bisher ein wenig leer aussieht. Wir fügen jetzt hier unterhalb der Überschrift, ein Div-Element mit der CSS-Klasse "Container" hinzu. Und in diesem Div-Element legen wir zunächst einmal eine Zeile an. Diese Zeile wird dann zwei Buttons beinhalten. Einen Button, das ist der erste den wir hier anlegen mit der ID "Refresh" und der CSS-Klasse "btn", so wie der CSS-Klasse "btn-success", mit dessen Hilfe wir die Daten erneut laden lassen. Zu diesem Zweck zeigen wir ein kleines Symbol an. Das machen wir mit den in Twitter-Bootstrap integrierten Glyphicons und zwar wählen wir da das Glyphicon "Refresh" aus und lassen natürlich auch noch einen Text entsprechend daneben stehen. Der zweite Button verweist auf die Seite "Add.html", auf der sich neue Einträge hinzufügen lassen und der wird in der Standardfarbe dargestellt und kann vom Benutzer so wie er ist einfach nur angeklickt werden. Unterhalb dieser Zeile legen wir eine Leerzeile an und darunter hinterlegen wir eine Tabelle. Eine Tabelle, die abwechselnd farbig dargestellt wird. Das geben wir über die CSS-Klasse "Table-striped" an. Diese Tabelle hat initial noch keinen Inhalt, außer ein Tbody-Element, in das die Inhalte reingeschrieben werden und diesem Tbody-Element geben wir die ID "Content", denn das werden wir dann später aus jQuery heraus ansprechen. Damit ist diese Hauptseite bereits fertig und alles was jetzt zu tun bleibt, ist das JavaScript zu schreiben, was wir benötigen, um die Daten vom Backend zu laden und hier anzuzeigen. Dieses JavaScript hinterlegen wir in einer eigenständigen Datei. Die Datei ist anfangs eine leere Datei mit dem Namen "index.js". Hier werden wir zunächst einmal den üblichen jQuery-Bootstraper hinterlegen. Und also quasi an das Ready-Ereignis des Dokumentes binden und dann unsere Funktionalitäten hinterlegen. Zunächst einmal legen wir eine Methode an. Diese Methode heißt "Refresh" und die hat die Aufgabe zunächst einmal den Inhaltsbereich zu leeren. Das machen wir mit jQuery und dessen Anweisung "Empty" und danach ein Http-Request, ein Get-Request auszuführen. Und zwar auf den Backend-Service, der sich unter der Adresse, "Localhost8080/guestbook" verbirgt und die zurückgegebenen Daten bekommen wir dann in die Funktion, die wir hier als zweiten Parameter hinzufügen, hinein übergeben. Diese Daten werden wir nun durchlaufen und zwar in einer Vorschleife. Die Vorschleife durchläuft alle Datensätze und innerhalb eines jeden Schleifendurchlaufes legen wir nun ein neues Table-row-Element an. Das machen wir über jQuery selber und wir legen für dieses Table-row-Element, ebenfalls über jQuery ein td-Element an. In dieses td-Element werden wir dann die geladenen Inhalte überführen. Das machen wir, indem wir die Append-Methode des td-Elementes benutzen und uns dann alles das, was wir im Grunde anzeigen wollen, jeweils als Div-Container direkt mit jQuery generieren lassen. Die CSS Klasse "Lead", die wir hier verwenden, das ist eine Twitter-Bootstrap-Klasse, die sorgt dafür, dass der Inhalt, der diesem Container zugewiesen wird größer dargestellt wird und den eigentlichen Inhalt weisen wir über die jQuery-Funktion "Text" zu. Die sorgt dafür, dass eventuelle HTML-Fragmente, die sich in einem jedem Datenelement befinden, dann automatisch escaped werden, damit wir nicht ein Sicherheitsrisiko haben und als erstes werden wir hier dann den Titel ausgeben. Das können wir jetzt kopieren, dann sparen wir uns ein wenig Schreibaufwand für genau drei Elemente. Das zweite Element hat einen normalen Div-Container mit normaler Schrift und nimmt den "Comment" auf und das dritte Element soll kleine Schrift haben und farblich etwas reduzierter angezeigt werden. Das drücken wir über die CSS-Klasse "Text-muted" aus und hier drin lassen wir zunächst einmal das Datum ausgeben und sagen danach von wem der Eintrag ist. Das holen wir uns aus dem Feld "Commenter". Das sind ja genau die Daten, die wir vom Backend zurückbekommen. So, die so fertiggestellte td-Komponente, fügen wir nun der Table-row über deren Append-Methode hinzu. Und zu guter Letzt wird die gerade fertiggestellte Table-row dann an das Kontent-Element angefügt und damit ist die Verarbeitung an dieser Stelle bereits abgeschlossen. Nun fehlt eigentlich lediglich das initiale Laden der Daten und das ist nichts weiter als ein Aufruf auf die gerade eben definierte Methode "Refresh" und der "Aktualisieren"-Button, muss natürlich auch noch gebunden werden. Dieser Button hatte ja die ID "Refresh" und wenn der angeklickt wird, dann rufen wir die Methode "Refresh" auf. Damit haben wir die notwendige JavaScript-Logik ebenfalls erfasst und müssen jetzt lediglich, in der Index.html-Seite dieses JavaScript noch einbinden. Wir wechseln also zurück in die Seite Index.html, korrigieren hier noch einen kleinen Fehler, der mir aufgefallen ist. Wir wollten, dass die Buttons über die gesamte Breite angezeigt werden und fügen dann das eben geschriebene JavaScript im Kopf der Seite hinzu. Damit sind wir hier einsatzfähig und können nun sowohl Backend, als auch Frontend starten. Sobald das geschehen ist, können wir die Applikation im Browser testen. Hier im Browser begrüßt uns zunächst eine leere Seite. Wenn wir einen neuen Eintrag hinzufügen wollen, klicken wir auf den entsprechenden Button, geben einen entsprechenden Titel an, (Tippgeräusche) eine entsprechende Nachricht (Tippgeräusche) und unseren Namen, klicken auf "Speichern" und der Eintrag wird übernommen. Wenn wir zur Startseite zurückgehen, erscheint dieser erste Gästebucheintrag. Wir fügen mal noch einen Zweiten dazu (Tippgeräusche) (Tippgeräusche) und übernehmen dann die Eingaben durch Klick auf "Speichern" und auf der Startseite erscheint dieser zweite Eintrag über dem Ersten. Wir können nun den Rest Easy-Client einmal öffnen und können das Backend direkt mit Daten befüllen. Wir stellen dazu die Methode auf "Put" um. Die Adresse ist: "http://localhost8080/guestbook". Vergessen Sie hinten das letzte Slash nicht. Daten kommen in einem Custom-Format. Der MIME Type ist "Applikation/json". Die eigentlichen Daten sind wieder relativ einfach gestaltet. Wir haben den Titel des Eintrags, (Tippgeräusche) wir haben den eigentlichen Inhalt (Tippgeräusche) und wir haben denjenigen, der es geschickt hat (Tippgeräusche) und können das Ganze dann einmal absenden. Die Übertragung war erfolgreich, der Datensatz wurde gespeichert und hier im Gästebuch wird uns ein Klick auf "Aktualisieren" diesen dritten Eintrag ebenfalls zur Anzeige bringen. Damit haben wir das Frontend unserer Microservices basierenden Applikationen soweit umgesetzt. Wir haben die Daten aus dem Backend abgerufen und wir zeigen sie in einer schicken Form an. Unsere Gesamtapplikation ist nunmehr komplett einsatzfähig.

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!