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函数支持异步规则
  • ...

推荐阅读更多精彩内容