详解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数据了

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

赞 (0)

相关推荐

  • 简单的vue-resourse获取json并应用到模板示例

    不说废话上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue js</title> <style> .completed { text-decoration: line-through; } .something { color: red; } </style> <

  • vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

    最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程. 至于vue-resource的安装和json的准备我就不赘述了... 下面是操作方法: 1.首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json. 我的json数据文件大概如此: { "seller": { "name": "粥品香坊(回龙观

  • 详解vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在package.json里. { "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Man

  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这

  • 详解vue 模拟后台数据（加载本地json文件）调试

    本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

  • Vue2.0 vue-source jsonp 跨域请求

    Vue2.0 vue-source jsonp 跨域请求

    本文介绍了Vue2.0 vue-source jsonp 跨域请求,分享给大家,希望对大家有所帮助 以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App.vue' Vue.use(VueResouse) new Vue({ el: '#app', render: h => h(App) }); App.vue <script> ex

  • 详解vue渲染从后台获取的json数据

    公司项目原来用的框架扩展性太差,准备更新前台页面然后用vue渲染dom 然后我写了一个demo $(document).ready(function(){ $.ajax({ type:"post", url:"", async:true, data:{ }, dataType:"json", success:function(data){ var a=new Vue({ el:"#detail-info-id", data:

  • 详解通过JSON数据使用VUE.JS

    最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了.结合当前火热的VUE.JS进行数据渲染. 尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的.如果使用到数据库的话,不妨做一个API出来,那么网站.APP等都可以依照这个进行操作.在这篇文章里面,我们只是打算简单的引用而已. 下面先来看看我的JSON文件,这里是一个类别文档Category.json: { "msg": "ok", "data":[ { "

  • vue-resourse将json数据输出实例

    vue-resourse将json数据输出实例

    本文主要讲v-resourse 获取json数据并传递到DOM中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.demo目录,不要管index.html和index.js 2.html页面 vue-resourse-josn1.1.html展示json中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

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

    详解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如

  • Vue-cli项目获取本地json文件数据的实例

    在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件中,并且通过异步请求获取到,然后加载数据. axios.get('http://localhost:8080/datas/json') 然而在这一过程中,我的访问总是404.通过查阅,我发现,在vue-cli基础上构建的项目中,只有static目录才是vue-cli向外暴露的静态数据文件夹,我放在static下的图片可以正常访问到,我是在static同级目录新建了datas目录,将json文件放入datas目录

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

  • 详解vue中$router和$route的区别

    详解vue中$router和$route的区别

    我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器. this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(

  • 详解Vue中$props、$attrs和$listeners的使用方法

    目录 背景 一.文档描述 二.具体使用 三.总结 背景 现在我们来讨论一种情况,父组件与孙子组件怎么通信,我们有多少种解决方案? 我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力. 使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件, 这是一种解决方案,但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;如果C中状态的改变需要传递给A, 使用

  • 详解Vue中$refs和$nextTick的使用方法

    详解Vue中$refs和$nextTick的使用方法

    目录 1.$refs简介 $refs获取DOM元素 $refs获取组件对象 2.$nextTick基本使用 vue异步更新DOM 利用$nextTick解决以上问题 $nextTick使用场景 1.$refs简介 $refs是vue提供的获取真实dom的方法. $refs获取DOM元素 [使用步骤]: 在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素 [代码演示]: <template> <div> <h1>获取原生的DOM元素</h1

  • 详解vue中v-for和v-if一起使用的替代方法template

    详解vue中v-for和v-if一起使用的替代方法template

    目录 版本 目标效果 说明 解决方法 核心代码片段 Car.vue vue中v-for和v-if一起使用的替代方法template 版本 vue 2.9.6element-ui: 2.15.6 目标效果 说明 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用 解决方法 选择性地渲染列表,例如根据某个特定属性(category )来决定不同展示渲染,使用计算属性computed 见https://www.jb51.net/article/24717

随机推荐