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

この記事では、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 サイトの他の関連記事を参照してください。