Teilen Sie Tipps zur Verwendung von Express und Fetch zum Abrufen lokaler JSON-Dateien in Vue

In diesem Artikel wird hauptsächlich die Verwendung von Express+Fetch zum Abrufen lokaler JSON-Dateien in Vue vorgestellt. Ich hoffe, dass er allen helfen kann.

Als ich eine kleine Vue-Demo erstellte, wollte ich den Prozess des Abrufens von JSON-Daten vom Server simulieren. Die ursprüngliche Idee bestand darin, Fetch zu verwenden, um die lokale JSON-Datei direkt abzurufen json-loader installiert Oder legen Sie die JSON-Datei im Verzeichnis von index.html oder im Ausgabeverzeichnis von webpck.config.js ab, aber fetch meldet weiterhin, dass die Datei nicht gefunden werden kann. Entscheiden Sie sich dann dafür, mit fetch eine Anfrage an den Express-Server zu senden, und der Server gibt JSON-Daten zurück.

Express-Server

Schreiben Sie zunächst einen einfachen Express-Server mit nur einer Schnittstelle, der als Beispiel dient. back.js lautet wie folgt:

var express = require('express')
var app = express();
var allowCrossDomain = function(req, res, next) {//设置response头部的中间件
res.header('Access-Control-Allow-Origin', 'http://localhost:8089');//8089是vue项目的端口，这里相对于白名单
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials','true');
next();
};
app.use(allowCrossDomain);
app.get("/api/data",function (request,response) {
var data = require('./grid.json');//要获取的json文件
response.send(data);
})
app.listen('3000',function () {
console.log('>listening on 3000')
});

Verwenden Sie dann den Befehlsknoten back.js, um diesen Dienst auszuführen.

Abrufen, um JSON-Daten abzurufen

Der Server, der die Anfrage akzeptiert, ist bereits aktiv. Der nächste Schritt besteht darin, den folgenden Codeausschnitt zu verwenden Vervollständigen Sie die Anforderungsfunktion. :

fetch( "http://localhost:3000/api/data")
.then(res=>res.json())
.then(data=>console.log(data))
.catch(function (e) {
console.log('oops! error:',e.message)
})

Jetzt können Sie die gewünschten JSON-Daten erfolgreich abrufen

Verwandt Empfehlungen;

Wie jQuery lokale JSON-Dateien lesen kann

JQuery verwendet Ajax, um lokale JSON-Dateien zu lesen

JSON-Dateidefinition und Verwendungszusammenfassung

Das obige ist der detaillierte Inhalt vonTeilen Sie Tipps zur Verwendung von Express und Fetch zum Abrufen lokaler JSON-Dateien in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!