ホームページ  >  記事  >  ウェブフロントエンド  >  Express と fetch を使用して Vue でローカル JSON ファイルを取得する際のヒントを共有する

Express と fetch を使用して Vue でローカル JSON ファイルを取得する際のヒントを共有する

小云云
小云云オリジナル
2018-01-25 11:43:152419ブラウズ

この記事では、Vue でローカルの json ファイルを取得するための Express+fetch の詳細な説明を主に紹介します。必要な方は参考にしていただければ幸いです。

私が小さな vue デモを作成していたとき、サーバーから json データを取得するプロセスをシミュレートしたいと思いました。最初のアイデアは、json-loader をインストールする場合でも、json-loader を配置する場合でも、fetch を使用してローカルの json ファイルを直接取得することでした。 index.html のディレクトリまたは webpck.config.js の出力ディレクトリにある json ファイルを検索しても、fetch ではファイルが見つからないという報告が繰り返されます。次に、フェッチを使用して Express サーバーにリクエストを送信することにすると、サーバーは json データを返します。

express サーバー

まず、例として使用できる、インターフェイスが 1 つだけある単純な 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')
});

次に、コマンド ノード back.js を使用してサービスを実行します。

fetch で json データを取得します

リクエストを受け入れるサーバーはすでに実行されています。次のステップでは、fetch を使用してリクエスト関数を完了します。スムーズに進むことができます 必要なjsonデータを取得します


関連する推奨事項;

jQueryがローカルjsonファイルを読み取る方法


ajaxを使用してローカルjsonファイルを読み取るjQueryのケース

jsonファイル定義と使い方のまとめ

以上がExpress と fetch を使用して Vue でローカル JSON ファイルを取得する際のヒントを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。