CN113535164A - 一种前端界面的生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例提供了一种前端界面的生成方法、装置、电子设备及计算机可读存储介质，涉及软件开发技术领域。该方法包括：根据接收到的客户端类型，确定与客户端类型对应的组件库；其中，组件库包括多个界面元素组件；界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的；基于获取到的针对界面元素组件的第一选择信息，从组件库中选择出目标组件；基于目标组件，生成与客户端类型相匹配的前端界面。本申请实施例有效提升前端界面开发工作的高效性和便捷性。

Description

一种前端界面的生成方法、装置、电子设备及存储介质

技术领域

本申请涉及软件开发技术领域，具体而言，本申请涉及一种前端界面的生成方法、装置、电子设备及存储介质。

背景技术

前端开发是创建WEB(World Wide Web，全球广域网)页面或APP(Application，应用程序)等前端界面呈现给用户的过程，实现互联网产品的用户界面交互。前端开发从网页制作演变而来，随着互联网技术的发展，大量高性能的移动终端设备应用也应运而生，现代网页和用户界面更加美观、交互效果显著，功能更加强大。

现有技术中，开发人员一般通过编写前端代码来实现前端界面的生成和维护，受制于开发人员编程风格和技术水平的差异，存在前端界面开发效率低、难以维护的问题。

发明内容

本申请提供了一种前端界面的生成方法、装置、电子设备及计算机可读存储介质，可以解决前端界面开发效率低下的问题。所述技术方案如下：

第一方面，提供了一种前端界面的生成方法，该方法包括：

根据接收到的客户端类型，确定与客户端类型对应的组件库；其中，组件库包括多个界面元素组件；界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的；

基于获取到的针对界面元素组件的第一选择信息，从组件库中选择出目标组件；

基于目标组件，生成与客户端类型相匹配的前端界面。

在一个可能的实现方式中，基于目标组件，生成与客户端类型相匹配的前端界面，包括：

获取目标模板；目标模板包括至少一个界面元素组件；

从至少一个界面元素组件中确定目标界面元素组件，用目标组件替换目标界面元素组件，得到更新模板，基于更新模板生成前端界面；或者，将目标组件添加到目标模板，得到更新模板，基于更新模板生成前端界面。

在一个可能的实现方式中，获取目标模板，包括：

确定与客户端类型对应的模板库；模板库中包括多个模板；每一模板是由预设的至少一个界面元素组件组合得到的；

接收针对模板库的第二选择信息，基于第二选择信息从模板库中选择出目标模板。

在另一个可能的实现方式中，该方法还包括：

若检测到前端界面的生成次数大于或等于预设次数，或接收到针对更新模板的模板添加指令，将更新模板更新至模板库中。

在另一个可能的实现方式中，基于目标组件，生成与客户端类型相匹配的前端界面，包括：

获取针对目标组件的目标配置信息；

基于目标配置信息对目标组件的属性进行渲染操作，得到渲染后的目标组件；

基于渲染后的目标组件，生成前端界面。

在另一个可能的实现方式中，获取针对目标组件的目标配置信息，包括：

基于目标组件的类型，从预设的属性数据库中查询与类型相匹配的目标配置信息；或者，

接收用户输入的针对目标组件的实时配置信息，基于实时配置信息生成目标配置信息。

在又一个可能的实现方式中，该方法还包括：

对前端界面进行语义化处理，生成前端代码；

将前端代码发送至用于显示前端界面的客户端，以使客户端执行前端代码，显示前端界面的预览画面。

第二方面，提供了一种前端界面的生成装置，该装置包括：

确定模块，用于根据接收到的客户端类型，确定与客户端类型对应的组件库；其中，组件库包括多个界面元素组件；界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的；

选择模块，用于基于获取到的针对界面元素组件的第一选择信息，从组件库中选择出目标组件；

生成模块，用于基于目标组件，生成与客户端类型相匹配的前端界面。

在一个可能的实现方式中，上述生成模块，具体包括：

第一获取单元，用于获取目标模板；目标模板包括至少一个界面元素组件；

第一生成单元，用于从至少一个界面元素组件中确定目标界面元素组件，用目标组件替换目标界面元素组件，得到更新模板，基于更新模板生成前端界面；或者，

将目标组件添加到目标模板，得到更新模板，基于更新模板生成前端界面。

在一个可能的实现方式中，上述第一获取单元，具体用于：

确定与客户端类型对应的模板库；模板库中包括多个模板；每一模板是由预设的至少一个界面元素组件组合得到的；

接收针对模板库的第二选择信息，基于第二选择信息从模板库中选择出目标模板。

在另一个可能的实现方式中，上述生成模块还包括模板更新单元，用于：

若检测到前端界面的生成次数大于或等于预设次数，或接收到针对更新模板的模板添加指令，将更新模板更新至模板库中。

在另一个可能的实现方式中，上述生成模块，还包括：

第二获取单元，用于获取针对目标组件的目标配置信息；

渲染单元，用于基于目标配置信息对目标组件的属性进行渲染操作，得到渲染后的目标组件；

第二生成单元，用于基于渲染后的目标组件，生成前端界面。

在另一个可能的实现方式中，上述第二获取单元，具体用于：

基于目标组件的类型，从预设的属性数据库中查询与类型相匹配的目标配置信息；或者，

接收用户输入的针对目标组件的实时配置信息，基于实时配置信息生成目标配置信息。

在又一个可能的实现方式中，该装置还包括预览模块，用于：

对前端界面进行语义化处理，生成前端代码；

将前端代码发送至用于显示前端界面的客户端，以使客户端执行前端代码，显示前端界面的预览画面。

第三方面，提供了一种电子设备，该电子设备包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序；

处理器执行上述计算机程序时执行如本申请的第一方面所示的前端界面的生成方法对应的操作。

第四方面，提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现本申请第一方面所示的前端界面的生成方法。

本申请提供的技术方案带来的有益效果是：

本申请通过将界面元素的功能代码进行模块化封装得到界面元素组件，并基于针对界面元素组件的第一选择信息得到目标组件，进而生成前端界面，实现以选择可视化界面元素组件的方式生成前端界面；相比于现有技术中通过开发人员编写代码的形式来完成前端界面的生成和维护，本申请基于标准化的界面元素组件，统一了底层的功能代码，用户只需从组件库中选取目标组件无需编写代码，缩短了前端界面开发的时间，提升了前端界面开发和维护的效率。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种前端界面的生成方法的应用场景图；

图2为本申请实施例提供的一种前端界面的生成方法的流程示意图；

图3为本申请实施例提供的一个示例中的前端界面的生成方法的流程示意图；

图4为本申请实施例提供的另一个示例中的模板库的更新方法的流程示意图；

图5为本申请实施例提供的一个示例中的目标组件的渲染方案的流程示意图；

图6为本申请实施例提供的另一个示例中的前端界面的生成方法的流程示意图；

图7为为本申请实施例提供的用于进行前端界面的生成的终端应用界面示意图；

图8为本申请实施例提供的另一个示例中的前端界面的生成方法的流程示意图；

图9为本申请实施例提供的一种前端界面的生成装置的结构示意图；

图10为本申请实施例提供的一种前端界面的生成电子设备的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

前端技术的发展是互联网自身发展变化的一个缩影。前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。

前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0(World Wide Web，全球广域网)时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5(HyperText Markup Language 5，超文本标记语言)、CSS3(Cascading Style Sheets3，层叠样式表)的应用，现代网页更加美观，交互效果显著，功能更加强大。

前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5等前端语言的广泛应用，各类UI(User Interface，用户界面)框架、JS(JavaScript，Java描述语言，一种具有函数优先的轻量级，解释型或即时编译型的编程语言)类库层出不穷，开发难度也在逐步提升。

现有技术中，开发人员一般通过编写前端代码来实现前端界面的生成和维护，其中常见的问题有：开发人员技术水平参差不齐，无法保证代码的质量；开发人员的编写习惯不同，导致调用的组件无法统一，使得代码的通用性和可移植性差；代码无法兼容多***，后期维护成本较高，开发和维护的效率低下。

本申请提供的前端界面的生成方法、装置、电子设备和计算机可读存储介质，旨在解决现有技术的如上技术问题。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

如图1所示，本申请的前端界面的生成方法，可以应用于图1所示的场景中，具体的，服务器102在接收客户端类型后确定包括多个界面元素组件的组件库，服务器102接收用户通过终端101发送的第一选择信息后，服务器102基于第一选择信息确定目标组件，进而根据目标组件生成前端界面103，以使前端界面103能够在相匹配的客户端104中显示。

图1所示的场景中，上述前端界面的生成方法可以在服务器中进行，在其他的场景中，也可以在终端中进行。

本技术领域技术人员可以理解，这里所使用的“终端”可以是手机、平板电脑、PDA(Personal Digital Assistant，个人数字助理)、MID(Mobile Internet Device，移动互联网设备)等；“服务器”可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

本申请实施例中提供了一种前端界面的生成方法，如图2所示，该方法可以包括如下步骤：

S201，根据接收到的客户端类型，确定与客户端类型对应的组件库；其中，组件库包括多个界面元素组件；界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的。

其中，组件库用于在当前界面中添加界面元素组件；界面元素可以是按钮、下拉选择框或文本输入框等；界面元素组件可以对应单个界面元素，例如按钮组件，界面元素组件还可以对应多个界面元素的组合，例如日历控件组件。

具体的，组件库可以包括基础组件库和业务组件库，其中基础组件库包括文本、图片、热区按钮、视频、形状、数据等通用组件，业务组件可以是与业务相关的专用组件。以金融项目开发的应用为例，业务组件库可以包括金融日历、数字键盘和金融图表等专用组件。

具体的，用于进行前端界面生成的终端或服务器可以接收从用户终端发送的客户端类型，每一个客户端类型都预设对应的组件库；例如，当客户端类型为移动端时，对应组件库可以为Vant UI(一个轻量、可靠的移动端用户界面组件库)组件库，当客户端类型为PC(Personal Computer，个人计算机)端时，对应的组件库为Element UI(一种前端用户界面组件开发框架)组件库，当客户端类型为小程序时，对应的组件库为Uni-app(一个跨多端的前端开发框架)组件库。

S202，基于获取到的针对界面元素组件的第一选择信息，从组件库中选择出目标组件。

其中，第一选择信息可以是基于用户的选择操作触发生成的。

具体的，用于进行前端界面生成的终端或服务器可以在预设的配置区域内显示组件库中的组件列表，响应于用户通过鼠标或键盘等输入设备发送的第一选择信息，在预设的界面展示区域显示与该第一选择信息对应的目标组件。

S203，基于目标组件，生成与客户端类型相匹配的前端界面。

在一些实施方式中，用于进行前端界面生成的终端或服务器可以直接基于该目标组件在预设的界面展示区域中显示的方位和大小，生成前端界面，也可以基于目标组件和用户对目标组件的配置信息，生成前端界面。

在另一些实施方式中，还可以基于目标组件和目标模板生成前端界面，确定目标模板的具体过程将在下文进行详细阐述。

本申请通过将界面元素的功能代码进行模块化封装得到界面元素组件，并基于针对界面元素组件的第一选择信息得到目标组件，进而生成前端界面，实现以选择可视化界面元素组件的方式生成前端界面；相比于现有技术中通过开发人员编写代码的形式来完成前端界面的生成和维护，本申请基于标准化的界面元素组件，统一了底层的功能代码，用户只需从组件库中选取目标组件无需编写代码，缩短了前端界面开发的时间，提升了前端界面开发和维护的效率。

本申请实施例中提供了一种可能的实现方式，第一选择信息基于如下至少一种操作触发：

(1)将界面元素组件拖拽或移动至当前界面的预设范围内的操作。

其中，当前界面的预设范围可以是当前界面的画布中的特定位置或范围，画布可以是当前界面中的一个矩形或特定形状的区域，用于显示绘制在此区域中的界面元素。

具体的，用户可以通过鼠标、键盘或触控板等输入设备选中目标界面元素组件，并将目标界面元素组件拖拽或移动至当前界面的画布中的特定位置或范围。

(2)针对界面元素组件的点击或触摸操作。

具体的，用户可以通过鼠标、键盘或触控板等输入设备对目标界面元素组件进行单击、双击或滑动，以使目标组件自动显示在当前界面的画布中的特定位置或范围。

(3)在预设的输入控件中针对界面元素组件的标识的输入操作。

在一些实施方式中，用户可以通过鼠标、键盘或触控板等输入设备对界面元素组件的标识进行拖拽、点击或滑动等输入操作，其中界面元素组件的标识可以是文字标识也可以是图像标识。

在一些实施方式中，用户可以通过鼠标或触控板等输入设备对界面元素组件的标识列表进行滑动预览，然后对目标界面元素组件进行拖拽、点击或滑动等输入操作，其中界面元素组件的标识可以是文字标识也可以是图像标识。

本申请实施例中提供了一种可能的实现方式，如图3所示，上述步骤S203中基于目标组件，生成与客户端类型相匹配的前端界面，可以包括：

(1)获取目标模板；目标模板包括至少一个界面元素组件。

其中，目标模板可以是基于通用型界面布局的模板，还可以是针对业务功能的模板。以金融项目的开发应用为例，目标模板可以包括银行转账业务模板和理财产品购买业务模板等。

本申请实施例中提供了另一种可能的实现方式，上述获取目标模板，可以包括：

a.确定与客户端类型对应的模板库。

其中，模板库中包括多个模板；每一模板是由预设的至少一个界面元素组件组合得到的。

其中，模板库用于供用户选取适用的模板。可以基于之前获取的组件库确定与客户端类型对应的模板库，还可以根据用户针对模板库的设置确定模板库。

b.接收针对模板库的第二选择信息，基于第二选择信息从模板库中选择目标模板。

其中，第二选择信息可以是基于用户的选择操作触发的；具体的，用于进行前端界面生成的终端或服务器可以在预设的配置区域内显示模板库中的模板列表，响应于用户通过鼠标或键盘等输入设备进行模板的选择操作生成第二选择信息，并在预设的界面展示区域显示与该第二选择信息对应的目标模板。

(2)从至少一个界面元素组件中确定目标界面元素组件，用目标组件替换目标界面元素组件，得到更新模板，基于更新模板生成前端界面；或者，将目标组件添加到目标模板，得到更新模板，基于更新模板生成前端界面。

具体的，可以通过用户设置的配置信息对目标模板和目标组件进行配置，该配置信息可以将目标组件添加进目标模板中，也可以用目标组件替代目标模板中的部分组件；经过添加或替换操作后的目标模板即为更新模板，用于进行前端界面生成的终端或服务器可以直接基于该更新模板在预设的界面展示区域中显示的方位和大小，生成前端界面。

以金融项目的开发应用为例，当用户选取了银行转账业务模板和目标组件之后，将在预设的界面展示区域显示一个完整的转账页面和相应的目标组件；该目标组件为下拉框单选组件，用户的目的是针对转账金额的文本输入框添加下拉框单选组件，使得用户在输入金额时不仅能手动输入，还可以选择下拉框单选组件中的常用金额，以提高用户转账的操作效率、提升用户体验。

本申请实施例中提供了另一种可能的实现方式，如图4所示，上述前端界面的生成方法还包括：

若检测到前端界面的生成次数大于或等于预设次数，或接收到针对更新模板的模板添加指令，将更新模板更新至模板库中。

具体的，可以直接将更新模板保存进模板库中，也可以用更新模板替换模板库中的原模版，以便用户在实际应用中不断对模板库中的模板进行不断总结和优化，使得模板更加实用。

在一种实施方式中，当检测到上述基于更新模板生成前端界面的操作次数大于或等于预设次数，则说明该更新模板是用户常用的模板，可以将该更新模板保存到模板库中，当用户下次还需使用该更新模板时无需再基于目标组件对目标模板进行更改，方便用户多次调用，提升前端界面的开发效率。

在另一种实施方式中，可以定期针对模板库进行升级，当模板库升级时，会生成针对更新模板的模板添加指令，基于该指令将更新模板更新到模板库中。

本申请通过目标组件和目标模板相结合的方式生成前端界面，用户可以基于目标模板中包括的界面元素组件生成初始界面，再基于目标组件对初始界面进行界面元素的添加或替换，有效提升了前端界面的开发效率，提升了用户体验。

本申请实施例中提供了另一种可能的实现方式，上述步骤基于目标组件，生成与客户端类型相匹配的前端界面，还可以包括：

(1)获取针对目标组件的目标配置信息。

其中，目标配置信息可以直接从预设的属性数据库中选取，还可以基于用户的渲染配置操作实时触发生成；目标配置信息用于对目标组件的显示效果进行配置和渲染；以目标组件为Button(按钮)组件为例，该Button组件的事件可以包括鼠标移入时的触控响应、鼠标移除时的触控响应和鼠标点击时的触控响应等，类型为按钮，属性包括按钮的大小、颜色、文字等信息。

其中，在获取目标配置信息之前，先在当前界面的预设界面元素中显示目标组件。

其中，预设界面元素可以是画布，画布可以是当前界面中一个矩形或特定形状的区域，用于显示绘制在此区域中的界面元素组件即目标组件。当前界面的预设界面元素可以是空白画布，也可以是布局有界面元素组件的画布；在显示目标组件之前，还可以响应于用户预设的指令对画布上所显示的组件或模板进行清空。

本申请实施例中提供了另一种可能的实现方式，如图5所述，获取针对目标组件的目标配置信息，包括：

基于目标组件的类型，从预设的属性数据库中查询与类型相匹配的目标配置信息；或者，

接收用户输入的针对目标组件的实时配置信息，基于实时配置信息生成目标配置信息。

其中，属性数据库可以存储于用于进行前端界面生成的终端或服务器中，以便本地用户使用，还可以存储于云服务器中，方便所有可以访问云服务器的网络用户下载使用。

具体的，用于进行前端界面生成的终端或服务器可以在预设的渲染配置区域内显示预设属性数据库中的配置信息列表，响应于用户通过鼠标或键盘等输入设备进行针对配置信息的选择操作，生成目标配置信息。

用于进行前端界面生成的终端或服务器还可以在预设的渲染配置区域内显示针对目标组件的实时配置信息的选择框，响应于用户通过鼠标或键盘等输入设备进行针对目标组件渲染效果的配置操作，生成目标配置信息。

在一些实施方式中，用于进行前端界面生成的终端或服务器可以先基于目标组件的类型在属性数据库中查询获取目标配置信息，若没有从属性数据库中获取成功，则可以基于用户输入的针对目标组件的实时配置信息，生成目标配置信息。

(2)基于目标配置信息对目标组件的属性进行渲染操作，得到渲染后的目标组件。

其中，根据目标配置信息中包括的针对目标组件的事件和属性信息，对目标组件的原始事件和属性信息进行重置，以便在当前界面的预设界面元素中显示渲染后的目标组件。

(3)基于渲染后的目标组件，生成前端界面。

其中，目标配置信息中包含的目标组件的事件、类型和属性信息可以以JSON(JavaScript Object Notation,JS对象简谱，是一种轻量级的数据交换格式)键值对的形式展示和保存，并且基于前端界面中所有界面元素组件的JSON键值对信息，可以生成与该前端界面对应的JSON数据。

本申请实施例中提供了又一种可能的实现方式，如图6所述，基于渲染后的目标组件，生成前端界面之后，还包括：

(4)将目标配置信息更新至属性数据库中。

具体的，当基于用户的渲染配置操作实时触发生成的目标配置信息为用户常用的配置信息，可以将目标配置信息保存进属性数据库中，以便用户反复调用，提高开发效率。

其中，保存在属性数据库中的目标配置信息可以是针对目标组件的JSON键值对，也可以是对应前端界面上所有界面元素组件的JSON数据文件。

本申请实施例通过目标配置信息对目标组件进行显示效果的渲染，用户可以实时调整目标组件的事件和属性信息，基于可视化的组件生成前端界面，进一步提高了前端界面开发和维护的效率。

本申请实施例中提供了又一种可能的实现方式，该方法还包括：

(1)对前端界面进行语义化处理，生成前端代码；

(2)将前端代码发送至用于显示前端界面的客户端，以使客户端执行前端代码，显示前端界面的预览画面。

具体的，可以通过handlebars(JavaScript中的一个语义模板库)语义化模板基于前端界面生成Vue(一台用于构建用户界面的渐进式JavaScript框架)代码，以客户端类型为移动端浏览器为例，可以采用window.open指令将Vue代码发送到移动端浏览器，以使移动端浏览器执行该Vue代码并显示Vue代码所对应的前端界面的预览画面。通过客户端预览，方便了用户对前端界面的整体布局，以便用户能够实时对前端界面进行维护，提升了用户体验。

为了更好的理解上述前端界面的生成方法，下面结合图7和图8详细阐述一个本申请的前端界面的生成方法的示例：

如图7所示，为用于进行前端界面的生成的终端应用界面示意图，T1区工具栏的控件用于清空画布、生成JSON数据和生成Vue代码，T2区工具栏中包含组件库、模板库和属性数据库的列表供用户选择，T3区工具栏用于界面元素组件的实时配置信息的设置。该前端界面的生成方法包括如下步骤：

S801，根据接收到的客户端类型，确定与客户端类型对应的组件库；其中，组件库包括多个界面元素组件；界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的；

S802，基于获取到的针对界面元素组件的第一选择信息，从组件库中选择出目标组件；

S803，确定与客户端类型对应的模板库；模板库中包括多个模板；每一模板是由预设的至少一个界面元素组件组合得到的；

S804，接收针对模板库的第二选择信息，基于第二选择信息从模板库中选择出目标模板；

S805，基于目标组件的类型，从预设的属性数据库中查询与类型相匹配的目标配置信息；或者，接收用户输入的针对目标组件的实时配置信息，基于实时配置信息生成目标配置信息；

S806，基于目标配置信息对目标组件的属性进行渲染操作，得到渲染后的目标组件；

S807，基于目标模板和渲染后的目标组件，生成前端界面。

本申请通过将界面元素的功能代码进行模块化封装得到界面元素组件，并基于针对界面元素组件的第一选择信息得到目标组件，进而生成前端界面，实现以选择可视化界面元素组件的方式生成前端界面；相比于现有技术中通过开发人员编写代码的形式来完成前端界面的生成和维护，本申请基于标准化的界面元素组件，统一了底层的功能代码，用户只需从组件库中选取目标组件无需编写代码，缩短了前端界面开发的时间，提升了前端界面开发和维护的效率。

本申请实施例提供了一种前端界面的生成装置，如图9所示，该前端界面的生成装置90可以包括：确定模块901、选择模块902以及生成模块903；

其中，确定模块901，用于根据接收到的客户端类型，确定与客户端类型对应的组件库；其中，组件库包括多个界面元素组件；界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的；

选择模块902，用于基于获取到的针对界面元素组件的第一选择信息，从组件库中选择出目标组件；

生成模块903，用于基于目标组件，生成与客户端类型相匹配的前端界面。

本申请实施例中提供了一种可能的实现方式，上述生成模块903，具体可以包括：

第一获取单元，用于获取目标模板；目标模板包括至少一个界面元素组件；

第一生成单元，用于从至少一个界面元素组件中确定目标界面元素组件，用目标组件替换目标界面元素组件，得到更新模板，基于更新模板生成前端界面；或者，

将目标组件添加到目标模板，得到更新模板，基于更新模板生成前端界面。

本申请实施例中提供了另一种可能的实现方式，上述第一获取单元，具体可以用于：

确定与客户端类型对应的模板库；模板库中包括多个模板；每一模板是由预设的至少一个界面元素组件组合得到的；

接收针对模板库的第二选择信息，基于第二选择信息从模板库中选择出目标模板。

本申请实施例中提供了另一种可能的实现方式，上述生成模块903还包括模板更新单元，具体可以用于：

若检测到前端界面的生成次数大于或等于预设次数，或接收到针对更新模板的模板添加指令，将更新模板更新至模板库中。

本申请实施例中提供了另一种可能的实现方式，上述生成模块903，还可以包括：

第二获取单元，用于获取针对目标组件的目标配置信息；

渲染单元，用于基于目标配置信息对目标组件的属性进行渲染操作，得到渲染后的目标组件；

第二生成单元，用于基于渲染后的目标组件，生成前端界面。

本申请实施例中提供了又一种可能的实现方式，上述第二获取单元，还可以用于：

基于目标组件的类型，从预设的属性数据库中查询与类型相匹配的目标配置信息；或者，

接收用户输入的针对目标组件的实时配置信息，基于实时配置信息生成目标配置信息。

本申请实施例中提供了又一种可能的实现方式，该装置还包括预览模块，可以用于：

对前端界面进行语义化处理，生成前端代码；

将前端代码发送至用于显示前端界面的客户端，以使客户端执行前端代码，显示前端界面的预览画面。

本申请通过将界面元素的功能代码进行模块化封装得到界面元素组件，并基于针对界面元素组件的第一选择信息得到目标组件，进而生成前端界面，实现以选择可视化界面元素组件的方式生成前端界面；相比于现有技术中通过开发人员编写代码的形式来完成前端界面的生成和维护，本申请基于标准化的界面元素组件，统一了底层的功能代码，用户只需从组件库中选取目标组件无需编写代码，缩短了前端界面开发的时间，提升了前端界面开发和维护的效率。

本申请实施例中提供了一种电子设备，该电子设备包括：存储器和处理器；至少一个程序，存储于存储器中，用于被处理器执行时，与现有技术相比可实现：本申请通过将界面元素的功能代码进行模块化封装得到界面元素组件，并基于针对界面元素组件的第一选择信息得到目标组件，进而生成前端界面，实现以选择可视化界面元素组件的方式生成前端界面；相比于现有技术中通过开发人员编写代码的形式来完成前端界面的生成和维护，本申请基于标准化的界面元素组件，统一了底层的功能代码，用户只需从组件库中选取目标组件无需编写代码，缩短了前端界面开发的时间，提升了前端界面开发和维护的效率。

在一个可选实施例中提供了一种电子设备，如图10所示，图10所示的电子设备4000包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线4002相连。可选地，电子设备4000还可以包括收发器4004，收发器4004可以用于该电子设备与其他电子设备之间的数据交互，如数据的发送和/或数据的接收等。需要说明的是，实际应用中收发器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

处理器4001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示，图10中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器4003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器4003用于存储执行本申请方案的应用程序代码，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的应用程序代码，以实现前述方法实施例所示的内容。

其中，电子设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图10示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。

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

以上所述仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种前端界面的生成方法，其特征在于，包括：

根据接收到的客户端类型，确定与所述客户端类型对应的组件库；其中，所述组件库包括多个界面元素组件；所述界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的；

基于获取到的针对所述界面元素组件的第一选择信息，从所述组件库中选择出目标组件；

基于所述目标组件，生成与所述客户端类型相匹配的前端界面。

2.根据权利要求1所述的前端界面的生成方法，其特征在于，所述基于所述目标组件，生成与所述客户端类型相匹配的前端界面，包括：

获取目标模板；所述目标模板包括至少一个所述界面元素组件；

从至少一个所述界面元素组件中确定目标界面元素组件，用所述目标组件替换所述目标界面元素组件，得到更新模板，基于所述更新模板生成所述前端界面；或者，

将所述目标组件添加到所述目标模板，得到更新模板，基于所述更新模板生成所述前端界面。

3.根据权利要求2所述的前端界面的生成方法，其特征在于，所述获取目标模板，包括：

确定与所述客户端类型对应的模板库；所述模板库中包括多个模板；每一所述模板是由预设的至少一个所述界面元素组件组合得到的；

接收针对所述模板库的第二选择信息，基于所述第二选择信息从所述模板库中选择出所述目标模板。

4.根据权利要求2所述的前端界面的生成方法，其特征在于，还包括：

若检测到所述前端界面的生成次数大于或等于预设次数，或接收到针对所述更新模板的模板添加指令，将所述更新模板更新至所述模板库中。

5.根据权利要求1所述的前端界面的生成方法，其特征在于，所述基于所述目标组件，生成与所述客户端类型相匹配的前端界面，包括：

获取针对所述目标组件的目标配置信息；

基于目标配置信息对所述目标组件的属性进行渲染操作，得到渲染后的目标组件；

基于所述渲染后的目标组件，生成所述前端界面。

6.根据权利要求5所述的前端界面的生成方法，其特征在于，所述获取针对所述目标组件的目标配置信息，包括：

基于所述目标组件的类型，从预设的属性数据库中查询与所述类型相匹配的目标配置信息；或者，

接收用户输入的针对所述目标组件的实时配置信息，基于所述实时配置信息生成所述目标配置信息。

7.根据权利要求1所述的前端界面的生成方法，其特征在于，还包括：

对所述前端界面进行语义化处理，生成前端代码；

将所述前端代码发送至用于显示所述前端界面的客户端，以使所述客户端执行所述前端代码，显示所述前端界面的预览画面。

8.一种前端界面的生成装置，其特征在于，包括：

确定模块，用于根据接收到的客户端类型，确定与所述客户端类型对应的组件库；其中，所述组件库包括多个界面元素组件；所述界面元素组件是对对应的界面元素的功能代码进行模块化封装得到的；

选择模块，用于基于获取到的针对所述界面元素组件的第一选择信息，从所述组件库中选择出目标组件；

生成模块，用于基于所述目标组件，生成与所述客户端类型相匹配的前端界面。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-7任一项所述的前端界面的生成方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现权利要求1-7任一项所述的前端界面的生成方法。

Images