Vue如何mock数据模拟Ajax请求

我们在做一个项目时前期可能没有后端提供接口模拟数据，那么作为前端就需要自己写json文件模拟数据加载。网上往往参考的都是不全面的，比如get请求没问题但是post请求就报错了。在Vue中只需要vue-resource（也可以使用axios，安装方法和vue-resource一样，具体使用方法可以去axios官网查看，在这里我使用vue的插件vue-resource）和body-parser模块（查看具体使用方法）互相配合就可以实现get、post不同请求类型的数据模拟了。

1.安装vue-resource插件（Ajax请求）和body-parser模块（mock数据，对post请求的模块）：

npm install vue-resource --save --registry=https://registry.npm.taobao.org --verbose

npm install body-parser --save --registry=https://registry.npm.taobao.org --verbose

2.安装成功后在main.js引入依赖vue-resource，此时在Vue里就可以用$http进行Ajax请求了，查看具体使用方法。：

3.在build文件夹的dev-server.js文件进行服务配置，具体如下图所示：

注意：(1).由于我们Vue开启的本地服务是localhost:8080，所以mock数据监控的端口不能是8080，只要不冲突就可以，我这里用的是localhost:8081，所以图中第100行是port+1。

(2).图中第87行的data.json就是我们的假数据文件，一般放在和index.html同级目录下，若不同级则需要修改路径。

(3).如果没有用代理访问，第99行的第一个参数直接写接口名字就可以了，但一般我们会用代理访问，所以这里写的是‘/api’，代理设置在下一步骤说明。

4.同时我们需要做一个代理表，这里我用api，访问这个代理就可以获取到数据，在config文件夹的index.js文件进行代理配置，如下图红框所示：

data.json文件随意写了个，如下图所示：

此时npm run dev重新开启服务，输入服务地址就可以看到已经成功mock数据：

6.接着就是在项目中用Ajax请求数据了，我们在之前安装了vue-resource插件并且进行依赖注入，在项目中可以直接进行请求，如下图所示：

get请求：

在控制台输出的效果如下所示：

post请求：

在控制台输出的效果如下所示：

进一步console.log（res.data）输出效果如下所示：

至此我们已经实现了在Vue项目mock数据模拟后台请求，希望对大家有帮助。

如需转载请注明出处：http://www.cnblogs.com/zishang91/p/7680569.html，以便有错误可以及时修改，若有错漏不足之处，请见谅并且指点，谢谢！！！

转载于:https://www.cnblogs.com/zishang91/p/7680569.html

Vue如何mock数据模拟Ajax请求相关推荐

Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
vue如何强行停止ajax请求,VueJs和VueResource，从Ajax请求中删除头字段
当我实例化Vuejs (2.2.6)和Vue-resource (1.2.1)时,我使用以下代码设置标头授权,这样我可以授权我的API的所有请求: Vue.http.headers.common.AU ...
jquery发送ajax请求_复习之Vue用axios发送ajax请求
Axios是一个基于promise的HTTP库. 浏览器支持情况:Chrome.Firefox.Safari.Opera.Edge.IE8+. 官网:https://github.com/axios/ ...
Vue项目首页_使用axios发送ajax请求
安装axios: npm install axios --save 在Home.vue中发送一个ajax请求,然后把数据传递给子组件. 在Home.vue中: import axios from ' ...
六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue使用ajax库,Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用在线文档 https://githu ...
vue可以用ajax,Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用下载 npm install vue-r ...
session会话拦截ajax,session过期，拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
Ajax中option什么意思,AJAX请求中出现OPTIONS请求
背景有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求 ...

Vue如何mock数据模拟Ajax请求

Vue如何mock数据模拟Ajax请求相关推荐

最新文章

热门文章