In der Welt der Webentwicklung ist es oft notwendig, mit Daten zu arbeiten, die über eine REST-API bereitgestellt werden. Bei der Entwicklung von Frontend-Anwendungen müssen Entwickler häufig mit Mock-APIs arbeiten, um ihre Anwendungen unabhängig von der tatsächlichen Backend-Implementierung zu testen. JSON-Server ist eine großartige Lösung für dieses Problem. In diesem Artikel werden wir uns mit JSON-Server befassen und erfahren, wie er verwendet werden kann, um einen einfachen Mock-Server für die Entwicklung von Webanwendungen bereitzustellen. Zuerst zeige ich, wie Node und NPM auf dem PI Zero installiert werden kann.
Was ist JSON-Server?
JSON-Server ist ein einfaches, aber leistungsstarkes Werkzeug, mit dem Entwickler in kürzester Zeit einen voll funktionsfähigen RESTful-API-Mock-Server erstellen können. Es basiert auf Node.js und verwendet eine JSON-Datei als Datenquelle. Mit JSON-Server können Entwickler API-Endpunkte erstellen, Daten hinzufügen, aktualisieren, löschen und abfragen, ohne eine eigentliche Backend-Implementierung schreiben zu müssen.
Dann mal los …
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
# Lade das tar von https://unofficial-builds.nodejs.org/download/release/ (Achtung: es muss armv6l und .xz für den Zero sein) wget https://unofficial-builds.nodejs.org/download/release/v20.3.1/node-v20.3.1-linux-armv6l.tar.xz # Auspacken des geladenen tar tar xvfJ node-v20.3.1-linux-armv6l.tar.xz # Das ausgepackte Archive nach /usr/local kopieren sudo cp -R node-v20.3.1-linux-armv6l/* /usr/local # Optional: Verzeichnis und tar löschen rm -rf node-* # Datei ~/.profile um Path erweitern sudo vi ~/.profile # ganz am Ende anfügen PATH=$PATH:/usr/local/bin # reboot sudo reboot # Check der Versionen node -v && npm -v # Ergebnis, ok: v20.3.1 9.6.7 |
Nun installieren wir einen JSon-Test-REST-Server in 10 Minuten.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
sudo npm install -g json-server # dann legen wir eine JSon Datei an, die der Server zurückliefert vi db.json # mit dem Inhalt: { "posts": [ { "id": 1, "title": "Beispiel json-server", "author": "Thomas Wenzlaff" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } # nun starten wir den Server mit json-server --watch db.json # es kommt dann diese Startmeldung: \{^_^}/ hi! Loading db.json Done Resources http://localhost:3000/posts http://localhost:3000/comments http://localhost:3000/profile Home http://localhost:3000 Type s + enter at any time to create a snapshot of the database Watching... GET /posts 200 104.908 ms - 77 GET /posts/1 200 33.546 ms - 63 # 1. Abfrage in neuer Konsole mit lynx Browser lynx http://localhost:3000/posts/1 # und speichern des Ergebnis { "id": 1, "title": "Beispiel json-server", "author": "Thomas Wenzlaff" } |
Oder auch ein weiteres Beispiel mit einer users.json Beispiel Datei:
|
1 2 3 4 5 6 7 |
{ "users": [ { "id": 1, "name": "Thomas Wenzlaff" }, { "id": 2, "name": "Jane Smith" }, { "id": 3, "name": "Alice Johnson" } ] } |
Start dann mit
json-server –watch users.json
Abfrage dann
http://localhost:3000/users
Verwendung von JSON-Server
Sobald der JSON-Server läuft, können Sie auf die API-Endpunkte zugreifen und mit den Daten interagieren. Hier sind einige Beispiele für die Verwendung von JSON-Server:
GET-Anfrage: Um alle Benutzer abzurufen, senden Sie eine GET-Anfrage an http://localhost:3000/users. Sie erhalten eine JSON-Antwort mit allen Benutzerdaten.
POST-Anfrage: Um einen neuen Benutzer hinzuzufügen, senden Sie eine POST-Anfrage an http://localhost:3000/users mit den entsprechenden Daten im Anfragekörper.
PUT-Anfrage: Um einen vorhandenen Benutzer zu aktualisieren, senden Sie eine PUT-Anfrage an http://localhost:3000/users/:id, wobei :id die ID des Benutzers ist, den Sie aktualisieren möchten.
DELETE-Anfrage: Um einen Benutzer zu löschen, senden Sie eine DELETE-Anfrage an http://localhost:3000/users/:id, wobei :id die
Noch besser ist, man kann leicht Testdaten automatisch erzeugen. Z.B. 1000 User. Dafür eine index.js Datei mit diesen Inhalt anlegen:
|
1 2 3 4 5 6 7 8 9 |
// index.js module.exports = () => { const data = { users: [] } // Erzeuge 1000 users for (let i = 0; i < 1000; i++) { data.users.push({ id: i, name: `user${i}` }) } return data } |
Start dann mit
json-server –watch index.js
Abfrage dann aller User
http://localhost:3000/users
oder den mit der Nummer 998
lynx http://localhost:3000/users/998
Es können auch statische Webseiten ausgeliefert werden.
Weitere Infos, siehe auf der typicode JSON-Server Seite.