美文网首页
用easymock来mock数据

用easymock来mock数据

作者: 流着万条永远的河 | 来源:发表于2017-09-19 18:33 被阅读0次

用线上的平台去mock数据:

  • easymock。
  • rapapi阿里的。功能更强大些,用起来更复杂。
    搜索easymock,进入页面。
    还是写那个网易云音乐作为演示。

    注册或登录账号,然后创建项目。

    点确定就可以了。

    music的域名可能用掉了,加个/hunger的后缀。点进去看下。

    现在可以建立接口啦,如图 +号表示创建接口,点它。
    写好内容后,确定,如图
    这时候输入数据,如何输入?看图片操作那有编辑的按钮,点进去,编辑:
    点刷新。然后再在操作那里点复制链接的按钮。打开链接,如图
    为什么会是这种展示呢?浏览器对这个特殊处理造成的,用终端打开,输入curl 那串复制的链接。如图
    curl相当于就是去发请求了。

这时候,我们在本地也可以做个测试:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script>
  var xhr = new XMLHttpRequest()
  xhr.open('GET','http://easy-mock.com/mock/59c0da5fe0dc663341aff877/hunger/getType',true)            //URL注意,变了,但是本意是对的指向目标数据
  xhr.send()
 
  xhr.onload = function(){
    console.log(xhr.status)
    if((xhr.status >=200 && xhr.status<300 )||xhr.status===304){
      var date = xhr.responseText
      console.log(date)
    }else{
      console.log('error') 
    }
  }
 
</script>
</body>
</html>
然后启动终端,在静态服务器中打开这个页面,然后看:

数据就到了。
跟上次在ajax的事例差不多,只是把后端的端口变了,然后代码的端口指向的参数必须也要变,剩下的就是对于网上的端口平台的熟悉应用了。
这里有个缺陷就是mock数据是死的,我不能根据我的一些条件做一些模拟。
比如我想模拟用户的登录状态,如何模拟用户成功或者失败的情况,这就模拟不了了。

后续如何利用这些数据做DOM呢?

<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', '端口URL', true)
xhr.send()
xhr.onload = function(){
  render(JSON.parse(xhr.responseText))          //把拿到的JSON格式的字符串转化成对象类型的数据就可以用JS编辑啦。
  console.log(JSON.parse(xhr.responseText))
}

function render(Data){
  
  for(var i = 0; i <Data.length; i++){
    var node = document.createElement('div')
    node.classList.add('item')      //提前在css中把.item的style设置好,直接加class。
    node.innerText = Data[i]
    document.querySelector('.目标父元素的类').appendChild(node)
  }
}
</script>

相关文章

  • 用easymock来mock数据

    用线上的平台去mock数据: easymock。 rapapi阿里的。功能更强大些,用起来更复杂。搜索easymo...

  • JAVA-Mock测试框架简记-2017-2-7 18:38:3

    JAVA-常用Mock测试框架 EasyMock 早期比较流行的MocK测试框架 mockito EasyMock...

  • Windows安装easymock

    easymock是测试神器,这里按照我平时用的流程介绍一下。 Windows 环境下的 easy-mock 模拟数...

  • EasyMock使用

    EasyMock优势1. 省去配置、安装mockJs步骤,解决多人协作Mock数据不互通问题2. 不需要在项目中写...

  • mock模拟数据

    mock模拟数据 最近看了一个项目发现了里面mock用的非常不错,所以用此文章来记录一下 1、书写模拟数据 2、引...

  • PowerMock简介

      Java单元测试框架主要有JUnit和TestNG,常用的Mock框架主要有EasyMock、Mockito和...

  • 一篇文章让你了解基于Spring的测试

    针对Spring某个类及方法的单元测试,结合单元测试框架(比如JUnit)和Mock的框架(比如EasyMock)...

  • Mockito简介和代码示例

    Mockito简介和示例 Mockito也是一个开源的mock工具包,和EasyMock不同的时,它不需要录制、播...

  • 用mock来制造假数据入门

    什么是mock,为什么要用mock前后端分离的时候,有时候后端还没写完,前端页面写完了,我们也不能在那边等不是。为...

  • 从零开始的在Centos上搭建easy-mock服务

    声明 由于文章比较久远了,当时安装的easy-mock版本大概是V1.2.3的,可能跟现在easymock版本相差...

网友评论

      本文标题:用easymock来mock数据

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