So erstellen Sie Back-End-Daten mit JSON-Server

Dieses Mal zeige ich Ihnen, wie der JSON-Server Back-End-Daten generiert und welche Vorsichtsmaßnahmen für die Generierung von Back-End-Daten durch den JSON-Server gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 domänenübergreifende CORS- und JSONP-Anforderungen, unterstützt die Methoden GET, POST, PUT, PATCH und DELETE und bietet außerdem eine Reihe von Abfragemethoden wie Limit, Bestellung usw. Als nächstes habe ich meine eigene Verwendung als Dokumentation geschrieben

Installation

Zuerst müssen Sie eine Knotenumgebung haben (Sie müssen eine Knotenumgebung, wenn Sie JSON-Server verwenden) und dann JSON-Server global installieren

npm install json-server -g

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

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 in Öffnen Sie das Stammverzeichnis des Projekts und schreiben Sie dann die Informationen

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

in package.json. Fügen Sie den darin enthaltenen Skripten eine Befehlszeile

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

hinzu und führen Sie den Befehl im Projektverzeichnis aus

npm run json

Sie sehen diese Schnittstelle in Bash

> 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!

Betreten Sie jetzt die Webseite für den Zugriff

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,后端没有接口')
   })

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln zum Thema PHP-Chinesisch Webseite!

Empfohlene Lektüre:

So verwenden Sie den Angular-Datenbindungsmechanismus

So bedienen Sie das Plug-in zur Kalenderbereichsauswahl

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Back-End-Daten mit JSON-Server. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!