Partager des conseils sur l'utilisation d'Express et Fetch pour obtenir des fichiers JSON locaux dans Vue

Cet article présente principalement l'explication détaillée de l'utilisation d'express+fetch pour obtenir des fichiers json locaux dans Vue. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer.

Lorsque je faisais une petite démo de vue, je voulais simuler le processus d'obtention des données json du serveur. L'idée initiale était d'utiliser fetch pour obtenir directement le fichier json local, qu'il soit. json-loader installé Ou placez le fichier json dans le répertoire index.html ou dans le répertoire de sortie dans webpck.config.js, mais fetch continue de signaler que le fichier est introuvable. Décidez ensuite d'utiliser fetch pour envoyer une requête au serveur express, et le serveur renverra les données json.

serveur express

Écrivez d'abord un serveur express simple avec une seule interface pour servir d'exemple. back.js est le suivant :

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')
});

Utilisez ensuite le nœud de commande back.js pour exécuter le service.

extraire pour obtenir des données json

Le serveur qui accepte la requête est déjà en cours d'exécution. L'étape suivante consiste à utiliser fetch pour envoyer la requête. complétez la fonction de demande. :

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

Vous pouvez maintenant obtenir avec succès les données json que vous souhaitez

Connexe recommandations ;

Comment jQuery peut lire les fichiers json locaux

JQuery utilise ajax pour lire les fichiers json locaux

Définition du fichier JSON et résumé de son utilisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!