VSCode插件--一个简洁的Mock数据服务器

前后分离的开发模式中，我们难免需要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函数支持异步规则
• ...