首頁 > web前端 > js教程 > 主體

vue中使用express和fetch取得本地json檔案技巧分享

小云云
發布: 2018-01-25 11:43:15
原創
2407 人瀏覽過

本文主要介紹了詳解vue中使用express+fetch取得本地json文件,非常具有實用價值,需要的朋友可以參考下,希望能幫助到大家。

自己在做個vue小demo的時候,想模擬從伺服器取得json資料的過程,一開始的想法是使用fetch直接取得本地的json文件,無論是install了json-loader還是把json檔案放在index.html的目錄下或webpck.config.js裡output的目錄下,但是fetch一直報找不到檔案。然後決定用fetch向express伺服器發送請求,由伺服器傳回json資料。

express伺服器

先寫一個簡單的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就可以執行這個服務了。

fetch取得json資料

用語接受請求的伺服器已經運作起來了,接下來就是使用fetch來傳送請求了,如下程式碼段就可以完成請求功能:


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檔案

#jQuery使用ajax讀取本機json檔案的案例

json檔案定義與用法匯總#

以上是vue中使用express和fetch取得本地json檔案技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!