这篇技术博客是在知乎上看到的 知乎js大神张云龙写的 这里贴过来记录下,如果侵权 请告知将及时删除。

---------------------------

为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个web容器,这个本地环境就是 mock server。

要完整运行前端代码,通常并不需要完整的后端环境,我们只要在mock server中实现以下几点就行了:

  1. 能渲染模板
  2. 实现请求路由映射
  3. 数据接口代理到生产或者测试环境

能渲染模板很简单,在mock server中集成模板引擎就行了,然后提供模拟的页面数据用于完整渲染页面,不过有时候生产环境中的模板引擎可能有一些环境依赖的扩展,这个要单独实现。

请求路由映射,实现原理就是要让本地的mock server有一个router,能接收所有HTTP请求,然后在router中根据线上的路由约定,实现一套一样的规则,这个也不难,不赘述了。

最后数据接口代理。与前端相关的HTTP请求一共就3种响应情况:

  1. 渲染页面的请求;
  2. 静态资源的请求;
  3. 获取数据的请求。

由于实现了router,我们把渲染页面的请求在mock server中处理掉,直接输出本地模板的渲染结果;静态资源的请求直接返回文件内容;而把数据请求代理到测试或者生产环境,本地就不用mock了(当然,如果出现新的接口测试环境没有的,可以追加router,在mock server想响应假数据)

至于题主说的url一致性问题,其实不存在的。你的这个 http://www.foo.com/bar 的数据请求,在js中应该这样写:

$.get('/bar', callback)

这种写法,省略了host,在线下开发时,其最终结果是请求 http://127.0.0.1:3000/bar,而由于我们在mock server中实现了路由规则,这个请求实际上被代理到了测试/生产环境去获取数据。而当你把代码部署到线上时,其访问真实请求地址又自动变成了你期望的 http://www.foo.bar,正常运行。

补充一些Tips:

  • 由于Mock Server需要具备渲染模板的能力,因此可能需要一种轻量的服务端跨平台server实现方案,如果是java的后端,可以考虑使用jetty,一个1.8M的jar即可;如果是php的后端,可以考虑使用php 5.4以后内置的server,启动命令是 php -S 127.0.0.1:3000 router.php;如果是Nodejs,那就很简单了,估计都不需要Mock Server,本地也可以跑的
  • 当代理数据接口的生产/测试环境不具备新接口的时候,Mock Server要在本地制造假数据响应请求,可以使用 http://beta.json-generator.com/ 这类在线的JSON数据生成工具,非常方便。

很多前端工程师以为前端分离的唯一途径是接入NodeJS作为UI层,其实不是的,还有一种方案就是这种Mock Server,前端工程师直接写后端模板,效果有时候甚至更好,而且对已有前后端架构的改动成本最小。

====== 更新 ======

常用脚本语言下开启简易web server的方法,可以用于实现Mock Server:

    • ruby -run -e httpd . -p 9090

    • python -m SimpleHTTPServer 8000

    • php -S 127.0.0.1:8088 router.php

关于mock server的更多相关文章

  1. Fiddler-009-AutoResponder 简单的 MOCK SERVER 应用实例

    在我们日常的测试中经常需要测试特定的响应对应的客户端展示样式是否正确无误,实现测试方法一般有如下三种: 创建新的测试数据(工作量较大) 修改已有测试数据(例如修改对应的状态码,若是最终需要测试的按钮状 ...

  2. mock server相关解决方案

    前后端分离之后 前后端分离后, 大家从此进入了所谓的并行开发时代. 一旦完成前后端的(边界)分工, 大家就可以各司其职了. 前端在与后端交互时, 要想有效地提高工作效率, 后端的接口文档就是重中之重了 ...

  3. mock server 前后端分离小结(转)

    1.前台开发受限于后台开发的速度 2.后台提供给前台的接口缺字段,时常需要联调 基于Mock Server开发的好处: 对于前端来讲,可以独立于后端进行开发. 对于后端来讲,根据前端定义的接口进行开发 ...

  4. 基于moco的mock server 简单应用 来玩玩吧

    提起mock大家应该就知道是干嘛用的了,再次再介绍一种简单的方式,基于moco的mock server.步骤很简单: 1. 首先,要下载个moco的jar0_1482402640757_moco-ru ...

  5. Mock Server 入门

    Mock Server介绍 什么是mock ? 我在去年的时候介绍一篇幅 python mock的基本使用,http://www.cnblogs.com/fnng/p/5648247.html 主要是 ...

  6. Mock Server文章链接

    Mock Server文章链接 2017-06-14 1 Dreamhead (Zheng Ye) Moco可以提供以下服务: HTTP APIs Socket APIs REST API GitHu ...

  7. Postman Mock Server

    为了不影响前端开发的进度,一般后端都是先定数据结构,然后写个假接口让前端调用,这样前端就不必等着后端接口开发完成以后再开始了.届时,前后端以及UI和测试就可以并行,待双方都把各自的逻辑写好了,便可以联 ...

  8. Mock Server 实现post方法的接口(三)

    Mock Server 实现post方法的接口(三) 1.mock server实现的接口,当request中未设置"method"时,会自动将所有method试一次,所以一定要指 ...

  9. mock server 实现get方法的接口(二)

    mock server 实现get方法的接口(二) 下面是实现查询品牌的接口demo: 1.当response数据量小的时候,可以直接使用json, mock会自动设置headers为applicat ...

随机推荐

  1. C#批量插入数据到Sqlserver中的三种方式

    本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快的,因为你生 成 ...

  2. chattr无法删除某个文件

    chattr LNMP无法删除或更改权限,显示:rm: cannot remove `.user.ini': Operation not permitted 无法删除".user.ini&q ...

  3. Markdown 快速入门

    使用Markdown编辑器:MarkdownPad 2 标题: # 标题 ## 标题 ### 标题 #### 标题 ##### 标题 ###### 标题 效果: 标题 标题 标题 标题 标题 标题 下 ...

  4. Python实时获取贴吧邮箱名单并向其发送邮件

    本人Python大菜鸟,今天用python写了一个脚本.主要功能是获取贴吧指定贴子评论中留下的邮箱,通过系统的crontab每一分钟自动检测新邮箱并向其发送邮件,检测机制是去查询数据库的记录,也就是不 ...

  5. CC1310的RSSI值问题

    前几日,做CC1310的通信距离测试,发现我的CC1310的板子在433MHz,50kbps下通信距离非常近,RSSI值下探至-80左右就无法正常通信,与TI宣称的-120dbm接收灵敏度差距较大.使 ...

  6. NPOI操作excel

    1.基本导出方法 private void ExportToExcel() { SaveFileDialog sdfExport = new SaveFileDialog(); sdfExport.F ...

  7. Validate US Telephone Numbers

    function telephoneCheck(str) { // Good luck! //return true; var phone = /^1? ?(\d{3}|\(\d{3}\))[ -]? ...

  8. html5调取手机摄像头或相册

    html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...

  9. 消除a标签点击后产生的虚线框

    为a标签添加这条属性: a:focus {outline:none;-moz-outline:none;}

  10. geoserver使用curl发布 imagemosaic

    1.//create workspace     curl -v -u admin:geoserver -XPOST -H "Content-type: text/xml" -d ...