mock之初体验

刚接触vue的时候,看到github上有人的开源项目介绍使用mock可以模拟接口调用,可以使用模拟数据避免跟后端交互也可以实现前端功能的完美展现,当时觉得卧槽,mock这个东西这么神奇的吗?那一定要学习一下,但是当时工作忙(说实话就是懒。。。),一来二去就给放下了(捂脸。。。)。

近来感谢领导(路人:有拍马屁嫌疑),工作少许轻松了一些,又碰巧平台组的同事,给出组件例子的时候用到了mock,我就认为我学习mock的机会到了,既然天意如此,我就不客气了,mock出招吧!

首先,安装。

找到官网,按步骤来就好了。

其次,开始写接口了,工作使用vue,vue组件跟调接口文件是分开的,结构是这个样子滴,

vue文件,就简单使用ElementUI库,弄了一个table,然后开始就调用一下,

接口调用文件,最简单的接口调用,

里面的api文件,用的axios,

使用mock模拟的接口响应,

然后,页面刷新,返回结果,卧槽,牛*,然而,湿湿的真相是下面这样的。。。

事实是,找到文档,迫不及待,马上control+C,然后Control+V,一顿操作猛如虎,然后“腚眼”一瞧。。。

啪啪啪。。。,表格数据没出来,咋地了嘛,看看返回数据

这我要的是一个数组啊,我的天,怎样才能生成一波数组呢?然后开启百度,一通搜索,功夫不负有心人,终于找到了,

这个时候返回的就是一个数组了,

然后,继续翻文档,发现@date('yyyy-mm-dd')可以传参数,表示日期的格式化模板,@county(true) 也可以传参数,表示县区,之前是否带出自己所属的省市。

呐呐呐,你以为到这里就结束了吗?不不不,新问题又来了,都说好奇害死猫,我可能就是还没被害死的那只猫,文档说,mock还可以是一个生成随机数的工具,比如它的Random,里面可以有好多东东,比如名字,你可以用@cname,也可以用Random.cname(),日期,你可以用@date,也可以用Random.date(),那就果断替换一波吧,然后,画面变成了这个样子

这它喵的是怎么回事?WTF?,然后看文档里也没说啊,开启百度大法吧,半个多小时过去了,依然杳无音信,然后翻github上该项目对应的issues,然后让我找到了,哈哈哈哈,好像就是一个bug吧,作者并没有回应,但是广大网友还是给出了解决办法,那就是使用函数走一波,将Random的东东,全部都用函数return一下就可以了,好像是如果函数的东西,它会重新执行一下,而之前的那种写法,一遍搞定了。

以上都是mock第二个参数是模板的情况,那么第二个参数是函数的情况呢?

原以为,直接将将里面的模板,return不就完了吗?像这样

但是,我毕竟还是太年轻了,返回的数据竟然成了这样。。。

模板什么的都没识别,进去什么样,出来还是什么样,那要怎么搞嘛?没办法,继续查资料吧,最后发现return 的时候还可以mock.mock,居然还有这种操作?6666,细细一想,return的时候,随便你,有人就自己造数组,然后for循环,一个一个的push,但这显然不是我想要的,返回mock.mock的时候,里面的东西就又是模板了,仅此而已。

值得一提的是,使用function的方式,其中的req.body还可以获取post带过来的请求参数。

猜你喜欢

转载自www.cnblogs.com/liujiekun/p/10830531.html