CN115756445A - 一种组件生成方法和装置、电子设备、计算机存储介质 - Google Patents

Abstract

本发明提供一种组件生成方法和装置、电子设备、计算机存储介质，该方法包括：获取开发人员选择的数据请求；其中，数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；解析并获取数据请求中的组件信息，基于vue的前端页面生成方法对照element‑ui组件库代码，生成所述组件信息对应的代码；因此开发人员可通过选择组件信息，如组件类型、组件属性、组件事件及方法等，依据该组件信息直接生成代码，开发人员直接引用即可；使用本方法进行前端开发，既简化了开发过程，又实现了组件封装，还大大提高了开发效率。

Description

一种组件生成方法和装置、电子设备、计算机存储介质

技术领域

本发明属于组件库技术领域，更具体的说，尤其涉及一种组件生成方法和装置、电子设备、计算机存储介质。

背景技术

在Web应用前端开发过程中，为了代码的冗余，常常会采用组件封装的方式，把业务逻辑相同，高度重复的代码封装起来，做成复用性较强的组件，那么在前端开发过程中，就可以相互借鉴，减少开发时间，同时，也减少了代码的维护、提高代码的复用，降低成本。所以组件的封装对于前端代码实现模块化十分重要。

element-ui组件库为前端开发人员提供了极大的便利，但在使用过程中，组件的属性、事件、方法各不相同，在开发使用中可能因为各种原因会产生遗漏的属性，而开发人员只能去官网对照组件查询相关属性。

安装element框架依赖，在项目中引用element-ui，在element官网上找到项目所需的组件，对照element框架中的组件提供的对外暴露的属性、事件、方法等，根据自身需求去修改和完善相应组件的代码，放到项目的相应位置。

但是，现有方法需要开发者熟知element组件库中组件的属性、事件、方法等，才能根据自身的需求更好的修改和完善相应组件，但element框架本身具备大量组件，其中包含的事件、方法等各不相同，在实际开发中，开发者需要对照官网提供的文档才能保证组件使用正确，组件属性使用完整，也即现有方式会影响开发效率。

发明内容

有鉴于此，本发明的目的在于提供一种组件生成方法和装置、电子设备、计算机存储介质，用于根据该组件信息直接生成代码，开发人员直接引用，既简化了开发过程，又实现了组件封装，还大大提高了开发效率。

本申请第一方面公开了一种组件生成方法，包括：

获取开发人员选择的数据请求；其中，所述数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；

解析并获取所述数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成所述组件信息对应的代码。

可选的，在上述组件生成方法中，在所述获取开发人员选择的数据请求之前，还包括：

获取element-ui组件库的组件信息；

将所述组件信息数据存入数据库。

可选的，在上述组件生成方法中，所述组件信息包括：组件名称、组件名称对应的事件、属性和方法这四种中的至少一种。

可选的，在上述组件生成方法中，在所述将所述组件信息数据存入数据库之后，还包括：

根据所述数据库存入的数据以Web页面的形式显示所述组件信息。

本申请第二方面公开了一种组件生成装置，包括：

后端控制模块，用于获取开发人员选择的数据请求；其中，所述数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；解析并获取所述数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成所述组件信息对应的代码。

可选的，在上述组件生成装置中，还包括：

数据导入模块，用于获取element-ui组件库的组件信息；将所述组件信息数据存入数据库。

可选的，在上述组件生成装置中，还包括：

前端视图模块，用于根据所述数据库存入的数据以Web页面的形式显示所述组件信息。

可选的，在上述组件生成装置中，还包括：

前端选择模块，用于通过web应用前端的视图界面选择所需的组件信息，点击确定，向后端控制模块发起数据请求。

本申请第三方面公开了一种电子设备，包括：

一个或多个处理器；

存储装置，其上存储有一个或多个程序；

当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现如本申请第一方面中任一项所述的组件生成方法。

本申请第四方面公开了一种计算机存储介质，其上存储有计算机程序，其中，计算机程序被处理器执行时实现如本申请第一方面中任一项所述的组件生成方法。

从上述技术方案可知，本发明提供的一种组件生成方法，包括：获取开发人员选择的数据请求；其中，数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；解析并获取数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成所述组件信息对应的代码；因此开发人员可通过选择组件信息，如组件类型、组件属性、组件事件及方法等，依据该组件信息直接生成代码，开发人员直接引用即可；使用本方法进行前端开发，既简化了开发过程，又实现了组件封装，还大大提高了开发效率。

附图说明

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

图1是本发明实施例提供的一种组件生成方法的流程图；

图2是本发明实施例提供的另一种组件生成方法的流程图；

图3是本发明实施例提供的另一种组件生成方法的流程图；

图4是本发明实施例提供的一种组件生成装置的示意图；

图5是本发明实施例提供的电子设备的示意图。

具体实施方式

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

在本申请中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本申请第一方面公开了一种组件生成方法，用于解决现有技术需要开发者熟知element组件库中组件的属性、事件、方法等，才能根据自身的需求更好的修改和完善相应组件，但element框架本身具备大量组件，其中包含的事件、方法等各不相同，在实际开发中，开发者需要对照官网提供的文档才能保证组件使用正确，组件属性使用完整，也即现有方式会影响开发效率的问题。

参见图1，该组件生成方法，包括：

S101、获取开发人员选择的数据请求。

其中，数据请求为开发人员选择所需的组件信息后，点击确认发送的请求。

具体的，该数据请求可以包括开发人员的所选择的组件信息。当然，也不排除其他内容，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

也就是说，开发人员在选择所需的组件信息后，点击确认发送，生成数据请求，进而获取到该数据请求。当然，获取该数据请求的具体过程还可以是其他方式，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

S102、解析并获取数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成组件信息对应的代码。

需要说明的是，element-ui：网站快速成型工具，由某公司前端团队开源，为开发者、设计师和产品经理准备的基于Vue(Vue.js-渐进式的JavaScript框架)的桌面端组件库。

组件：是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。

也就是说，可以对该所需代码进行简单封装，即可得到相应的组件。

具体的，获取到该数据请求，解析该数据请求，从解析数据中获取组件名称及组件名称对应的事件、属性、方法等组件信息，接着基于vue按照前端页面生成方法对照element组件库代码，生成组件信息对应的代码。

需要说明的是，在完成代码生成之后，开发人员可以引用代码，进行相应的使用，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

在本实施例中，获取开发人员选择的数据请求；其中，数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；解析并获取数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成所述组件信息对应的代码；因此开发人员可通过选择组件信息，如组件类型、组件属性、组件事件及方法等，依据该组件信息直接生成代码，开发人员直接引用即可；使用本方法进行前端开发，既简化了开发过程，又实现了组件封装，还大大提高了开发效率。

需要说明的是，element-ui是一套基于VUE2.0的桌面端组件库，element-ui提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。前端人员在基于vue开发过程中往往会使用到这个组件库的内容，但是这个组件库中存在海量属性，并且该组件库也会更新迭代，所以开发过程中不对照文档易出错，可能会出现错用、漏用属性、方法等的问题，现有技术采用人工对照文档；而本实施例中，采用基于vue的前端页面生成方法对照element-ui组件库代码，自动生成代码，避免采用人工对照文档，提高代码准确性，提高开发效率。

在实际应用中，组件信息包括：组件名称、组件名称对应的事件、属性和方法这四种中的至少一种。

当然，该组件信息也可以包括其他信息，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

也就是说，针对element-ui组件库，将element-ui组件库包含的组件名称、组件名称对应的事件、属性、方法等对应保存在数据库中，根据数据库返回的数据以Web页面的形式显示组件名称及组件名称对应的事件、属性、方法等，开发人员在选择组件名称、组件名称对应的事件、属性、方法，组件生成装置根据所选择的组件名称、组件名称对应的事件、属性、方法基于vue开发框架，生成代码。

在实际应用中，参见图2，在步骤S101、获取开发人员选择的数据请求之前，还包括：

S201、获取element-ui组件库的组件信息。

也就是说，根据官网内容录入组件的名称、组件的说明、props、slot、event、methods等，当然，上述方式仅是一种示例，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

S202、将组件信息数据存入数据库。

该数据库可以是Access、SQLServer、MySQL中的一种；当然，该数据库也可以其他类型的数据库，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

在实际应用中，参见图3，在步骤S202、将组件信息数据存入数据库之后，还包括：

S301、根据数据库存入的数据以Web页面的形式显示组件信息。

也就是说，根据数据库存入的数据以Web页面的形式显示组件名称及组件名称对应的事件、属性、方法等。

采用web网页，主要是实现可视化，当然也不排除其他可以实现可视化的网页，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

具体的，在实现组件信息可视化后，开发人员可以通过页面选择相应的组件信息。

例如，开发人员在Web网页上搜索或直接点击下拉选择器选择组件名称，选择后，页面上分块显示组件的说明、props、slot、event、methods等，props、slot、event、methods每一部分的详细内容以多选形式呈现，点击复选框，选择到自己所需内容；完成选择后，点击发送即可。

将官网所包含的内容进行web化，在web网页上更直观的选择自己所需内容，生成代码，开发人员直接引用代码。

本申请另一实施例提供了一种组件生成装置。

参见图4，该组件生成装置，包括：

后端控制模块101，用于获取开发人员选择的数据请求；其中，数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；解析并获取数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成组件信息对应的代码。

也就是说，后端控制模块101，用于获取通过web应用的前端界面交互产生的请求，解析所述请求中携带的组件名称及组件名称对应的事件、属性、方法等，进行对应处理，生成代码及代码文件。

该后端控制模块101的具体工作过程和原理，详情参见上述实施例提供的组件生成方法，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

在本实施例中，后端控制模块101，用于获取开发人员选择的数据请求；其中，数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；解析并获取数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成组件信息对应的代码；因此开发人员可通过选择组件信息，如组件类型、组件属性、组件事件及方法等，依据该组件信息直接生成代码，开发人员直接引用即可；使用本方法进行前端开发，既简化了开发过程，又实现了组件封装，还大大提高了开发效率。

同样参见图4，该组件生成装置，还包括：

数据导入模块102，用于获取element-ui组件库的组件信息；将组件信息数据存入数据库。

也就是说，数据导入模块102，用于获取element-ui组件名称及组件名称对应的事件、属性、方法等，将获取的数据导入组件生成装置，实时更新element-ui数据。

该数据导入模块102的具体工作过程和原理，详情参见上述实施例提供的组件生成方法，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

同样参见图4，该组件生成装置，还包括：

前端视图模块103，用于根据数据库存入的数据以Web页面的形式显示组件信息。

也就是说，该前端视图模块103，用于以web应用前端的视图界面方式显示element-ui包含的组件名称及组件名称对应的事件、属性、方法等；从数据库中读取对应的数据，并在界面上更新数据。

前端视图模块103的具体工作过程和原理，详情参见上述实施例提供的组件生成方法，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

同样参见图4，该组件生成装置，还包括：

前端选择模块104，用于通过web应用前端的视图界面选择所需的组件信息，点击确定，向后端控制模块101发起数据请求。

也就是说，前端选择模块104，用于通过web应用前端的视图界面选择所需的组件名称及组件名称对应的事件、属性、方法等，点击确定，后端控制模块101发起数据请求。

官网里每一个组件都对应多个事件、属性、方法，组件生成装置需要做的就是将所选择到的这部分内容进行组合拼接，拼接成可以生成vue模板(前端渲染界面需要的代码格式)的json数据。

前端选择模块104的具体工作过程和原理，详情参见上述实施例提供的组件生成方法，此处不再一一赘述，视实际情况而定即可，均在本申请的保护范围内。

具体的，开发人员通过打开组件生成装置选择所需的组件名称及组件名称对应的事件、属性、方法等，直接获取与element组件库对应的代码，减少对照官方文档的操作，由于组件生成装置以Web页面展示组件名称及组件名称对应的事件、属性、方法等，可以让开发人员更直观的引用到所需组件，避免组件属性使用缺失、组件引用错误等操作，同时提高了开发人员的开发效率。

在本实施例中，正常情况下，开发人员需要极其熟悉element-ui组件库内容才能做到不对照官方文档就能直接开发，但在实际开发过程中，需要查找官方文档对照。而本申请采用此组件生成装置，可减少官方文档对照的操作；组件生成装置采用直观的Web页面展示组件名称及组件名称对应的事件、属性、方法等，开发人员可直接通过选择的操作实现所需组件名称及组件名称对应的事件、属性、方法等的引用；同时，该组件生成装置能够根据开发人员的选择直接生成代码，开发人员可直接引用代码。

本申请另一实施例提供了一种存储介质，其上存储有计算机程序，其中，计算机程序被处理器执行时实现如上述实施例中任意一项的组件生成方法。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

本发明另一实施例提供了一种电子设备，如图5所示，包括：

一个或多个处理器601。

存储装置602，其上存储有一个或多个程序。

当一个或多个程序被一个或多个处理器601执行时，使得一个或多个处理器601实现如上述实施例中任意一项的组件生成方法。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。

尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

需要说明的是，本发明提供的组件生成方法和系统、电子设备、存储介质可用于人工智能领域、区块链领域、分布式领域、云计算领域、大数据领域、物联网领域、移动互联领域、网络安全领域、芯片领域、虚拟现实领域、增强现实领域、全息技术领域、量子计算领域、量子通信领域、量子测量领域、数字孪生领域或金融领域。上述仅为示例，并不对本发明提供的组件生成方法和系统、电子设备、存储介质的应用领域进行限定。

本说明书中的各个实施例中记载的特征可以相互替换或者组合，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种组件生成方法，其特征在于，包括：

获取开发人员选择的数据请求；其中，所述数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；

解析并获取所述数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成所述组件信息对应的代码。

2.根据权利要求1所述的组件生成方法，其特征在于，在所述获取开发人员选择的数据请求之前，还包括：

获取element-ui组件库的组件信息；

将所述组件信息数据存入数据库。

3.根据权利要求1所述的组件生成方法，其特征在于，所述组件信息包括：组件名称、组件名称对应的事件、属性和方法这四种中的至少一种。

4.根据权利要求2所述的组件生成方法，其特征在于，在所述将所述组件信息数据存入数据库之后，还包括：

根据所述数据库存入的数据以Web页面的形式显示所述组件信息。

5.一种组件生成装置，其特征在于，包括：

后端控制模块，用于获取开发人员选择的数据请求；其中，所述数据请求为开发人员选择所需的组件信息后，点击确认发送的请求；解析并获取所述数据请求中的组件信息，基于vue的前端页面生成方法对照element-ui组件库代码，生成所述组件信息对应的代码。

6.根据权利要求5所述的组件生成装置，其特征在于，还包括：

数据导入模块，用于获取element-ui组件库的组件信息；将所述组件信息数据存入数据库。

7.根据权利要求6所述的组件生成装置，其特征在于，还包括：

前端视图模块，用于根据所述数据库存入的数据以Web页面的形式显示所述组件信息。

8.根据权利要求5所述的组件生成装置，其特征在于，还包括：

前端选择模块，用于通过web应用前端的视图界面选择所需的组件信息，点击确定，向所述后端控制模块发起数据请求。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，其上存储有一个或多个程序；

当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现如权利要求1-4中任一项所述的组件生成方法。

10.一种计算机存储介质，其特征在于，其上存储有计算机程序，其中，计算机程序被处理器执行时实现如权利要求1-4中任一项所述的组件生成方法。

Images