前后分离的开发模式中，我们难免需要mock数据，一说到mock数据我们就想到大名鼎鼎的mockjs，但是每次使用mock数据时，我们都需要引入mockjs，为了做到对原始代码不做到侵入，我们还需要将mock的数据用单独文件保存，为了模拟线上环境还要本地搭建个服务器，总之就是比较麻烦。。。
为此我做了一个vscode拓展，Mock-Myself，它提供了如下功能:
- 1.自动在项目工程生成文件夹保存mock数据，方便其他人使用mock数据
- 2.自动在本地启动mock服务器
- 3.自定义mock数据，符合mockjs生成规则
- 4.图形化界面，方便查看使用
- 5.自定义接口数据规则
- 6.适配vscode主流主题色
- 7.支持多个命令，更加方便使用。
如下图 我们在vscode插件中搜索Mock-Myself插件，下载安装后执行 mock-myself 就可启动mock服务器，开始我们的mock数据了。
211564919735_.pic_hd.jpg
如何使用呢？
一般情况下我们只需要简单生成mock数据，那么我们只需要写入我们简单的mock数据，这个mock数据是基于mockjs生成的，想生成一些特殊的mock数据你可以查看mockjs 使用。
有时我们需要根据提交数据不同来生成不同的数据，这时我们就需要用到query这个函数了。
/**
* req：是请求接口提交的数据对象
* fn：是执行函数回调，函数的参数是需要生成mock数据
**/
function query(req,fn){
}
举个例子：假如我们有这样一个接口--‘http://localhost:8989/test/deatil’；现在我们需要根据请求参数不同返回不同数据如下：
const url = http://localhost:8989/test/deatil;
$.post(url,
{name:'mock-self'},
function(result){
console.log(result);
// 期望数据 {id:'370000201007178245',name:'Mock-Myself'}
})
$.post(url,
{name:'easy-mock'},
function(result){
console.log(result);
// 期望数据 {id:'370000201007178245',name:'Easy-Mock'}
})
从上面代码可以看出来，我们请求参数name不同需要返回不同的数据。Mock-myself就可以很方便实现：
function query(req,fn){
switch (req.name) {
case 'mock-myself':
fn({id: '@id',name:'mock-self'})
break;
case 'easy-mock':
fn({id: '@id',name:'easy-mock'})
break;
default:
fn(true)
}
}
通过fn参数来自定义mock返回的数据，这样以后我们想怎么mock就怎么mock，根据需要变化mock数据，让我们可以模拟更多是环境和状态。
小贴士
Mock-Myself目前支持下面三个命令：
mock-myself:启动mock服务器和可视化操作界面（启动服务器同时生成可视化界面编辑mock数据）
mock-run:直接启动mock服务器（一般本地数据都写好，只需要启动服务是使用）
mock-stop:停止mock服务器
Mock-Myself用起来虽然很爽但是还是有几点要注意：
- mock服务器会在你工作的项目中生成一个_MOCK_的文件夹存放mock数据，所有项目中不要用_MOCK_文件名；
- mock服务器会启动8989端口，所以建议不要占用；
- 一般情况直接编写mock数据，如果需要自定义规则时编写
query函数记得一定要执行fn回调； - 每次请求接口数据都会变化，如果想数据保持不变的话在请求参数加上{...data,default:true}
（当然在下一个迭代中这些问题都不会存在了）
[Unreleased]
- 增加自定义 mock 根目录
- 动态配置mock服务端口
- 自定义规则query函数支持异步规则
- ...
网友评论