前面文章已经搭建了本地的easy-mock

本地搭建Easy-Mock实现模拟数据

常见的Mock方式：

1. 将模拟数据直接写在代码里
2. 利用javascript拦截请求
3. 利用Charles、Fiddler等工具拦截请求

以上方式各有千秋，我们要说的是使用Swager API Docs和easy-mock生成模拟数据

登录easy-mock创建项目

点击+号创建项目

填写项目信息

• 归属 ：默认已经生成好了
• 项目名：与你的实际项目名一致，就可以了
• 项目基础URL：没有特殊要求，尽量简短表意，和你的项目保持一致就可了
• 项目描述：输入简短的项目描述
• Swagger Docs API：重要，输入Swagger描述文件URL，Easy Mock会自动基于此描述文档创建Mock接口

描述文件的URI可以从接口文档中找到，如图所示：

接口文档如图所示:

创建项目完成，自动生成了所有的Mock接口

预览接口

可以看到，自动生成并返回的Response数据，这个时候就可以完全脱离后端了，前端可以在后端还没有开发或开发不完善的情况下，使用该Mock数据也能完成前后端分离的调试

如下图所示：

前端只需发出如下图请求即可：

什么？不相信，我们试试！！

var baseUrl ="http://localhost:7300/mock/5eaaed4a7a3fdf16dc164663/mall" ;
    var params = {
     url: baseUrl  +'/subject/list',//基础url拼接接口url
     
     success: function (res) {//success为请求成功之后，会返回接口内容，打印res就能拿到
       console.log(res);
    
     },
     error: function (error) {
       console.log(error);
     }
    };
//以下是ajax请求过程
  var xhr = new XMLHttpRequest();
  // 定义xhr对象的请求响应事件
  xhr.onreadystatechange = function() {
    switch(xhr.readyState) {
      case 0 :
        //alert("请求未初始化");
        break;
      case 1 :
        //alert("请求启动，尚未发送");
        break;
      case 2 :
        //alert("请求发送，尚未得到响应");
        break;
      case 3 :
        //alert("请求开始响应，收到部分数据");
        break;
      case 4 :
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
          var data = xhr.responseText;
          params.success(JSON.parse(data));
        }else {
          var data = xhr.responseText;
          params.error(JSON.parse(data));
        }
        break;
    }
 
  };
  xhr.open("get", params.url, true);
  xhr.send(JSON.stringify(params.data))

以下内容正是接口中编写的返回的内容：

编辑数据

以上的Mock数据有些可能是不符合我们要求的，需要修改，点击编辑数据

左侧是对数据对象的说明，在这里改成我们想要的数据即可，需要了解Moke.js语法

简单的举个栗子：

categoryId使用了正则表达式定义在了0-9范围内

查看返回的数据：这时的categoryId只能在0-9之间了，因为有正则表达式的约束。

更多的Mock.js语法查看文档：https://github.com/nuysoft/Mock/wiki

一键模拟数据，让我们不再依赖后端，只专注前端的业务，等后端把接口写完之后，再进行联合调试就可以了，这样我们就不费吹灰之力搞定了所有难题。