初试 RAP & MOCKJs 心得

趁着小程序对个人用户的开放的热潮，也连夜学习了几天小程序，在学习的过程中也一直在思考一个问题，到底api是应该由后端来决定，还是应该由前端来决定？然后，搜索到了nobackend这个网站。
这个网站提出的“无后端”原则是应该由前端开发人员来定义api，用前端的代码来描述后端的功能，并将其称为：Dreamcode（梦幻代码)
这篇博客并不打算展开记录这个问题，只是由开发小程序的过程中，联想到的一些内容。

RAP是一个可视化接口管理工具 通过分析接口结构，动态生成模拟数据，校验真实接口正确性， 围绕接口定义，通过一系列自动化工具提升我们的协作效率。我们的口号：提高效率，回家吃晚饭！

上述描述摘自RAP的官网,对的，它也是阿里出品（阿里妈妈出品），用来管理接口的工具，同时可以动态mock数据（这个才是亮点）。八卦一下，据说rap的原作者已经从阿里妈妈跳槽出去创业来，现在的管理者同时也是mockjs的作者。

注册什么的就不说了，只是想吐槽一下验证码十次要输错9次。。。
注册好之后什么建团队建项目巴拉巴拉的也略过，重点是管理接口啊。。。

来到接口管理页面，可以看到如图所示：

这里是一个已经维护好的接口
模块的名称叫做小程序，然后有一个页面叫“小程序列表页”，在这里页面里，有一个名为“获取所有新闻”的接口。
点击这个接口，在右侧就会显示这个接口的详情。
点击上面的“编辑”按钮，就可以对这个页面所有内容进行编辑。
在左侧树形结构里面，“小程序列表页”旁边有一个播放状的按钮（这个按钮你们敢做的再不醒目点么？），点击这个按钮，就能进入这个接口的控制台。（这个稍后再详细说）
接下来说下rap牛逼闪闪的地方，如图所示：

可以看到，在响应参数的备注中有些奇怪的东西，同时在响应参数的变量名中，有个"data|10"，这是什么意思呢？
首先，这些都是在描述mock数据时，这些参数的规则，"data|10"说明返回的data中，是一个有10个元素的数组
"@mock=@ID"，说明这个参数是个随机主键，"@mock=@IMG(1200x600,@color())"，会mock出一个颜色随机的1200x600的图片，（注意，这里要写x，而不要写*),"@mock=true"说明这里返回的值必为true。
更多规则，参考mockjs官网

到这里，api就写好了，接下来要怎么用呢？

首先，点击第一张图中很醒目的红色的“Mock数据”，将会按照上面设置好的规则来生成出数据，不讲究的就把这些数据copy出来也可以用了，但是，这个稍微low了点。
最正确的做法则是，点击第一张图中，页面旁边的那个播放状的图标，进入接口控制台，点击“请求”，就可以mock数据了
同时这个页面的右上角和右下角也分别有一些内容，右上角是这个api的根路径，就是所有这个模块的请求的根路径，都是这个括号里的地址，右下角描述的就是这个请求的状态信息，里面会有请求的url地址。打开这个地址，可以看到返回的其实并不是mock出来的数据，而是之前我们设置的规则，(比如：http://rap.taobao.org/mockjs/14007/api/news?accessToken=asdsa，返回：{"data|10":[{"thumb":"@IMG(1200x600,@color())","_id":"@ID"}],"success":true}) 那么要怎么样才能mock出数据呢？这就要用到rap的好基友mockjs了。
在mockjs的示例页面，有这样一句话：你可以打开控制台，随意地试验这些方法。
于是，你可以打开控制台，将前面打开接口url地址返回的mock数据的规则copy出来，然后在控制台执行：Mock.mock(规则对象)
（这里区分大小写）就可以看到生成的mock数据了。
这样我们在前端开发的时候，可以先请求rap中生成的api的地址，然后在回调函数中，将mockjs作为中间件，使用Mock.mock来根据返回的mock规则生成mock数据，即可使用了。例如：

$.get(url,function(retData){
    var mockData = Mock.mock(retData);
})

其他的诸如导出api文档必备功能肯定也是有的，根据其官方文档描述，还有很多高级功能，不过我暂时还没用到，将来有需要的时候再慢慢研究吧。

好了，继续学小程序去了。。