CN115080039A - 前端代码生成方法、装置、计算机设备、存储介质和产品 - Google Patents

Abstract

本申请涉及一种前端代码生成方法、装置、计算机设备、存储介质和产品。涉及计算机技术领域，可用于金融科技领域或其他相关领域。该方法包括：从UI界面的需求文档中获取待开发组件的关键词，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件；针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段；针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段；根据第一代码片段及第二代码片段，生成与UI界面对应的前端代码，能够提高页面研发效率。

Description

前端代码生成方法、装置、计算机设备、存储介质和产品

技术领域

本申请涉及计算机技术领域，特别是涉及一种前端代码生成方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

随着软件行业的快速发展以及需求的日益增长，研发人员如何快速研发软件产品成为首要面临的问题，其中，一个软件产品中包括多个前端页面。

传统技术中，研发人员通过前端代码生成工具，对设计师设计的前端页面的UI界面设计图进行解析，得到前端页面的静态视觉代码；接着，再通过与产品经理和设计师的沟通确认该前端页面对应的业务逻辑，并根据所确认的业务逻辑，在该前端页面的静态视觉代码的基础上，完成对该前端页面的业务逻辑的开发，以此完成对该前端页面的开发；同样的操作，可以完成对软件产品的完整开发。

然而，现有的前端页面的开发过程，研发进程慢且研发效率低。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高前端页面研发效率的前端代码生成方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种前端代码生成方法。该方法包括：

从UI界面的需求文档中获取待开发组件的关键词，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件；

针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段；

针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段；

根据第一代码片段及第二代码片段，生成与UI界面对应的前端代码。

在其中一个实施例中，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件，包括：

将待开发组件的关键词与预设通用组件库中各个预设组件的关键词分别进行匹配，得到各个预设组件对应的第一匹配度；

在预设组件对应的第一匹配度大于或等于预设匹配度阈值，且获取到用于表征预设组件对应的通用组件功能不满足需求文档中对待开发组件的功能需求的指令的情况下，确定待开发组件为匹配失败的待开发组件；

在预设组件对应的第一匹配度小于预设匹配度阈值的情况下，确定待开发组件为匹配失败的待开发组件。

在其中一个实施例中，针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段，包括：

针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的多个候选业务规则；

将匹配失败的待开发组件的关键词与多个候选业务规则分别进行匹配，得到各个候选业务规则对应的第二匹配度；

将各个候选业务规则对应的第二匹配度中的最大匹配度对应的候选业务规则，作为匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段。

在其中一个实施例中，根据目标业务规则生成第一代码片段，包括：

根据目标业务规则，从预设通用方法库中确定与目标业务规则对应的第一目标方法；

根据目标业务规则和第一目标方法，生成第一代码片段。

在其中一个实施例中，针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段，包括：

针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的多个候选业务活动；

将匹配失败的待开发组件的关键词与各个候选业务活动分别进行匹配，得到各个候选业务活动对应的第三匹配度；

将各个候选业务活动对应的第三匹配度中的最大匹配度对应的候选业务活动，作为匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段。

在其中一个实施例中，根据目标业务活动生成第二代码片段，包括：

根据目标业务活动，从业务活动数据库中确定与目标业务活动对应的多个候选业务任务；

将待开发组件的关键词与各个候选业务任务分别进行匹配，从多个候选业务任务中确定目标业务任务；

根据目标业务任务，从业务活动数据库中确定与目标业务任务对应的多个候选业务步骤；

将待开发组件的关键词与各个候选业务步骤分别进行匹配，从多个候选业务步骤中确定目标业务步骤；

根据目标业务步骤生成第二代码片段。

在其中一个实施例中，根据目标业务步骤生成第二代码片段，包括：

根据目标业务步骤，从后端接口数据库中确定与目标业务步骤对应的目标接口；

根据目标接口，从预设通用方法库中确定与目标接口对应的第二目标方法；

根据目标接口和第二目标方法，生成第二代码片段。

在其中一个实施例中，将待开发组件的关键词与预设通用组件库中各个预设组件的关键词分别进行匹配，得到各个预设组件对应的第一匹配度，包括：

针对各个预设组件，将待开发组件的多个关键词分别与预设组件的关键词进行匹配，得到待开发组件的各个关键词分别与预设组件的匹配度；

根据待开发组件的各个关键词分别与预设组件的匹配度，及各个关键词的预设权重，计算待开发组件与预设组件之间的第一匹配度。

第二方面，本申请还提供了一种前端代码生成装置。该装置包括：

获取模块，用于从UI界面的需求文档中获取待开发组件的关键词，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件；

第一生成模块，用于针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段；

第二生成模块，用于针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段；

第三生成模块，用于根据第一代码片段及第二代码片段，生成与UI界面对应的前端代码。

第三方面，本申请还提供了一种计算机设备。该计算机设备包括存储器和处理器，该存储器存储有计算机程序，该处理器执行计算机程序时实现上述第一方面中任一项方法的步骤。

第四方面，本申请还提供了一种计算机可读存储介质。该计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述第一方面中任一项方法的步骤。

第五方面，本申请还提供了一种计算机程序产品，该计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述第一方面中任一项方法的步骤。

上述前端代码生成方法、装置、计算机设备、存储介质和计算机程序产品，从UI界面的需求文档中获取待开发组件的关键词，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件；针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段；针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段；最后，根据第一代码片段及第二代码片段，生成与UI界面对应的前端代码。也就是说，本申请实施例中的前端代码生成方法，不仅可以根据UI界面的需求文档获取到待开发组件对应的静态逻辑代码，而且也能够获取到待开发组件对应的后端交互逻辑代码，使得所生成的该UI界面的前端代码中已包括其所需的业务逻辑，进而使得研发人员基于本实施例中的生成的前端代码，对前端页面进行开发的过程中，无需再跟产品经理或者设计师确认页面的业务逻辑，降低沟通成本，以及降低研发人员的工作量重读率，节省人工研发成本，提高前端页面的研发进程，进而提高前端页面的研发效率。

附图说明

图1为一个实施例中前端代码生成方法的应用环境图；

图2为一个实施例中前端代码生成方法的流程示意图；

图3为另一个实施例中前端代码生成方法的流程示意图；

图4为另一个实施例中前端代码生成方法的流程示意图；

图5为另一个实施例中前端代码生成方法的流程示意图；

图6为另一个实施例中前端代码生成方法的流程示意图；

图7为另一个实施例中前端代码生成方法的流程示意图；

图8为另一个实施例中前端代码生成方法的流程示意图；

图9为一个实施例中前端代码生成方法的完整流程示意图；

图10为一个实施例中前端代码生成装置的结构框图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

随着软件行业的快速发展和需求日益增长，研发人员如何快速研发成为首要面临的问题。现今前端开发流程一般是产品经理提供需求文档、设计师出UI设计图、前端研发人员依据需求文档和UI设计图开发页面。目前业界已有根据UI设计图生成前端代码的工具，如imgCook，但这些工具仅仅生成的是静态视觉代码(如html、css)，不包含业务逻辑代码。因此在研发过程中，研发人员依然需要跟UI设计师以及产品经理确认业务逻辑，以此来完成业务页面的整体研发，这无疑拖延研发进程，降低研发效率。再者大多数页面展示都类似，前端研发人员工作量重复，研发效率低。

为了解决以上问题，本发明旨在通过提供一种结合前端代码生成工具和业务架构的前端代码生成方法，采用图形化界面，可由业务人员或产品经理操作，自动生成与业务逻辑相关联的代码，提供给前端研发人员。一方面能够缩短研发人员确认需求的过程，降低需求沟通成本；另一方面还能降低研发人员工作量重复率，节省人工研发成本，实现功能快速研发。

具体地，通过输入UI设计图及需求描述，智能生成视觉代码和处理逻辑代码片段，节省人工研发成本，降低对研发人员要求，提高需求研发效率。其中，D2C工具主要根据UI设计图输出对应的代码片段，但是仅仅通过视觉内容很容易缺失部分内容，比如交互逻辑、数据服务逻辑。因此本发明结合业务架构，在现有UI组件和前端代码片段关联关系之上，增加了UI组件和业务逻辑代码的关联关系，补充了D2C工具中缺失的内容，完善了视觉代码准确性，同时根据需求描述生成具体的业务逻辑代码，形成更完整的代码片段。

本发明通过这种前端代码生成方法，能够大大缩短研发人员确认需求的时间，降低需求沟通成本，同时节省人工研发成本，避免相似功能重复开发，实现功能快速研发，为前端开发人员提高研发效率。

本申请实施例提供的前端代码生成方法，可以应用于计算机设备中。其中，该计算机设备可以是终端或者服务器，在该计算机设备是终端的情况下，该计算机设备的内部结构图如图1所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种前端代码生成方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图1中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

可选地，该终端可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。

在一个实施例中，如图2所示，提供了一种前端代码生成方法，以该方法应用于图1中的计算机设备为例进行说明，包括以下步骤：

步骤201，从UI界面的需求文档中获取待开发组件的关键词，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件。

其中，该预设通用组件库中的通用组件，可以是由视觉代码和相应的处理逻辑形成的完整功能的代码块，以实现独立的功能，如搜索栏组件。该通用组件库中的通用组件的变动频率一般比较低，可以以现有的代码块为基础，由专业技术人员抽取通用组件，并对其设置详细的功能描述和配置信息，从而构建该预设通用组件库，其中，每个通用组件的功能描述可以作为各通用组件的关键词；另外，该预设通用组件库可以存储在计算机设备中，也可以存储在与计算机设备通信连接的其他设备中，还可以存储在云端等，本申请实施例对此并不做限定。

可选地，构建该预设通用组件库的系统框架可以包括：代码文件上传模块、文本输入模块和关联关系存储模块；其中，代码文件上传模块可以用于接收用户手动上传的代码文件，或者，基于用户上传的对组件的功能需求自动生成代码文件等；若上传成功，则可以返回与之对应的附件id，即在成功接收到代码文件后，可以为该代码文件设置对应的id；若上传不成功，则可以提醒用户“上传失败，请重新上传”。文本输入模块可以用于接收用户针对该代码文件手动键入的文字内容，并正确展示给用户，用户也可随机修改键入的内容。关联关系存储模块可以用于接收代码文件上传模块输出的代码文件的id和文本输入模块输出的该代码文件对应的文字内容，并建立两者的关联关系并进行数据库存储；以此来构建该预设通用组件库。

当用户需要生成某一前端页面对应的前端代码时，可以输入该前端页面对应的UI界面的需求文档，计算机设备在获取到该UI界面的需求文档之后，可以采用关键词抽取算法，将该需求文档中的需求描述拆分成多个关键词，该多个关键词可以对应至少一个待开发组件；可选地，用户可以直接输入需求文档，也可以输入UI界面对应的至少一个需求描述，计算机设备基于该至少一个需求描述生成该UI界面的需求文档。

接着，计算机设备在获取到至少一个待开发组件对应的关键词之后，可以针对每一个待开发组件，将该待开发组件的关键词与上述预设通用组件库中的每一个通用组件的关键词进行匹配，判断该预设通用组件库中是否存在与该待开发组件对应的通用组件；如果确定预设通用组件库中存在与该待开发组件对应的候选通用组件，那么可以获取该候选通用组件对应的代码块并渲染显示该候选通用组件，在用户确定该候选通用组件符合该UI界面的设计需求时，可以将该候选通用组件确定为该UI界面的一个目标组件。另一方面，如果确定预设通用组件库中不存在与该待开发组件对应的候选通用组件，那么可以将该待开发组件确定为匹配失败的待开发组件。

步骤202，针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段。

其中，该业务规则数据库中可以包括多个组件对应的业务规则列表，一个业务规则列表中包括多个业务规则，业务规则用于表示组件的控制逻辑；一个业务规则与一个组件可以形成一个符合特定规则的组件；例如：一个选择框组件与支持模糊搜索的业务规则，可以形成一个支持模糊搜索的选择框。可选地，可以基于现有业务架构流程模型，业务规则描述系统的控制逻辑，包括但不限于组件支持的数据类型(如组件仅能支持输入数字、或者可以支持数字、字母及字符)、组件的字数限制(如输入字数≤200字)等控制逻辑，构建该业务规则数据库。

具体地，针对每一个匹配失败的待开发组件，可以从该业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，进而，在确定出匹配失败的待开发组件对应的目标业务规则之后，可以根据该目标业务规则生成与该匹配失败的待开发组件对应的第一代码片段。可选地，可以先从该业务规则数据库中确定与该匹配失败的待开发组件对应的业务规则列表，接着再从该业务规则列表中确定出与该匹配失败的待开发组件对应的目标业务规则；可选地，可以根据该匹配失败的待开发组件的关键词，从该业务规则列表中确定出匹配度最高的业务规则，作为该匹配失败的待开发组件对应的目标业务规则。

可选地，在确定出目标业务规则之后，可以获取到具有该目标业务规则的待开发组件；计算机设备可以根据该目标业务规则对应的代码片段生成该待开发组件对应的第一代码片段，该第一代码片段经过渲染后即可得到具有该目标业务规则的待开发组件。

步骤203，针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段。

其中，该业务活动数据库中包括多个组件对应的业务活动列表，一个业务活动列表中包括至少一个业务活动，业务活动用于表示组件与后端的数据交互逻辑。可选地，可以基于现有业务架构流程模型及IT架构的对接，来确定不同组件对应的业务活动列表，进而构建得到该业务活动数据库。

具体地，针对每一个匹配失败的待开发组件，还可以从该业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，进而，在确定出匹配失败的待开发组件对应的目标业务活动之后，可以根据该目标业务活动生成与该匹配失败的待开发组件对应的第二代码片段。可选地，可以先从该业务活动数据库中确定与该匹配失败的待开发组件对应的业务活动列表，接着再从该业务活动列表中确定出与该匹配失败的待开发组件对应的目标业务活动；可选地，可以根据该匹配失败的待开发组件的关键词，从该业务活动列表中确定出匹配度最高的业务活动，作为该匹配失败的待开发组件对应的目标业务活动。

可选地，在确定出目标业务活动之后，计算机设备可以根据该目标业务活动对应的代码片段生成该待开发组件对应的第二代码片段，该第二代码片段经过渲染后即可得到能够与后端进行数据交互、获取后端数据的待开发组件。

步骤204，根据第一代码片段及第二代码片段，生成与UI界面对应的前端代码。

针对每一个匹配失败的待开发组件，在得到匹配失败的待开发组件对应的第一代码片段及第二代码片段之后，可以对该第一代码片段及第二代码片段进行融合处理，得到与该匹配失败的待开发组件对应的目标代码片段；接着，计算机设备可以根据各匹配失败的待开发组件对应的目标代码片段，和/或，各匹配成功的目标组件的代码片段，生成与该UI界面对应的前端代码。

也就是说，如果根据UI界面的需求文档从预设通用组件库中成功匹配到该UI界面所需的所有组件，那么就可以根据成功匹配到的各个目标组件的代码片段，生成与该UI界面对应的前端代码。如果根据UI界面的需求文档从预设通用组件库中成功匹配到该UI界面所需的部分组件，而对于匹配失败的另一部分组件，通过上述步骤得到各匹配失败的待开发组件对应的目标代码片段，那么就可以根据那些匹配成功到的目标组件的代码片段，和，那些匹配失败的待开发组件对应的目标代码片段，生成与该UI界面对应的前端代码。如果根据UI界面的需求文档从预设通用组件库中没有匹配到该UI界面所需的任何组件，对于各个匹配失败的待开发组件，通过上述步骤得到各匹配失败的待开发组件对应的目标代码片段，那么就可以根据各匹配失败的待开发组件对应的目标代码片段，生成与该UI界面对应的前端代码。

上述前端代码生成方法中，从UI界面的需求文档中获取待开发组件的关键词，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件；针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段；针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段；最后，根据第一代码片段及第二代码片段，生成与UI界面对应的前端代码。也就是说，本申请实施例中的前端代码生成方法，不仅可以根据UI界面的需求文档获取到待开发组件对应的静态逻辑代码，而且也能够获取到待开发组件对应的后端交互逻辑代码，使得所生成的该UI界面的前端代码中已包括其所需的业务逻辑，进而使得研发人员基于本实施例中的生成的前端代码，对前端页面进行开发的过程中，无需再跟产品经理或者设计师确认页面的业务逻辑，降低沟通成本，以及降低研发人员的工作量重读率，节省人工研发成本，提高前端页面的研发进程，进而提高前端页面的研发效率。

图3为另一个实施例中前端代码生成方法的流程示意图。本实施例涉及的是计算机设备将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件的一种可选的实现过程，在上述实施例的基础上，如图3所示，上述步骤201包括：

步骤301，将待开发组件的关键词与预设通用组件库中各个预设组件的关键词分别进行匹配，得到各个预设组件对应的第一匹配度。

其中，待开发组件的关键词可以包括至少一个，预设组件的关键词也可以包括至少一个。

可选地，在计算待开发组件与预设组件之间的第一匹配度时，可以分别计算待开发组件的每一个关键词与预设组件的每一个关键词之间的匹配度，进而根据各个匹配度的和来确定待开发组件与预设组件之间的第一匹配度；也可以将待开发组件的至少一个关键词形成第一关键词向量，将预设组件的至少一个关键词形成第二关键词向量，并计算第一关键词向量和第二关键词向量之间的匹配度，以此来得到待开发组件与预设组件之间的第一匹配度。

可选地，针对各个预设组件，可以将待开发组件的多个关键词分别与预设组件的关键词进行匹配，得到待开发组件的各个关键词分别与预设组件的匹配度；也就是说，可以计算待开发组件的一个关键词与预设组件的至少一个关键词之间的匹配度，得到待开发组件的一个关键词与预设组件的匹配度；接着，可以根据待开发组件的各个关键词分别与预设组件的匹配度，及待开发组件的各个关键词的预设权重，计算待开发组件与预设组件之间的第一匹配度。

可选地，待开发组件的各个关键词的预设权重可以采用现有的TextRank算法来确定，其中，TextRank算法是从匹配文本(UI界面的需求文档)本身抽取词汇，并利用局部词汇之间关系计算候选关键词权重，并进行排序，进一步在原始的匹配文本中标记，从而生成最终关键词，其结果中可以包括多个关键词或关键词组等。其中，候选关键词权重计算公式如公式(1)所示。

其中，WS(V_i)表示句子i的权重，右侧的求和表示每个相邻句子对本句子的贡献程度，在单文档中，可以粗略的认为所有句子都是相邻的，不需要像多文档一样进行多个窗口的生成和抽取，仅需单一文档窗口即可，W_ji表示两个句子的相似度，WS(V_j)代表上次迭代出的句子j的权重，d是阻尼系数，一般为0.85，In(V_i)表示V_i节点的集合，Out(V_j)表示V_j节点的集合。

根据上述公式可以确定出待开发组件的各个关键词分别对应的预设权重，接着，可以根据待开发组件的各个关键词分别与预设组件的匹配度，及待开发组件的各个关键词的预设权重，计算待开发组件与预设组件之间的第一匹配度，如公式(2)所示。

其中，MD表示待开发组件与预设组件之间的第一匹配度，MV表示待开发组件的关键词集合，WS(V_i)表示关键词V_i的预设权重，D(V_i)表示关键词V_i与预设组件的匹配度。若匹配的关键词个数相同时，匹配的关键词权重越高，则匹配度越高；若匹配的关键词权重相同时，匹配的关键词越多，则匹配度越高；匹配度越高，表示待开发组件与预设组件之间的关联性越强。

步骤302，在预设组件对应的第一匹配度大于或等于预设匹配度阈值，且获取到用于表征预设组件对应的通用组件功能不满足需求文档中对待开发组件的功能需求的指令的情况下，确定待开发组件为匹配失败的待开发组件。

可选地，计算机设备在确定出待开发组件与预设通用组件库中的各个预设组件之间的第一匹配度之后，可以根据预设匹配度阈值，筛选出第一匹配度大于或等于该预设匹配度阈值的预设组件，并将这些预设组件渲染至显示界面，以便用户确认这些预设组件是否满足该UI界面的实际需求。如果用户确定预设组件对应的通用组件功能满足需求文档中对待开发组件的功能需求，那么可以确定匹配成功，计算机设备可以将用户确定的满足需求文档中对待开发组件的功能需求的预设组件确定为该UI界面的一个目标组件。

如果用户确定预设组件对应的通用组件功能不满足需求文档中对待开发组件的功能需求的情况下，那么可以确定该待开发组件为匹配失败的待开发组件，并进一步对该匹配失败的待开发组件进行编辑，以得到满足用户需求的组件。

步骤303，在预设组件对应的第一匹配度小于预设匹配度阈值的情况下，确定待开发组件为匹配失败的待开发组件。

另一方面，如果预设组件对应的第一匹配度小于预设匹配度阈值，则可以直接确定该待开发组件为匹配失败的待开发组件。

可选地，这种情况下，计算机设备可以判断用户是否已上传该UI界面对应的UI设计图，若已上传，则可以采用现有的前端代码生成工具(如现有sketch中的imgcook插件)，对该UI设计图进行解析，得到多个组件；接着，计算机设备还可以根据匹配失败的待开发组件对应的关键词，从该多个组件中确定与该关键词对应的组件作为该待开发组件。

若用户没有上传该UI界面对应的UI设计图，可以输出提示信息，以提示用户上传UI设计图；例如：可以以页面弹窗的方式，弹出提示窗口，该提示窗口的提示内容可以为“请补充上传UI图”。进一步地，计算机设备可以接收用户上传的UI设计图，并对该UI设计图进行解析，得到多个组件，以及可以根据匹配失败的待开发组件对应的关键词，从该多个组件中确定与该关键词对应的组件作为该待开发组件。可选地，计算机设备也可以将解析到的多个组件都渲染到显示界面中，供用户查看和进行相关处理操作。

本实施例中，将待开发组件的关键词与预设通用组件库中各个预设组件的关键词分别进行匹配，得到各个预设组件对应的第一匹配度；在预设组件对应的第一匹配度大于或等于预设匹配度阈值，且用户确定预设组件对应的通用组件功能不满足需求文档中对待开发组件的功能需求的情况下，确定待开发组件为匹配失败的待开发组件；在预设组件对应的第一匹配度小于预设匹配度阈值的情况下，确定待开发组件为匹配失败的待开发组件；能够提高对待开发组件的识别准确性，提高待开发组件与用户开发需求的匹配度，提高用户体验。

图4为另一个实施例中前端代码生成方法的流程示意图。本实施例涉及的是计算机设备针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段的一种可选的实现过程，在上述实施例的基础上，如图4所示，上述步骤202包括：

步骤401，针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的多个候选业务规则。

其中，该业务规则数据库中包括多个组件对应的业务规则列表，每个业务规则列表中包括多个业务规则。

步骤402，将匹配失败的待开发组件的关键词与多个候选业务规则分别进行匹配，得到各个候选业务规则对应的第二匹配度。

可选地，这里对于匹配失败的待开发组件与各个候选业务规则之间的第二匹配度的计算方式，可以参照上述步骤301中对待开发组件与预设组件的第一匹配度的计算方式，在此不再进行相关内容描述。

步骤403，将各个候选业务规则对应的第二匹配度中的最大匹配度对应的候选业务规则，作为匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段。

本实施例中，针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的多个候选业务规则，并将匹配失败的待开发组件的关键词与多个候选业务规则分别进行匹配，得到各个候选业务规则对应的第二匹配度；接着，将各个候选业务规则对应的第二匹配度中的最大匹配度对应的候选业务规则，作为匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段；能够提高第一代码片段的匹配度，提高静态逻辑代码的准确性。

在本申请的一个可选的实施例中，在上述步骤403之后，该方法还可以包括：将所生成的第一代码片段渲染至显示界面，以显示具有该目标业务规则的待开发组件，以便用户确定其是否满足开发需求；如果用户确定具有该目标业务规则的待开发组件不满足开发需求，用户也可以自定义该待开发组件的静态逻辑。

可选地，在上述步骤402中，计算机设备可以得到匹配失败的待开发组件与各个候选业务规则对应的第二匹配度，接着，计算机设备可以按照降序的排列方式，将第二匹配度从高到低，对各个候选业务规则进行排序，并将排序后的各个候选业务规则输出至显示界面进行显示；例如：可以将各个候选业务规则按照第二匹配度的高低排序展示在显示界面的左侧，以便于用户可以基于该排序列表选择所需的业务规则；进而，计算机设备可以根据用户所选择的业务规则，生成该待开发组件对应的新的第一代码片段。

本实施例中，计算机设备可以将与该待开发组件对应的各个候选业务规则按照第二匹配度的高低输出显示，并根据用户选择的业务规则生成该待开发组件对应的新的第一代码片段，大大提高了前端代码生成的交互性、灵活性以及可扩展性，提高了用户体验，还能提高后期代码维护的便捷性和可操作性。

图5为另一个实施例中前端代码生成方法的流程示意图。本实施例涉及的是计算机设备根据目标业务规则生成第一代码片段的一种可选的实现过程，在上述实施例的基础上，如图5所示，上述步骤403包括：

步骤501，根据目标业务规则，从预设通用方法库中确定与目标业务规则对应的第一目标方法。

其中，该预设通用方法库中的通用方法可以是一些通用组件或者通用模块的常用的逻辑处理代码段，如防抖函数、接口交互函数等。该通用方法库中的通用方法的变动频率一般比较低，可以以现有的代码块为基础，由专业技术人员抽取通用方法，并对其设置详细的功能描述和配置信息，从而构建该预设通用方法库。另外，该预设通用方法库可以存储在计算机设备中，也可以存储在与计算机设备通信连接的其他设备中，还可以存储在云端等，本申请实施例对此并不做限定。

可选地，构建预设通用方法库的系统框架和构建流程可以参照上述步骤201中构建预设通用组件库的系统框架和构建流程，以此来得到包括了多个通用方法的代码文件与其功能描述的关联关系的预设通用方法库，在此不再详细赘述。

具体地，计算机设备可以将目标业务规则的规则内容，与预设通用方法库中的各个方法的功能描述信息进行匹配，得到与目标业务规则对应的至少一个第一目标方法；可选地，计算机设备可以根据目标业务规则与各个方法的匹配度，将匹配度大于或等于预设阈值的方法作为该第一目标方法。

步骤502，根据目标业务规则和第一目标方法，生成第一代码片段。

可选地，计算机设备在确定出与目标业务规则对应的第一目标方法之后，可以从该预设通用方法库中获取该第一目标方法对应的代码段，进而，根据该第一目标方法对应的代码段生成第一代码片段。可选地，在该第一目标方法包括多个的情况下，可以将各个第一目标方法对应的代码段进行融合或者拼接处理，生成该第一代码片段。可选地，计算机设备还可以将该第一代码片段与该目标业务规则进行关联，并存储该关联关系，以便后续查找使用，以此来提高代码片段的生成效率。

本实施例中，根据目标业务规则，从预设通用方法库中确定与目标业务规则对应的第一目标方法，并根据目标业务规则和第一目标方法，生成第一代码片段；由此一来，无需为每个目标业务规则预先设置固定的代码片段，能够降低研发人员的工作量，还能减少计算机设备的存储容量，提高计算机设备的工作效率，另外，还能灵活生成业务规则对应的不同的第一代码片段，提高开发的灵活性。

图6为另一个实施例中前端代码生成方法的流程示意图。本实施例涉及的是计算机设备针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段的一种可选的实现过程，在上述实施例的基础上，如图6所示，上述步骤203包括：

步骤601，针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的多个候选业务活动。

其中，该业务活动数据库中包括多个组件对应的业务活动列表，每个组件对应的业务活动列表中包括至少一个业务活动，每个业务活动对应有相关功能描述信息，用于与组件进行匹配。

可选地，基于上述业务活动数据库，对于匹配失败的待开发组件，可以从业务活动数据库中确定与匹配失败的待开发组件对应的多个候选业务活动，即确定出与匹配失败的待开发组件对应的业务活动列表，该业务活动列表中的各个业务活动即为候选业务活动。

步骤602，将匹配失败的待开发组件的关键词与各个候选业务活动分别进行匹配，得到各个候选业务活动对应的第三匹配度。

可选地，可以将匹配失败的待开发组件的关键词与各个候选业务活动的功能描述信息进行匹配，得到匹配失败的待开发组件与各个候选业务活动分别对应的第三匹配度；其中，对于第三匹配度的计算方式可以参照上述步骤301中待开发组件与预设组件的第一匹配度的计算方式，在此不再赘述。

步骤603，将各个候选业务活动对应的第三匹配度中的最大匹配度对应的候选业务活动，作为匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段。

本实施例中，针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的多个候选业务活动；将匹配失败的待开发组件的关键词与各个候选业务活动分别进行匹配，得到各个候选业务活动对应的第三匹配度；将各个候选业务活动对应的第三匹配度中的最大匹配度对应的候选业务活动，作为匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段；能够提高第二代码片段的匹配度，提高交互逻辑代码的准确性。

图7为另一个实施例中前端代码生成方法的流程示意图。本实施例涉及的是计算机设备根据目标业务活动生成第二代码片段的一种可选的实现过程，在上述实施例的基础上，如图7所示，上述步骤603包括：

步骤701，根据目标业务活动，从业务活动数据库中确定与目标业务活动对应的多个候选业务任务。

其中，该业务活动数据库中包括至少一个组件对应的业务活动列表，每个组件对应的业务活动列表中包括至少一个业务活动；可选地，每个业务活动可以对应有业务任务列表，该业务任务列表中可以包括至少一个业务任务；再接着，每个业务任务还可以对应有业务步骤列表，该业务步骤列表中可以包括至少一个业务步骤；需要说明的是，业务活动、业务任务和业务步骤可以是一个组件对应的用于体现不同层次的业务逻辑的划分，用于对业务逻辑进行细分，且业务步骤是业务处理流程的详细体现。另外，在该业务活动数据库中，对于每个业务活动、每个业务任务以及每个业务步骤均对应有相关功能描述信息，用于与组件进行匹配。

可选地，计算机设备在确定出匹配失败的待开发组件对应的目标业务活动之后，可以进一步地，根据该业务活动数据库，确定出与该目标业务活动对应的业务任务列表，并将该业务任务列表中的各个业务任务作为与目标业务活动对应的多个候选业务任务。

步骤702，将待开发组件的关键词与各个候选业务任务分别进行匹配，从多个候选业务任务中确定目标业务任务。

可选地，可以将待开发组件的关键词与各个候选业务任务的功能描述信息进行匹配，得到待开发组件与各个候选业务任务分别对应的第四匹配度；其中，对于第四匹配度的计算方式可以参照上述步骤301中待开发组件与预设组件的第一匹配度的计算方式，在此不再赘述。

可选地，计算机设备可以将各个候选业务任务对应的第四匹配度中的最大匹配度对应的候选业务任务，作为匹配失败的待开发组件对应的目标业务任务。

步骤703，根据目标业务任务，从业务活动数据库中确定与目标业务任务对应的多个候选业务步骤。

进一步地，计算机设备还可以根据该业务活动数据库，确定出与该目标业务任务对应的业务步骤列表，并将该业务步骤列表中的各个业务步骤作为与目标业务任务对应的多个候选业务步骤。

步骤704，将待开发组件的关键词与各个候选业务步骤分别进行匹配，从多个候选业务步骤中确定目标业务步骤。

可选地，可以将待开发组件的关键词与各个候选业务步骤的功能描述信息进行匹配，得到待开发组件与各个候选业务步骤分别对应的第五匹配度；其中，对于第五匹配度的计算方式可以参照上述步骤301中待开发组件与预设组件的第一匹配度的计算方式，在此不再赘述。

可选地，计算机设备可以将各个候选业务步骤对应的第五匹配度中的最大匹配度对应的候选业务步骤，作为匹配失败的待开发组件对应的目标业务步骤。

步骤705，根据目标业务步骤生成第二代码片段。

本实施例中，根据目标业务活动，从业务活动数据库中确定与目标业务活动对应的多个候选业务任务；将待开发组件的关键词与各个候选业务任务分别进行匹配，从多个候选业务任务中确定目标业务任务；根据目标业务任务，从业务活动数据库中确定与目标业务任务对应的多个候选业务步骤；将待开发组件的关键词与各个候选业务步骤分别进行匹配，从多个候选业务步骤中确定目标业务步骤；根据目标业务步骤生成第二代码片段；通过层层匹配最终得到与该匹配失败的待开发组件对应的目标业务步骤，并生成与该匹配失败的待开发组件对应的第二代码片段，能够大大提高第二代码片段的匹配度，提高交互逻辑代码的准确性。

在本申请的一个可选的实施例中，基于上述图6和图7所示的实施例，该方法还可以包括：将所生成的第二代码片段渲染至显示界面，以得到具有交互逻辑的待开发组件，以便用户确定其是否满足开发需求；如果用户确定具有交互逻辑的待开发组件不满足开发需求，用户也可以自定义该待开发组件的交互逻辑。

可选地，在上述步骤602中，计算机设备可以得到匹配失败的待开发组件与各个候选业务活动对应的第三匹配度，接着，计算机设备可以按照降序的排列方式，将第三匹配度从高到低，对各个候选业务活动进行排序，并将排序后的各个候选业务活动输出至显示界面进行显示；例如：可以将各个候选业务活动按照第三匹配度的高低排序展示在显示界面的右侧，以便于用户可以基于该排序列表选择所需的业务活动。

进一步地，计算机设备可以根据用户所选择的业务活动，从业务活动数据库中确定与用户所选择的业务活动对应的多个候选业务任务，并将待开发组件的关键词与这些候选业务任务的功能描述信息进行匹配，得到待开发组件与这些候选业务任务分别对应的第四匹配度；接着，计算机设备可以根据该第四匹配度，对用户所选择的业务活动对应的多个候选业务任务进行降序排序，并输出显示在显示界面的右侧，这里降序排序的多个候选业务任务可以作为用户所选择的业务活动的下级列表进行显示。

至此，用户可以从与该用户所选择的业务活动对应的多个候选业务任务中选择业务任务。

同理，计算机设备可以根据用户所选择的业务任务，从业务活动数据库中确定与用户所选择的业务任务对应的多个候选业务步骤，并将待开发组件的关键词与这些候选业务步骤的功能描述信息进行匹配，得到待开发组件与这些候选业务步骤分别对应的第五匹配度；接着，计算机设备可以根据该第五匹配度，对用户所选择的业务任务对应的多个候选业务步骤进行降序排序，并输出显示在显示界面的右侧，这里降序排序的多个候选业务步骤可以作为用户所选择的业务任务的下级列表进行显示。

至此，用户可以从与该用户所选择的业务任务对应的多个候选业务步骤中选择业务步骤。

最后，计算机设备可以根据用户所选择的业务步骤生成第二代码片段。

本实施例中，计算机设备可以将与该待开发组件对应的各个候选业务活动按照第三匹配度的高低输出显示，根据用户选择的业务活动重新确定候选业务任务，并可以将这些候选业务任务按照第四匹配度的高低输出显示，以便用户自定义选择想要的业务任务；接着，根据用户选择的业务任务重新确定候选业务步骤，并可以将这些候选业务步骤按照第五匹配度的高低输出显示，以便用户自定义选择想要的业务步骤；最后，根据用户自定义选择的业务步骤来生成新的第二代码片段，大大提高了前端代码生成的交互性、灵活性以及可扩展性，提高了用户体验，还能提高后期代码维护的便捷性和可操作性。

图8为另一个实施例中前端代码生成方法的流程示意图。本实施例涉及的是计算机设备根据目标业务步骤生成第二代码片段的一种可选的实现过程，在上述实施例的基础上，如图8所示，上述步骤705包括：

步骤801，根据目标业务步骤，从后端接口数据库中确定与目标业务步骤对应的目标接口。

其中，该后端接口数据库中包括多个业务步骤对应的后端接口，业务步骤可以对应IT架构中的ACS(Application Controller Service，应用控制器服务)，ACS对应一个后端接口服务，该后端接口服务需调用后端接口，一个ACS可以对应至少一个后端接口；在实际应用中，一个业务步骤可以对应多个ACS，即一个业务步骤可以对应多个不同的后端接口，多个业务步骤也可以对应一个ACS，即多个业务步骤可以对应至少一个相同的后端接口。可选地，该后端接口数据库可以基于现有业务架构流程模型及IT架构进行预先构建，从而能够获取与后端的交互逻辑。

步骤802，根据目标接口，从预设通用方法库中确定与目标接口对应的第二目标方法。

其中，该预设通用方法库可以为上述步骤501中的预设通用方法库。

可选地，可以根据该目标接口的接口信息，与预设通用方法库中的各个方法的功能描述信息进行匹配，得到与该目标接口对应的至少一个第二目标方法；可选地，计算机设备可以根据目标接口与各个方法的匹配度，将匹配度大于或等于预设阈值的方法作为该第二目标方法。可选地，该目标接口的接口信息包括但不限于接口中文名称、接口英文名称、接口定义等，

步骤803，根据目标接口和第二目标方法，生成第二代码片段。

可选地，计算机设备在确定出与目标接口对应的第二目标方法之后，可以从该预设通用方法库中获取该第二目标方法对应的代码段，进而，根据该第二目标方法对应的代码段生成第二代码片段。可选地，在该第二目标方法包括多个的情况下，可以将各个第二目标方法对应的代码段进行融合或者拼接处理，生成该第二代码片段。可选地，计算机设备还可以将该第二代码片段与该目标接口进行关联，并存储该关联关系，以便后续查找使用，以此来提高代码片段的生成效率。

本实施例中，根据目标业务步骤，从后端接口数据库中确定与目标业务步骤对应的目标接口；根据目标接口，从预设通用方法库中确定与目标接口对应的第二目标方法；根据目标接口和第二目标方法，生成第二代码片段；由此一来，无需为每个目标接口预先设置固定的代码片段，能够降低研发人员的工作量，还能减少计算机设备的存储容量，提高计算机设备的工作效率，另外，还能灵活生成目标接口对应的不同的第二代码片段，提高开发的灵活性。

在本申请的一个可选的实施例中，提供了一种前端代码生成方法的完整流程示意图，如图9所示；包括以下步骤：

步骤901：用户在文本框中键入UI界面的需求描述。

步骤902：根据预设的关键词抽取算法，将需求描述拆分出对应的关键词，并对关键词设置权重。

步骤903：接收步骤902中生成的关键词，在预设通用组件库中，精确匹配组件功能描述字段。

步骤904：判断是否存在对应的组件，若匹配到对应的通用组件，则转到步骤905；若没有，则转到步骤906。

步骤905：页面展示出由代码块生成的组件，用户判断是否符合其要求，若符合要求，可直接导出代码，若不符合，则可继续编辑，即跳转至步骤910。

步骤906：判断用户是否已上传UI设计图，若已上传，则转到步骤909。若未上传，则转到步骤907。

步骤907：页面弹出弹窗，提示用户“请补充上传UI图”。

步骤908：用户上传UI设计图。

步骤909：基于现有sketch中imgcook插件将设计原稿解析成为一个个初始组件(也可以是初始控件元素)，并渲染在页面中间。

步骤910：针对每一个初始组件，用户单击一初始组件。

步骤911：基于上述业务规则数据库，获取与用户点击的初始组件所关联的所有业务规则，并赋值给规则列表，依据步骤902中拆分出的所有候选关键词与规则列表中的每个规则中规则描述字段，进行关键词匹配，分别计算匹配度。按照匹配度高低排序展示在页面左侧，其中获取到匹配度最高的规则进行步骤912处理。

步骤912：对该初始组件增加匹配度最高的规则，确定出匹配度最高的规则对应的组件，并返回对应的代码片段。

步骤913：根据匹配度系数最高的规则中的规则描述字段，在预设通用方法库中匹配对应的方法，若搜索到对应的方法，则返回该代码片段，以作为该组件涉及到的逻辑处理。

步骤914：将初始组件对应的代码段、匹配度系数最高的规则对应的该组件的代码段、以及与该匹配度系数最高的规则对应的方法的代码段惊醒拼接，并展示给用户。

步骤915：若用户觉得符合其要求，则点击确定，生成符合逻辑要求的组件。

若用户觉得当前代码不符合其要求，则用户可从页面左侧规则列表中，选择其中一条规则，转步骤912，为该初始组件增加用户所选择的规则。

步骤916：针对用户所选择的初始组件，从业务活动数据库中获取与该初始组件对应的所有业务活动，并赋值给业务活动列表，依据步骤902中拆分出的关键词与业务活动列表中每个活动中的活动名称字段，进行关键词匹配，计算匹配度系数，按照匹配度系数高低排序展示在页面右侧。

步骤917：依据步骤916所获得的具有匹配度的业务活动列表，确定匹配度最高的业务活动，并自动获取其所关联的业务任务，并赋值业务任务列表。依据步骤902中拆分出的关键词与业务任务列表每个任务中任务名称字段，进行关键词匹配，计算匹配度系数，按照匹配度高低排序展示在页面右侧。

步骤918：依据步骤917所获得的具有匹配度的业务任务列表，确定匹配度最高的业务任务，并自动获取其所关联的业务步骤，并赋值业务步骤列表。依据步骤902中拆分出的关键词与业务步骤列表中每个步骤，进行关键词匹配，计算匹配度系统，按照匹配度高低排序展示在页面右侧；其中获取到匹配度最高的业务步骤进行步骤919处理。

步骤919：在上述后端接口数据库中匹配到对应的后端接口，并为该初始组件添加交互事件，从预设通用方法库中提取交互方法(用于调用后端接口的方法)，从而拼接生成该初始组件与后端的交互代码。

步骤920：若用户觉得符合其要求，则点击确定；若用户觉得当前代码不符合其要求，则用户可依次选择业活动、业务任务、业务步骤，最终确定一个业务步骤，并转步骤919。

步骤921：若用户确定了步骤915中符合逻辑要求的组件，以及确定了步骤920中具有后端交互逻辑的组件，则自动导出所生成的代码，作为用户所选择的该初始组件的代码。

基于上述同样的步骤，用户可以选择其他需要编辑的组件，对其进行编辑，生成每个组件对应的代码，最后，基于用户确定的每个组件的代码，生成该UI界面的前端代码。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的前端代码生成方法的前端代码生成装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个前端代码生成装置实施例中的具体限定可以参见上文中对于前端代码生成方法的限定，在此不再赘述。

在一个实施例中，如图10所示，提供了一种前端代码生成装置，包括：获取模块1001、第一生成模块1002、第二生成模块1003和第三生成模块1004模块，其中：

获取模块1001，用于从UI界面的需求文档中获取待开发组件的关键词，将待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件。

第一生成模块1002，用于针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段。

第二生成模块1003，用于针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段。

第三生成模块1004，用于根据第一代码片段及第二代码片段，生成与UI界面对应的前端代码。

在其中一个实施例中，获取模块1001包括获取单元、第一确定单元和第二确定单元；其中，获取单元，用于将待开发组件的关键词与预设通用组件库中各个预设组件的关键词分别进行匹配，得到各个预设组件对应的第一匹配度；第一确定单元，用于在预设组件对应的第一匹配度大于或等于预设匹配度阈值，且获取到用于表征预设组件对应的通用组件功能不满足需求文档中对待开发组件的功能需求的指令的情况下，确定待开发组件为匹配失败的待开发组件；第二确定单元，用于在预设组件对应的第一匹配度小于预设匹配度阈值的情况下，确定待开发组件为匹配失败的待开发组件。

在其中一个实施例中，第一生成模块1002包括第三确定单元、第二获取单元和第一生成单元；其中，第三确定单元，用于针对匹配失败的待开发组件，从业务规则数据库中确定与匹配失败的待开发组件对应的多个候选业务规则；第二获取单元，用于将匹配失败的待开发组件的关键词与多个候选业务规则分别进行匹配，得到各个候选业务规则对应的第二匹配度；第一生成单元，用于将各个候选业务规则对应的第二匹配度中的最大匹配度对应的候选业务规则，作为匹配失败的待开发组件对应的目标业务规则，并根据目标业务规则生成第一代码片段。

在其中一个实施例中，第一生成单元，具体用于根据目标业务规则，从预设通用方法库中确定与目标业务规则对应的第一目标方法；并根据目标业务规则和第一目标方法，生成第一代码片段。

在其中一个实施例中，第三生成模块1004包括第四确定单元、第三获取单元和第二生成单元；其中，第四确定单元，用于针对匹配失败的待开发组件，从业务活动数据库中确定与匹配失败的待开发组件对应的多个候选业务活动；第三获取单元，用于将匹配失败的待开发组件的关键词与各个候选业务活动分别进行匹配，得到各个候选业务活动对应的第三匹配度；第二生成单元，用于将各个候选业务活动对应的第三匹配度中的最大匹配度对应的候选业务活动，作为匹配失败的待开发组件对应的目标业务活动，并根据目标业务活动生成第二代码片段。

在其中一个实施例中，第二生成单元，具体用于根据目标业务活动，从业务活动数据库中确定与目标业务活动对应的多个候选业务任务，将待开发组件的关键词与各个候选业务任务分别进行匹配，从多个候选业务任务中确定目标业务任务；接着，根据目标业务任务，从业务活动数据库中确定与目标业务任务对应的多个候选业务步骤，将待开发组件的关键词与各个候选业务步骤分别进行匹配，从多个候选业务步骤中确定目标业务步骤；进而，根据目标业务步骤生成第二代码片段。

在其中一个实施例中，第二生成单元，具体用于根据目标业务步骤，从后端接口数据库中确定与目标业务步骤对应的目标接口；根据目标接口，从预设通用方法库中确定与目标接口对应的第二目标方法；根据目标接口和第二目标方法，生成第二代码片段。

在其中一个实施例中，上述获取单元，具体用于针对各个预设组件，将待开发组件的多个关键词分别与预设组件的关键词进行匹配，得到待开发组件的各个关键词分别与预设组件的匹配度；根据待开发组件的各个关键词分别与预设组件的匹配度，及各个关键词的预设权重，计算待开发组件与预设组件之间的第一匹配度。

上述前端代码生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各实施例中的前端代码生成方法的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各实施例中的前端代码生成方法的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各实施例中的前端代码生成方法的步骤。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (12)

1.一种前端代码生成方法，其特征在于，所述方法包括：

从UI界面的需求文档中获取待开发组件的关键词，将所述待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件；

针对所述匹配失败的待开发组件，从业务规则数据库中确定与所述匹配失败的待开发组件对应的目标业务规则，并根据所述目标业务规则生成第一代码片段；

针对所述匹配失败的待开发组件，从业务活动数据库中确定与所述匹配失败的待开发组件对应的目标业务活动，并根据所述目标业务活动生成第二代码片段；

根据所述第一代码片段及所述第二代码片段，生成与所述UI界面对应的前端代码。

2.根据权利要求1所述的方法，其特征在于，所述将所述待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件，包括：

将所述待开发组件的关键词与预设通用组件库中各个预设组件的关键词分别进行匹配，得到各个所述预设组件对应的第一匹配度；

若所述预设组件对应的第一匹配度大于或等于所述预设匹配度阈值，且获取到用于表征所述预设组件对应的通用组件功能不满足所述需求文档中对所述待开发组件的功能需求的指令，则确定所述待开发组件为匹配失败的待开发组件；

若所述预设组件对应的第一匹配度小于所述预设匹配度阈值，则确定所述待开发组件为匹配失败的待开发组件。

3.根据权利要求1所述的方法，其特征在于，所述针对所述匹配失败的待开发组件，从业务规则数据库中确定与所述匹配失败的待开发组件对应的目标业务规则，并根据所述目标业务规则生成第一代码片段，包括：

针对所述匹配失败的待开发组件，从业务规则数据库中确定与所述匹配失败的待开发组件对应的多个候选业务规则；

将所述匹配失败的待开发组件的关键词与所述多个候选业务规则分别进行匹配，得到各个所述候选业务规则对应的第二匹配度；

将各个所述候选业务规则对应的第二匹配度中的最大匹配度对应的候选业务规则，作为所述匹配失败的待开发组件对应的目标业务规则，并根据所述目标业务规则生成第一代码片段。

4.根据权利要求3所述的方法，其特征在于，所述根据所述目标业务规则生成第一代码片段，包括：

根据所述目标业务规则，从预设通用方法库中确定与所述目标业务规则对应的第一目标方法；

根据所述目标业务规则和所述第一目标方法，生成所述第一代码片段。

5.根据权利要求1所述的方法，其特征在于，所述针对所述匹配失败的待开发组件，从业务活动数据库中确定与所述匹配失败的待开发组件对应的目标业务活动，并根据所述目标业务活动生成第二代码片段，包括：

针对所述匹配失败的待开发组件，从业务活动数据库中确定与所述匹配失败的待开发组件对应的多个候选业务活动；

将所述匹配失败的待开发组件的关键词与各个所述候选业务活动分别进行匹配，得到各个所述候选业务活动对应的第三匹配度；

将各个所述候选业务活动对应的第三匹配度中的最大匹配度对应的候选业务活动，作为所述匹配失败的待开发组件对应的目标业务活动，并根据所述目标业务活动生成第二代码片段。

6.根据权利要求5所述的方法，其特征在于，所述根据所述目标业务活动生成第二代码片段，包括：

根据所述目标业务活动，从业务活动数据库中确定与所述目标业务活动对应的多个候选业务任务；

将所述待开发组件的关键词与各个所述候选业务任务分别进行匹配，从所述多个候选业务任务中确定目标业务任务；

根据所述目标业务任务，从业务活动数据库中确定与所述目标业务任务对应的多个候选业务步骤；

将所述待开发组件的关键词与各个所述候选业务步骤分别进行匹配，从所述多个候选业务步骤中确定目标业务步骤；

根据所述目标业务步骤生成所述第二代码片段。

7.根据权利要求6所述的方法，其特征在于，所述根据所述目标业务步骤生成所述第二代码片段，包括：

根据所述目标业务步骤，从后端接口数据库中确定与所述目标业务步骤对应的目标接口；

根据所述目标接口，从预设通用方法库中确定与所述目标接口对应的第二目标方法；

根据所述目标接口和所述第二目标方法，生成所述第二代码片段。

8.根据权利要求2所述的方法，其特征在于，所述将所述待开发组件的关键词与预设通用组件库中各个预设组件的关键词分别进行匹配，得到各个所述预设组件对应的第一匹配度，包括：

针对各个所述预设组件，将所述待开发组件的多个关键词分别与所述预设组件的关键词进行匹配，得到所述待开发组件的各个关键词分别与所述预设组件的匹配度；

根据所述待开发组件的各个关键词分别与所述预设组件的匹配度，及各个关键词的预设权重，计算所述待开发组件与所述预设组件之间的第一匹配度。

9.一种前端代码生成装置，其特征在于，所述装置包括：

获取模块，用于从UI界面的需求文档中获取待开发组件的关键词，将所述待开发组件的关键词与预设通用组件库中预设组件的关键词进行匹配，获取匹配失败的待开发组件；

第一生成模块，用于针对所述匹配失败的待开发组件，从业务规则数据库中确定与所述匹配失败的待开发组件对应的目标业务规则，并根据所述目标业务规则生成第一代码片段；

第二生成模块，用于针对所述匹配失败的待开发组件，从业务活动数据库中确定与所述匹配失败的待开发组件对应的目标业务活动，并根据所述目标业务活动生成第二代码片段；

第三生成模块，用于根据所述第一代码片段及所述第二代码片段，生成与所述UI界面对应的前端代码。

10.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8中任一项所述的方法的步骤。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至8中任一项所述的方法的步骤。

12.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至8中任一项所述的方法的步骤。

Images