RAP搭建前端MockServer

前后端分离式开发的思考

目前大部分公司都实行了前后端分离开发。然而在项目开发过程当中,经常会遇到以下几个尴尬的场景;

1、前端开发依赖于后端接口数据,需要与后端接口联调才能获得数据展示,从而拖慢了开发进度;

2、没有一个很好的结构化接口文档管理工具,能够对项目中所用到的接口进行管理。如一个请求的地址、有几个参数、参数名称及类型含义等等。同时支持项目、历史版本的切换。

什么是RAP

引用官方文档上的说明:

在前后端分离的开发模式下,我们通常需要定义一份接口文档来规范接口的具体信息。如一个请求的地址、有几个参数、参数名称及类型含义等等。RAP 首先方便团队录入、查看和管理这些接口文档,并通过分析结构化的文档数据,重复利用并生成自测数据、提供自测控制台等等... 大幅度提升开发效率

RAP集中解决了两个问题:

1、出色的接口文档化处理;

2、完善mock接口数据,支持自定义拓展mock.js;

RAP的mock服务

RAP的搭建及接口管理非常简单,有兴趣的同学可以参考官方中文文档。我们主要介绍一下rap的mock服务使用。RAP中编辑接口时使用了mock语法,从而阅读上更加清晰明了;

rap的mock服务主要内置了mock.js,关于mock.js的具体使用请阅读其官方文档:

github.com/nuysoft/Mock/wiki/Getting-Started

可能很多同学都讨厌阅读英文文档,但我要告诉你,只有通过阅读官方文档而不是通过二手博客,你才能更加了解它的特性及使用方法,甚至原作者为什么这么设计。如下一个例子就是用mock服务定义接口相应参数


RAP搭建前端MockServer_第1张图片

我们来看下其返回的mock数据:

这样就一一对应起来了;前端可以直接用mock出来的数据进行调试;

RAP搭建前端MockServer_第2张图片

如何应用于实践

RAP提供了Mock插件(暂时仅支持Kissy和jQuery),使用只需要一步。在你的前端代码中增加如下一行,

http://{{domainName}}/rap.plugin.js?projectId={{projectId}}&mode={{mode}}

RAP中通过设置白名单、黑名单模式(即mode参数)来限定对哪些接口做mock服务,默认RAP中已收录的接口会入入白名单;

不足之处

当然是用过程中也有一些不足之处:

1、插件目前仅支持Kissy和jQuery;

2、对自动化测试支持不够;

3、使用过程中卡顿较多;

你可能感兴趣的:(RAP搭建前端MockServer)