首页 > 编程知识 正文

前后端接口联调,select获取选项后,前后端联调步骤

时间:2023-05-06 21:19:39 阅读:278060 作者:4470

前后端联调福音——RAP

教会学校

百家号 17-04-15 05:28

原创作者:政宇@招聘技术 58招聘技术团队

一、概述

RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具,对前后端接口交互开发进行解耦,以提升协作效率。

二、RAP的基本安装与使用

首先,我们将简单介绍一下RAP的安装与使用。

1、RAP的部署。

部署方式有两种:

①、使用编译好的war包部署

适合仅想部署RAP服务,不需开发定制功能的同学

②、使用源码自行编译、开发后部署

需配置J2EE开发环境, 适合想要研究RAP源代码,开发定制功能的同学

Rap的github上提供了war包以及源码的下载:https://github.com/thx/RAP/releases

2、配置环境。

①、JDK1.8+

②、MySQL 5.6.12+

③、Tomcat 8.*+

④、Redis 3.0+ 部署在本机,默认端口即可。

3、初始化数据库。

需要执行release分支下的SQL脚本: /src/main/resources/database/initialize.sql,该脚本中包含数据库创建、表&结构创建、必要的初始数据创建的全部内容。

4、配置数据库、Redis

修改src/config.properties 中的配置内容,将其改为正确的数据库以及Redis配置。下图是config.properties的配置内容。

我们在自己的服务器上部署了自己的rap服务,具体的更详细部署步骤可以参照RAP项目wiki:https://github.com/thx/RAP/wiki/deploy_manual_cn(部门内部的rap地址是:http://10.48.184.39:3478/)

5、RAP的基本使用

RAP服务搭建完成之后,我们就可以开始RAP的使用了。

上图是进入到rap的首页面,点击注册登录之后将进入到我的主页。进入到我的主页之后可以开始查看或者创建我们的项目:

创建完项目之后,就进入到我们的接口定义的界面了。

点击添加接口后,我们定义了一个接口:api/helloworld。返回的对象是一个json的字符串

接下来我们将定义我们的请求参数和返回参数:

这里我们的请求URL为api/helloworld?name=刘备.返回的数据格式为:

在编辑相应参数列表的时候,我们可以手动的添加参数,也可以直接点击导入json将上图中json直接导入生成相应的参数。参数列表定义完了之后就可以开始来访问我们的接口了。

点击上图中的模块页面按钮,将进入到页面的控制台,我们输入请求的参数将会获取到该接口返回的数据。如下图的右边所示,这就是我们的请求URL。http://10.48.184.39:3478/mockjs/1/api/helloworld?name=%E5%88%98%E5%A4%87

该URL返回的是mock数据的模板,我们需要将上面的URL中mockjs改为mockjsdata就可以将模板数据渲染成我们要的接口数据。http://10.48.184.39:3478/mockjsdata/1/api/helloworld?name=%E5%88%98%E5%A4%87

前台就可以根据上面的URL来进行发起请求。另外,也可以通过配置mock插件,使用相对路径来访问请求接口。

在模块页面中点击配置选项,会打开一个FE工具箱页面,将其中的插件代码拷贝到我们需要进行调用接口的页面。

下图是一个简单的页面,通过jquery请求接口数据。只需要在jquery.js引用的后面加上插件代码,我们就可以按照相对路径的请求方式来获取到我们接口的数据了。当我们的前端需要与后端进行接口对接时,只需要注释掉该mock插件代码即可。

另外如果我们需要跨域来使用mock接口,那么我们就需要使用jsonp的方式来发起请求,下图示例是jsonp的一个接口rap设置。

在上图中,我们可以看到,只需要设置请求参数为[callback],[callback]表示的是传过来的请求参数是一个函数名。在我们前端请求时按照正常的jsonp的请求方式即可。

三、高级功能案例介绍

接下来我们以一个实际业务场景来介绍RAP的一些高级功能。

业务场景:通过传入商品类型、城市ID、排期类别来查询在一年之内的排期时间。

下图是我们定义的接口格式,该接口以数组的形式返回排期时间。

接下来将定义传入参数和返回参数,该定义如下图所示:

在模拟数据的时候RAP会使用到Mock.js的语法,这里我们简单的介绍一下相关语法。在接口返回的数据中,我们需要返回下图所示的一个数组:

参数begin和end需要表示的是该排期一个时间段的开始时间和结束时间,备注后面的@mock=@date(yyyy年MM月dd)表示的是随机的一个时间。

timeState表示的是该时间段是否被占用,1代表被占用,0代表不被占用。语法是:timeState|1 ,@mock=[1,0];这里表示的意思是timeState会从后面的集合[1,0]中随机选取一个数来表示。

week 则表示当前时间段是属于该年的第几周;由于一年有52周,这里用到随机数来表示:week|1-52,表示的week的取值是从1到52之间随机选取。

year 年份我们这里选取了一个固定值 :@mock=2017。

点击接口详情旁边的Mock数据,就可以看到模拟后的数据了,接着按照前面的介绍使用该接口即可。下图是模拟后的数据:

更多详细Mock.js的介绍可以参考Mock.js的官网:http://mockjs.com/.

四、api接口导出

敏捷宣言中:可以工作的软件胜过面面俱到的文档。RAP 提供了api接口导出以及项目配置导出、导入功能。极大降低了接口维护成本,可以说RAP的接口配置就是接口设计文档。

五、相关资料

通过以上的介绍,想必大家对Rap会有一个基本的了解,下面是Rap相关的一些学习的资料链接,如果想更深入的了解 Rap,可以参考这些资料来学习。

参考文章[Mock.js 官网]:http://mockjs.com/.[RAP wiki ] : https://github.com/thx/RAP/wiki[RAP 学习视频] : http://thx.github.io/RAP/study.htm

本文由百家号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。未经作者许可,不得转载。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。