界面与字段对照关系图生成方法、装置及设备与流程

本发明实施例涉及接口设计，具体涉及一种界面与字段对照关系图生成方法、装置、设备及计算机可读存储介质。

背景技术：

1、目前在接口设计时，主要通过列出界面的请求和响应字段，形成接口文档，通过文件文档或网页文档的方式使用文字描述界面上的字段。本技术发明人发现，通过这种方式不能清晰地将界面各个数据与接口字段清晰对应，不便于前端高效完成界面逻辑，影响开发效率，且在生产问题排查时不能快速完成界面数据溯源。

技术实现思路

1、鉴于上述问题，本发明实施例提供了一种界面与字段对照关系图生成方法、装置、设备及计算机可读存储介质，用于解决现有技术中存在的界面各个数据不能与接口字段清晰对应的问题，根据本发明实施例的一个方面，提供了一种界面与字段对照关系图生成方法，所述方法包括：

2、获取目标界面对应的界面图片；

3、识别所述界面图片中的数据、文字词组，以得到字段元素信息；所述字段元素信息包括数据、文字词组、所述数据的位置以及所述文字词组的位置；

4、根据所述字段元素信息，得到以所述数据作为字段元素、所述字段元素对应的所述文字词组作为字段名称以及所述字段元素对应的字段描述；

5、获取并解析接口文档，得到各个接口字段，并与所述字段名称匹配，得到各个所述接口字段与各个所述字段元素的对应关系；

6、根据所述对应关系，得到所述字段元素对应的接口描述信息；

7、根据所述字段元素，以及所述字段元素对应的所述字段名称、所述字段描述、所述接口描述信息，生成字段列表；

8、根据所述字段元素信息和所述字段元素，将所述界面图片中的所述数据与所述字段列表中对应的所述字段元素进行连线，生成界面与字段对照关系图。

9、在一种可选的方式中，所述根据所述字段元素信息，得到以所述数据作为字段元素、所述字段元素对应的所述文字词组作为字段名称以及所述字段元素对应的字段描述，具体包括：

10、根据所述字段元素信息，遍历所述界面图片中每个所述数据，计算各所述数据的位置与各所述文字词组的位置的距离，将与第一数据距离最近且在预设距离阈值范围之内的所述文字词组，标记为所述第一数据对应的第一文字词组；所述第一数据为所述数据中的一个，所述第一文字词组为所述文字词组中的一个；

11、以所述数据作为所述字段元素，所述数据对应的文字词组作为所述字段元素对应的字段名称；

12、根据所述字段名称确定所述字段描述。

13、在一种可选的方式中，所述根据所述字段元素，以及所述字段元素对应的所述字段名称、所述字段描述、所述接口描述信息，生成字段列表，具体包括：

14、统计所述字段元素的数据，确定字段数量；

15、根据所述字段数量生成字段列表模板；

16、将所述字段元素及对应的所述字段名称、所述字段描述以及所述接口描述信息填入所述字段列表模板，得到所述字段列表。

17、在一种可选的方式中，所述获取并解析接口文档，得到各个接口字段，并与所述字段名称匹配，得到各个所述接口字段与各个所述字段元素的对应关系，所述方法具体包括：

18、当所述目标界面为已上线的界面时，获取所述目标界面对应的所述接口文档；

19、对所述接口文档进行解析，得到各个所述接口文档字段；

20、将各个所述接口文档字段与各个所述字段名称匹配，得到各个所述接口字段与各个所述字段元素的对应关系。

21、在一种可选的方式中，所述根据所述对应关系，得到所述字段元素对应的接口描述信息，还包括：

22、各个所述接口文档字段包括接口字段元素、接口字段名称、接口字段描述和所述接口描述信息；

23、根据所述对应关系，通过所述接口文档字段的所述接口字段元素、所述接口字段英文命名以及所述接口字段描述分别对所述字段元素、所述字段描述进行修正或补充。

24、在一种可选的方式中，所述根据所述字段元素信息和所述字段元素，将所述界面图片中的所述数据与所述字段列表中对应的所述字段元素进行连线，生成界面与字段对照关系图，具体包括：

25、将所述界面图片与所述字段列表展示在画布中；

26、根据所述界面图片中每个所述数据的位置，确定每个所述数据在所述画布中的位置；

27、确定所述字段列表中每个字段元素在画布中的位置；

28、根据每个所述数据在画布中的位置以及每个字段元素在所述画布中的位置，将所述界面图片中的所述数据与所述字段列表中对应的所述字段元素进行连线，生成所述界面与字段对照关系图；一所述字段元素对应一所述数据。

29、在一种可选的方式中，所述根据每个所述数据在所述画布中的位置以及每个字段元素在画布中的位置，将所述界面图片中的所述数据与所述字段列表中对应的所述字段元素进行连线，生成所述界面与字段对照关系图，具体包括：

30、根据每个所述数据在画布中的位置以及每个字段元素在所述画布中的位置，以所述字段列表中各所述字段元素的左边沿中点为所述连线的起点或终点，以所述界面图片中各所述数据上边沿中点、下边沿中点或右边沿中点作为所述连线的终点或起点，通过连线将所述界面图片中的所述数据与所述字段列表中对应的所述字段元素连接；所述连线为正交折线。

31、根据本发明实施例的另一方面，提供了一种界面与字段对照关系图生成装置，包括：

32、获取模块，用于获取目标界面对应的界面图片；

33、识别模块，用于识别所述界面图片中的数据、文字词组，以得到字段元素信息；所述字段元素信息包括数据、文字词组、所述数据的位置以及所述文字词组的位置；

34、提取模块，用于根据所述字段元素信息，得到以所述数据作为字段元素、所述字段元素对应的所述文字词组作为字段名称以及所述字段元素对应的字段描述；

35、解析模块，用于获取并解析接口文档，得到各个接口字段，并与所述字段名称匹配，得到各个所述接口字段与各个所述字段元素的对应关系；

36、数据补充模块，用于根据所述对应关系，得到所述字段元素对应的接口描述信息；

37、字段列表生成模块，用于根据所述字段元素，以及所述字段元素对应的所述字段名称、所述字段描述、所述接口描述信息，生成字段列表；

38、关系图生成模块，用于根据所述字段元素信息和所述字段元素，将所述界面图片中的所述数据与所述字段列表中对应的所述字段元素进行连线，生成界面与字段对照关系图。

39、根据本发明实施例的另一方面，提供了一种界面与字段对照关系图生成设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

40、所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行上述的界面与字段对照关系图生成方法的操作。

41、根据本发明实施例的另一方面，提供了一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一可执行指令，所述可执行指令在界面与字段对照关系图生成设备上运行时，使得界面与字段对照关系图生成设备执行上述的界面与字段对照关系图生成方法的操作。

42、本发明实施例通过获取目标界面的界面图片，通过对界面图片的解析得到字段列表，并建立界面图片各元素和字段列表各元素的对照关系连线，得到界面与字段对照关系图，将接口字段与界面元素清晰对应，能够帮助开发运维人员直观快速地了解界面各元素与接口服务之间的关系，有效减少前后端接口沟通时间，提高开发设计的效率，提高问题定位速度。

43、进一步地，本发明实施例通过建立包括字段描述和接口描述的字段列表，能够根据字段描述确定数据来源，根据接口描述确定界面的位置，方便生产问题排查以及快速判断界面数据的来源。

44、上述说明仅是本发明实施例技术方案的概述，为了能够更清楚了解本发明实施例的技术手段，而可依照说明书的内容予以实施，并且为了让本发明实施例的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。