团队开发项目时,往往会遇到前端页面以及写好,而后端的接口却还没有跑通的情况,以前的解决方案是写一个json文件,然后请求这个json,使用这种方式一是无法动态的模拟返回的数据,二是给出接口后我们需要替换掉url地址,为了解决这个问题,我们可以选择rap作为我们的解决方案。
什么是rap
rap是由阿里妈妈团队开发的一款前后端分离工具,配置好后可以拦截我们的http请求并发送回假数据。
RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升我们的协作效率。
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');
}]);