前后端分离-利用rap发送假数据

团队开发项目时，往往会遇到前端页面以及写好，而后端的接口却还没有跑通的情况，以前的解决方案是写一个json文件，然后请求这个json，使用这种方式一是无法动态的模拟返回的数据，二是给出接口后我们需要替换掉url地址，为了解决这个问题，我们可以选择rap作为我们的解决方案。

什么是rap

rap是由阿里妈妈团队开发的一款前后端分离工具，配置好后可以拦截我们的http请求并发送回假数据。

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

rap学习资料

• rap主页
• 文档教程
• angular中使用rap

推荐按照官方的文档教程进行学习，需要注意一点的是，插件本身只能拦截原生的ajax请求，angular和vue的请求并不能拦截，angular中使用的话需要引入ngRap这个模块。

前端mock数据生成

生成假数据的这个服务可以由rap官网提供，也可以由自己本地提供，自己本地提供的话需要自己搭建本地服务，一般推荐直接使用官网提供的服务局。一般生成步骤如下：

• 新建接口，配置请求参数列表，返回参数列表
  设置返回参数需要你先学习mock.js的语法，语法很简单，随用随查就行，这是官网提供的一个demo，rap演示。

• 引入jquery，rap.js脚本
  现在这个插件暂时只支持jquery，不支持angular，所以我们需要先引入jquery，然后再引入rap脚本，官网配置接口参数页面，上方有一个配置按钮，点击配置，将里面的script脚本复制到自己的页面上就可以了。

基本的配置就是这些，整个过程也是比较简单，不会的阅读官方文档就可以了。

angular中使用rap

因为rap本身不支持angular，所以我们需要导入ngRap这个模块来帮我们解决，下载npm install ngRap，导入ngRap文件，配置rap拦截方式，具体代码如下：

angular.module('myApp', ['ngRap']).config(['$httpProvider', 'ngRapProvider', function(httpProvider, ngRapProvider) {
    ngRapProvider.script = 'http://xxx.xxx.xxx/rap.plugin.js?projectId=nnn'; // replce your host and project id
    ngRapProvider.enable({
        mode: 3
    });
    httpProvider.interceptors.push('rapMockInterceptor');
}]);