mock使用心得总结

首先说一下什么是mock.

一、mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。mock有如下功能

• 根据数据模板生成模板数据

• 模拟ajax请求，生成请求数据

• 基于html模板生成模拟数据

二、如何安装mock(内容摘录):

传送门：https://github.com/nuysoft/Mock/wiki/Getting-Started

Node (CommonJS)

# 安装
npm install mockjs

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

Bower

# 安装
npm install -g bower
bower install --save mockjs

<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>

RequireJS (AMD)

// 配置 Mock 路径
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    })
    // 输出结果
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})

// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

JSFiddle

Sea.js (CMD)

因为 Sea.js 社区尚未提供 webpack 插件，所以 Mock.js 暂不完整支持通过 Sea.js 加载。

一种变通的方式是，依然通过 Sea.js 配置和加载 Mock.js，然后访问全局变量 Mock。

// 配置 Mock 路径
seajs.config({
    alias: {
        mock: 'http://mockjs.com/dist/mock.js'
    }
})

// 加载 Mock
seajs.use('mock', function(__PLACEHOLDER) {
    // 使用 Mock（全局变量）
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})

JSFiddle

Random CLI

# 全局安装
$ npm install mockjs -g

# 执行
$ random url
# => http://rmcpx.org/funzwc

# 帮助
random -h

三、mock写接口，以下示例图

一些模拟正则表达式：

@mock=function() {return this.retCode==="SUCCESS" ? "操作成功":"操作失败";}  === retMsg 

@mock=$order('SUCCESS','FAIL') === retCode

@mock=@integer(100000000,999999999)  ===编码格式

@mock=@float(0,1000,0,4)    === 浮点数据，金额

@mock=@pick([-1,0,1,2])  === 状态

@mock=@date("yyyy-MM-dd")   === 日期

@mock=@ctitle(2,24)  ===名称