用easymock来mock数据

2017-09-19 本文已影响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数据

猜你喜欢

热点阅读