CN115543292A - 前端代码生成方法及装置 - Google Patents

前端代码生成方法及装置 Download PDF

Info

Publication number
CN115543292A
CN115543292A CN202211279613.4A CN202211279613A CN115543292A CN 115543292 A CN115543292 A CN 115543292A CN 202211279613 A CN202211279613 A CN 202211279613A CN 115543292 A CN115543292 A CN 115543292A
Authority
CN
China
Prior art keywords
component
end code
flow chart
instruction
generating
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211279613.4A
Other languages
English (en)
Inventor
韩萍
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Bank of China Ltd
Original Assignee
Bank of China Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Bank of China Ltd filed Critical Bank of China Ltd
Priority to CN202211279613.4A priority Critical patent/CN115543292A/zh
Publication of CN115543292A publication Critical patent/CN115543292A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明实施例公开了一种前端代码生成方法及装置，可用于金融领域或其他技术领域，该方法包括：在接收到用户的前端代码组件选择指令时，将所述前端代码组件选择指令对应前端代码组件添加到预设的流程图绘制界面；在接收到用户的组件连接指令时，对所述流程图绘制界面中的前端代码组件进行与所述组件连接指令对应的组件连接操作，生成组件流程图；根据所述组件流程图生成前端代码。本发明提高了前端代码的开发效率，同时组件流程图也可方便PO、开发、测试等了解业务功能。

Description

前端代码生成方法及装置
技术领域
本发明涉及代码开发领域，具体而言，涉及一种前端代码生成方法及装置。
背景技术
目前，前端代码开发通常由开发人员自己编写代码完成，在编写代码时通常会出现大量重复的代码，目前人工编写代码的方式难以对重复的代码进行复用，导致代码开发效率较低。现有技术缺少一种更为高效的前端代码开发的方案。
本部分旨在为权利要求书中陈述的本发明实施例提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
发明内容
本发明为了解决上述背景技术中的至少一个技术问题，提出了一种前端代码生成方法及装置。
为了实现上述目的，根据本发明的一个方面，提供了一种前端代码生成方法，该方法包括：
在接收到用户的前端代码组件选择指令时，将所述前端代码组件选择指令对应前端代码组件添加到预设的流程图绘制界面；
在接收到用户的组件连接指令时，对所述流程图绘制界面中的前端代码组件进行与所述组件连接指令对应的组件连接操作，生成组件流程图；
根据所述组件流程图生成前端代码。
可选的，在所述生成组件流程图之前，还包括：
在接收到用户的组件属性设置指令时，对所述流程图绘制界面中的与所述组件属性设置指令对应的前端代码组件进行属性设置。
可选的，在所述生成组件流程图之前，还包括：
在接收到用户的组件移动指令时，对所述流程图绘制界面中的与所述组件移动指令对应的前端代码组件进行与所述组件移动指令对应的移动操作。
可选的，所述前端代码生成方法，还包括：
根据所述组件流程图生成新的前端代码组件，并将该新的前端代码组件存储到预设的前端代码组件库中。
可选的，所述根据所述组件流程图生成前端代码，具体包括：
根据所述组件流程图中各前端代码组件的连接关系对所述组件流程图中各前端代码组件对应的代码进行拼接，得到所述前端代码。
可选的，所述前端代码组件包括：基础组件、业务组件和组合组件。
为了实现上述目的，根据本发明的另一方面，提供了一种前端代码生成装置，该装置包括：
组件添加单元，用于在接收到用户的前端代码组件选择指令时，将所述前端代码组件选择指令对应前端代码组件添加到预设的流程图绘制界面；
组件流程图生成单元，用于在接收到用户的组件连接指令时，对所述流程图绘制界面中的前端代码组件进行与所述组件连接指令对应的组件连接操作，生成组件流程图；
代码生成单元，用于根据所述组件流程图生成前端代码。
可选的，所述前端代码生成装置，还包括：
组件属性设置单元，用于在接收到用户的组件属性设置指令时，对所述流程图绘制界面中的与所述组件属性设置指令对应的前端代码组件进行属性设置。
可选的，所述前端代码生成装置，还包括：
组件拖拽单元，用于在接收到用户的组件移动指令时，对所述流程图绘制界面中的与所述组件移动指令对应的前端代码组件进行与所述组件移动指令对应的移动操作。
可选的，所述前端代码生成装置，还包括：
组件生成单元，用于根据所述组件流程图生成新的前端代码组件，并将该新的前端代码组件存储到预设的前端代码组件库中。
可选的，所述代码生成单元，具体包括：
代码拼接模块，用于根据所述组件流程图中各前端代码组件的连接关系对所述组件流程图中各前端代码组件对应的代码进行拼接，得到所述前端代码。
为了实现上述目的，根据本发明的另一方面，还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述前端代码生成方法的步骤。
为了实现上述目的，根据本发明的另一方面，还提供了一种计算机可读存储介质，其上存储有计算机程序/指令，该计算机程序/指令被处理器执行时实现上述前端代码生成方法的步骤。
为了实现上述目的，根据本发明的另一方面，还提供了一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现上述前端代码生成方法的步骤。
本发明的有益效果为：
本发明通过前端代码组件生成组件流程图，进而根据组件流程图直接生成前端代码，提高了前端代码的开发效率，同时组件流程图也可方便PO、开发、测试等了解业务功能。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
图1是本发明实施例前端代码生成方法的第一流程图；
图2是本发明实施例前端代码生成方法的第二流程图；
图3是本发明实施例前端代码生成装置的第一结构框图；
图4是本发明实施例前端代码生成装置的第二结构框图；
图5是本发明实施例计算机设备示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。
需要说明的是，本申请技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。
需要说明的是，本发明前端代码生成方法和装置可用于金融领域，也可用于除金融领域之外的任意领域，本发明前端代码生成方法和装置的应用领域不做限定。
本发明提出一种基于组件拖拽和流程图的前端代码开发方法，采用类似Visio流程图的图形界面，通过将代码抽象为组件，将代码逻辑抽象为流程图，通过组件的组合连接和相关参数设置，生成前端代码，进一步提升代码开发效率，同时组件流程图也可方便PO、开发、测试等了解业务功能。
图1是本发明实施例前端代码生成方法的第一流程图，如图1所示，在本发明一个实施例中，本发明的前端代码生成方法包括步骤S101至步骤S103。
步骤S101，在接收到用户的前端代码组件选择指令时，将所述前端代码组件选择指令对应前端代码组件添加到预设的流程图绘制界面。
在本发明中，前端代码组件是将特定前端代码进行封装和抽象形成的。
在本发明一个实施例中，所述前端代码组件包括：基础组件、业务组件和组合组件。
基础组件：跟业务无关，实现相关前端功能的组件，包括输入组件、布局组件、弹框组件、接口组件等，包含相关基础参数设置和方法设置。
业务组件：账户列表选择、获取会话ID等包含业务功能的组件。
组合组件：通过基础组件、业务组件等组合保存生成的组件。
步骤S102，在接收到用户的组件连接指令时，对所述流程图绘制界面中的前端代码组件进行与所述组件连接指令对应的组件连接操作，生成组件流程图。
步骤S103，根据所述组件流程图生成前端代码。
在本发明中，本发明生成的前端代码可以为H5、css、js代码。
在本发明一个实施例中，上述步骤S103的根据所述组件流程图生成前端代码，具体包括：
根据所述组件流程图中各前端代码组件的连接关系对所述组件流程图中各前端代码组件对应的代码进行拼接，得到所述前端代码。
在本发明中，各前端代码组件的连接关系对应代码的拼接关系。
如图2所示，在本发明一个实施例中，本发明的前端代码生成方法，还包括步骤S201。
步骤S201，在接收到用户的组件属性设置指令时，对所述流程图绘制界面中的与所述组件属性设置指令对应的前端代码组件进行属性设置。
在本发明中，本发明还可以对前端代码组件的组件属性进行设置，包括css样式设置，组件相关基础属性的设置等。
如图2所示，在本发明一个实施例中，本发明的前端代码生成方法，还包括步骤S202。
步骤S202，在接收到用户的组件移动指令时，对所述流程图绘制界面中的与所述组件移动指令对应的前端代码组件进行与所述组件移动指令对应的移动操作。
在本发明一个实施例中，本发明的前端代码生成方法，还包括以下步骤：
根据所述组件流程图生成新的前端代码组件，并将该新的前端代码组件存储到预设的前端代码组件库中。
本发明可以将绘制的流程图保存为新的组件，方便后续使用。
由以上实施例可见，本发明提出一种基于组件拖拽和流程图的前端代码开发方法，采用类似Visio流程图的图形界面，通过组件图形的拖拽、组合及相关组件属性参数的设置，生成前端代码，从而完成业务功能的开发。
需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
基于同一发明构思，本发明实施例还提供了一种前端代码生成装置，可以用于实现上述实施例所描述的前端代码生成方法，如下面的实施例所述。由于前端代码生成装置解决问题的原理与前端代码生成方法相似，因此前端代码生成装置的实施例可以参见前端代码生成方法的实施例，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
图3是本发明实施例前端代码生成装置的第一结构框图，如图3所示，在本发明一个实施例中，本发明的前端代码生成装置包括：
组件添加单元1，用于在接收到用户的前端代码组件选择指令时，将所述前端代码组件选择指令对应前端代码组件添加到预设的流程图绘制界面；
组件流程图生成单元2，用于在接收到用户的组件连接指令时，对所述流程图绘制界面中的前端代码组件进行与所述组件连接指令对应的组件连接操作，生成组件流程图；
代码生成单元3，用于根据所述组件流程图生成前端代码。
如图4所示，在本发明一个实施例中，本发明的前端代码生成装置，还包括：
组件属性设置单元4，用于在接收到用户的组件属性设置指令时，对所述流程图绘制界面中的与所述组件属性设置指令对应的前端代码组件进行属性设置。
如图4所示，在本发明一个实施例中，本发明的前端代码生成装置，还包括：
组件拖拽单元5，用于在接收到用户的组件移动指令时，对所述流程图绘制界面中的与所述组件移动指令对应的前端代码组件进行与所述组件移动指令对应的移动操作。
在本发明一个实施例中，本发明的前端代码生成装置，还包括：
组件生成单元，用于根据所述组件流程图生成新的前端代码组件，并将该新的前端代码组件存储到预设的前端代码组件库中。
在本发明一个实施例中，所述代码生成单元3，具体包括：
代码拼接模块，用于根据所述组件流程图中各前端代码组件的连接关系对所述组件流程图中各前端代码组件对应的代码进行拼接，得到所述前端代码。
为了实现上述目的，根据本申请的另一方面，还提供了一种计算机设备。如图5所示，该计算机设备包括存储器、处理器、通信接口以及通信总线，在存储器上存储有可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述实施例方法中的步骤。
处理器可以为中央处理器(Central Processing Unit，CPU)。处理器还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。
存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及单元，如本发明上述方法实施例中对应的程序单元。处理器通过运行存储在存储器中的非暂态软件程序、指令以及模块，从而执行处理器的各种功能应用以及作品数据处理，即实现上述方法实施例中的方法。
存储器可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储处理器所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
所述一个或者多个单元存储在所述存储器中，当被所述处理器执行时，执行上述实施例中的方法。
上述计算机设备具体细节可以对应参阅上述实施例中对应的相关描述和效果进行理解，此处不再赘述。
为了实现上述目的，根据本申请的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序在计算机处理器中执行时实现上述前端代码生成方法中的步骤。本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(RandomAccessMemory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。
为了实现上述目的，根据本申请的另一方面，还提供了一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现上述前端代码生成方法的步骤。
显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (15)

1.一种前端代码生成方法，其特征在于，包括：
在接收到用户的前端代码组件选择指令时，将所述前端代码组件选择指令对应前端代码组件添加到预设的流程图绘制界面；
在接收到用户的组件连接指令时，对所述流程图绘制界面中的前端代码组件进行与所述组件连接指令对应的组件连接操作，生成组件流程图；
根据所述组件流程图生成前端代码。
2.根据权利要求1所述的前端代码生成方法，其特征在于，在所述生成组件流程图之前，还包括：
在接收到用户的组件属性设置指令时，对所述流程图绘制界面中的与所述组件属性设置指令对应的前端代码组件进行属性设置。
3.根据权利要求1所述的前端代码生成方法，其特征在于，在所述生成组件流程图之前，还包括：
在接收到用户的组件移动指令时，对所述流程图绘制界面中的与所述组件移动指令对应的前端代码组件进行与所述组件移动指令对应的移动操作。
4.根据权利要求1所述的前端代码生成方法，其特征在于，还包括：
根据所述组件流程图生成新的前端代码组件，并将该新的前端代码组件存储到预设的前端代码组件库中。
5.根据权利要求1所述的前端代码生成方法，其特征在于，所述根据所述组件流程图生成前端代码，具体包括：
根据所述组件流程图中各前端代码组件的连接关系对所述组件流程图中各前端代码组件对应的代码进行拼接，得到所述前端代码。
6.根据权利要求1所述的前端代码生成方法，其特征在于，所述前端代码组件包括：基础组件、业务组件和组合组件。
7.一种前端代码生成装置，其特征在于，包括：
组件添加单元，用于在接收到用户的前端代码组件选择指令时，将所述前端代码组件选择指令对应前端代码组件添加到预设的流程图绘制界面；
组件流程图生成单元，用于在接收到用户的组件连接指令时，对所述流程图绘制界面中的前端代码组件进行与所述组件连接指令对应的组件连接操作，生成组件流程图；
代码生成单元，用于根据所述组件流程图生成前端代码。
8.根据权利要求7所述的前端代码生成装置，其特征在于，还包括：
组件属性设置单元，用于在接收到用户的组件属性设置指令时，对所述流程图绘制界面中的与所述组件属性设置指令对应的前端代码组件进行属性设置。
9.根据权利要求7所述的前端代码生成装置，其特征在于，还包括：
组件拖拽单元，用于在接收到用户的组件移动指令时，对所述流程图绘制界面中的与所述组件移动指令对应的前端代码组件进行与所述组件移动指令对应的移动操作。
10.根据权利要求7所述的前端代码生成装置，其特征在于，还包括：
组件生成单元，用于根据所述组件流程图生成新的前端代码组件，并将该新的前端代码组件存储到预设的前端代码组件库中。
11.根据权利要求7所述的前端代码生成装置，其特征在于，所述代码生成单元，具体包括：
代码拼接模块，用于根据所述组件流程图中各前端代码组件的连接关系对所述组件流程图中各前端代码组件对应的代码进行拼接，得到所述前端代码。
12.根据权利要求7所述的前端代码生成装置，其特征在于，所述前端代码组件包括：基础组件、业务组件和组合组件。
13.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6任意一项所述方法的步骤。
14.一种计算机可读存储介质，其上存储有计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现权利要求1至6任意一项所述方法的步骤。
15.一种计算机程序产品，包括计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现权利要求1至6任意一项所述方法的步骤。
CN202211279613.4A 2022-10-19 2022-10-19 前端代码生成方法及装置 Pending CN115543292A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211279613.4A CN115543292A (zh) 2022-10-19 2022-10-19 前端代码生成方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211279613.4A CN115543292A (zh) 2022-10-19 2022-10-19 前端代码生成方法及装置

Publications (1)

Publication Number Publication Date
CN115543292A true CN115543292A (zh) 2022-12-30

Family

ID=84735318

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211279613.4A Pending CN115543292A (zh) 2022-10-19 2022-10-19 前端代码生成方法及装置

Country Status (1)

Country Link
CN (1) CN115543292A (zh)

Similar Documents

Publication Publication Date Title
CN111221643B (zh) 任务处理方法和任务处理装置
CN107341054B (zh) 任务执行方法、装置及计算机可读存储介质
CN105224343A (zh) 一种应用程序的更新提示方法和装置
CN108279882B (zh) 框架生成方法、装置、设备及计算机可读介质
EP3113020A1 (en) Data processing device and method for processing serial tasks
CN111538659B (zh) 业务场景的接口测试方法、系统、电子设备和存储介质
CN105045602A (zh) 一种构建Hadoop应用开发框架的方法、装置及电子装置
CN109344062A (zh) 页面跨域跳转测试的方法及终端设备
CN110599341A (zh) 交易调用方法及系统
CN111767217A (zh) Js单元测试案例生成方法及装置
CN110633959A (zh) 基于图结构的审批任务创建方法、装置、设备及介质
CN109828759A (zh) 代码编译方法、装置、计算机装置及存储介质
CN114330735A (zh) 处理机器学习模型的方法、电子设备和计算机程序产品
CN110046100B (zh) 一种分组测试的方法、电子设备及介质
CN115168130A (zh) 一种芯片测试方法、装置、电子设备及存储介质
CN113377652B (zh) 测试数据生成方法及装置
CN108170424A (zh) 一种基于云知识库的自我扩展方法及系统
CN113204412A (zh) 用于任务调度的方法、电子设备和计算机存储介质
CN112685409B (zh) Paas应用服务拓扑生成方法、装置及可读存储介质
CN111294377A (zh) 一种依赖关系的网络请求发送方法、终端装置及存储介质
CN115756996B (zh) 一种芯片测试方法、装置、设备及可读存储介质
CN111767433A (zh) 数据处理方法、装置、存储介质以及终端
CN115543317A (zh) 前端页面开发方法及装置
CN115543292A (zh) 前端代码生成方法及装置
CN113495723B (zh) 一种调用功能组件的方法、装置及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination