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


Posted in Javascript onOctober 10, 2017

自己在做个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中使用express+fetch获取本地json文件

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

Javascript 相关文章推荐
JavaScript关于select的相关操作说明
Jan 13 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 #Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 #Javascript
ionic选择多张图片上传的示例代码
Oct 10 #Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 #Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 #Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 #Javascript
JS判断数组那点事
Oct 10 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
JS之小练习代码
2008/10/12 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
js分页工具实例
2015/01/28 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
python编写弹球游戏的实现代码
2018/03/12 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
机械专业个人求职自荐信格式
2013/09/21 职场文书
上课迟到检讨书
2014/01/19 职场文书
大学校园活动策划书
2014/02/04 职场文书
法制宣传日活动总结
2014/04/29 职场文书
2014年班组长工作总结
2014/11/20 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
五四青年节活动总结
2015/02/10 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python