前端使用moke数据开发

在开发中，前端的界面交互已经写好，但是后端的接口还没有写好，这个时候就需要前端自己写一些假数据进行模拟，但是如果有大量的界面数据的话，本地写假数据是非常庞大的工作量，而且后期的替换接口也比较麻烦，所以使用线上的moke数据就非常有必要了，调的是真实的api,只需要自己在线上写一些假数据，和后端约定好字段名，后期直接修改请求路径就好了。

• 这里推荐使用的是fastmock，非常便捷的一个线上moke数据网站，网址（https://www.fastmock.site）

• 使用也比较简单，注册一个账号，在界面里面新建项目。

  
  
• 项目刚进去是没有接口的，需要自己创建接口。可以设置请求的类型，和请求的url，在编辑器里面编辑json格式的数据，（支持moke.js语法，参考moke.js官网）。
  
  image.png

• 设置完成之后点击保存。就可以看到设置好的接口。

  
  
  image.png
• 根据接口的根地址进行请求。代码如下。

let xhr=new XMLHttpRequest();
   xhr.open("get","https://www.fastmock.site/mock/4ffaa183ddf5050756885ff033a2636b/xukeler/user",true);
   xhr.send();
   xhr.onreadystatechange=function(){
       if(xhr.status==200&&xhr.readyState==4){
           console.log(xhr.responseText)
       }
   }

• 返回的数据

  
  
  image.png