我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写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,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!

Vue如何mock数据模拟Ajax请求的更多相关文章

  1. Mock拦截ajax请求

    //mock拦截ajax请求 ,生成随机数据Mock.mock('./servlet/UserServlet?method=getUser',{ 'list|1-5':[{ 'username':'@ ...

  2. 微信小程序开发——使用mock数据模拟api请求

    前言: 微信小程序开发中,后端提供了接口设计文档,前端可以先mock数据模拟api请求进行开发调试,而且可以根据需要设计mock文件的格式和内容,这样在后端接口开发完成之前,前端可以最大限度的完成前端 ...

  3. vue使用axios进行ajax请求

    以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...

  4. Vue-admin工作整理(十七):Mock模拟Ajax请求

    思路:使用Mock拦截actions请求,通过 Mock.mock(/\/getUserInfo/, 'post', getUserInfo) 进行拦截标示,然后将内容返回 export const ...

  5. [Vue]使用axios实现ajax请求

    1.定义myAjax export const myAjax=function createHttpClient(ajaxConfig) {   let httpClient = null;   if ...

  6. vue使用resource发送ajax请求

    <script type="text/javascript"> new Vue({ el:'#app', created:function(){ var url=&qu ...

  7. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  8. Vue 中使用Ajax请求

    Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档   https://githu ...

  9. AJAX请求中出现OPTIONS请求

    背景 有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求 ...

随机推荐

  1. springMVC @Valid不起作用

    springmvc使用JSR-303进行表单验证不生效的问题 spring只是支持jsr-303验证,但却不提供jsr-303的实现,文档中提及了需要导入类如hibernate-validator等j ...

  2. QT5每日一学(二)编写QT多窗口程序

    一.添加主窗口 1.首先打开Qt Creator,新建Qt Widgets Application,项目名称设置为windows,在类信息界面保持基类为QMainWindow.类名为MainWindo ...

  3. urllib的高级用法

    Handler简介 我们可以把他理解为各种处理器,有专门处理登录验证的,有处理cookies的,有处理代理设置的.利用他们,我们几乎可以做到HTTP请求中的所有事情. 首先,介绍一下 urllib.r ...

  4. Statistics gathering and SQL Tuning Advisor

    1. https://www.pythian.com/blog/statistics-gathering-and-sql-tuning-advisor/ Our monitoring software ...

  5. [转]ASP.NET MVC 3 Application Upgrader

    本文转自:http://aspnet.codeplex.com/releases/view/59008 Recommended Download      ASP.NET MVC 3 Applicat ...

  6. T4870 水灾(sliker.cpp/c/pas) 1000MS 64MB

    题目描述 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY所在的城市可以用一个N*M(N,M<=50)的地图表 ...

  7. sh/bash/csh/Tcsh/ksh/pdksh等shell本质区别

    sh/bash/csh/Tcsh/ksh/pdksh等shell本质区别 1. Shell脚本的书写 在写Shell脚本时,往往第一行要注明用什么解释器来解释这个脚本. 如#!/bin/bash即用/ ...

  8. php中 mysql 插入特殊字符(手机端的emoji表情)出现异常

    今天在用mysql存储从微信服务器拉来的数据,出现插入数据异常,报 Incorrect string value: '\xF0\x9F\x98\x97\xF0\x9F 的错误. 最终在网上查了一下,有 ...

  9. opencv4android移植到系统app

    最近在尝试使用opencv4android实现投影仪的自动对焦功能,在AndroidStudio后需要将功能移到系统工程编译成系统app,仅以此文记录下移植过程中遇到的问题. 首先去opencv官网下 ...

  10. Dragger2解析(一)

    依赖注入(DI-Dependency Injection) 什么是依赖注入 这是一种设计思想,一个面向对象的编程法则. DI能够让开发者写出低耦合代码,更加优良的程序. 更容易测试,代码健壮性更强. ...