CN110908659A - 一种根据接口定义自动生成用户操作界面的方法及系统 - Google Patents

Abstract

本发明公开了一种根据接口定义自动生成用户操作界面的方法及系统，上述方法包括在已实现后端接口的后端项目中引入生成接口文档的工具；为生成接口文档的工具的接口信息添加注解，并形成前端接口数据包；启动后端项目，并获取和解析前端接口数据包，得到接口解析信息；根据接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上。本发明减少了前端界面代码的开发量，并达到了在需要调整前端界面时，无需修改前端界面代码只需调整后端代码的效果。

Description

一种根据接口定义自动生成用户操作界面的方法及系统

技术领域

本发明涉及软件界面生成技术领域，特别是涉及一种根据接口定义自动生成用户操作界面的方法及系统。

背景技术

随着移动通信与互联网技术的蓬勃发展，开发人员需要不断开发新的前端页面或者调整已有的前端页面来满足新的业务需要。而很多前端界面简单的平台经常是后端开发人员开发后端的同时也开发前端的代码。但对于不熟悉前端开发的人来说，需要另外掌握前端开发技能来开发前端界面，是一件比较耗时且收益不大的事情。因此如何提供一种自动生成用户操作界面的方法来减少前端代码的开发量成为本领域亟待解决的问题。

发明内容

本发明的目的是提供一种根据接口定义自动生成用户操作界面的方法及系统，以减少前端界面代码的开发量，并达到在需要调整前端界面时，无需修改前端界面代码只需调整后端代码的效果。

为实现上述目的，本发明提供了一种根据接口定义自动生成用户操作界面的方法，所述方法包括：

在已实现后端接口的后端项目中引入生成接口文档的工具；

为所述生成接口文档的工具的接口信息添加注解，并形成前端接口数据包；所述前端接口数据包中的接口信息包括接口功能、接口输入参数和接口返回值；

启动所述后端项目，并获取和解析所述前端接口数据包，得到接口解析信息；

根据所述接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上。

可选的，所述在已实现后端接口的后端项目中引入生成接口文档的工具，具体包括：

在某一个或多个已实现后端接口的后端项目中引入swagger。

可选的，所述为所述生成接口文档的工具的接口信息添加注解，并形成前端接口数据包，具体包括：

在所述生成接口文档的工具添加接口功能的描述信息、接口输入参数信息和接口返回值；

将所述接口信息整合到一json报文中，形成前端接口数据包。

可选的，所述启动所述后端项目，并获取和解析所述前端接口数据包，得到接口解析信息，具体包括：

启动所述后端项目，依据请求获取所述前端接口数据包；

通过所述生成接口文档的工具提供的接口获取所述前端接口数据包中每个接口的接口信息，并汇总所有接口的接口信息传送至前端。

可选的，所述根据所述接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上，具体包括：

根据所述接口解析信息，每一个前端服务对应生成一个前端页面；

在每个前端页面里生成若干个卡片，每个卡片对应一个接口；所述卡片的展示信息为接口功能的描述信息，所述卡片内的内容由接口方式、接口输入参数和接口返回值注解信息决定。

本发明还提供了一种根据接口定义自动生成用户操作界面的系统，所述系统包括：

接口工具引入单元，用于在已实现后端接口的后端项目中引入生成接口文档的工具；

注解配置单元，用于为所述生成接口文档的工具的接口信息添加注解，并形成前端接口数据包；所述前端接口数据包中的接口信息包括接口功能、接口输入参数和接口返回值；

解析单元，用于启动所述后端项目，并获取和解析所述前端接口数据包，得到接口解析信息；

界面生成单元，用于根据所述接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上。

可选的，所述接口工具引入单元具体用于在某一个或多个已实现后端接口的后端项目中引入swagger。

可选的，所述注解配置单元具体包括：

接口信息配置模块，用于在所述生成接口文档的工具添加接口功能的描述信息、接口输入参数信息和接口返回值；

信息整合模块，用于将所述接口信息整合到一json报文中，形成前端接口数据包。

可选的，所述解析单元具体包括：

数据包获取模块，用于启动所述后端项目，依据请求获取所述前端接口数据包；

接口信息获取模块，用于通过所述生成接口文档的工具提供的接口获取所述前端接口数据包中每个接口的接口信息，并汇总所有接口的接口信息传送至前端。

可选的，所述界面生成单元具体包括：

页面生成模块，用于根据所述接口解析信息，每一个前端服务对应生成一个前端页面；

卡片生成模块，用于在每个前端页面里生成若干个卡片，每个卡片对应一个接口；所述卡片的展示信息为接口功能的描述信息，所述卡片内的内容由接口方式、接口输入参数和接口返回值注解信息决定。

根据本发明提供的具体实施例，本发明公开了以下技术效果：本发明提供的根据接口定义自动生成用户操作界面的方法及系统在已实现后端接口的后端项目中引入生成接口文档的工具，并基于该生成接口文档的工具配置好需要生成相应功能的前段接口的接口参数，便可以在前段生成相应功能的界面。因此本发明无需开发前端，只需在后端接口配置好相关接口参数，即可在前端自动生成界面。并且前端界面自适应后端项目中引入的生成接口文档的工具的接口信息配置，需要调整前端界面时，修改后端项目中引入的生成接口文档的工具的接口信息即可，无需重新构建部署，只需刷新界面即可看到最新的界面。

另外，一个前端界面可根据多个后端项目引入的生成接口文档的工具的接口信息生成，不同的后端功能在不同服务开发，但前端界面是同一个，达到功能低耦合又能提供统一入口给用户的效果。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的根据接口定义自动生成用户操作界面的方法的流程图；

图2为本发明实施例提供的根据接口定义自动生成用户操作界面的系统框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的目的是提供一种根据接口定义自动生成用户操作界面的方法及系统，以减少前端界面代码的开发量，并达到在需要调整前端界面时，无需修改前端界面代码只需调整后端代码的效果。

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

如图1所示，本实施例提供的根据接口定义自动生成用户操作界面的方法包括：

步骤101：在已实现后端接口的后端项目中引入生成接口文档的工具。

在本实施例中，该步骤101中的生成接口文档的工具为swagger，swagger是一种可以基于代码生成接口文档的工具。

另外，本步骤的的后端项目可以是一个，也可以是多个。当一个前端界面根据多个后端项目引入的生成接口文档的工具的接口信息生成，不同的后端功能在不同服务开发，但前端界面是同一个，达到功能低耦合又能提供统一入口给用户的效果。

步骤102：为生成接口文档的工具的接口信息添加注解，并形成前端接口数据包；所述前端接口数据包中的接口信息包括接口功能、接口输入参数和接口返回值。

步骤102具体包括：

在所述生成接口文档的工具添加接口功能的描述信息、接口输入参数信息和接口返回值；

将所述接口信息整合到一json报文中，形成前端接口数据包.

其中，json是一种轻量级的数据交换格式。在实际应用中，例如可以在接口功能添加“@ApiOperation(value＝"生成已提现的账号",tags＝"第三方",notes＝"确认生成")”，在接口输入参数添加“@ApiModelProperty(notes＝"使用提现优惠券",allowableValues＝"不使用,使用",example＝"不使用")”。

步骤103：启动后端项目，并获取和解析前端接口数据包，得到接口解析信息。

步骤103具体包括：

启动所述后端项目，依据请求获取所述前端接口数据包；

通过所述生成接口文档的工具提供的接口获取所述前端接口数据包中每个接口的接口信息，并汇总所有接口的接口信息传送至前端。

在上述举例中，接口输入参数是通过判断是否具备“allowableValues”来判断接口输入参数是单选框类型还是文本框类型，并通过“example”属性来设置接口输入参数的默认值。

步骤104：根据接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上。

步骤104具体包括：

根据所述接口解析信息，每一个前端服务对应生成一个前端页面；

在每个前端页面里生成若干个卡片，每个卡片对应一个接口；所述卡片的展示信息为接口功能的描述信息，所述卡片内的内容由接口方式、接口输入参数和接口返回值注解信息决定。

在上述举例中，前端页面则生成一个卡片，卡片内根据接口输入参数的注解信息生成不同的控件。如接口输入参数添加了“@ApiModelProperty(notes＝"使用提现优惠券",allowableValues＝"不使用,使用",example＝"不使用")”这样的注解，则会在卡片生成一个单选框，选择项有：“不使用”和“使用”，供用户选择。最后会生成一个供用户点击的按钮，按钮文本为接口方法注解的notes属性值，即显示“确认生成”。

当需要修改前端页面样式时，只需要修改后端项目中引入的生成接口文档的工具的接口方式或接口输入参数的注解信息等接口信息即可。例如，需要将卡片内的单选框改为文本框，只需要修改对应接口的接口输入参数注解，去掉“allowableValues”属性。前端判断无“allowableValues”属性则默认生成文本框控件。

如图2所示，本实施例还提供了一种与上述根据接口定义自动生成用户操作界面方法对应的系统，所述系统包括：

接口工具引入单元201，用于在已实现后端接口的后端项目中引入生成接口文档的工具；

注解配置单元202，用于为所述生成接口文档的工具的接口信息添加注解，并形成前端接口数据包；所述前端接口数据包中的接口信息包括接口功能、接口输入参数和接口返回值；

解析单元203，用于启动所述后端项目，并获取和解析所述前端接口数据包，得到接口解析信息；

界面生成单元204，用于根据所述接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上。

其中，所述接口工具引入单元201具体用于在某一个或多个已实现后端接口的后端项目中引入swagger。

所述注解配置单元202具体包括：

接口信息配置模块，用于在所述生成接口文档的工具添加接口功能的描述信息、接口输入参数信息和接口返回值；

信息整合模块，用于将所述接口信息整合到一json报文中，形成前端接口数据包。

所述解析单元具体203包括：

数据包获取模块，用于启动所述后端项目，依据请求获取所述前端接口数据包；

接口信息获取模块，用于通过所述生成接口文档的工具提供的接口获取所述前端接口数据包中每个接口的接口信息，并汇总所有接口的接口信息传送至前端。

所述界面生成单元204具体包括：

页面生成模块，用于根据所述接口解析信息，每一个前端服务对应生成一个前端页面；

卡片生成模块，用于在每个前端页面里生成若干个卡片，每个卡片对应一个接口；所述卡片的展示信息为接口功能的描述信息，所述卡片内的内容由接口方式、接口输入参数和接口返回值注解信息决定。

对于实施例公开的系统而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种根据接口定义自动生成用户操作界面的方法，其特征在于，所述方法包括：

在已实现后端接口的后端项目中引入生成接口文档的工具；

为所述生成接口文档的工具的接口信息添加注解，并形成前端接口数据包；所述前端接口数据包中的接口信息包括接口功能、接口输入参数和接口返回值；

启动所述后端项目，并获取和解析所述前端接口数据包，得到接口解析信息；

根据所述接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上。

2.根据权利要求1所述的根据接口定义自动生成用户操作界面的方法，其特征在于，所述在已实现后端接口的后端项目中引入生成接口文档的工具，具体包括：

在某一个或多个已实现后端接口的后端项目中引入swagger。

3.根据权利要求1所述的根据接口定义自动生成用户操作界面的方法，其特征在于，所述为所述生成接口文档的工具的接口信息添加注解，并形成前端接口数据包，具体包括：

在所述生成接口文档的工具添加接口功能的描述信息、接口输入参数信息和接口返回值；

将所述接口信息整合到一json报文中，形成前端接口数据包。

4.根据权利要求1所述的根据接口定义自动生成用户操作界面的方法，其特征在于，所述启动所述后端项目，并获取和解析所述前端接口数据包，得到接口解析信息，具体包括：

启动所述后端项目，依据请求获取所述前端接口数据包；

通过所述生成接口文档的工具提供的接口获取所述前端接口数据包中每个接口的接口信息，并汇总所有接口的接口信息传送至前端。

5.根据权利要求1所述的根据接口定义自动生成用户操作界面的方法，其特征在于，所述根据所述接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上，具体包括：

根据所述接口解析信息，每一个前端服务对应生成一个前端页面；

在每个前端页面里生成若干个卡片，每个卡片对应一个接口；所述卡片的展示信息为接口功能的描述信息，所述卡片内的内容由接口方式、接口输入参数和接口返回值注解信息决定。

6.一种根据接口定义自动生成用户操作界面的系统，其特征在于，所述系统包括：

接口工具引入单元，用于在已实现后端接口的后端项目中引入生成接口文档的工具；

注解配置单元，用于为所述生成接口文档的工具的接口信息添加注解，并形成前端接口数据包；所述前端接口数据包中的接口信息包括接口功能、接口输入参数和接口返回值；

解析单元，用于启动所述后端项目，并获取和解析所述前端接口数据包，得到接口解析信息；

界面生成单元，用于根据所述接口解析信息生成对应的控件和文字信息，并展示在用户操作界面上。

7.根据权利要求6所述的根据接口定义自动生成用户操作界面的系统，其特征在于，所述接口工具引入单元具体用于在某一个或多个已实现后端接口的后端项目中引入swagger。

8.根据权利要求6所述的根据接口定义自动生成用户操作界面的系统，其特征在于，所述注解配置单元具体包括：

接口信息配置模块，用于在所述生成接口文档的工具添加接口功能的描述信息、接口输入参数信息和接口返回值；

信息整合模块，用于将所述接口信息整合到一json报文中，形成前端接口数据包。

9.根据权利要求6所述的根据接口定义自动生成用户操作界面的系统，其特征在于，所述解析单元具体包括：

数据包获取模块，用于启动所述后端项目，依据请求获取所述前端接口数据包；

接口信息获取模块，用于通过所述生成接口文档的工具提供的接口获取所述前端接口数据包中每个接口的接口信息，并汇总所有接口的接口信息传送至前端。

10.根据权利要求6所述的根据接口定义自动生成用户操作界面的系统，其特征在于，所述界面生成单元具体包括：

页面生成模块，用于根据所述接口解析信息，每一个前端服务对应生成一个前端页面；

卡片生成模块，用于在每个前端页面里生成若干个卡片，每个卡片对应一个接口；所述卡片的展示信息为接口功能的描述信息，所述卡片内的内容由接口方式、接口输入参数和接口返回值注解信息决定。

Images