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

团队开发项目时,往往会遇到前端页面以及写好,而后端的接口却还没有跑通的情况,以前的解决方案是写一个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');
}]);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • GitHub 上有一个 Awesome - XXX 系列的资源整理,资源非常丰富,涉及面非常广。awesome-p...
    若与阅读 18,804评论 4 418
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,211评论 6 13
  • 为什么要学习ppt呢 一个字:眼高手低。 PPT看多了,知道什么样是颜值高的PPT,但自己做出来的PPT是惨不忍睹...
    王水井阅读 683评论 0 1
  • 静默的路灯 昏昏欲睡, 微凉的风 在耳边轻语。 夜空中闪亮的星星, 凝望着我的眼睛, 而你低垂的眼睑, ...
    不才子阅读 195评论 0 2