这篇技术博客是在知乎上看到的 知乎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. 分享一个js中的bind方法使用

    来源:http://www.cnblogs.com/yuzhongwusan/archive/2012/02/13/2348782.html Js代码 复制代码 代码如下: var first_obj ...

  2. &&和||的妙用

    在js逻辑运算中,0."".null.false.undefined.NaN都会判为false,其他都为true 几乎所有语言中||和&&都遵循“短路”原理,如&a ...

  3. jquery的hide()和show()

    jquery用hide()和show()函数来控制html元素的显示和隐藏. hide()和show()都可以带参数的,hide(1000)表示隐藏所需的时间为1秒.此外还可以用slow,fast参数 ...

  4. (C语言)数组与指针的区别

    以前常常听过这种说法,说数组和指针这两者比较像,但是不能混淆,可是一直没能理解.刚刚在李云的<专业嵌入式软件开发>中,看了讲述数组与指针区别的一章,似乎有所领悟.本着知乎上看到的这张图,我 ...

  5. JavaWeb 学习008-今日问题(非空验证尚未解决) 2016-12-2

    1. 学生模块list页面 不能正常跳转 说是找不到stuid属性,但是我在entity里面和数据库建表的属性就是stuid:Grade模块代码一样,却可以正常运行 这是什么问题? <c:for ...

  6. C#时间操作

    C#时间戳与日期互转 /// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name="timeSta ...

  7. GUI的搭建,windowbuilder的使用

    在进行GUI的搭建过程中,相信很多人对于一个图标的设置感觉写起来很麻烦,需要不断的添加,而在java中有一个windowbuilder窗口可以很好的帮助我们进行GUI的搭建 1.进入eclipse的页 ...

  8. svchost占用cpu

    发现有一个svchost始终占用cpu. 查看任务管理器PID列,在tasklist /svc中查找相关列,对应若干服务. 一个一个检查这些服务,确认是windows update服务引起,停止win ...

  9. css 字间距、CSS字体间距、css 字符间距设置

    1.text-indent设置抬头距离css缩进 2.letter-spacing来设置字与字间距_字符间距离,字体间距css样式

  10. NC JDK报tools.jar错误(61版本)

    添加jdk/lib目录下的tools.jar 然后设置环境变量