ホームページ > 記事 > ウェブフロントエンド > 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のケース
以上がExpress と fetch を使用して Vue でローカル JSON ファイルを取得する際のヒントを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。