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带过来的请求参数。