詳解vue中使用express+fetch獲取本地json文件
更新時(shí)間：2017年10月10日 17:20:32 作者：ThereThere_0d70
本篇文章主要介紹了詳解vue中使用express+fetch獲取本地json文件，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
自己在做個(gè)vue小demo的時(shí)候，想模擬從服務(wù)器獲取json數(shù)據(jù)的過程，一開始的想法是使用fetch直接獲取本地的json文件，無論是install了json-loader還是把json文件放在index.html的目錄下或webpck.config.js里output的目錄下，但是fetch一直報(bào)找不到文件。然后決定用fetch向express服務(wù)器發(fā)送請(qǐng)求，由服務(wù)器返回json數(shù)據(jù)。
express服務(wù)器
先寫一個(gè)簡(jiǎn)單的express服務(wù)器，只有一個(gè)接口，起到示例作用就行了。back.js如下:
var express = require('express')
var app = express();
var allowCrossDomain = function(req, res, next) {//設(shè)置response頭部的中間件
res.header('Access-Control-Allow-Origin', 'http://localhost:8089');//8089是vue項(xiàng)目的端口，這里相對(duì)于白名單
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就可以運(yùn)行這個(gè)服務(wù)了。
fetch獲取json數(shù)據(jù)
用語接受請(qǐng)求的服務(wù)器已經(jīng)運(yùn)行起來了，接下來就是使用fetch來發(fā)送請(qǐng)求了，如下代碼段就可以完成請(qǐng)求功能：
fetch( "http://localhost:3000/api/data")
.then(res=>res.json())
.then(data=>console.log(data))
.catch(function (e) {
console.log('oops! error:',e.message)
})
此時(shí)就可以順利獲取想要的json數(shù)據(jù)了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js是構(gòu)建Web界面的漸進(jìn)式JavaScript框架,通過簡(jiǎn)潔的 API 提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),這篇文章主要給大家介紹了關(guān)于Vue.js中讓人容易忽略的API的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解
在我們編寫css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))的相關(guān)資料,需要的朋友可以參考下2022-09-09
全局API并不在構(gòu)造器里,而是先聲明全局變量或者直接在Vue上定義一些新功能,Vue內(nèi)置了一些全局API,下面這篇文章主要給大家介紹了關(guān)于vue2源碼解析之全局API的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue-router傳參的四種方式超詳細(xì),有router-link路由導(dǎo)航方式傳參，調(diào)用$router.push實(shí)現(xiàn)路由傳參，通過路由屬性name匹配路由，再根據(jù)params傳遞參數(shù)等等，結(jié)合示例代碼講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
關(guān)于el-scrollbar滾動(dòng)條初始化不顯示的問題及解決
這篇文章主要介紹了關(guān)于el-scrollbar滾動(dòng)條初始化不顯示的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了基于vue實(shí)現(xiàn)分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
使用kbone解決Vue項(xiàng)目同時(shí)支持小程序問題
這篇文章主要介紹了使用kbone解決Vue項(xiàng)目同時(shí)支持小程序問題，本文通過一個(gè)todo的例子跟大家詳細(xì)介紹,需要的朋友可以參考下2019-11-11
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue制作Todo List網(wǎng)頁的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04