CN114077430A - 界面生成方法、装置、电子设备及存储介质 - Google Patents
界面生成方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN114077430A CN114077430A CN202111352852.3A CN202111352852A CN114077430A CN 114077430 A CN114077430 A CN 114077430A CN 202111352852 A CN202111352852 A CN 202111352852A CN 114077430 A CN114077430 A CN 114077430A
- Authority
- CN
- China
- Prior art keywords
- component
- configuration information
- end code
- original
- code file
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 230000000007 visual effect Effects 0.000 claims abstract description 49
- 238000006243 chemical reaction Methods 0.000 claims abstract description 34
- 238000004806 packaging method and process Methods 0.000 claims abstract description 14
- 238000012800 visualization Methods 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 27
- 230000000694 effects Effects 0.000 abstract description 6
- 230000006872 improvement Effects 0.000 abstract description 4
- 230000006870 function Effects 0.000 description 35
- 238000012545 processing Methods 0.000 description 10
- 230000003287 optical effect Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000012546 transfer Methods 0.000 description 4
- 238000005538 encapsulation Methods 0.000 description 3
- 239000000203 mixture Substances 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
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/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明实施例公开了一种界面生成方法、装置、电子设备及存储介质。该方法包括：获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。本发明实施例的技术方案，解决了现有的界面生成方法存在开发效率较低、开发成本较高的技术问题，实现了提高开发人员的开发效率，达到了降低软件开发成本的技术效果。
Description
技术领域
本发明实施例涉及计算机技术领域，尤其涉及一种界面生成方法、装置、电子设备及存储介质。
背景技术
在各类应用软件的开发过程中，对于各种用户界面的开发，通常是开发人员在集成开发环境中手动编写前端代码，需要将前端代码进行发布才能够得到相应的前端界面。然而，现有的界面生成方法存在开发效率较低、开发成本较高的问题。
发明内容
本发明实施例提供了一种界面生成方法、装置、电子设备及存储介质，以实现提高开发人员的开发效率，降低软件开发成本。
第一方面，本发明实施例提供了一种界面生成方法，该方法包括：
获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；
通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；
对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。
第二方面，本发明实施例还提供了一种界面生成装置，该装置包括：
组件配置信息获取模块，用于获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；
前端代码文件得到模块，用于通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；
目标展示页面展示模块，用于对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。
第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述程序被所述处理器执行，使得所述处理器实现如本发明任意实施例所提供的界面生成方法。
第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任意实施例所提供的界面生成方法。
本发明实施例的技术方案，通过获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息。在获取到原始组件以及与原始组件对应的组件配置信息后，可以通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件。其中，预先定义的转换函数可以将不同类型原始组件和与原始组件对应的组件配置信息进行封装处理，提升了可视化页面在线编辑器的兼容性。在得到目标展示页面的前端代码文件后，通过对所述前端代码文件进行代码编译，进而生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。由于现有界面生成方法需要开发人员在集成开发环境中手动编写前端代码以及需要将前端代码进行发布后才可以得到相应的前端界面，因此，本发明实施例的技术方案解决了现有界面生成方法存在开发效率较低以及开发成本较高的技术问题，实现了提高开发人员的开发效率，从而达到降低软件开发成本的技术效果。
附图说明
为了更加清楚地说明本发明示例性实施例的技术方案，下面对描述实施例中所需要用到的附图做一简单介绍。显然，所介绍的附图只是本发明所要描述的一部分实施例的附图，而不是全部的附图，对于本领域普通技术人员，在不付出创造性劳动的前提下，还可以根据这些附图得到其他的附图。
图1是本发明实施例一提供的一种界面生成方法流程示意图；
图2是本发明实施例二提供的一种界面生成方法流程示意图；
图3是本发明实施例三提供的一种界面生成方法流程示意图；
图4是本发明实施例四提供的一种界面生成装置结构示意图；
图5是本发明实施例五提供的一种电子设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。
在介绍本发明实施例之前，需要说明的是，本发明实施例中所涉及的第一对象树和第二对象树，其前面的“第一”和“第二”仅仅是用于区别不同类型的对象树，而非对对象树的排布顺序或内容等进行限定。
实施例一
图1是本发明实施例一提供的一种界面生成方法流程示意图，本实施例可适用于通过预先定义的转换函数对在线编辑器的编辑界面中的原始组件以及原始组件的组件配置信息进行处理，进而得到目标展示界面的前端代码文件，从而将目标展示位页面展示于在线编辑器的情况，该方法可以由界面生成装置来执行，该界面生成装置可通过软件和/或硬件方式实现，可集成于诸如计算机或者服务器等的电子设备中。
如图1所示，本实施例的方法包括：
S110、获取可视化页面在线编辑器的编辑界面中各原始组件，以及各原始组件的组件配置信息。
其中，可视化页面在线编辑器可以是基于前端框架开发得到的前端可视化在线编辑器，其中，前端框架可以是Vue.js框架(构建用户界面的渐进式框架)和Html5(HyperTextMarkup Language 5)框架。可视化页面在线编辑器可以用于对待展示页面包含的原始组件以及原始组件的组件配置信息进行在线编辑。可选的，可视化页面在线编辑器可以是基于前端框架开发得到前端可视化在线编辑插件。
其中，原始组件可以理解为可视化页面在线编辑器的UI组件库中包含的组件。其中，UI组件库可以包括但不限于以下几种组件库：基于Vue框架的UI组件库和基于React的UI组件库(如，Ant design组件库)，其中，基于Vue框架的UI组件库可以包括iView(网页组件库)和ElementUI(桌面组件库)。组件配置信息可以理解为对原始组件的组件参数进行配置后得到的配置信息，其中，组件参数可以包括但不限于以下参数：text(文字)、color(颜色)、size(大小)、command callbacks(回调命令)以及JS(JavaScript)事件。
具体的，当可视化页面在线编辑器的编辑界面中存在一个或多个原始组件，则可以获取可视化页面在线编辑器的编辑界面中各原始组件。在获取到各原始组件后，可以获取与各原始组件对应的组件配置信息。
可选的，通过下述方式获取可视化页面在线编辑器的编辑界面中各原始组件：
接收用户在可视化页面在线编辑器的编辑界面中对各原始组件的拖拽操作，并根据拖拽操作确定可视化页面在线编辑器的编辑界面中各原始组件。
具体的，当可视化页面在线编辑器的编辑界面接收到用于对原始组件的拖拽操作，则可以根据拖拽操作确定在可视化页面在线编辑器的编辑界面中原始组件。需要说明的是，本发明实施例中通过拖拽操作确定编辑界面中的原始组件的好处在于无需编写代码且操作简单便捷。
S120、通过预先定义的转换函数将各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件。
其中，预先定义的转换函数可以用于将不同组件库中的原始组件以及与原始组件对应的组件配置信息进行封装处理。可选的，预先定义的转换函数可以是transfer(){}。目标展示页面可以理解为在可视化页面在线编辑器中需要展示的页面。前端代码文件可以包括但不限于Html文件、JS文件以及CSS文件。
具体的，预先定义转换函数。在获取各原始组件和与各原始组件对应的组件配置信息后，可以通过调用预先定义的转换函数，将获取到的各原始组件和与各原始组件对应的组件配置信息进行封装处理。在封装处理完成后，可以得到目标展示页面的前端代码文件。
可选的，通过下述方式通过预先定义的转换函数将各原始组件以及相应的组件配置信息进行封装处理得到目标展示页面的前端代码文件：
在获取到各原始组件和与各原始组件对应的组件配置信息后，可以基于获取到的各原始组件以及相应的组件配置信息，生成与所述各原始组件以及相应的组件配置信息对应的代码。通过调用预先定义的转换函数，分别将与各原始组件以及与各原始组件对应的组件配置信息对应的代码进行封装处理，得到各原始组件的组件已封装代码，基于各组件已封装代码可以生成目标展示页面的前端代码文件。
S130、对前端代码文件进行代码编译，生成与前端代码文件对应的目标展示页面，并在可视化页面在线编辑器中展示目标展示页面。
具体的，在得到前端代码文件后，可以对前端代码文件进行代码编译处理。在编译处理完成后，可以生成与前端代码对应的目标展示页面。在生成目标展示页面后，在可视化页面在线编辑器中将目标展示页面进行展示。
可选的，通过下述步骤介绍如何对前端代码文件进行代码编译，进而生成与前端代码文件对应的目标展示页面：
步骤一、通过预设的前端代码编译指令对前端代码文件进行代码编译，得到编译结果。
其中，预设的前端编译指令可以是在可视化页面在线编辑器中用于对前端代码文件进行编译的指令。可选的，预设的前端编译指令可以是Vue-cli(Vue的脚手架)的编译指令。编译结果可以是通过对前端代码文件进行代码编译后得到的编译结果。编译结果可以是编译成功，也可以是编译失败。
具体的，预先设置用于编译前端代码的编译指令，即预设前端代码编译指令。通过调用预设的前端代码编译指令对前端代码进行编译。进而可以得到编译结果。
步骤二、根据编译结果，确定与前端代码文件对应的目标展示页面。
具体的，在得到编译结果后，可以基于编译结果确定与前端代码文件对应的目标展示页面。具体的，若编译结果为编译成功，则表征前端代码中未存在语法异常、代码逻辑错误或代码编写错误的情况，那么可以将与前端代码文件对应的展示页面作为目标展示页面。若编译结果为编译失败，则表征前端代码中的代码存在语法异常、代码逻辑错误或代码编写错误的情况，那么可以对前端代码文件进行修改，并编译修改后的前端代码文件。
本发明实施例的技术方案，通过获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息。在获取到原始组件以及与原始组件对应的组件配置信息后，可以通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件。其中，预先定义的转换函数可以将不同类型原始组件和与原始组件对应的组件配置信息进行封装处理，提升了可视化页面在线编辑器的兼容性。在得到目标展示页面的前端代码文件后，通过对所述前端代码文件进行代码编译，进而生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。由于现有界面生成方法需要开发人员在集成开发环境中手动编写前端代码以及需要将前端代码进行发布后才可以得到相应的前端界面，因此，本发明实施例的技术方案解决了现有界面生成方法存在开发效率较低以及开发成本较高的技术问题，实现了提高开发人员的开发效率，从而达到降低软件开发成本的技术效果。
实施例二
图2是本发明实施例二提供的一种界面生成方法流程示意图，在前述实施例的基础上，可选地，所述通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件，包括：通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息封装为各待展示组件，基于所述各待展示组件生成第一对象树，对所述第一对象树进行编译生成目标展示页面的前端代码文件。
其中，与上述实施例相同或者相应的技术术语在此不再赘述。
如图2所示，本实施例的方法具体可包括：
S210、获取可视化页面在线编辑器的编辑界面中各原始组件，以及各原始组件的组件配置信息。
S220、通过预先定义的转换函数将各原始组件以及相应的组件配置信息封装为各待展示组件，基于各待展示组件生成第一对象树，对第一对象树进行编译生成目标展示页面的前端代码文件。
其中，待展示组件可以是对原始组件以及与该原始组件对应的组件配置信息进行封装后得到的组件。第一对象树可以是基于各待展示组件生成的对象树。第一对象树中的各个树节点可以是待展示组件。
具体的，在获取各原始组件以及相应的组件配置信息后，可以通过预先定义的转换函数将各原始组件以及相应的组件配置信息进行封装为各待展示组件。在封装完成后，可以将各待展示组件分别作为各树节点，基于各树节点得到第一对象树。在得到第一对象树后，可以对第一对象树进行编译处理。在编译处理完成后，可以生成编译后的文件，将编译后的文件作为目标展示页面的前端代码文件。
可选的，在获取可视化页面在线编辑器的编辑界面中各原始组件以及各原始组件的组件配置信息之后，还可以基于各原始组件以及各原始组件的组件配置信息构建第二对象树。对第二对象树进行遍历，确定第二对象树中各树节点对应的组件元素信息。
其中，第二对象树可以是基于各原始组件以及各原始组件的组件配置信息构建得到的对象树。第二对象树的树节点可以是各原始组件。各树节点的组件元素信息可以是原始组件的组件配置信息。
具体的，在获取可视化页面在线编辑器的编辑界面中各原始组件以及各原始组件的组件配置信息之后，可以基于各原始组件以及各原始组件的组件配置信息构建第二对象树。在第二对象树构建完成后，可以对第二对象树中的各树节点进行遍历。进而可以确定第二对象树中各树节点对应的组件元素信息。
可选的，通过下述方式基于各原始组件以及各原始组件的组件配置信息构建第二对象树：
将每个原始组件分别作为独立树节点。基于各原始组件的组件配置信息，确定独立树节点与独立树点间的逻辑关系。基于独立树节点与独立树点间的逻辑关系，构建第二对象树。
其中，独立树节点与独立树点间的逻辑关系可以理解为独立树节点与独立树点间的从属关系。
具体的，在获取可视化页面在线编辑器的编辑界面中各原始组件以及各原始组件的组件配置信息之后，可以将每个原始组件分别作为独立的树节点。可以基于各原始组件的组件配置信息，确定独立树节点与独立树点间的逻辑关系。在确定独立树节点与独立树点间的逻辑关系后，可以基于独立树节点与独立树点间的逻辑关系将具有逻辑关系的各独立树节点建立连接。进而得到第二对象树。
相应的，通过预先定义的转换函数将各原始组件以及相应的组件配置信息封装为各待展示组件，可以是通过预先定义的转换函数对第二对象树中各树节点对应的组件元素信息进行封装处理，得到各待展示组件。
S230、对前端代码文件进行代码编译，生成与前端代码文件对应的目标展示页面，并在可视化页面在线编辑器中展示目标展示页面。
本实施例的技术方案，通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息封装为各待展示组件，基于所述各待展示组件生成第一对象树，对所述第一对象树进行编译生成目标展示页面的前端代码文件，解决了现有界面生成方法存在开发效率较低以及开发成本较高的技术问题，实现了提高开发人员的开发效率，从而达到降低软件开发成本的技术效果。
实施例三
本发明实施例三提供一种界面生成方法的可选实施例，其具体实施方式可以参见下述实施例。其中，与上述实施例相同或者相应的技术术语在此不再赘述。
参见图3，本实施例的方法具体包括如下步骤：
1、接收用户在可视化页面编辑器的工具栏对各布局组件或其他组件的拖入操作，根据所述拖入操作将工具栏中的布局组件或其他组件拖入至可视化页面编辑器的编辑界面。
其中，布局组件或其他组件可以理解为原始组件。工具栏可以提供各种类型的组件。
2、接收用户在编辑器中输入的布局组件或其他组件的参数配置信息和JS(JavaScript)事件配置信息，以及接收用户对编辑对象(如，布局组件或其他组件)与事件(如，系统提供的时间处理方法或自定义事件处理逻辑)的绑定设置，保存或更新编辑对象的参数和事件，得到各布局组件或其他组件以及相应的组件配置信息。
其中，编辑对象可以理解为可视化页面编辑器的编辑界面中的原始组件。参数配置信息、JS(JavaScript)事件配置信息和编辑对象和时间的绑定设置可以理解为组件配置信息。
示例性的，可视化页面在线编辑器的编辑界面中原始组件可以是ComponentA组件，与ComponentA组件对应的组件配置信息可以为：data(){return{compOptions:[],compEvents:[]}；}其中，compOptions:[]可以是可配置选项，compEvents:[]可以表示为JS(JavaScript)事件配置信息。
3、对所述各布局组件或其他组件以及相应的组件配置信息进行在线编译，生成第二对象树，对所述第二对象树的树节点进行遍历。
4、通过调用预先定义的转码函数对所述第二对象树中各树节点对应的组件元素信息进行封装处理，得到各待展示组件，基于所述各待展示组件生成第一对象树，对所述第一对象树进行编译生成JS文件并基于所述JS文件生成Vue.js的单页面文件代码。
其中，转码函数可以理解转换函数(如，transfer(){})。其中，对第一对象树进行编译生成JS文件并基于JS文件生成Vue.js的单页面文件代码，可以理解为对第一对象树进行编译生成目标展示页面的前端代码文件。单页面文件代码可以理解为前端代码文件中包含的代码。
5、通过Vue-cli对单页面文件代码进行编译，返回编译结果，基于编译结果，确定与所述单页面文件代码对应的目标展示页面。
其中，Vue-cli可以理解为预设的前端代码编译指令。
具体的，在得到单页面文件代码后，可以调用Vue-cli对单页面文件代码进行编译处理。在编译处理完成后，可以得到编译结果。在得到编译结果后，可以根据编译结果得到与单页面文件代码对应的目标展示页面。具体的，当编译结果为编译成功，则可以基于编译结果生成与单页面文件代码对应的目标展示页面；当编译结果为编译失败，则可以生成编译失败的编译提示信息，并将所述编译提示信息进行展示。
可选的，在得到目标展示页面后，可以对目标展示页面进行在线测试、配置用户访问菜单以及配置访问权限。
本实施例的技术方案，本发明实施例的技术方案解决了现有界面生成方法存在开发效率较低以及开发成本较高的技术问题，实现了提高开发人员的开发效率，从而达到降低软件开发成本的技术效果。
实施例四
图4是本发明实施例四提供的一种界面生成装置结构示意图，本发明提供了一种界面生成装置，该装置包括：组件配置信息获取模块410、前端代码文件得到模块420和目标展示页面展示模块430。
其中，组件配置信息获取模块410，用于获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；前端代码文件得到模块420，用于通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；目标展示页面展示模块430，用于对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。
本发明实施例的技术方案，通过组件配置信息获取模块，获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息。在获取到原始组件以及与原始组件对应的组件配置信息后，可以通过前端代码文件得到模块，通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件。其中，预先定义的转换函数可以将不同类型原始组件和与原始组件对应的组件配置信息进行封装处理，提升了可视化页面在线编辑器的兼容性。在得到目标展示页面的前端代码文件后，通过目标展示页面展示模块，对所述前端代码文件进行代码编译，进而生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。由于现有界面生成方法需要开发人员在集成开发环境中手动编写前端代码以及需要将前端代码进行发布后才可以得到相应的前端界面，因此，本发明实施例的技术方案解决了现有界面生成方法存在开发效率较低以及开发成本较高的技术问题，实现了提高开发人员的开发效率，从而达到降低软件开发成本的技术效果。
可选的，前端代码文件得到模块420，用于通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息封装为各待展示组件，基于所述各待展示组件生成第一对象树，对所述第一对象树进行编译生成目标展示页面的前端代码文件。
可选的，在获取可视化页面在线编辑器的编辑界面中各原始组件以及所述各原始组件的组件配置信息之后，界面生成装置还包括：组件元素信息确定模块，用于基于所述各原始组件以及所述各原始组件的组件配置信息构建第二对象树；对所述第二对象树进行遍历，确定所述第二对象树中各树节点对应的组件元素信息；相应的，前端代码文件得到模块420，用于通过预先定义的转换函数对所述第二对象树中各树节点对应的组件元素信息进行封装处理，得到各待展示组件。
可选的，组件元素信息确定模块还包括：第二对象树构建单元，用于将每个原始组件分别作为独立树节点；基于所述各原始组件的组件配置信息，确定独立树节点与独立树点间的逻辑关系；基于所述独立树节点与独立树点间的逻辑关系，构建第二对象树。
可选的，组件配置信息获取模块410，用于接收用户在可视化页面在线编辑器的编辑界面中对各原始组件的拖拽操作；根据所述拖拽操作确定可视化页面在线编辑器的编辑界面中各原始组件。
可选的，目标展示页面展示模块430，用于通过预设的前端代码编译指令对所述前端代码文件进行代码编译，得到编译结果；根据所述编译结果，确定与所述前端代码文件对应的目标展示页面。
可选的，目标展示页面展示模块430，用于若所述编译结果为编译成功，则将与所述前端代码文件对应的展示页面作为目标展示页面。
可选的，目标展示页面展示模块430，还用于若所述编译结果为编译失败，则对所述前端代码文件进行修改，并编译修改后的前端代码文件。
上述装置可执行本发明任意实施例所提供的界面生成方法，具备执行界面生成方法相应的功能模块和有益效果。
值得注意的是，上述界面生成装置所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明实施例的保护范围。
实施例五
图5是本发明实施例五提供的一种电子设备的结构示意图。图5示出了适于用来实现本发明任一实施方式的示例性电子设备12的框图。图5显示的电子设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。设备12典型的是承担组件配置信息的处理的电子设备。
如图5所示，电子设备12以通用计算设备的形式表现。电子设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，存储器28，连接不同组件(包括存储器28和处理单元16)的总线18。
总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture，ISA)总线，微通道体系结构(Micro Channel Architecture，MCA)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及外围组件互连(Peripheral Component Interconnect，PCI)总线。
电子设备12典型地包括多种计算机可读介质。这些介质可以是任何能够被电子设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
存储器28可以包括易失性存储器形式的计算机装置可读介质，例如随机存取存储器(Random Access Memory，RAM)30和/或高速缓存存储器32。电子设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图5未显示，通常称为“硬盘驱动器”)。尽管图中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如只读光盘(Compact Disc-Read Only Memory，CD-ROM)、数字视盘(Digital Video Disc-Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品40，该程序产品40具有一组程序模块42，这些程序模块被配置以执行本发明各实施例的功能。程序产品40，可以存储在例如存储器28中，这样的程序模块42包括但不限于一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。
电子设备12也可以与一个或多个外部设备14(例如键盘、鼠标、摄像头等和显示器)通信，还可与一个或者多个使得用户能与该电子设备12交互的设备通信，和/或与使得该电子设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，电子设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(Local Area Network，LAN)，广域网WideArea Network，WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与电子设备12的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、磁盘阵列(Redundant Arrays of Independent Disks，RAID)装置、磁带驱动器以及数据备份存储装置等。
处理单元16通过运行存储在存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明上述实施例所提供的界面生成方法，该方法包括：
获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；
通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；
对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。
当然，本领域技术人员可以理解，处理器还可以实现本发明任一实施例所提供的界面生成方法的技术方案。
实施例五
本发明实施例五还提供一种计算机可读存储介质，其上存储有计算机程序，特征在于，该程序被处理器执行时，例如本发明上述实施例所提供的界面生成方法，该方法包括：
获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；
通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；
对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。
本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是—但不限于—电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括—但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。
Claims (10)
1.一种界面生成方法，其特征在于，包括：
获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；
通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；
对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。
2.根据权利要求1所述的方法，其特征在于，所述通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件，包括：
通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息封装为各待展示组件，基于所述各待展示组件生成第一对象树，对所述第一对象树进行编译生成目标展示页面的前端代码文件。
3.根据权利要求2所述的方法，其特征在于，在获取可视化页面在线编辑器的编辑界面中各原始组件以及所述各原始组件的组件配置信息之后，还包括：
基于所述各原始组件以及所述各原始组件的组件配置信息构建第二对象树；
对所述第二对象树进行遍历，确定所述第二对象树中各树节点对应的组件元素信息；
所述通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息封装为各待展示组件，包括：
通过预先定义的转换函数对所述第二对象树中各树节点对应的组件元素信息进行封装处理，得到各待展示组件。
4.根据权利要求3所述的方法，其特征在于，所述基于所述各原始组件以及所述各原始组件的组件配置信息构建第二对象树，包括：
将每个原始组件分别作为独立树节点；
基于所述各原始组件的组件配置信息，确定独立树节点与独立树点间的逻辑关系；
基于所述独立树节点与独立树点间的逻辑关系，构建第二对象树。
5.根据权利要求1所述的方法，其特征在于，所述获取可视化页面在线编辑器的编辑界面中各原始组件，包括：
接收用户在可视化页面在线编辑器的编辑界面中对各原始组件的拖拽操作；
根据所述拖拽操作确定可视化页面在线编辑器的编辑界面中各原始组件。
6.根据权利要求1所述的方法，其特征在于，所述对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，包括：
通过预设的前端代码编译指令对所述前端代码文件进行代码编译，得到编译结果；
根据所述编译结果，确定与所述前端代码文件对应的目标展示页面。
7.根据权利要求6所述的方法，其特征在于，所述根据所述编译结果，确定与所述前端代码文件对应的目标展示页面，包括：
若所述编译结果为编译成功，则将与所述前端代码文件对应的展示页面作为目标展示页面。
8.根据权利要求7所述的方法，其特征在于，所述方法还包括：
若所述编译结果为编译失败，则对所述前端代码文件进行修改，并编译修改后的前端代码文件。
9.一种界面生成装置，其特征在于，包括：
组件配置信息获取模块，用于获取可视化页面在线编辑器的编辑界面中各原始组件，以及所述各原始组件的组件配置信息；
前端代码文件得到模块，用于通过预先定义的转换函数将所述各原始组件以及相应的组件配置信息进行封装处理，得到目标展示页面的前端代码文件；
目标展示页面展示模块，用于对所述前端代码文件进行代码编译，生成与所述前端代码文件对应的目标展示页面，并在所述可视化页面在线编辑器中展示所述目标展示页面。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-8中任一所述的界面生成方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111352852.3A CN114077430A (zh) | 2021-11-16 | 2021-11-16 | 界面生成方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111352852.3A CN114077430A (zh) | 2021-11-16 | 2021-11-16 | 界面生成方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114077430A true CN114077430A (zh) | 2022-02-22 |
Family
ID=80283568
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111352852.3A Pending CN114077430A (zh) | 2021-11-16 | 2021-11-16 | 界面生成方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114077430A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115543290A (zh) * | 2022-10-12 | 2022-12-30 | 睿珀智能科技有限公司 | 可视化编程方法及系统 |
| CN117234513A (zh) * | 2023-11-15 | 2023-12-15 | 腾讯科技（深圳）有限公司 | 页面的数据文件生成方法、装置、电子设备、介质及产品 |
| CN117472349A (zh) * | 2023-07-14 | 2024-01-30 | 浙江邦盛科技股份有限公司 | 基于monaco editor和vue封装代码编辑框组件的方法、系统及装置 |
| CN117573127A (zh) * | 2024-01-17 | 2024-02-20 | 中建三局信息科技有限公司 | 一种页面搭建方法、装置、电子设备及介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH1040090A (ja) * | 1996-07-02 | 1998-02-13 | Internatl Business Mach Corp <Ibm> | プログラム開発支援システム及び支援方法、プログラム開発支援のために用いられるプログラム部品を格納する記憶媒体 |
| US9983855B1 (en) * | 2016-12-29 | 2018-05-29 | Walmart Apollo, Llc | Systems, method, and non-transitory computer-readable storage media for displaying software components |
| WO2020140940A1 (zh) * | 2019-01-06 | 2020-07-09 | 阿里巴巴集团控股有限公司 | 代码的生成方法、装置、设备及存储介质 |
| CN112540763A (zh) * | 2020-12-24 | 2021-03-23 | 贵阳货车帮科技有限公司 | 前端页面生成方法、装置、平台设备及存储介质 |
| CN113420532A (zh) * | 2021-07-02 | 2021-09-21 | 北京沃东天骏信息技术有限公司 | 一种页面文件转化方法、装置、电子设备和存储介质 |
| CN113448552A (zh) * | 2020-03-27 | 2021-09-28 | 北京沃东天骏信息技术有限公司 | 代码生成方法和装置 |
| CN113504908A (zh) * | 2021-07-19 | 2021-10-15 | 中国建设银行股份有限公司 | 业务代码生成方法、装置、电子设备及计算机可读介质 |
-
2021
- 2021-11-16 CN CN202111352852.3A patent/CN114077430A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH1040090A (ja) * | 1996-07-02 | 1998-02-13 | Internatl Business Mach Corp <Ibm> | プログラム開発支援システム及び支援方法、プログラム開発支援のために用いられるプログラム部品を格納する記憶媒体 |
| US9983855B1 (en) * | 2016-12-29 | 2018-05-29 | Walmart Apollo, Llc | Systems, method, and non-transitory computer-readable storage media for displaying software components |
| WO2020140940A1 (zh) * | 2019-01-06 | 2020-07-09 | 阿里巴巴集团控股有限公司 | 代码的生成方法、装置、设备及存储介质 |
| CN113448552A (zh) * | 2020-03-27 | 2021-09-28 | 北京沃东天骏信息技术有限公司 | 代码生成方法和装置 |
| CN112540763A (zh) * | 2020-12-24 | 2021-03-23 | 贵阳货车帮科技有限公司 | 前端页面生成方法、装置、平台设备及存储介质 |
| CN113420532A (zh) * | 2021-07-02 | 2021-09-21 | 北京沃东天骏信息技术有限公司 | 一种页面文件转化方法、装置、电子设备和存储介质 |
| CN113504908A (zh) * | 2021-07-19 | 2021-10-15 | 中国建设银行股份有限公司 | 业务代码生成方法、装置、电子设备及计算机可读介质 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115543290A (zh) * | 2022-10-12 | 2022-12-30 | 睿珀智能科技有限公司 | 可视化编程方法及系统 |
| CN115543290B (zh) * | 2022-10-12 | 2024-04-19 | 睿珀智能科技有限公司 | 可视化编程方法及系统 |
| CN117472349A (zh) * | 2023-07-14 | 2024-01-30 | 浙江邦盛科技股份有限公司 | 基于monaco editor和vue封装代码编辑框组件的方法、系统及装置 |
| CN117234513A (zh) * | 2023-11-15 | 2023-12-15 | 腾讯科技（深圳）有限公司 | 页面的数据文件生成方法、装置、电子设备、介质及产品 |
| CN117234513B (zh) * | 2023-11-15 | 2024-03-08 | 腾讯科技（深圳）有限公司 | 页面的数据文件生成方法、装置、电子设备、介质及产品 |
| CN117573127A (zh) * | 2024-01-17 | 2024-02-20 | 中建三局信息科技有限公司 | 一种页面搭建方法、装置、电子设备及介质 |
| CN117573127B (zh) * | 2024-01-17 | 2024-04-23 | 中建三局信息科技有限公司 | 一种页面搭建方法、装置、电子设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7269792B2 (en) | System and method for generating high-function browser widgets with full addressability | |
| CN114077430A (zh) | 界面生成方法、装置、电子设备及存储介质 | |
| CN111740948B (zh) | 数据包发布方法、动态更新方法、装置、设备及介质 | |
| CN113126990B (zh) | 一种页面开发方法、装置、设备及存储介质 | |
| CN111736840A (zh) | 小程序应用的编译方法、运行方法、存储介质及电子设备 | |
| CN113900958A (zh) | 测试用例脚本的生成方法、系统、介质及电子设备 | |
| CN112631590B (zh) | 组件库生成方法、装置、电子设备和计算机可读介质 | |
| CN116028028B (zh) | 请求函数生成方法、装置、设备及存储介质 | |
| US20110126171A1 (en) | Dynamic native editor code view facade | |
| CN114217789A (zh) | 功能组件拓展方法、装置、设备、存储介质及程序产品 | |
| KR20140116438A (ko) | 연산 순서의 그래픽 표현 기법 | |
| CN114048415A (zh) | 表单生成方法及装置、电子设备和计算机可读存储介质 | |
| CN111078217A (zh) | 脑图生成方法、装置和计算机可读存储介质 | |
| CN111596905A (zh) | 生成java对象的方法、装置、存储介质及终端 | |
| CN115268861A (zh) | 自定义组件的引入方法、系统、设备和存储介质 | |
| CN114461214A (zh) | 一种页面显示方法、装置、电子设备及存储介质 | |
| CN114692055A (zh) | 表单处理方法、装置、存储介质与电子设备 | |
| CN111399901B (zh) | 状态枚举类生成方法、装置、服务器及存储介质 | |
| WO2023128793A1 (ru) | Система и способ динамической визуализации элементов программного обеспечения | |
| CN113687880A (zh) | 一种调用组件的方法、装置、设备和介质 | |
| CN113656041A (zh) | 数据处理方法、装置、设备及存储介质 | |
| CN111176651A (zh) | 一种应用系统日志输出的方法和装置 | |
| CN113986322B (zh) | 一种动态修改页面代码的方法、装置及存储介质 | |
| CN109948251B (zh) | 基于cad的数据处理方法、装置、设备及存储介质 | |
| CN112306324B (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 |