前端虚拟接口mock的用法

前端虚拟接口—mock的用法

首先是准备工作，你需要会VueJS，Vue-resource，vue-cli，然后就是安装下载mockjs

npm install mockjs

---

使用

　　Mock.mock()第一个参数是需要拦截的接口，第二个参数表明ajax请求类型（get/post/put/delete等），第三个参数是模拟返回值的数据模版。

　　接口可以通过字符串或者正则匹配：字符串需要和接口完全一样，正则只需要一部分匹配就行。请求类型参数如果省略，就表示任何类型的请求都可以拦截。数据模版可以生成各种随机数据，参见语法规范

import Mock from "mockjs";

/*** 设置随机的接口响应时间，10-2500毫秒 ***/
Mock.setup({
    timeout: '10-2500'
})

/*** 监听user接口，采用正则匹配 ***/
Mock.mock(/\/user/, {
    info: {
        name: Mock.Random.cname(),
        "age|12-38": 1,
        "sex|1": ["male", "female"]
    }
})
$.ajax({
    url: '/user/1111'
}).done(function(data, status, jqXHR) {
    console.log(JSON.stringify(data, null, 4))
})

/*** 监听list接口，采用字符串匹配 ***/
Mock.mock("/list","post", {
    'info|15-25': [{
        'index|+1': 1,
        'name': '@first @last',
        'id': '@integer( 10000, 99999 )',
        'date': '@datetime',
        'img': "@image('200x200')",
        'prod': "@sentence( 6, 22 )"

    }]
})
$.ajax({
    url: '/list',
    dataType: 'json',
    type:'post'
}).done(function(data, status, jqXHR) {
    console.log(JSON.stringify(data, null, 4))
})

将mockjs相关代码写在独立的js文件里，开发时引用该文件，打包时去掉对该文件的引用即可。

以我的项目为例：

打开我的项目目录

在项目目录下按住shift并点击鼠标右键，找到在此打开命令行工具，然后输入指令：npm i mockjs –save-dev，如果你有cnpm就用cnpm安装，没啥区别。

之后再src文件夹里，新建一个util作为工具文件夹（就是你平常复用用的一些东西），然后新建一个文件mock.js如下图：

敲入代码：

import Mock from 'mockjs';
export default Mock.mock('http://g.cn', {
    'name'    : '@name',
    'age|1-100': 100,
    'color'    : '@color'
});

Mock.mock 是 Mock的方法，第一个参数是你自定义的url（也就是接口），后面的对象是你自定义配置的数据，就这样每一个最简单的例子写好了，配置选项的数据该怎么写，请看：mock文档

接下来在vue文件中随便一个文件，引入util文件夹下的mock.js即可，如下：

import data from './util/mock';

然后就可以利用vue-resource来读取这个接口啦，如下：

Vue.http.get("http://g.cn").then(
      (successData) => {console.log(successData.body);},
      (fileData) => {console.log(fileData);}
);

然后打开控制台的console，就可以看到咱们自定义的数据啦，如下：

---