CN114489648A - 一种页面生成方法、系统、终端及介质 - Google Patents

Abstract

本发明提供的页面生成方法、系统、终端及介质，方法包括以下步骤：在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；在可视化界面的第二区域显示画布；接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。该方法在前端页面的开发过程中，不需要一个个书写前端代码，且通过直接在可视化界面操作组件生成前端页面的方式，相比于通过书写前端代码生成前端页面的方式，开发速度更快，开发效率更高。

Description

一种页面生成方法、系统、终端及介质

技术领域

本发明属于前端框架技术领域，具体涉及一种页面生成方法、系统、终端及介质。

背景技术

目前，前端页面基本上都是基于开源的ui组件库以及自研的公共组件库搭建的静态页面，一个新页面的开发需求通常包含很多前端页面的开发工作，比如：对页面进行布局、引入组件、样式书写等。但是现有方法在开发新页面的过程中，还是需要一个个书写前端代码，开发效率低下。

发明内容

针对现有技术中的缺陷，本发明提供一种页面生成方法、系统、终端及介质，提高前端页面的开发效率。

第一方面，一种页面生成方法，包括以下步骤：

在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；

在可视化界面的第二区域显示画布；

接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；

当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。

优选地，在可视化界面的第一区域显示预设组件库，包括：

在可视化界面的第一区域构建组件列表；

在组件列表中添加组件，以得到预设组件库。

优选地，方法还包括：

将预设组件库中每个组件的配置信息记录至config.json文件中；

建立预设组件库中每个组件与其对应的配置信息之间的关联。

优选地，在可视化界面的第二区域显示画布，包括：

在可视化界面的第二区域中设置DIV块级元素，以将DIV块级元素配置为画布。

优选地，方法还包括：

当监听到第三区域中配置信息中任一配置项的值发生变化时，根据变化后的数更新画布的配置信息。

优选地，方法还包括：

当接收到生成代码指令时，下载画布中所有组件的配置信息；

基于配置信息生成前端开发代码。

第二方面，一种页面生成系统，包括：

组件库配置单元：用于在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；

画布配置单元：用于在可视化界面的第二区域显示画布；

操作单元：用于接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；

生成单元：用于当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。

优选地，所述系统还包括：

代码下载单元：用于当接收到生成代码指令时，下载画布中所有组件的配置信息，基于配置信息生成前端开发代码。

第三方面，一种终端，包括处理器、输入设备、输出设备和存储器，处理器、输入设备、输出设备和存储器相互连接，其中，存储器用于存储计算机程序，计算机程序包括程序指令，处理器被配置用于调用程序指令，执行第一方面的方法。

第四方面，一种计算机可读存储介质，计算机存储介质存储有计算机程序，计算机程序包括程序指令，程序指令当被处理器执行时使处理器执行第一方面的方法。

由上述技术方案可知，本发明提供的页面生成方法、终端、系统及介质，将前面页面配置或使用到的组件均配置到组件库中，每个组件都有其对应的配置信息，且提供可视化界面显示组件及配置信息，使得对组件的操作、配置信息处理等均可在可视化界面中实现，即能够根据前端页面的需求在可视化界面中操作各种组件，最后根据可视化界面中所有组件及对应的配置信息即可生成前端页面，这样在前端页面的开发过程中，不需要一个个书写前端代码，且通过直接在可视化界面操作组件生成前端页面的方式，相比于通过书写前端代码生成前端页面的方式，开发速度更快，开发效率更高。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。

图1为本发明实施例提供的页面生成方法流程图。

图2为本发明实施例提供的页面生成系统框图。

图3为本发明实施例提供的终端的模块框图。

具体实施方式

下面将结合附图对本发明技术方案的实施例进行详细的描述。以下实施例仅用于更加清楚地说明本发明的技术方案，因此只作为示例，而不能以此来限制本发明的保护范围。需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本发明所属领域技术人员所理解的通常意义。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

实施例：

一种页面生成方法，参见图1，包括以下步骤：

S1：在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；

S2：在可视化界面的第二区域显示画布；

S3：接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；

S4：当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。

在本实施例中，预设组件库中包含了前端页面开发过程中常用的组件，预设组件库可以设置一个或多个，预设组件库可以根据前端页面的适用领域确定包含的组件。当预设组件库为多个时，可以将预设组件库与适用领域相对应。可视化界面可以为开发人员自行确定的、能够直接通过计算机显示的界面，其可以是空白界面或者是模板界面。每个组件设有对应的配置信息，配置信息中包括一个或多个配置项，每个配置项设有对应值。该方法当构建好预设组件库后，记录预设组件库中组件的配置信息，例如可以根据预设组件库中组件的配置信息生成配置文件，该配置文件与预设组件库一一对应。可视化界面的第一区域、第二区域和第三区域可以由开发人员开发时进行设置，也可以提供个性化选择功能由用户自行选择。

在本实施例中，画布为用户的操作区域，即用户可以在画布上对组件进行操作，开发前端网页。用户在画布中对组件的操作可以包括拖拽、删除、新增、修改等等。例如当用户可以从预设组件库中将组件拖拽至画布中；用户可以在画布中删除、新增或修改任一组件；用户可以将画布中组件的位置从一位置拖至另一位置。当用户在画布中进行一次操作时，显示操作的组件的配置信息，这样用户就可以在操作过程中，直观看到组件原来的配置信息，不需要用户单独再调取组件的配置信息，方便使用。配置信息可以在用户操作时直接弹出进行显示。

在本实施例中，当用户在画布中设置好组件以及对应的配置信息时，可以进行预览。预览指令可以是用户点击设置在可视化界面中的一按钮后得到，预览时对画布上的所有组件以及对应的配置信息进行渲染，生成前端页面，如果生成的前端页面不满意，也可以重新返回画布，对画布进行重新编辑和修改，直至生成满意的渲染结果。

该方法能够根据前端页面的需求在可视化界面中操作各种组件，最后根据可视化界面中所有组件生成前端页面，这样在前端页面的开发过程中，不需要一个个书写前端代码，且通过直接在可视化界面操作组件生成前端页面的方式，相比于通过书写前端代码生成前端页面的方式，开发速度更快，开发效率更高。

进一步地，在一些实施例中，在可视化界面的第一区域显示预设组件库，包括：

在可视化界面的第一区域构建组件列表；

在组件列表中添加组件，以得到预设组件库。

在本实施例中，该方法可以首先构建组件列表，将组件的信息填入组件列表中，得到预设组件库。组件列表可以根据组件的信息进行设置。

进一步地，在一些实施例中，方法还包括：

将预设组件库中每个组件的配置信息记录至config.json文件中；

建立预设组件库中每个组件与其对应的配置信息之间的关联。

在本实施例中，当构建好预设组件库后，可以将预设组件库中组件初始的配置信息记录至config.json文件中，并建立组件与配置信息之间的关联，使得配置信息与组件一一对应，这样当用户在画布中操作组件时，可以直接从config.json文件中自动调取该组件的配置信息并显示。后续如果用户要修改预设组件库中组件的配置信息时，用新的配置信息覆盖config.json文件中对应的旧的配置信息即可。

进一步地，在一些实施例中，在可视化界面的第二区域显示画布，包括：

在可视化界面的第二区域中设置DIV块级元素，以将DIV块级元素配置为画布。

在本实施例中，该方法可以在可视化界面上设置一个DIV块级元素，定义为画布，画布的设置位置可以根据用户或大众的使用习惯确定。

进一步地，在一些实施例中，方法还包括：

当监听到第三区域中配置信息中任一配置项的值发生变化时，根据变化后的值更新画布中的配置信息。

在本实施例中，当用户在画布中操作组件时，如果组件原来的配置信息不符合新前端页面的开发需求时，可以对第三区域对该组件的配置信息进行修改，修改时可以修改配置信息中部分或全部配置项的数值，修改方式包括新增、删除、修改等。该方法可以对配置信息进行监听，当监听到配置信息变化时，例如监听到配置信息中配置项中值发生修改、删除、新增等等，根据变化后值更新配置项和配置信息，同时在第三区域上显示变化后的配置信息，方便用户及时看到新的配置信息，如果新的配置信息与开发需求不相符，及时进行修改，从而达到对组件的配置信息进行修改的目的，该方法可以直接在可视化界面上对配置信息进行修改，实现了可视化配置的功能。

进一步地，在一些实施例中，方法还包括：

当接收到生成代码指令时，下载画布中所有组件的配置信息；

基于配置信息生成前端开发代码。

在本实施例中，当生成满意的前端页面后，如果用户想要保存该前端页面的前端开发代码，可以利用new Blob的方式下载所有组件的配置信息，就能得到前端页面的前端开发代码，这样开发人员就可以基于该前端开发代码进行后续开发，不需要书写前端开发代码。

进一步地，在一些实施例中，第二区域为可视化界面的中部；

第一区域为画布的左部；

第三区域为画布的右部。

在本实施例中，用户可以按照想要的布局和格式在可视化界面的左部新增一栏，设置预设组件库；用户可以在可视化界面的中部设置DIV块级元素，形成画布；用户可以在可视化界面的右部按照想要的布局和格式新增一栏，显示配置信息。

本实施例还提供以下两种利用该方法的开发场景：

1、假设预设组件库中的组件包括栅格布局、折线图、柱状图和饼状图等等。用户在预设组件库中选择栅格布局，拖拽栅格布局到画布，右侧(即第三区域)弹出栅格布局的配置栏，配置栏用于显示组件的配置信息，用户在配置栏中输入栅格列数4，修改栅格布局的配置信息，这样画布中栅格布局这一组件的配置信息为栅格列数4，画布就会出现4等分的布局。然后用户在左侧(第一区域)预设组件库中选择折线图，同样，右侧弹出折线图的配置栏，用户在配置栏中配置折线图大小、x轴参数、y轴参数以及图标标题等，修改折线图的配置信息，这样画布中折线图这一组件的配置信息为用户修改的折线图的大小、x轴参数、y轴参数以及图标标题。当配置完折线图后，用户也可以依次配置其他柱状图和饼状图等组件。最后点击预览按钮，就能呈现出一个包含各种图表的前端页面，点击生成代码按钮就可下载该前端开发代码。

2、假设预设组件库中的组件包括panel布局、基础组件下拉框、表格等等。用户在预设组件库中选择panel布局，拖拽panel布局到画布，右侧(即第三区域)弹出panel布局的配置栏，配置栏用于显示组件的配置信息，用户在配置栏中输入panel的样式配置，修改panel布局的配置信息，这样画布中panel布局这一组件的配置信息为用户修改的样式配置。同样，用户在左侧(第一区域)预设组件库中选择基础组件下拉框，将基础组件下拉框放置在panel的filter框中，右侧弹出基础组件下拉框的配置栏，在配置栏中配置基础组件下拉框的宽高、默认值、校验规则等，修改基础组件下拉框的配置信息，这样画布中基础组件下拉框这一组件的配置信息为用户修改的基础组件下拉框的宽高、默认值、校验规则。同理，当配置完基础组件下拉框后，用户也可以依次配置其他表格等组件。最后点击预览按钮，就能呈现出包含各种表单的前端页面，点击生成代码按钮就可下载前端开发代码。

一种页面生成系统，参见图2，包括：

组件库配置单元1：用于在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；

画布配置单元2：用于在可视化界面的第二区域显示画布；

操作单元3：用于接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；

生成单元4：用于当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。

优选地，组件库配置单元1具体用于：

在可视化界面的第一区域构建组件列表；

在组件列表中添加组件，以得到预设组件库。

优选地，组件库配置单元1具体用于：

将预设组件库中每个组件的配置信息记录至config.json文件中；

建立预设组件库中每个组件与其对应的配置信息之间的关联。

优选地，画布配置单元2具体用于：

在可视化界面的第二区域中设置DIV块级元素，以将DIV块级元素配置为画布。

优选地，操作单元3具体用于：

当监听到第三区域中配置信息中任一配置项的值发生变化时，根据变化后的数更新画布的配置信息。

优选地，所述系统还包括：

代码下载单元5：用于当接收到生成代码指令时，下载画布中所有组件的配置信息，基于配置信息生成前端开发代码。

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

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本发明实施例所提供的系统，为简要描述，实施例部分未提及之处，可参考前述实施例中相应内容。

一种终端，参见图3，包括处理器11、输入设备12、输出设备13和存储器14，处理器11、输入设备12、输出设备13和存储器14相互连接，其中，存储器14用于存储计算机程序，计算机程序包括程序指令，处理器11被配置用于调用程序指令，执行上述方法。

具体实现中，本发明实施例中描述的终端包括但不限于诸如具有触摸敏感表面(例如，触摸屏显示器和/或触摸板)的移动电话、膝上型计算机或平板计算机之类的其它便携式设备。还应当理解的是，在某些实施例中，设备并非便携式通信设备，而是具有触摸敏感表面(例如，触摸屏显示器和/或触摸板)的台式计算机。

在接下来的讨论中，描述了包括显示器和触摸敏感表面的终端。然而，应当理解的是，终端可以包括诸如物理键盘、鼠标和/或控制杆的一个或多个其它物理用户接口设备。

终端支持各种应用程序，例如以下中的一个或多个：绘图应用程序、演示应用程序、文字处理应用程序、网站创建应用程序、盘刻录应用程序、电子表格应用程序、游戏应用程序、电话应用程序、视频会议应用程序、电子邮件应用程序、即时消息收发应用程序、锻炼支持应用程序、照片管理应用程序、数码相机应用程序、数字摄影机应用程序、web浏览应用程序、数字音乐播放器应用程序和/或数字视频播放器应用程序。

可以在终端上执行的各种应用程序可以使用诸如触摸敏感表面的至少一个公共物理用户接口设备。可以在应用程序之间和/或相应应用程序内调整和/或改变触摸敏感表面的一个或多个功能以及终端上显示的相应信息。这样，终端的公共物理架构(例如，触摸敏感表面)可以支持具有对用户而言直观且透明的用户界面的各种应用程序。

应当理解，在本发明实施例中，所称处理器11可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

输入设备12可以包括触控板、指纹采传感器(用于采集用户的指纹信息和指纹的方向信息)、麦克风等，输出设备13可以包括显示器(LCD等)、扬声器等。

该存储器14可以包括只读存储器和随机存取存储器，并向处理器11提供指令和数据。存储器14的一部分还可以包括非易失性随机存取存储器。例如，存储器14还可以存储设备类型的信息。

本发明实施例所提供的终端，为简要描述，实施例部分未提及之处，可参考前述实施例中相应内容。

一种计算机可读存储介质，计算机存储介质存储有计算机程序，计算机程序包括程序指令，程序指令当被处理器执行时使处理器执行上述方法。

计算机可读存储介质可以是前述任一实施例的终端的内部存储单元，例如终端的硬盘或内存。计算机可读存储介质也可以是终端的外部存储设备，例如终端上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，计算机可读存储介质还可以既包括终端的内部存储单元也包括外部存储设备。计算机可读存储介质用于存储计算机程序以及终端所需的其他程序和数据。计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。

本发明实施例所提供的介质，为简要描述，实施例部分未提及之处，可参考前述实施例中相应内容。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

Claims (10)

1.一种页面生成方法，其特征在于，包括以下步骤：

在可视化界面的第一区域显示预设组件库，所述预设组件库包括至少一个组件，每个所述组件具有与其对应的配置信息；

在所述可视化界面的第二区域显示画布；

接收在所述画布中对所述组件的操作，并在所述可视化界面的第三区域显示所述组件对应的所述配置信息；

当接收到预览指令时，对所述画布上所有组件以及对应的所述配置信息进行渲染，得到前端页面。

2.根据权利要求1所述页面生成方法，其特征在于，

所述在可视化界面的第一区域显示预设组件库，包括：

在所述可视化界面的第一区域构建组件列表；

在所述组件列表中添加所述组件，以得到所述预设组件库。

3.根据权利要求1所述页面生成方法，其特征在于，所述方法还包括：

将所述预设组件库中每个所述组件的所述配置信息记录至config.json文件中；

建立所述预设组件库中每个所述组件与其对应的所述配置信息之间的关联。

4.根据权利要求1所述页面生成方法，其特征在于，

所述在所述可视化界面的第二区域显示画布，包括：

在所述可视化界面的所述第二区域中设置DIV块级元素，以将所述DIV块级元素配置为所述画布。

5.根据权利要求1所述页面生成方法，其特征在于，所述方法还包括：

当监听到所述第三区域中所述配置信息中任一配置项的值发生变化时，根据变化后的值更新所述画布的配置信息。

6.根据权利要求1-5中任一项所述页面生成方法，其特征在于，所述方法还包括：

当接收到生成代码指令时，下载所述画布中所有所述组件的所述配置信息；

基于所述配置信息生成前端开发代码。

7.一种页面生成系统，其特征在于，包括：

组件库配置单元：用于在可视化界面的第一区域显示预设组件库，所述预设组件库包括至少一个组件，每个所述组件具有与其对应的配置信息；

画布配置单元：用于在所述可视化界面的第二区域显示画布；

操作单元：用于接收在所述画布中对所述组件的操作，并在所述可视化界面的第三区域显示所述组件对应的所述配置信息；

生成单元：用于当接收到预览指令时，对所述画布上所有组件以及对应的所述配置信息进行渲染，得到前端页面。

8.根据权利要求7所述页面生成系统，其特征在于，所述系统还包括：

代码下载单元：用于当接收到生成代码指令时，下载所述画布中所有所述组件的所述配置信息，基于所述配置信息生成前端开发代码。

9.一种终端，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行如权利要求1-6任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1-6任一项所述的方法。

Images