vue에서 로컬 json 파일을 얻기 위해 express 및 fetch 사용에 대한 팁 공유

이 글은 주로 Vue에서 로컬 json 파일을 얻기 위해 express+fetch를 사용하는 방법에 대한 자세한 설명을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

작은 vue 데모를 만들 때 서버에서 json 데이터를 가져오는 과정을 시뮬레이션하고 싶었습니다. 초기 아이디어는 json-loader를 설치하든 퍼팅하든 fetch를 사용하여 로컬 json 파일을 직접 가져오는 것이었습니다. index.html 디렉터리 또는 webpck.config.js의 출력 디렉터리에 json 파일이 있지만 fetch에서는 파일을 찾을 수 없다고 계속 보고합니다. 그런 다음 가져오기를 사용하여 Express 서버에 요청을 보내기로 결정하면 서버는 json 데이터를 반환합니다.

express server

먼저 예제로 사용할 수 있는 인터페이스가 하나만 있는 간단한 Express 서버를 작성하세요. back.js는 다음과 같습니다.

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

그런 다음 node back.js 명령을 사용하여 서비스를 실행합니다.

json 데이터를 가져오기 위한 가져오기

요청을 수락하는 서버가 이미 실행 중입니다. 다음 단계는 가져오기를 사용하여 요청을 보내는 것입니다.

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

이제 원하는 JSON 데이터 가져오기

관련 권장 사항;

jQuery가 로컬 json 파일을 읽는 방법

ajax를 사용하여 로컬 json 파일을 읽는 jQuery 사례

json 파일 정의 및 사용법 요약

위 내용은 vue에서 로컬 json 파일을 얻기 위해 express 및 fetch 사용에 대한 팁 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!