一、前言

好吧,切入正题


二、工具介绍

1、Anproxy:http://anyproxy.io/cn/
AnyProxy 是一个基于 Node.js 的代理服务器。代理服务器是个中间人,站在了客户端和服务端中间,双方通信的每个比特,都会滴水不漏地经过它。它控制了完整的请求头、请求体、响应头、响应体,可以在客 户端与服务端都无感知的情况下介入处理所有的流程。只要代理服务器可以实现灵活配置,前端工程师们的奇葩需求就有出头之日了。

特点:

尤其是第 3 点,由于可以控制代理,所以就可以控制请求和响应的数据,其实就 Anproxy 本身就可以 mock 了,但存在一个问题,每次修改 Mock 数据之后都必须重启 Anproxy,一旦重启 Anyproxy,连接的客户端就会断开一次网络,这样对于即时通讯需要保持频繁心跳的产品来说是一个比较致命的打击,所以既不能重启 Anproxy,又想随时改变 Mock 数据,那怎么做了,这里就可以用 Moco 了


2、Moco:http://blog.csdn.net/sanjay_f/article/details/50204883

Moco 启动很简单


而且 Mock 数据被修改的话会自动刷新


但是 Moco 有个问题,Moco 启动的是一个服务器,意思是如果要 Mock 的话,所有的请求都得在 Moco 启动的服务器中处理,但是如果想保留原有的未 mock 的接口的正常使用的话那就做不到了,可能说的不太清楚,举个例子:

3、搭建过程

首先还是像上图一样启动 Moco 先了,然后测试一下是否返回的数据是准确的

然后就可以编写 Anproxy 的控制代理的规则了,像流程图中的一样逻辑,如果客户端请求的是被 Mock 接口,就会去本地的 MOCO 中取 Mock 的响应数据返回给客户端,如果不是,那就直接回到原服务器就好了,这里是用了 Anyproxy 的rule_use_local_data.js来控制让客户端在使用被 mock 接口时 Anyproxy 指向 mock 服务器,自己也可以把 js 脚本名称改一下,便于知道是干嘛用的,如我改成了rule_mock.js,个人爱好,不改也可以

具体的实现代码:

rule_mock.js
module.exports = {

    summary:function(){
        return "replace response data by local response now";
    },

    //mark if use local response
    shouldUseLocalResponse : function(req,reqBody){
        if(/checkVersionAndLogin/.test(req.url)){   //被mock接口判断选择
            req.replaceLocalFile = 0;
            return true;
        }

        if(/reply/.test(req.url)){
            req.replaceLocalFile = 1;
            return true;
        }

            return false;
    },

    dealLocalResponse : function(req,reqBody,callback){
        if(req.replaceLocalFile==0){
            request = require('request-json');
            var client = request.createClient('http://127.0.0.1');
              client.get('/checkVersionAndLogin', function(err, res, body)  //触发mock,到moco中获取mock响应数据
                {
                    console.log('the resp is ------------------------->',res.statusCode,res.headers,body);
                    var newDataStr=JSON.stringify(body);
                    callback(res.statusCode,res.headers,newDataStr); //mock数据返回给客户端
                }
            );
        }
    }
};

然后就可以启动 Anyproxy,默认是 8001 端口,-i 表示支持 https,具体使用看上面的链接吧


然后如果在浏览器中使用的话去设置代理就好了,如果是移动设置使用的话,连接在对应启动服务器的笔记本电脑中 wifi,在 wifi 中设置对应的代理即可,和 fiddler 设置代理的操作是一样的

其实就这样,Mock 服务器就搭建完成了

四、Mock 过程

模拟输入正常的用户和密码后登录后返回自定义字段使登录异常
这个只是个例子,可能 mock 这个没有什么意义,但还是先试一试,使用的 mock 数据为


在测试的客户端输入正确的用户名和密码后点击登录按钮后,登录失败,查看返回的数据


其实大概的过程就是这样,当判断到客户端使用的接口为设定的接口的话,Anyproxy 就会触发代理控制,作为一个选择 mock 接口的中间工具,去请求 moco 中的数据返回给客户端,这样就能起到对特定接口进行 mock 而不影响其他未 mock 接口的正常使用的效果

5、其他

其实应该有人会觉得没必要用 moco 来做 mock 数据,用个 excel 之类的保存数据然后每次读取就好了,其实我的想法是如果读出来的数据又要自己把它们组装成请求,然后再转发回客户端,显然有点麻烦,还不如直接用 moco 返回个 response 对象给客户端去处理了,这个反而会更方便,好吧,就写到这里了,看看各路大神有什么建议可以让我改进一下的,毕竟这种 mock 还是比较简陋的,继续欢迎大家吐槽


↙↙↙阅读原文可查看相关链接,并与作者交流