前端数据模拟是如何做的

Question

前端与后端通常要做ajax的数据交互，在双方互调之前，前端是如何做模拟测试的？

彼此先定好交互方式和接口，然后前端就不用等待后端提供测试接口了，自己测试，修正问题。

有好的解决方案么？

我只知道有个jQuery的插件，mockjax，但是这样做，有种测试代码乱入的感觉。

Answer 1

npm install http-server

1. 从npm安装http-server。
2. 命令行里http-server即可快速地以当前目录启动一个临时的http服务。
3. 然后从localhost:端口号打开要调试的页面就可以了。
4. 需要什么模拟数据就在相应URL对应目录下创建一个文件把模拟数据放进去就可以

例子：

• 假设工作目录在/workspace/project
• cd /workspace/project
• http-server 启动服务
• /workspace/project/mockdata/foobar 这个文件里放着模拟数据
• /workspace/project/html/index.html 这个为要调试的页面
• 在调试页面里请求/mockdata/foobar即可获取模拟数据
• 注意：调试的页面要从localhost:端口号/html/index.html打开

以上各种路径URL请根据自己情况替换

Answer 2

先明确需求和重点，在分工开发的时候，如果你仅仅是让程序跑通，而不是要做分支覆盖测试/性能测试/正确性和可用性测试神马的话。

那么请根据自己的需求和时间排期来，比如你可以：

• 使用特殊参数(变量)让程序走特殊分支以及使用写死的数据量调试；
• 调用本地的数据源；
• 如果你们公司这类需求多，应该会有统一的mock数据API，调用现成服务。

如果是要进行可用和正确性的相关测试，那么你需要的多半是mocha一类的测试框架了，使用他们的时候，你一样可以使用上面提到的方法，只是你的重点放在了接口正确性以及程序容错能力上。

最后补充一点，如果你要模拟接口，多半会出现回调的情况（如果没有，全部是同步的，那恭喜你了，这个年头业务模型简单的活不多了，且做且珍惜）：

遇到回调，需要填写回调头，如果你恰好机器上可以跑php，可以把这个脚本放上去，一步完成需求；
当然，如果你使用express，自己起一个接口更为简单，:D

• 本地使用的简单PHP接口模拟程序

Answer 3

moco就是为解决你的问题而生的。以下是官方的Quickstart：

• Download Standalone Moco Runner

• Write your own configuration file to describe your Moco server configuration as follow:

  [
  {
  "response" :
  {
  "text" : "Hello, Moco"
  }
  }
  ]

• Run Moco server
  java -jar moco-runner--standalone.jar start -p 12306 -c foo.json

• Now, open your favorite browser to visit http://localhost:12306 and you will see "Hello, Moco".

Answer 4

定好json交换的格式，可以选择自己定义一个json对象当作后台传入的数据。当然，如果你觉得仿真度不高，可以用一些前台的模板。

Answer 5

1. 约定数据结构
2. 约定数据字段名称
3. 模拟数据传输场景

1 跟 2 前端与后端开发商量，我觉得一般还是前端来定好一些，当然看项目主导是谁了。
3 的话用 fiddle 等一般的工具可以模拟，这是另一个话题，就不细说了。

Answer 6

直接用Sinon, 然後stub一個method.

舉個例子, 其他的自己看docs.

sinon.stub($, 'ajax')
@model.fetch()
expect($.ajax.getCall(0).args[0].url).to.contain("/api/2/book/")
$.ajax.restore()

Answer 7

自己封装一个proxy本地代理层，检测如果是本地环境(比如可以检测location.host是否为localhost)的话就去请求本地模拟好的json或者js数据文件，如果不是，则向服务器请求数据，需要自己封装请求模块

我们公司现在就是这样做的，非常方便的，只要数据交换格式确定以后，前后端可以并行开发，前端不依赖后端的接口以及数据