在前端开发中，接口是不可或缺的一部分，因为它们连接了前端和后端，实现了数据的传递和交互。然而，在开发过程中，后端接口可能还未完全开发完成，或者前期需要进行接口联调等情况，这时候就需要使用数据Mock来模拟接口返回的数据，以便前端进行开发和测试。
什么是数据Mock
数据Mock是指模拟接口返回的数据。在前后端分离的开发模式中，后端提供接口文档，前端根据接口文档进行开发，但在后端接口未开发完成时，前端无法获取真实的数据进行展示和测试，这时就需要使用数据Mock，通过模拟返回测试数据的形式，让前端可以继续开发和测试。
Mock.js介绍
Mock.js是一款轻量级的前端数据模拟库，在前端开发中非常常用。它可以帮助前端开发人员快速生成各种随机数据，并提供了丰富的数据模板语法，可以根据接口文档的要求，灵活地生成符合需求的数据。Mock.js可以在浏览器端和服务端使用，它提供了简单易用的API，可以快速生成模拟数据，减少开发中的依赖和等待时间。
下面是一个使用Mock.js生成随机数据的例子：
// 导入Mock.js
import Mock from 'mockjs';
// 使用Mock.js生成随机数据
const data = Mock.mock({
'list|5-10': [{
'id|+1': 1,
'name': '@cname',
'age|18-60': 0,
'gender|1': ['男', '女'],
'email': '@EMAIL',
'address': '@county(true)',
'phone': /^1(3|4|5|7|8)\d{9}$/
}]
});
// 输出生成的数据
console.log(data);
Easy Mock介绍
Easy Mock是一款基于Node.js的可视化接口管理工具。它可以帮助开发者快速创建、管理和测试接口。Easy Mock提供了简洁友好的界面，支持多人协作开发，可以自动生成接口文档，方便前后端的联调和开发。除了提供接口管理的功能，Easy Mock还可以根据接口的请求参数和返回数据生成Mock数据，并提供Mock数据的API接口，方便前端进行数据的Mock。
下面是一个使用Easy Mock创建接口的例子：
-
在网页中打开Easy Mock的界面，进入项目管理页面，在项目管理页面创建一个新的项目。
-
进入新建项目后，点击左侧导航栏的“接口管理”，在接口管理页面点击右上角的“新建接口”，填写接口的名称、路径和请求方式等信息。
-
在“请求参数”一栏，点击右侧的“Add”按钮，添加请求参数，填写参数的名称、类型和描述等信息。
-
在“返回参数”一栏，点击右侧的“Add”按钮，添加返回参数，填写参数的名称、类型和描述等信息。
-
完成接口的设置后，点击右上角的“保存”按钮，接口即创建成功。
-
在“接口管理”页面，找到刚刚创建的接口，点击右上角的“复制地址”按钮，复制接口的路径。
-
在前端代码中，使用Ajax或者Axios等库发送请求，将接口的路径作为URL发送给Easy Mock，即可获取模拟的数据。
总结
前端接口与数据Mock是前后端分离开发模式中必不可少的一环。Mock.js和Easy Mock是两款非常实用的工具，能帮助前端开发人员在接口未开发完成时，生成模拟数据进行开发和测试。Mock.js可以在前端代码中快速生成随机数据，而Easy Mock可以帮助前端创建和管理接口，并提供Mock数据的API接口，方便前端进行数据的Mock。这两款工具能大幅提升前端开发效率，减少依赖和等待时间，是前端开发人员必备的利器。
参考链接：
本文来自极简博客，作者：梦境之翼，转载请注明原文链接：前端接口与数据Mock
