详解vue中使用express+fetch获取本地json文件

 更新时间:2017年10月10日 17:20:32   作者:ThereThere_0d70   我要评论
本篇文章主要介绍了详解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数据了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • VUE写一个简单的表格实例

    VUE写一个简单的表格实例

    在本篇文章里小编给大家整理的是关于VUE中表格的写法实例以及相关知识点内容,需要的朋友们可以参考下。
    2019-08-08
  • 使用Vue-cli3.0创建的项目 如何发布npm包

    使用Vue-cli3.0创建的项目 如何发布npm包

    这篇文章主要介绍了使用Vue-cli3.0创建的项目,如何发布npm包,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue源码入口文件分析(推荐)

    vue源码入口文件分析(推荐)

    这篇文章主要介绍了vue源码入口文件分析(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    本篇文章主要介绍了详解vue-router2.0动态路由获取参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vuejs实现ready函数加载完之后执行某个函数的方法

    vuejs实现ready函数加载完之后执行某个函数的方法

    这篇文章主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,需要的朋友可以参考下
    2018-08-08
  • Vue.js组件高级特性实例详解

    Vue.js组件高级特性实例详解

    这篇文章主要介绍了Vue.js组件高级特性,结合实例形式详细分析了vue.js组件递归、模板、动态加载、渲染等相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • Vue.js更改调试地址端口号的实例

    Vue.js更改调试地址端口号的实例

    今天小编就为大家分享一篇Vue.js更改调试地址端口号的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue + element-ui实现简洁的导入导出功能

    vue + element-ui实现简洁的导入导出功能

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI,下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料,需要的朋友可以参考下。
    2017-12-12
  • vue实现随机验证码功能的实例代码

    vue实现随机验证码功能的实例代码

    这篇文章主要介绍了vue实现随机验证码功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 实现elementUI表单的全局验证的方法步骤

    实现elementUI表单的全局验证的方法步骤

    这篇文章主要介绍了实现elementUI表单的全局验证的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论