这篇技术博客是在知乎上看到的 知乎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. test3

    下面写几个示例:这是行内公式: \( e^{\pi i} + 1 = 0\) ,下面的是行间公式: \[ e^{\pi i} + 1 = 0. \] 另一个复杂的公式: $$J_\alpha (x) ...

  2. 模板函数 使用的默认void 模板报错

    You must specify the compiler argument -std=c++0x to avoid the following error: test.cpp:5:13: error ...

  3. 国内最给力五大免费VPN商家

    国内有很多提供免费VPN的商家,水平也是参差不齐,有的用心服务,为客户提供优质免费VPN线路,进而赢得客户的信任.有的则对免费线路敷衍了事,只对付费线路“尽职尽责”,从而流失大量潜在VIP客户. 笔者 ...

  4. SQL 分页

    sql = "SELECT TOP 10000 * " + " FROM(SELECT ROW_NUMBER() OVER(ORDER BY DataArticleID) ...

  5. Tomcat单向Https验证搭建,亲自实现与主流浏览器、Android/iOS移动客户端安全通信

    众所周知,iOS9已经开始在联网方面默认强制使用Https替换原来的Http请求了,虽然Http和Https各有各的优势,但是总得来说,到了现在这个安全的信息时代,开发者已经离不开Https了. 网上 ...

  6. 在Linux上配置xampp后远程访问域名报错

    在Linux上配置xampp后远程访问域名报错: New XAMPP security concept: Access to the requested object is only availabl ...

  7. git使用简单教程

    废话不多说,直接开始 1. 进入https://github.com/ 创建你的账号,然后开始创建一个你的仓库(基本概念请自行百度),比如jun. 2. 创建好仓库之后,下载git 3,设置git,就 ...

  8. ubuntu与win10互换硬盘

    实例:将sdb上的ubuntu转移至sda,将sda上的win转移至sdb1. 备份资料2. 制作老毛桃PE盘3. 格式化sda4. dd if=/dev/sdb of=/dev/sda ,将sdb克 ...

  9. C#方法中三个重要的参数:out、ref、params

    备注:适用于初学者,自学于传智播客. 1.out参数. 概念:如果在一个方法中,返回多个相同类型值的时候,可以考虑返回一数组.但是返回多个不同类型值的时候,返回数组显然不能解决问题,这时就引入out参 ...

  10. Ubuntu 14.04 更新源

    deb http://mirrors.163.com/ubuntu/ trusty main restricted universe multiversedeb http://mirrors.163. ...