Mock.js -- 生成随机数据，拦截 Ajax 请求，让前端攻城师独立于后端进行开发

需求

在Web的开发中，我遇到了这样的问题：前端写好的Ajax请求，在没有服务器返回数据的情况下，感觉就一直在进行一个黑箱操作。即使照着定好的接口文档来编写代码，也会出现这样那样不经意的Bug. 于是我发现了Mock.js这个能够让前端“独立于”后端进行开发的一个工具。

---

特点

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

---

---

快速上手

大体上可以分为两步：
在js文件对应的html文件里，
1. 引入Mock.js的js文件
2. 设置要拦截的AJAX请求的URL，编写数据等

比如：

    <script src="http://mockjs.com/dist/mock.js">script>
    <script type="text/javascript">
        var data = {
            result: [
                {
                    id: 024,
                    address: "贝克街221号",
                    status: "on"
            },
                {
                    id: 026,
                    address: "贝克街211号",
                    status: "off"
            }
        ]
        };
        Mock.mock('/config/wifiprobeinfo.do', data);
    script>
    

这里，data是返回的数据，可以自己写好，也可以用Mockjs的语法随机生成数据。
Mock.mock(),第一个是要拦截的ajax请求的url,第二个参数则是返回的数据。

这个是js文件里的ajax请求：

可以看到，ajax请求成功被拦截。并返回了相对应的数据

如此一来，前端可以照着接口文档，而不太需要和后端一起做测试，大大提高了开发的效率。 感谢Mock.js的作者~~~