Der JSON-Server implementiert die Back-End-Datensimulation

Dieses Mal werde ich Ihnen einen JSON-Server zur Implementierung der Back-End-Datensimulation vorstellen. Was sind die Vorsichtsmaßnahmen für den JSON-Server zur Implementierung der Back-End-Datensimulation? ein Blick.

Während des Entwicklungsprozesses werden Front-End und Back-End getrennt oder nicht. Die Schnittstelle wird größtenteils später mit der Seite entwickelt, daher ist es unbedingt erforderlich, eine restliche APL-Schnittstelle einzurichten, um virtuelle Daten bereitzustellen Das Front-End, daher verwende ich hier JSON. Als Tool unterstützt der Server CORS- und

JSONP-domänenübergreifende Anforderungen, unterstützt GET-, POST-, PUT-, PATCH- und DELETE-Methoden und bietet außerdem eine Reihe von AbfrageMethoden, wie Limit, Bestellung usw., dann habe ich meine eigenen Nutzungsdetails in ein Dokument geschrieben

Installation

Zunächst muss eine Knotenumgebung vorhanden sein (JSON-Server wird verwendet. Es muss eine Knotenumgebung vorhanden sein) Dann JSON-Server global installieren

npm install json-server -g

Überprüfen Sie nach Abschluss der Installation, ob die globale Installation erfolgt erfolgreich

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>
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
 --middlewares, -m     Paths to middleware files          [array]
 --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"]
 --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                 [default: "Id"]
 --quiet, -q        Suppress log messages from output     [boolean]
 --help, -h         Show help                 [boolean]
 --version, -v       Show version number            [boolean]
Examples:
 index.js db.json
 index.js file.js
 index.js http://example.com/db.json
https://github.com/typicode/json-server

Erstellen Sie ein db.json-Verzeichnis im Projektstammverzeichnis und schreiben Sie dann Informationen

{
 "api": [
  {
   "text": "数据统计",
   "link": "#",
   "hot": true
  },
  {
   "text": "数据检测",
   "link": "#",
   "hot": true
  },
  {
   "text": "流量分析",
   "link": "#",
   "hot": true
  },
  {
   "text": "广告发布",
   "link": "#",
   "hot": false
  }
 ]
}

Fügen Sie eine Befehlszeile zu den Skripten in package.json hinzu

  "json": "json-server db.json --port 3003"

Führen Sie den Befehl im Projektverzeichnis aus

npm run json

In Bash wird es eine solche Schnittstelle sehen

> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003
 \{^_^}/ hi!
 Loading db.json
 Done
 Resources
 http://localhost:3003/api
 Home
 http://localhost:3003
 Type s + enter at any time to create a snapshot of the database

Herzlichen Glückwunsch zum erfolgreichen Start!

Geben Sie ein die Webseite für den Zugriff zu diesem Zeitpunkt

Sie können zu diesem Zeitpunkt darauf zugreifen

http://localhost:3003/api

Sie können die zuvor geschriebene JSON-Zeichenfolge sehen

Der JSON-Server ist jetzt gestartet

Der Aufrufcode sieht so aus

this.$http.get('http://localhost:3003/api')
   .then((data) => {
    console.log(data.body)
   }, () => {
    console.log('这里是用了vue-source,后端没有接口')
   })

Sie können sehen, dass die Daten nach der Seiteninitialisierung abgeschlossen sind

Ich glaube Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Schritte zum Zuschneiden von Bildern mit Vue-Cropper

Detaillierte Erklärung der Schritte für die Nutzung der Vue Mixin-Funktion

Das obige ist der detaillierte Inhalt vonDer JSON-Server implementiert die Back-End-Datensimulation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!