【前端开发】 5分钟创建 Mock Server

今天，我们打算花几分钟时间创建一个自己用来测试的 MockUp 服务器。

因为我是前端开发，所以这里使用 Node.js 创建一个简单的迷你工程来完成！

目标

用 curl 访问 mockserver 可以获得自己想要的结果

>>> node client1.js
>>> curl http://localhost:1080/api/demo
{"name":"value"}

>>> curl -X POST 'http://localhost:1080/api/demo2?test=true' -d someBody
{"name":"value"}

我喜欢上代码

直接创建一个起步目录

npm init

用 Java 安装 mockserver（最简单）

http://www.mock-server.com/where/downloads.html

总结起来就是：

>>> wget http://search.maven.org/remotecontent?filepath=org/mock-server/mockserver-netty/3.10.1/mockserver-netty-3.10.1-jar-with-dependencies.jar -O mockserver-netty-3.10.1-jar-with-dependencies.jar

>>> java -jar mockserver-netty-3.10.1-jar-with-dependencies.jar -serverPort 1080 -proxyPort 1090

用 Node.js 安装 mockserver

安装必要的 Grunt 工具和部件

# 全局安装 Grunt 客户端
npm install -g grunt-cli

# NPM 工程安装 Grunt 以及 Grunt 插件
npm install grunt --save-dev
npm install mockserver-grunt --save-dev

# 创建 Gruntfile.js
参考官方文档进行配置

然后创建一个文件 Gruntfile.js 用来调度本地的 MockServer 服务

/*File: Gruntfile.js*/
module.exports = function(grunt) {

grunt.initConfig({
    start_mockserver: {
        start: {
            options: {
                serverPort: 1080,
                proxyPort: 1090
            }
        }
    },
    stop_mockserver: {
        stop: {
        }
    }
});

grunt.loadNpmTasks('mockserver-grunt');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['start_mockserver']);
  grunt.registerTask('stop', ['stop_mockserver']);
  grunt.registerTask('start', ['start_mockserver']);

};

现在，通过执行下边命令即可启动一个 Mock Server 了

grunt start

创建 MockServer Client

那么，接下来创建一个客户端文件 client1.js 用来注册自己需要如何 MockUp 一个 API 接口。

首先安装依赖：

npm install mockserver-client

然后创建文件 client1.js：

/*File: client1.js*/
var mockServer = require('mockserver-client'),
    mockServerClient = mockServer.mockServerClient, // MockServer client
    proxyClient = mockServer.proxyClient; // proxy client

var remote = mockServerClient('localhost', 1080),
    remoteProxy = proxyClient('localhost', 1090);

// 使用之前清除服务器里边已经注册的 mockup 信息，因为可能会影响当前测试结果或者开发结果呢。
remote.reset();

// 简单的设置想要的response信息
// curl -X POST http://localhost:1080/api/demo
remote.mockSimpleResponse('/api/demo', { name: 'value'}, 203);

// 精确的设置想要的response消息，会参考输入的情况来判断怎么跑
// curl -X POST 'http://localhost:1080/api/demo2?test=true' -d someBody
remote.mockAnyResponse({
  'httpRequest': {
    'method': 'POST',
    'path': '/api/demo2',
    'queryStringParameters': [
      {
        'name': 'test',
        'values': [ 'true' ]
      }
    ],
    'body': {
      'type': "STRING",
      'value': 'someBody'
    }
  }, /*httpRequest*/
  'httpResponse': {
    'statusCode': 200,
    'body': JSON.stringify({name: 'value'}),
    'delay': {
      'timeUnit': 'MILLISECONDS',
      'value': 250
    }
  }, /*httpResponse*/
  'times': {
    'remainingTimes': 1,
    'unlimited': false
  }
});

好了，搞定！

使用一下试试

$ npm install

$ node client1.js

# 再在此使用我们的目标命令即可，见文章最上边

想某些请求被现网服务器调用？

也许想同时使用现网服务器的登陆功能？

>>> curl -X POST http://localhost:1080/user/login -d account=demo_user -d password=demo_password
{"status":"LOGIN_SUCCESS","token":"abcdefgxxxxxxxx"}
# 期望这个请求被配置好的现网服务器处理

配置一个新的请求，放到 client1.js 中：

/*File: client1.js*/

// 创建 bypass 请求，符合要求的请求会透传给真的服务器处理。
// curl -X POST http://localhost:1080/user/login -d account=demo_user -d password=demo_password
remote.mockAnyResponse({
  httpRequest: {
    method: 'POST',
    path: '/user/login'
  },
  httpForward: {
    host: '192.168.1.101',
    port: 8080,
    schema: "HTTP"
  },
  times: {
    remainingTimes: 1,
    unlimited: false
  }
});

然后再重新注册一下 mock 消息试试：

>>> node client1.js
>>> # 执行curl命令

支持跨域

如果需要跨域的话，需要在 Reponse 消息中配置：

{ // Response 添加 headers 配置
  'httpResponse': {
    'headers': [
      {name: 'Access-Control-Allow-Origin', values: ['*']},
      {name: 'Access-Control-Allow-Methods', values: ['POST', 'GET', 'OPTIONS']}
    ]
  }
}

搞定！