如何 mock 数据

作者: 初入前端的小菜鸟 | 来源:发表于2018-07-14 16:36 被阅读187次

mock 数据的好处

  1. 团队可以并行工作
    有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来密切;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试过程中如果遇到依赖接口没有准备好,同样可以借助Mock;不会出现一个团队等待另一个团队的情况。这样的话,开发自测阶段就可以及早开展,从而发现缺陷的时机也提前了,有利于整个产品质量以及进度的保证。

  2. 开启TDD模式,即测试驱动开发
    单元测试是TDD实现的基石,而TDD经常会碰到协同模块尚未开发完成的情况,但是有了mock,这些一切都不是问题。当接口定义好后,测试人员就可以创建一个Mock,把接口添加到自动化测试环境,提前创建测试。

  3. 可以模拟那些无法访问的资源
    比如说,你需要调用一个“墙”外的资源来方便自己调试,就可以自己Mock一个。

  4. 隔离系统
    假如我们需要调用一个post请求,为了获得某个响应,来看当前系统是否能正确处理返回的“响应”,但是这个post请求会造成数据库中数据的污染,那么就可以充分利用Mock,构造一个虚拟的post请求,我们给他指定返回就好了

  5. 可以用来演示
    假如我们需要创建一个演示程序,并且做了简单的UI,那么在完全没有开发后端服务的情况下,也可以进行演示。说到演示了,假如你已经做好了一个系统,并且需要给客户进行演示,但是里面有些真实数据并不想让用户看到,那么同样,你可以用Mock接口把这些敏感信息接口全部替换。

  6. 测试覆盖度
    假如有一个接口,有100个不同类型的返回,我们需要测试它在不同返回下,系统是否能够正常响应,但是有些返回在正常情况下基本不会发生,难道你要千方百计地给系统做各种手脚让他返回以便测试吗?比如,我们需要测试在当接口发生500错误的时候,app是否崩溃,别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock,这一切就都好办了,想要什么返回就模拟什么返回,妈妈再也不用担心我的测试覆盖度了

如何mock数据

1.安装Node.js ,通过http-server开启本地服务器
获取端口http://localhost:8000
然后通过在文件夹创建html和json文件来测试数据
示例:

//html文件
   <body>
   <script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET','/hello.json',true)
    xhr.send()
    xhr.addEventListener('load',function(){
        var date = xhr.responseText;
        console.log(date)
    })
    </script>
//json文件
{
    "name":"jirengu",
    "age":"2"
}

我们打开浏览器的控制台就能看到输出的数据


image

2.通过线上来mock数据

  1. 使用 https://easy-mock.com
  2. 使用 http://rapapi.org/org/index.do

以第一种为例,进入网站后建立个人项目
进入项目后通过创建接口


image

选择接口类型


image
image
内容
进行创建

进行查看


image

控制台结果


image

相关文章

  • 【图文详解】如何mock数据

    目录 如何在本地通过静态服务器mock数据 如何使用Easy Mock 如何使用githubpages mock数...

  • vue本地开发mock数据.md

    一、为什么要mock数据? 二、如何mock数据? 三、webpack本地代理配置 四、mockjs使用 五、ea...

  • mock数据

    Vue中的mock数据指的是什么? mock数据指的模拟数据,mock中文翻译愚弄,嘲笑。 实现mock数据如下:...

  • 如何 mock 数据

    mock 数据的好处 团队可以并行工作有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只...

  • 如何mock数据

    mock数据有搭建本地服务器mock和通过线上网站mock数据两种方法:1.搭建本地服务器安装node.js,使用...

  • 如何mock数据?

    方法一:通过本地服务器 1.通过在控制台输入http-server开启本地服务器获取端口号http://local...

  • 使用 Mockjs 模拟数据

    Mock 数据 Mock 在 vue 中的使用 使用npm下载mock 2.使用 mock 在 mock 文件夹下...

  • mock.js深入

    1.Mock.mock( template )根据数据模板生成模拟数据。(具体语法见mock.js入门) 2.Mo...

  • 利用node.js来mock数据

    1.什么是mock数据? 模拟后端数据 2.mock数据解决的问题 使用mock数据可以在后端开发人员尚未完成接口...

  • fiddler模拟mock -- 解决跨域访问(CORS)

    Fiddler模拟接口返回数据 前面其实大概写过如何模拟返回数据,参见:利用fiddler快速模拟mock[htt...

网友评论

    本文标题:如何 mock 数据

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