Mockjs 前端接口数据模拟

　　在前后端分离的项目中，通常需要启动一个后台服务器来配合前端项目的接口需求。mockjs的作用是拦截ajax请求并模拟各种数据返回，让前端开发可以更加*独立。

安装

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文件里，开发时引用该文件，打包时去掉对该文件的引用即可。