前端数据模拟是如何做的

52lidan
  • 2.8k

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

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

有好的解决方案么?

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

回复
阅读 20.3k
7 个回答

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请根据自己情况替换

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

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

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

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

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

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

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".

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

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

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

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

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

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

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

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

宣传栏