用线上的平台去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>
