【前端开发】 5分钟创建 Mock Server
http://blog.csdn.net/wxqee/article/details/50165581
NOTIFY
官网文档现在已经很简约、很强大了,建议直接点击这里: Getting Started。
今天,我们打算花几分钟时间创建一个自己用来测试的 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
- 1
 
用 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
- 1
 
创建 MockServer Client
那么,接下来创建一个客户端文件 client1.js 用来注册自己需要如何 MockUp 一个 API 接口。
首先安装依赖:
npm install mockserver-client
- 1
 
然后创建文件 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']}
    ]
  }
}
- 1
 - 2
 - 3
 - 4
 - 5
 - 6
 - 7
 - 8
 
搞定!
【前端开发】 5分钟创建 Mock Server的更多相关文章
- 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
		
概述 最近,有客户向我们请求开发一个前端下拉控件,需求是显示了一个列表,其中包含可由用户单独选择的项目控件,该控件将在下拉列表中显示多选TreeView(树形图). 如今WijmoJS已经实现了该控件 ...
 - Fiddler-009-AutoResponder 简单的 MOCK SERVER 应用实例
		
在我们日常的测试中经常需要测试特定的响应对应的客户端展示样式是否正确无误,实现测试方法一般有如下三种: 创建新的测试数据(工作量较大) 修改已有测试数据(例如修改对应的状态码,若是最终需要测试的按钮状 ...
 - 25个Web前端开发工程师必看的国外大牛和酷站
		
逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜………… Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...
 - 旨在脱离后端环境的前端开发套件 - IDT Server篇
		
IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...
 - 旨在脱离后端环境的前端开发套件 - IDT之Server篇
		
IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...
 - 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
		
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
 - 前后端分离之让前端开发脱离接口束缚(mock)
		
情景: 领导:小吴啊,最近在忙什么啊? 前吴:(心想:我擦勒,难道划水被领导发现了?也不能怪我啊,后台的哥们接口还没给呢,但要是实话实说不就对不起后台哥们了吗?) ...
 - 1分钟搭建极简mock server
		
1.无聊的背景.起源: 如今的业务系统越来越复杂庞大,各个功能直接的调用也是多如牛毛,但如果在联调的时候,恰好被调的接口正在开发,怎么办?傻傻的等么,不存在的!这时会搭建一些server来进行mock ...
 - 使用RAP搭建前端Mock Server
		
转载自:<前后端分离--构建前端Mock Server--windows部署rap>http://www.cnblogs.com/dothin/p/5361883.html mock:模拟 ...
 
随机推荐
- Leetcode 4. Median of Two Sorted Arrays(二分)
			
4. Median of Two Sorted Arrays 题目链接:https://leetcode.com/problems/median-of-two-sorted-arrays/ Descr ...
 - GDI+ 双缓存 和 刷新桌面(F5)
			
GDI+双缓存 POINT currentPoint; GetCursorPos(¤tPoint); HWND hWnd = ::GetDesktopWindow(); int n ...
 - linux下有的目录有可执行权限
			
在linux里面,目录也是一个文件.权限设置方法与普通文件一样.目录的可执行权限:目录无所谓执行不执行,目录只能否被开启(也称作“遍历”或“搜索”)对目录的执行权限不仅意味着查看目录下文件名还允许查看 ...
 - [03]使用阿里RAP搭建前端Mock Server
			
MockServer可以减少前端开发对后端的依赖,提高前端开发的效率,同时也利于团队的协作. 什么是RAP? RAP是阿里团队出的一款WEB接口管理工具,帮助开发人员更高效的管理接口文档,同时通过分析 ...
 - ajax数据读取和绑定
			
如何进行ajax数据读取和绑定呢? 首先创建一个AJAX对象 实现数据绑定 实现隔行变色 编写表格排序的方法(实现按照年龄这一列进行排序) 通过文档碎片,把排序后的最新顺序,重新添加到tBody中(通 ...
 - [bzoj2245][SDOI2011]工作安排——费用流
			
题目大意: 传送门 题解: 很容易建模,把每一个工作人员拆成两个点,由第一个点向第二个点连S+1条边即可. 这水题没什么难度,主要是longlong卡的丧心病狂... 代码 #include < ...
 - Javascript报错Converting circular structure to JSON 错误排解
			
在运行nodejs程序的时候报出以下的错误: 2017-11-20 17:44 +08:00: TypeError: Converting circular structure to JSON at ...
 - 通过UUID方式在fstab中挂载分区
			
https://blog.csdn.net/lanmolei814/article/details/45692153
 - (6)C#方法,作用域,方法重载
			
1.方法 返回类型 方法名(参数列表) 例如:int a(int b,int c) { 方法体 return b+c; } 函数如果有返回类型则最后要用return一个和返回类型一样的数据. 2.无返 ...
 - EasyUI Datagrid 单元格编辑
			
3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...