最近一直在思考如何对Web API的其接口数据进行独立开发的问题,随着Web API的越来越广泛应用,很多开发也要求前端后端分离,例如统一的Web API接口后,Winform团队、Web前端团队、微信小程序或者APP团队大家可以同步开发,在最初约定一些接口的输入JSON数据和输出JSON数据,但是随着项目的进度开展,这些数据结构一直有所变化,那么我们模拟的JSON数据格式也需要协同变化,但是很不幸既然大家忙着开发,接口协调的事情肯定优先级没那么高,即使每次记得协调接口数据,也不一定能够完全一致。

在Web API端也就是后端没有完全做好的情况下,我们不可能给出所有接口的输入输出JSON格式,那么我们是否可以考虑采用折中模拟数据接口的方式来提供,并且能够提供比较易读、易维护的处理方式呢?答案是肯定有的,结合RAP2和Mock.js两者的特点,可以较为方便的模拟出我们需要接口的URL、输入参数、输出参数等信息。

RAP2是一个Web接口管理工具,开源免费,接口自动化,MOCK数据自动生成,自动化测试,企业级管理。

Mock.js的出现解决了前端离开后端就没法请求数据的问题,但也出现了新的问题,就是在切换生产环境的时候,模拟的数据可能和接口又发生不同步的情况。

RAP2是一个新的解决方案,将前端后端拉倒一个团队仓库中,共享一个仓库,无论是URL地址,还是请求需要的参数,在团队仓库中双方都可以管理,并且可以记录团队成员修改了哪些接口,整合到生产环境的时候,可以比较完美的切换,同步性较好!

相关网站资源:

1、RAP2创建接口

打开网站http://rap2.taobao.org/,注册一个用户账号,并创建自己的模块和接口,如下所示

默认有一个示例接口指引我们做相关的参数或者响应内容

对每个参数,都可以使用Mock规则进行生成值,如下界面所示

除了示例,我们也可以创建自己的模块和接口,如下所示我们创建一个用户管理的模块,以及两个接口。

获取用户的接口定义如下所示。

这个URL地址是我们逻辑上的相对地址,实际在使用的时候,我们加上一个基地址就可以了,在RAP2 它也是一个相对地址,测试接口的地址也是加上一个基础地址,这样我们实际开发的时候,把这部分基础地址替换为生产环境的地址即可顺利切换过去了。

这个接口实际返回的JSON数据格式就是我们约定好的JSON格式了,如果我们有变化,大家参考这个中间的平台就可以了,沟通时比较方便,也可以对比那些字段参数变化调整了,这样前后端就有了一个参考的中间平台,一致性较好。

2、接口参数定义和Mock变量使用

那么这些JSON数据是如何来的,我们其实是填写了一些变量,让它自动生成的数据的,这个也是Mock.js的功劳吧。RAP2集成了MockJS的很多变量使用,参考着使用就可以构建很多不一样的数据,非常方便。

下面列出我的一些输入、输入的变量内容。

输入的参数,定义如下:

响应的输出参数如下定义。

获得的输出自动生成的JSON数据如下所示。

这个就是我们使用Mock变量的好处,自动根据规则填充,上面我使用了各种变量来定义数据,如果你需要了解Mock的变量,可以结合Mock的变量来测试即可。具体参考下面说明。

http://mockjs.com/examples.html

上面链接列出了Mock的两项定义:数据模板定义和数据占位符定义,可以根据情况用不同的定义。我更侧向于使用后者,方便快捷。

RAP2给前后端开发者一种更好更透明的协同开发方式,一个负责维护接口、一个负责参考修改调用,大家相互配合,其乐融融。
关于RAP2的功能好像还有很多,不过我们使用它最主要的目的是解决模拟API接口和协同性的问题,这个大原则是它的主要目的,基于RAP2和Mock.js的结合,我们可以解放频繁沟通而得不到接口一致性问题的问题,从而实现更好从调试环境到生产环境的切换。

甚至更好的方案是我们 在Web API接口开发的初期,先花点功夫来定义好所有的接口输入输出,整理一个大家认为比较好的接口规范后,再开始Web API的编码,这样肯定后期开发是事半功倍,而且前端也可以很快对接。

 

使用RAP2和Mock.JS实现Web API接口的数据模拟和测试的更多相关文章

  1. Web API接口之FileReader

    Web API接口之FileReader *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  2. WebApi系列~通过HttpClient来调用Web Api接口~续~实体参数的传递

    回到目录 上一讲中介绍了使用HttpClient如何去调用一个标准的Web Api接口,并且我们知道了Post,Put方法只能有一个FromBody参数,再有多个参数时,上讲提到,需要将它封装成一个对 ...

  3. 如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。

    由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...

  4. Asp.Net Web Api 接口,拥抱支持跨域访问。

    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问. 由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题 ...

  5. Asp.Net Web Api 接口

    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问.   由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...

  6. 微信小程序的Web API接口设计及常见接口实现

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...

  7. 使用egg.js开发后端API接口系统

    什么是Egg.js Egg.js 为企业级框架和应用而生,我们希望由 Egg.js 孕育出更多上层框架,帮助开发团队和开发人员降低开发和维护成本.详细的了解可以参考Egg.js的官网:https:// ...

  8. ASP.NET Web API 接口执行时间监控

    软件产品常常会出现这样的情况:产品性能因某些无法预料的瓶颈而受到干扰,导致程序的处理效率降低,性能得不到充分的发挥.如何快速有效地找到软件产品的性能瓶颈,则是我们感兴趣的内容之一. 在本文中,我将解释 ...

  9. 不使用jQuery对Web API接口POST,PUT,DELETE数据

    前些天,Insus.NET有演示Web API接口的操作: <怎样操作WebAPI接口(显示数据)>http://www.cnblogs.com/insus/p/5670401.html ...

随机推荐

  1. Go基础(1)

    demo1: package add var Name string = "hello world" var Age int = 10 package main import ( ...

  2. MySQL命令窗口下中文显示乱码的解决过程

    在dos客户端输出窗口中查询表中的数据,还有项目部署到服务器上时前台的页面,中文数据都显示成乱码,如下图所示: 这个问题困扰了我一天,后来解决了才发现原来我的方向错了,一直我以为是SpringBoot ...

  3. 『集群』004 Slithice 集群分布式(多个客户端,基于中央服务器的集群服务)

    Slithice 集群分布式(多个客户端,基于中央服务器的多个集群服务端) 案例Demo展示: 集群架构图 如下: 如上图,上图 展示了 这个集群 的 结构: >一个中央服务器(可以有多个),负 ...

  4. pwnable.tw applestore 分析

    此题第一步凑齐7174进入漏洞地点 然后可以把iphone8的结构体中的地址通过read修改为一个.got表地址,这样就能把libc中该函数地址打出来.这是因为read函数并不会在遇到\x00时截断( ...

  5. Linux 软硬链接的区别及目录权限对软硬链接的影响

    目录权限的影响 首先,构建实验环境如下图: 有 A.B 两个目录,A 目录下建有 test 文件,且文件中的内容为 "Hello".B 目录下分别创建 test 文件的硬链接 te ...

  6. [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试

    原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...

  7. Mybatis-plus快速入门

    简介 MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 特性 无侵入:只做增强不做改变,引入它不会对现 ...

  8. 002. https通信(CA证书认证 + 密钥商定 )

    服务端与客户端建立https通信的过程: 一.认证:客户端第一次访问服务端时,要求服务端证明自己可被信任 1.证书:由服务端申请.第三方CA颁发的,存放在服务端的证书: 证书包含:服务端的公钥.服务端 ...

  9. AJAX的创建

    20:29:50 创建的步骤: 1.创建异步请求的核心对象 2.设置请求方式和地址 3.设置结果产生的回调函数 4.进行结果的逻辑处理 5.获取结果并处理 6.发送请求 <!DOCTYPE ht ...

  10. 微信小程序 canvas 文字自动换行

    Page({ drawCanvas: function(ctx) {// 地址 ctx.setFontSize() ctx.setFillStyle('#9E7240') ctx.textAlign= ...