mock.js進行接口mock

1、安裝

// node 安裝
npm install mockjs

// 引入 mockjs 模塊
import Mock from 'mockjs' 

2、基礎用法

/**
 * @method Mock.mock(rurl, template) 
 * @param [String] curl 攔截的請求url
 * @param [Object] template 生成數據的模板
 */

Mock.mock('hello.php', {
    'list|1-5': [{
        name: '@name',
        email: '@email',
        createTime: '@date'
    }]
})

$.ajax({
    url: 'hello.php',
    dataType: 'json'
}).done(function(data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

3、模塊化引用

// 定義並導出 mock 模塊
import Mock from 'mockjs';

export default Mock.mock('hello.php', {
    'list|1-5': [{
        'id|+1': 1,
        'email': '@EMAIL',
        'regexp3': /\d{5,10}/
    }]
});

//  引入定義好的模塊
import data from './mock';

axios.get('hello.php')
  .then(function (response) {
    console.log(response);
  })

• Mock.mock(rurl, template) 方法表示攔截 ajax 請求 'hello.php'，通過模板生成模擬數據返回
• list|1-5 表示隨機生成屬性名為 list 的數據 1-5條， 管道符號 | 左側表示屬性名，右側表示生成規則
• @name 表示隨機生成 name 值， @ 表示占位符，引用的是 Mock.Random 中的方法

鏈接：https://www.jianshu.com/p/2eaa7506cb27