怎么在vue中使用express+fetch获取本地json文件-创新互联
今天就跟大家聊聊有关怎么在vue中使用express+fetch获取本地json文件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
成都创新互联企业建站,10年网站建设经验,专注于网站建设技术,精于网页设计,有多年建站和网站代运营经验,设计师为客户打造网络企业风格,提供周到的建站售前咨询和贴心的售后服务。对于网站制作、做网站中不同领域进行深入了解和探索,创新互联在网站建设中充分了解客户行业的需求,以灵动的思维在网页中充分展现,通过对客户行业精准市场调研,为客户提供的解决方案。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文件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联成都网站设计公司行业资讯频道,感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:怎么在vue中使用express+fetch获取本地json文件-创新互联
标题URL:http://pwwzsj.com/article/igjgg.html