vue中使用express+fetch獲取本地json文件

caozhijian 發(fā)布于2019-08-21 16:58 / 3647人閱讀

摘要：自己在做個小的時候，想模擬從服務(wù)器獲取數(shù)據(jù)的過程，一開始的想法是使用直接獲取本地的文件，無論是了還是把文件放在的目錄下或里的目錄下，但是一直報找不到文件。

自己在做個vue小demo的時候，想模擬從服務(wù)器獲取json數(shù)據(jù)的過程，一開始的想法是使用fetch直接獲取本地的json文件，無論是install了json-loader還是把json文件放在index.html的目錄下或webpck.config.js里output的目錄下，但是fetch一直報找不到文件。然后決定用fetch向express服務(wù)器發(fā)送請求，由服務(wù)器返回json數(shù)據(jù)。

express服務(wù)器

先寫一個簡單的express服務(wù)器，只有一個接口，起到示例作用就行了。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)目的端口，這里相當(dāng)于白名單
  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)行這個服務(wù)了。

fetch獲取json數(shù)據(jù)

用語接受請求的服務(wù)器已經(jīng)運(yùn)行起來了，接下來就是使用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ù)了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88966.html

相關(guān)文章

談?wù)勄岸水惓２东@與上報

摘要：另外這樣的異常捕獲不能捕獲的異常錯誤信息，這點(diǎn)需要注意。最終大致的流程圖如下結(jié)語前端異常捕獲與上報是前端異常監(jiān)控的前提，了解并做好了異常數(shù)據(jù)的收集和分析才能實(shí)現(xiàn)一個完善的錯誤響應(yīng)和處理機(jī)制，最終達(dá)成數(shù)據(jù)可視化。關(guān)于微信公眾號：前端呼啦圈（Love-FED）我的博客：勞卜的博客知乎專欄：前端呼啦圈前言 Hello，大家好，又與大家見面了，這次給大家分享下前端異常監(jiān)控中需...

Kosmos 2019-08-22 15:44 評論0 收藏0
急速JavaScript全棧教程

摘要：使用訪問后端服務(wù)使用的美化組件的方法整合全棧服務(wù)其中的指的是。所幸是在這個教程內(nèi)，你不需要學(xué)習(xí)太多就可以把案例跑起來。另外一個組件負(fù)責(zé)顯示全部項(xiàng)目，并接受刪除事件，刪除指定的項(xiàng)目。它們分別是組件和組件這兩個組件的代碼實(shí)現(xiàn)，分別在文件和內(nèi)。自從一年前發(fā)布了Vuejs小書的電子書，也有些日子沒有碰過它們了，現(xiàn)在因?yàn)轫?xiàng)目的緣故，需要使用JavaScript全棧開發(fā)。所以，我得把這個全棧環(huán)境...

xingqiba 2019-06-26 17:46 評論0 收藏0
急速JavaScript全棧教程

摘要：使用訪問后端服務(wù)使用的美化組件的方法整合全棧服務(wù)其中的指的是。所幸是在這個教程內(nèi)，你不需要學(xué)習(xí)太多就可以把案例跑起來。另外一個組件負(fù)責(zé)顯示全部項(xiàng)目，并接受刪除事件，刪除指定的項(xiàng)目。它們分別是組件和組件這兩個組件的代碼實(shí)現(xiàn)，分別在文件和內(nèi)。自從一年前發(fā)布了Vuejs小書的電子書，也有些日子沒有碰過它們了，現(xiàn)在因?yàn)轫?xiàng)目的緣故，需要使用JavaScript全棧開發(fā)。所以，我得把這個全棧環(huán)境...

騫諱護(hù) 2019-08-26 12:18 評論0 收藏0
vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā)

摘要：開發(fā)既是一個練習(xí)如何在開發(fā)環(huán)境中寫代碼的過程，反過來，也是一個驗(yàn)證環(huán)境搭建的對不對好不好用的過程。前端調(diào)用后端接口示例為突出重點(diǎn)，排除干擾，方便理解。寫在前面這篇文章的主要目的是學(xué)會使用koa框架搭建web服務(wù)，從而提供一些后端接口，供前端調(diào)用。搭建這個環(huán)境的目的是：前端工程師在跟后臺工程師商定了接口但還未聯(lián)調(diào)之前，涉及到向后端請求數(shù)據(jù)的功能能夠走前端工程師自己搭建的http路徑...

xioqua 2019-08-22 13:56 評論0 收藏0
VueCli3.0中集成MockApi

摘要：缺點(diǎn)需要增加本地的代碼量，以及需要配置實(shí)現(xiàn)攔截優(yōu)點(diǎn)數(shù)據(jù)通過會更豐富。缺點(diǎn)修改內(nèi)容溝通成本高，跟后端扯皮利用去模擬優(yōu)點(diǎn)可控內(nèi)容以及實(shí)現(xiàn)動態(tài)。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場景哎喲，好煩啊，這個需求還么結(jié)束就來下一個需求，程序員不要排期的嗎？沒辦法啊，資本主義的XX嘴臉啊來吧，技術(shù)評審我倆把接口...

劉玉平 2019-08-26 13:59 評論0 收藏0