youngwind / blog

梁少峰的个人博客
4.66k stars 385 forks source link

rap与mock:接口定义与生成平台 #54

Open youngwind opened 8 years ago

youngwind commented 8 years ago

问题

前后端同步开发的话总是会碰到这样的一个问题:前端需要等后端接口提供的数据。为了解决这个问题,一般有这么几个思路。

  1. 在前端代码中直接嵌入假数据。这种方法最笨拙,而且会使代码变得很不干净,而且后期还得删除假数据。
  2. 把数据写在前端json文件中,然后请求接口的时候请求的是json文件。这种方法要好一点,但是还是免不了污染了代码仓库,并且json文件也不好组织,因为路由和json文件很难一一对应上。
  3. 采用类似mock.js这样的库,它具有拦截ajax请求,以及返回自定义格式的假数据的功能。这种方法确实比之前要好多了,但是还是免不了在代码中遗留假数据。

    rap

其实我们分析一下,我们想要的不过是这样的东西。 前后端一起定义接口,接口定义好之后前端就能直接从线上的某个地址拿到预先规定好的假数据。 寻寻觅觅,终于让我找到了合适的工具,那就是rap

这里有一个rap的介绍视频,通俗易懂又搞笑。

使用rap,不仅仅是作为假数据生成平台,同时也是一个很好的接口查看和管理平台,有了它,各个项目的接口一目了然,再也不用需要到各个项目的readme文档里面去寻找接口了。

mock

我们再说说mock,虽然最后并没有采用mock.js作为请求拦截和假数据生成的工具,但是mock这种根据语法规则生成随机假数据的思想还是很值得借鉴的,rap中也集成支持mock语法。所以下面我们简单地介绍一下mock语法。

1.安装

npm install mockjs --save

2.生成假数据

var Mock = require('mockjs');
var data = Mock.mock({
   'list|1-10':[{
      'id|+1':1
    }]
})
console.log(data);

3.执行结果

{ list: [ { id: 1 }, { id: 2 }, { id: 3 } ] }