美文网首页
前端开发时自己做桩数据(假数据)

前端开发时自己做桩数据(假数据)

作者: NoteCode | 来源:发表于2016-08-15 20:57 被阅读2553次

Deprecated: 已使用第三方mock-server,此DIY的方式就不用了,算作是一次学习吧。

某些功能开发时(以及后续维护时)严重依赖api返回的数据。不但要求数据呈现某特定状态,特别是当前开发功能要修改数据时,费劲巴拉弄好的数据,点一下按钮,就耗光了。还得再来一次……大费周章。于是,需要一个“桩数据”。(此数据不是真正从api请求来,而是自己在“偷偷”在本地提供的)。有个强大的json-server,据考察只支持REST API,不适宜。故自己简单实现了一个机制,可以实现桩数据

用法

  1. 将你所请求api的某次“合意”的数据保存成js文件,形如:
// 将某次请求的结果以key-value的形式赋给window.stub
// http://api.domain.com/index.php?r=demand/index&demand_id=1
window.stub = { 
    "demand/index":  // 此key即为api中的r参数
    {
        succ: "1",
        name: "a",
        tel: "123"
        ...
    }
}
  1. 在src/iscripts/global/test/stub/stub.js中 @@include此js
    注:stub.js中只能有一个@@include,其他都注释掉。否则,后边的会覆盖掉前面的,给window.stub赋值
  2. gulp --stub=1
  3. 开始调试吧

原理:

将统一封装的jquery的ajax方法调用前,加了一个判断。如果所请求的接口有stub数据,则应用改数据(而不去服务端请求了)。
故,此方法仅能一定程度上模拟真实情况,重在模拟请求数据,但不能写数据

说明

  1. stub并不一定能对你初次开发时有多大用处,只对后续你再想使用此数据时用处比较大。尤其你开发的功能会“改变数据”时,此方法可以省去数据过快被消耗掉
  2. 如果开发的功能需要顺次请求多个接口(注意是不同接口哦),可以给stub赋多个key-value,参考例子:data/demand_index/pay.js
  3. 另,现在已经有几个数据,或可用到;慢慢积攒吧
  4. 此功能开发的比较“毛坯房”,有不方便的地方,可以再视情况增强一些。

相关文章

  • 前端开发时自己做桩数据(假数据)

    Deprecated: 已使用第三方mock-server,此DIY的方式就不用了,算作是一次学习吧。 某些功能开...

  • 生产环境和开发环境baseURL无缝切换

    前端和后端做交互时候,当后端数据没有做好情况,我们在开发环境中需要自己mock数据(mock假数据,模拟开发),这...

  • iOS Json转字典Dict

    开发中有时候需要用到假数据, 假数据的用途 做基础数据 在后台还没有给出接口数据时, 预先开发需要 这里是使用Js...

  • 图文实战-vue结合api接口开发移动端页面(1)

    在学前端的过程中,我们都会被没有后台数据困扰。虽然可以做前端的界面,但是没有实时更新的数据,只能自己敲点假数据,这...

  • 前端开发中优雅使用假数据

    前端开发的时候,由于很多时候前端做ui的时候,后台接口以及数据可能还没有准备好,这时候,需要展示一些假数据,这里为...

  • 面试必考题-数据库自增主键,自增主键用完

    无论是做PHP开发还是做JAVA开发甚至前端开发,只要是开发,面试的时候都必考数据库。为什么前端也要考数据库?因为...

  • mock

    mock使用优势:前后端同时开发的时候,后端接口数据没有出来,前端可以mock假数据,模拟开发 1,安装mock依...

  • 将springmvc配置成一个REST服务器的过程

    现在比较流行的一个开发方式时把逻辑尽可能多地写到前端,后端只负责做数据交互,当前端需要数据时,使用REST风格的U...

  • 开发团队拦截80%bug最直接的方法

    在开发过程中,都是需要开发团队自测的,例如前端流程开发,前端开发团队主要是做页面数据与后台数据的交互,然后就是页面...

  • Mock.js 学习笔记

    学习目的 ①开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据牵制与后端,前端页面无法很好的展示,...

网友评论

      本文标题:前端开发时自己做桩数据(假数据)

      本文链接:https://www.haomeiwen.com/subject/iwgusttx.html