Tutorials  /  JavaScript

JSON Server Leitfaden

Ccentron Redaktion · März 2024 ·4 Min. Lesezeit ·JavaScript, Tutorial

Heute schauen wir uns ein sehr praktisches Tool an, den json-server, der Ihnen innerhalb einer Minute einen Mock Rest JSON Server bereitstellen kann. In einer regulären Unternehmensanwendung arbeiten Sie mit vielen Teams und Drittanbieter-APIs. Stellen Sie sich vor, Sie müssen einen Drittanbieter-Restful-Webdienst aufrufen, der Ihnen JSON-Daten zur Weiterarbeit liefert. Sie haben einen engen Zeitplan, also können Sie nicht darauf warten, dass sie ihre Arbeit beenden, um dann mit Ihrer eigenen zu beginnen. Wenn Sie einen Mockup Rest Webdienst zur Verfügung haben möchten, um die Demodaten für Sie zu erhalten, dann ist json-server das Tool, das Sie suchen.

JSON Server ist ein Node-Modul, das Sie verwenden können, um innerhalb von weniger als einer Minute einen Demo-Rest-JSON-Webservice zu erstellen. Alles, was Sie brauchen, ist eine JSON-Datei für Beispieldaten.

JSON Server installieren

Sie sollten NPM auf Ihrem Rechner installiert haben. Wenn nicht, schauen Sie sich diesen Beitrag an, um NPM zu installieren. Unten sehen Sie den Einzeiler-Befehl, um json-server mit Ausgabe auf meinem Rechner zu installieren.

Console
$ npm install -g json-server
npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
/usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/bin/index.js
- bytes@2.3.0 node_modules/json-server/node_modules/raw-body/node_modules/bytes
/usr/local/lib
└─┬ json-server@0.8.10
  ├─┬ body-parser@1.15.1
  │ └── bytes@2.3.0
  ├─┬ compression@1.6.1
  │ └── bytes@2.2.0
  ├─┬ lowdb@0.10.3
  │ └─┬ steno@0.4.4
  │   └── graceful-fs@4.1.4
  ├─┬ update-notifier@0.5.0
  │ └─┬ configstore@1.4.0
  │   ├── graceful-fs@4.1.4
  │   └─┬ write-file-atomic@1.1.4
  │     └── graceful-fs@4.1.4
  └─┬ yargs@4.7.0
    ├─┬ pkg-conf@1.1.2
    │ └─┬ load-json-file@1.1.0
    │   └── graceful-fs@4.1.4
    └─┬ read-pkg-up@1.0.1
      └─┬ read-pkg@1.1.0
        └─┬ path-type@1.1.0
          └── graceful-fs@4.1.4

$
VM

Passende Infrastruktur bei centron

Node-Anwendungen wollen deployt werden: ccloud³ VMs mit vollem Root-Zugriff ab 3,12 € im Monat – oder gleich als Managed Server, wenn der Betrieb nicht bei Ihnen liegen soll. Cloud Server mieten →

Überprüfung der json-server Version und Optionen

Console
$ json-server -v
0.8.10

$ json-server -help
/usr/local/bin/json-server [options] 

Options:
  --config, -c       Path to config file           [default: "json-server.json"]
  --port, -p         Set port                                    [default: 3000]
  --host, -H         Set host                               [default: "0.0.0.0"]
  --watch, -w        Watch file(s)                                     [boolean]
  --routes, -r       Path to routes file
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                           [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing             [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding                     [boolean]
  --snapshots, -S    Set snapshots directory                      [default: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)         [default: "id"]
  --quiet, -q        Suppress log messages from output                 [boolean]
 
$

JSON Server starten

Jetzt ist es Zeit, unseren json-server zu starten. Unten ist eine Beispieldatei mit meinen Mitarbeiter-JSON-Daten.

JSON
{
  "employees": [
    {
      "id": 1,
      "name": "Pankaj",
      "salary": "10000"
    },
    {
      "name": "David",
      "salary": "5000",
      "id": 2
    }
  ]
}

Ein wichtiger Punkt hier ist der Name des Arrays, d.h. Mitarbeiter. JSON wird die REST-APIs basierend darauf erstellen. Lassen Sie uns unseren json-server mit der obigen Datei starten.

Console
$ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  https://localhost:3000/employees

  Home
  https://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Schließen Sie dieses Terminal nicht, sonst wird der json-server beendet. Unten sind die Beispiele für CRUD-Anfragen und -Antworten.

GET - Alle Mitarbeiter lesen

Console
$ curl -X GET -H "Content-Type: application/json"  "https://localhost:3000/employees"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "David",
    "salary": "5000",
    "id": 2
  }
]
$

Mitarbeiter basierend auf ID vom json-server abrufen

Console
$ curl -X GET -H "Content-Type: application/json"  "https://localhost:3000/employees/1"
{
  "id": 1,
  "name": "Pankaj",
  "salary": "10000"
}
$

POST - Einen Mitarbeiter erstellen

Console
$ curl -X POST -H "Content-Type: application/json" -d '{"name": "Lisa","salary": "2000"}' "https://localhost:3000/employees"
{
  "name": "Lisa",
  "salary": 2000,
  "id": 3
}
$

PUT - Mitarbeiterdaten aktualisieren

Console
$ curl -XPUT -H "Content-Type: application/json" -d '{"name": "Lisa", "salary": "8000"}' "https://localhost:3000/employees/3"
{
  "name": "Lisa",
  "salary": 8000,
  "id": 3
}
$

DELETE - Einen Mitarbeiter löschen

Console
$ curl -X DELETE -H "Content-Type: application/json"  "https://localhost:3000/employees/2"
{}
$ curl -GET -H "Content-Type: application/json"  "https://localhost:3000/employees"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "Lisa",
    "salary": 8000,
    "id": 3
  }
]
$

Wie Sie sehen können, erstellt json-server mit einem einfachen JSON Demo-APIs für uns zur Nutzung. Beachten Sie, dass alle PUT, POST, DELETE-Anfragen in der Datei db.json gespeichert werden. Jetzt sind die URIs für GET und DELETE gleich, ähnlich ist es für POST- und PUT-Anfragen. Nun, wir können auch unsere benutzerdefinierten URIs mit einer einfachen Zuordnungsdatei erstellen.

json-server benutzerdefinierte Routen

Erstellen Sie eine Datei mit benutzerdefinierten Routen für unseren json-server zur Nutzung. routes.json

JSON
{
  "/employees/list": "/employees",
  "/employees/get/:id": "/employees/:id",
  "/employees/create": "/employees",
  "/employees/update/:id": "/employees/:id",
  "/employees/delete/:id": "/employees/:id"
}

Wir können auch den Port des json-servers ändern und simulieren wie eine Drittanbieter-API, ändern Sie einfach die Basis-URL, wenn der echte Dienst bereit ist, und Sie können loslegen. Starten Sie nun den JSON-Server erneut, wie unten gezeigt.

Console
$ json-server --port 7000 --routes routes.json --watch db.json
(node:60899) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

  \{^_^}/ hi!

  Loading db.json
  Loading routes.json
  Done

  Resources
  https://localhost:7000/employees

  Other routes
  /employees/list -> /employees
  /employees/get/:id -> /employees/:id
  /employees/create -> /employees
  /employees/update/:id -> /employees/:id
  /employees/delete/:id -> /employees/:id

  Home
  https://localhost:7000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Es zeigt die von uns definierten benutzerdefinierten Routen.

Beispiel mit benutzerdefinierten Routen

Unten ist das Beispiel einiger der Befehle und ihrer Ausgabe mit benutzerdefinierten Routen.

Console
$ curl -X GET -H "Content-Type: application/json"  "https://localhost:7000/employees/list"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "Lisa",
    "salary": 8000,
    "id": 3
  }
]

$ curl -X GET -H "Content-Type: application/json"  "https://localhost:7000/employees/get/1"
{
  "id": 1,
  "name": "Pankaj",
  "salary": "10000"
}

$ curl -X POST -H "Content-Type: application/json" -d '{"name": "Lisa","salary": "2000"}' "https://localhost:7000/employees/create"
{
  "name": "Lisa",
  "salary": 2000,
  "id": 4
}

$ curl -XPUT -H "Content-Type: application/json" -d '{"name": "Lisa", "salary": "8000"}' "https://localhost:7000/emloyees/update/4"
{
  "name": "Lisa",
  "salary": 8000,
  "id": 4
}

$ curl -XDELETE -H "Content-Type: application/json"  "https://localhost:7000/employees/delete/4"
{}

$ curl -GET -H "Content-Type: application/json"  "https://localhost:7000/employees/list"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "Lisa",
    "salary": 8000,
    "id": 3
  }
]
$

JSON bietet einige andere nützliche Optionen wie Sortierung, Suche und Pagination. Das ist alles für json-server, es ist mein bevorzugtes Tool, wann immer ich Demo Rest JSON APIs erstellen muss.

Jetzt 200 € Guthaben sichern

Testen Sie Ihr Setup auf ccloud³

Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.

centron Redaktion Technische Redaktion

Das Redaktionsteam von centron schreibt Anleitungen aus dem Betriebsalltag: getestet auf unserer eigenen Plattform, betrieben im Rechenzentrum in Hallstadt bei Bamberg.

Kategorie JavaScript
Teilen
Noch offene Fragen?

Our team will help you with your specific setup - in German or English, by people who run the platform themselves.

War dieses Tutorial hilfreich?

Your answer is stored anonymously and helps us improve our tutorials.

Kommentare

No comments yet - be the first to ask a question about this tutorial.

Sign in to comment

Comments are open to centron customers. Sign in to your account to ask a question about this tutorial.

Weiterlesen

Das könnte Sie auch interessieren

Jetzt kostenlos anfangen

Melden Sie sich an und erhalten Sie in den ersten 60 Tagen ein Guthaben von 200 € bei centron.

Dieses Werbeangebot gilt nur für neue Konten. Angebot ausschließlich für Gewerbetreibende.

Jetzt loslegen Sales kontaktieren