Microservices mit Spring Boot

Das Frontend erstellen: Eingabeformular bauen und ans Backend anbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie, wie Sie die Datenerfassung für die Gästebuch-Applikation implementieren. Dazu wird im Frontend ein Formular bereitgestellt und der Java-Code programmiert, um die Daten an das Backend zu senden.

Transkript

Ein Gästebuch ohne die Möglichkeit Daten zu erfassen ist natürlich nichts Halbes und nichts Ganzes. Aus diesem Grund werden wir in diesem Video die Datenerfassung unserer Gästebuch-Applikation implementieren. Das bedeutet wir werden im Frontend-Projekt das entsprechende Formular bereitstellen und den Javascript-Code erfassen der notwendig ist, um die Daten an das Backend zu senden. Wir werden zu diesem Zweck zunächst einmal die Datei "add.html" ein wenig mit Leben befüllen. Bisher ist diese Datei ja leer. Wir legen zunächst einmal ein Formelement an. Formelemente halten ja im HTML alle Formulare und Formulardaten und wir werden als CSS-Klasse hier, die CSS-Klasse "Form-horizontal" wählen. Innerhalb dieses Formulars befinden sich dann drei Eingabefelder und ein Button. Nehme ich die Eingabefelder für den Titel des Beitrags, für den eigentlichen Beitrag und den Namensabesendenden und natürlich der Button, um das Ganze dann wirklich absenden zu können. Wir legen zunächst einmal das erste Eingabeelement an. Das Eingabeelement befindet sich immer innerhalb eines Divs mit der Klasse "form-group" und verfügt stets über ein Label mit dem wir den Titel dieses Formularelementes entsprechend schön darstellen können. Dieses Label ist zwei Spalten breit und hat die CSS-Klasse "control-label" und es ist für ein Feld mit der ID "Titel" gedacht. Das Feld existiert noch nicht. Das legen wir gleich an. Und der angezeigte Text da drin ist "Titel". Das eigentliche Feld befindet sich in einem weiteren Div-Container. Die CSS-Klasse ist "col-sm-10". Das heißt, das Ganze ist zehn Spalten breit und das eigentliche Eingabefeld ist ein Input-Element vom Typ "Text" mit der CSS-Klasse "form-control", der ID "Titel". Das ist dieselbe auf die das Label verweist und einem placeholder-Text, der angezeigt wird, wenn noch nichts eingegeben worden ist. Diesen gesamten Bereich, also die komplette "form-group" kopieren wir jetzt einfach noch zwei Mal und ändern jetzt hier nur die Kleinigkeiten, die notwendig sind. Im zweiten Eingabefeld verwenden wir statt eines Input-Elementes eine Textarea. Diese Textarea ist vier Zeilen hoch, verfügt ebenfalls über die Klasse "form-control", die ID ist "comment", das hat sich auch oben im Label niedergeschlagen. Und der Placeholder ist ihre Nachricht. Und last but not least, das Eingabefeld für den Namen des Absendenden, dieses Eingabefeld ist wieder ein Input, die ID ist "Commenter" und der Platzhalter ist ihr Name. Nun benötigen wir noch zwei Buttons. Diese werden unterhalb des Formulars angezeigt. Die beiden Buttons sind etwas eingerückt dargestellt. Das Ganze drücken wir aus durch Zuweisung der CSS-Klasse "col-sm-offset-2", so dass sie letztlich optisch unterhalb der Eingabefelder und nicht unterhalb der Labels liegen. Und der erste Button ist ein Button mit der ID "send" und dieser Button ist grün gefärbt. Das drücken wir aus durch Zuweisung der CSS-Klasse "btn-success" und der angezeigte Text ist "Speichern" Der zweite Button verweist direkt auf die Seite "Index.html" und er wird grau dargestellt, ausgedrückt über die CSS-Klasse "btn-default" und sein Text lautet "Abbrechen". Wenn ich da draufklicke, dann ist das Ganze ohne eine weitere Sicherheitsabfrage implementiert. Das bedeutet, klicke ich da drauf, dann lande ich sofort wieder auf der Startseite. Damit habe ich dieses Formular fertiggestellt und kann es mir nun einmal im Browser anschauen, auch wenn noch nicht viel funktionieren wird. Ich öffne also den Browser und wechsle zur Adresse "http://localhost8081". Ich habe natürlich idealerweise vorher im Eclipse das Projekt gestartet und wenn ich das Ganze tue, dann sehe ich hier ein relativ schickes Formular, in das ich jetzt schon Daten eingeben könnte, aber wie gesagt, hier wird noch nichts passieren, denn wir haben die Logik noch nicht gebaut, die wir benötigen, um die Daten zu übertragen. Und das ist genau das, was wir nun tun werden. Diese Logik legen wir in einer eigenständigen Datei ab und zwar legen hier im Ordner "Static", in diesem "Source-main-resources"-Bereich einen neuen Unterordner an, den wir "JS" nennen und in diesen Unterordner "JS" legen wir dann eine neue Javascript-Datei. Diese nennen wir "add.js" und hier werden wir jetzt die Logik implementieren, die wir benötigen, um mit "jQuery" Daten an unser Backend zu senden. Wir fangen an mit dem üblichen "jQuery"-Einsprung über "$(document).ready" und binden uns dann sobald das Dokument geladen ist an den Button mit der ID "Send" und an dessen Klickereignis, das hier auftrtitt, wenn jemand diesen Button betätigt. Wenn der Button betätigt wird, dann werden wir erstmal ein Datenobjekt erstellen. Das machen wir hier inline und dieses Datenobjekt ist das, was dann später rübergetragen wird. Das heißt, es wird alle Eigenschaften, die wir im Eingabeformular festgelegt haben und die wir auf der Serverseite erwarten, dann beinhalten und zu diesem Zweck spreche ich die entsprechenden Eingabeelemnte an und hole mir die entsprechenden Werte dann ab. Ich gehe dabei immer über die ID-Werte, die ich vergeben habe, als ich das Formular geschrieben habe. Und die Schlüssel, die vorne dran stehen, das sind die Werte, beziehungsweise die Schlüssel, die auf der Serverseite erwartet werden. Die eigentliche Übertragung der Daten mache ich dann mit Hilfe eines Ajax-Aufrufs und bei diesem Ajax-Aufruf gebe ich zunächst einmal die Url an, an die wir die Daten schicken wollen. Das ist "http://localhost:8080/guestbook". Der zweite Parameter ist die Methode, die wir anwenden wollen. Die lautet "Put". Der dritte Parameter ist die Angabe des Kontenttypes. Dieser Kontenttype lautet "application/json". Dann müssen wir die Daten als solches angeben. Dann nehmen wir das oben definierte Datenobjekt und lassen das in eine Zeichenkette umwandeln mit Hilfe der "json.stringify"-Methode und können nun noch eine Success-Methode definieren. Die wird aufgerufen, wenn alles erfolgreich war. Der werden wir uns gleich widmen. Und ebenfalls noch eine Fehlermethode. Die wird aufgerufen, wenn irgendwas schief läuft. Hier werden wir lediglich eine entsprechende Fehlermeldung ausgeben. Damit sind wir hier eigentlich schon weitestgehend fertig in der Implementierung dieses Javascripts. Wir kommen hier gleich hin zurück, wechseln jetzt aber noch einmal auf die Eingabeseite selber, um dort erstens ein Ausgabefeld für den Erfolgsfall zu hinterlegen und zweitens, um das Javascript selber einzubinden. Die Erfolgsmeldung geben wir mit einem Div in der CSS-Klasse "Container" aus und dieses Div bekommt dazu noch eine weitere CSS-Klasse, nämlich "Successarea". Diese CSS-Klasse ist nicht mit irgendwelchen weiteren Inhalten, Styles oder ähnlichen Sachen verknüpft, sondern dient uns einfach als Möglichkeit sie per "jQuery" anzusprechen und darüber das Ein- und Ausblenden dieses Bereichs zu regeln. In diesem Bereich zeigen wir eine entsprechende Meldung an mit einer kleinen Überschrift und einem entsprechenden Text und bieten dem Benutzer an, dass er auf die Startseite zurückgelangen kann und zwar, indem er auf einen entsprechenden Link klickt. Dieser Link verweist auf die Datei "index.html" und wir führen ihn wieder als Button aus, um ihn optisch etwas ansprechender zu gestalten. Jetzt benötigen wir lediglich noch einen einzigen Schritt auf dieser Seite, nämlich das Einbinden des Javascripts. Das machen wir im Kopfbereich, indem wir das "add.jsscript", was sich im Ordner "JS" befindet, miteinbinden und nachdem dies geschehen ist, können wir dann auf Ebene des Scripts die letzten kleinen Anpassungen vornehmen, damit wir dieses Ein- und Ausblenden von Formular und Erfolgsbereich entsprechend konditional umsetzen können. Da die Erfolgsmeldung natürlich Initial nicht angezeigt werden soll, blenden wir das Div mit der CSS-Klasse "Successarea" aus beim Start der Seite. Angezeigt werden soll es lediglich, wenn das Übetragen der Daten erfolgreich war. In dem Fall blenden wir es wieder ein und verstecken dafür alle Formelemente. Damit haben wir hier auf dieser Ebene die Verarbeitung abgeschlossen und können uns nun einmal anschauen, ob und wie unsere Übertragung der Daten funktioniert. Wir starten also unsere Applikation und wechseln dann in den Browser. Hier im Browser aktualisieren wir zunächst einmal die Seite und öffnen danach die Entwicklerwerkzeuge. Auf Ebene der Entwicklerwerkzeuge wechseln wir in den Bereich "Netzwerkanalyse", damit wir sehen können, ob alles soweit funktioniert hat. Jetzt geben wir ein paar Werte ein und klicken auf die Schaltfläche "Speichern". Wir werden darüber informiert, dass etwas nicht geklappt hat und wenn wir hier bei der Netzwerkanalyse schauen, dann stellen wir fest, dass der Status-Code unserer Anforderung 403 ist. 403 heißt, es ist ein Fehler passiert und was fehlgelaufen ist, kann man schon ganz gut erkennen. Die Methode stimmt nicht. Wir haben hier eine Methode implementiert, die mit "Put" arbeitet. Hier wird allerdings als http-Methode "Options" angezeigt. Der Fehler befindet sich jetzt nicht im Javascript, sondern wenn wir einmal in die Konsole wechseln, dann sehen wir eine weitere Information, nämlich das eine sogenannte Cross-origin"-Anfrage blockiert worden ist. Da steht inhaltlich drin, dass wir auf eine andere externe Resource gehen und dort Daten abgreifen wollen und das nicht können. Nun kann man sich natürlich die Frage stellen, ob "localhost:8080" eine andere externe Resource ist, als "localhost:8081". Aus Sicht des Browsers ist es das und das ist ein Problem, dass wir zum Glück relativ einfach lösen können, was aber im Internetumfeld sehr, sehr häufig auftritt. Der Grund für dieses Problem ist aber weniger, dass man uns irgendwelche Steine in den Weg legen möchte, sondern ein Sicherheitsthema, denn man möchte verhindern, dass Fremde Seiten unsere Browser hijacken können und dann in unserem Namen mit anderen Systemen interagieren. Das fällt uns hier allerdings auf die Füße. Wie bereits angesprochen, ist aber die Lösung zum Glück relativ einfach. Wir wechseln deshalb jetzt zurück in das Eclipse und werden dort die notwendigen Anpassungen vornehmen. Die notwendigen Anpassungen nehmen wir auf Ebene des GusetbookControllers im Backend vor. Hier müssen wir lediglich eine "Crossorogin-annotation" hinzufügen und lassen jetzt hier als Origins, also als Quellen von Anfragen alles zu. Alternativ können wir hier auch einzelne Hostnamen oder komplette Adressen hinterlegen. Die Angabe von Sternen sorgt aber dafür, dass wir jede Quelle akzeptieren und das ist in unserem Fall völlig in Ordnung. Wir beenden jetzt einmal die Backend-Applikation und starten diese dann neu. An der Fronted-Applikation müssen wir keine Änderungen vornehmen. Sobald das geschehen ist, können wir zurückwechseln in den Browser und schauen, ob unsere Applikation jetzt besser funktioniert. Hier im Browser wechseln wir zurück in den Bereich "Netzwerkanalyse" der Developer-Tools, klicken die Fehlermeldung weg und versuchen einfach dieselben Daten noch einmal zu speichern. Nun hat alles funktioniert. Wir bekommen angezeigt, dass unsere Operation mit der http-Methode "Put" erfolgreich war. Der Statuscode ist 200 und die entsprechende Meldung erscheint ebenfalls. Damit sollten wir es an dieser Stelle auch für die Eingabeseite bewenden lassen, denn wir haben sehr, sehr viel geschafft. Wir haben die eigentliche Eingabeseite angelegt und mit Leben befüllt, wir haben über "jQuery", also Javascript die Anbindung an das Backend sichergestellt und wir haben ein ganz übliches Problem gelöst, was in diesem Zusammenhang sehr, sehr gerne auftaucht, nämlich das Problem der Herkunft der Crossorigins. Das Ganze haben wir angegangen auf Ebene unseres Controllers und damit dann letztlich sichergestellt, dass unsere Applikation beim Hinzufügen der Daten, sich genauso verhält, wie wir es erwarten.

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!