詳解vue中使用express+fetch獲取本地json文件
更新時間：2017年10月10日 17:20:32 作者：ThereThere_0d70
本篇文章主要介紹了詳解vue中使用express+fetch獲取本地json文件，非常具有實用價值，需要的朋友可以參考下
自己在做個vue小demo的時候，想模擬從服務器獲取json數(shù)據(jù)的過程，一開始的想法是使用fetch直接獲取本地的json文件，無論是install了json-loader還是把json文件放在index.html的目錄下或webpck.config.js里output的目錄下，但是fetch一直報找不到文件。然后決定用fetch向express服務器發(fā)送請求，由服務器返回json數(shù)據(jù)。
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數(shù)據(jù)
用語接受請求的服務器已經(jīng)運行起來了，接下來就是使用fetch來發(fā)送請求了，如下代碼段就可以完成請求功能：
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數(shù)據(jù)了
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue2.0 http請求以及l(fā)oading展示實例
下面小編就為大家分享一篇Vue2.0 http請求以及l(fā)oading展示實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇vue-cli 3.x 修改dist路徑的方法，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了Vue3怎么使用element-plus，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在Vue.js開發(fā)中,我們經(jīng)常需要創(chuàng)建可復用的組件,這些組件可能會有自己的樣式規(guī)則,而有時我們希望父組件能夠影響子組件的樣式,本文將詳細介紹如何使用v-deep以及一些相關的最佳實踐,需要的朋友可以參考下2024-10-10
vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼
這篇文章主要介紹了vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了在vue中使用jsonp進行跨域請求接口操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue中的Mind-Map通常是指使用Vue.js這個前端框架構建的思維導圖組件或庫,它可以幫助開發(fā)者在Web應用中創(chuàng)建動態(tài)、交互式的思維導圖,讓用戶可以直觀地組織信息和結構化數(shù)據(jù),本文介紹了Vue使用mind-map實現(xiàn)在線思維導圖,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue3選項式api如何監(jiān)控數(shù)組變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue鼠標懸停事件，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04