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