Datenzugriff mit Node.js 1
Wie funktioniert der Datenzugriff mit Node.js?
Mit React.js kann nicht direkt auf das Dateisystem oder Datenbank zugegriffen werden. Dazu ist zusätzlich eine Server-Technologie erforderlich, wie z. B. Node.js, PHP oder eine Server-Anwendungen in der Programmiersprache Java oder vergleichbare Programmiersprachen. Die Server-Anwendung stellt den Zugriff über einen REST-Service zur Verfügung über den die Daten bezogen oder geschrieben werden können. In den folgenden Beispielen wird Node.js als Server-Technologie verwendet:
Hinweis: Das Tutorial Node.js erklärt, was Node.js ist und zeigt, wie es installiert und verwendet werden kann!
Dateizugriff mit dem „fs“-Modul
Die folgenden Beispiele verwenden folgende JSON-Datei:
Lesen von Daten aus einer Datei
Der REST-Service zum Lesen von Daten wird mit Node.js realisiert. Für das Bereitstellen des Webservice wird das Modul „express“ verwendet. Dieses bietet mit „app.http-methode(‚http-route‘, … )“ die Anfrage der Daten über eine URL an. Das „fs“-Modul dient dem Zugriff auf das Datei-System und ermöglicht so, die JSON-Datei zu lesen und über den Response des Webservice an die React-Anwendung weiterzugeben:
Node.js-Datei:
In der React-Anwendung erfolgt die Abfrage des Webservice mit „fetch(‚url:port/http-route‘).then(Rückgabe).then(Ergebnis verarbeiten)“. Die Aufbereitung der Daten zu einer Tabelle erfolgt in der externen Komponente „table.js“. Hier wird zunächst aus der JSON-Struktur ein Array erstellt und dann mit „return array.map(element => {return … }“ eine verschachtelte Schleife über die zweidimensionalen Daten realisiert:
React.js-Dateien
CSS-Datei
Ergebnis:
Schreiben von Daten in eine Datei
Für das Schreiben von Daten wird in der Node.js-Anwendung mit „app.post(‚/addUser‘) …) eine weitere HTTP-Route zur Verfügung gestellt. Mit dem „fs“-Modul werden die Daten wieder gelesen. Danach werden die zu schreibenden Daten aus dem „body“ der Anfrage extrahiert, der neue Datensatz erstellt und an die gelesenen Daten angefügt und mit dem „fs“-Modul geschrieben. Zuletzt wird noch mit res.redirect(„url/http-pfad“) die Rückgabe auf die HTTP-Route zum Bereitstellen der Daten umgeleitet:
Node.js-Datei:
In der React-Anwendung wird in der „render()“-Methode ein Button und zwei Eingabefelder hinzugefügt. Das Senden der Daten erfolgt mit „fetch(‚url:port/http-route‘, {method: ‚POST‘, headers: { … }, body: JSON.stringify({ … })}).then(Rückgabe).then(Ergebnis verarbeiten)“. Danach werden noch die Daten im „state“-Objekt aktualisiert und die Eingabefelder zurückgesetzt:
React.js-Dateien:
CSS-Datei
Ergebnis:
Löschen von Daten
Für das Löschen von Daten gibt es in der Node.js-Beispiel-Anwendung die HTTP-Route „app.post(‚deleteUser‘, … )“. Hier werden wieder mit dem „fs“-Modul die Benutzerdaten gelesen. Anschließend werden mit zwei verschachtelten Schleifen die Benutzerdaten ermittelt, die nicht gelöscht werden sollen. Diese werden dann mit dem „fs“-Modul geschrieben. Zuletzt wird wieder mit res.redirect(„url/http-pfad“) die Rückgabe auf die HTTP-Route zum Bereitstellen der Daten umgeleitet:
Node.js-Datei:
In der React-Anwendung werden zunächst dem Header der Tabelle eine weiter Spalte und in der „render“-Methode für diese ein Löschen-Button hinzugefügt. Die Komponente „table“ wird jeder Zeile dann eine Spalte mit einer Checkbox hinzugefügt, die jeweils die ID des Datensatzes mit „check“ vorangestellt bekommt. Der Aufruf zum Löschen ist fast identisch mit dem Aufruf zum Schreiben, nur dass hier statt den neuen Feldern ein Array mit den ID‘s übergeben wird, welche gelöscht werden sollen:
React.js-Dateien:
CSS-Datei
Ergebnis:
