Mock.js简介

在前后端分离开发过程中，需要等到后端给出接口和接口文档后，才能继续开发，使用MockJS可以让前端独立于后端开发。
MockJS生成随机数据，拦截 Ajax 请求, 就可以非常方便的模拟后端接口。

1. 安装

基于Nodejs安装

    npm install -g mockjs
    OR
    yarn global add mockjs

直接引用

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

2. 使用 Mock 生成模拟数据

    var Mock = require('mockjs')

    var data = Mock.mock({
        // list 的值是一个数组，其中含有 1到2 个元素
        'list|1-2': [{
            // id 是一个自增数，起始值为 1，每次增 1
            'id|+1': 1
        }]
    })

    // 输出结果
    console.log(JSON.stringify(data))

    // 结果
    {
        "list": [
            {
                "id": 1
            },
            {
                "id": 2
            }
        ]
    }

3. 模拟成接口

    Mock.mock('/get/list1', 'get', data)

4. 调用模拟接口

使用axios.js来调用接口

    <!-- 引入 -->
    <script src="axios.min.js" type="text/javascript"></script>

    axios.get('/api/list1')
    .then(function(response) {
        console.log(response.data)
    })
    .catch(function(err) {
        console.log(err)
    }

5. Mockjs优点

• 前后端分离：让前端攻城师独立于后端进行开发。
• 增加单元测试的真实性：通过随机数据，模拟各种场景。
• 开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 用法简单：符合直觉的接口。
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。