我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写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. [SRM625 Div1 Hard] Seatfriends

    题目链接:Portal Vjudge Solution 一开始拿到这一题Sb了,把空放到dp中一起考虑了,这样计数就变得很麻烦. 其实我们可以把空位拿出来,假设它是存在的,最后再放回去. 那么就可以钦 ...

  2. Word排版技巧

    点击打开链接 # 整体布局 ## 页面布局 如果是新建一个Word文件,这里「页面布局」一般不用设置了: 文字方向:从左到右: 页边距:普通(日常使用建议用适中或窄,节约用纸,提交的论文报告什么才用普 ...

  3. 题解报告:poj 2299 Ultra-QuickSort(BIT求逆序数)

    Description In this problem, you have to analyze a particular sorting algorithm. The algorithm proce ...

  4. shell脚本中定义路径变量出现的BUG

    =========================================================================== if 语句中的定义路径变量 引发命令的PATH路 ...

  5. Android学习备忘笺02Fragment

    Android中Fragment可以将UI界面分成多个区块,一般静态或动态添加Fragment. 01.新建Fragment实例 一个Fragment实例包括两个部分:类对象和布局文件(可视化部分). ...

  6. 掌握Spark机器学习库-09.3-kmeans算法实现分类

     数据集 iris.data 数据集概览 代码 package org.apache.spark.examples.hust.hml.examplesforml import org.apache.s ...

  7. sql语句中截取字符串

    今天在开发过程中因为要用到合并单元格,在程序里实现了以后,查出来的数据太长,都把格式撑大了,后来想想可以在sql语句查询的时候就截取,就去网上找了一下,挺好用,就转了过来: 合并单元格: /// &l ...

  8. Linux 时间同步 ntpdate

    ntpdate 使用网络计时协议(NTP)设置日期和时间.此命令仅应用于 AIX 4.2 或后期版本. 语法: ntpdate [ -b] [ -d] [ -s] [ -u] [ -aKeyid] [ ...

  9. Laravel Passport认证-多表、多字段解决方案

    Laravel Passport认证-多表.多字段解决方案 2018年08月19日 09:31:01 醉卧码场君莫笑 阅读数:1632   1. 概述 API 通常使用令牌(token)进行认证并且在 ...

  10. 数组,寻找第K大的数

    时间复杂度 O(n) def partition(data,left,right): if (len(data)<=0 or left<0 or right>=len(data)): ...