CN114036438A - 一种页面搭建方法、装置、设备以及存储介质 - Google Patents

Abstract

本发明公开了一种页面搭建方法、装置、设备以及存储介质，属于计算机处理技术领域。该方法包括：识别到页面搭建请求，则从组件管理平台获取候选组件，并将所述候选组件显示于编辑页面的第一区域；响应于用户的拖拽指令，从所述候选组件中确定目标组件，并将所述目标组件从所述编辑页面的第一区域拖拽至第二区域；在所述编辑页面的第三区域向用户展示所述目标组件的配置面板；获取用户在所述配置面板上对所述目标组件的配置信息；基于所述目标组件的配置信息，对所述目标组件进行渲染，以生成目标页面。通过上述技术方案，为营销活动类页面搭建提供了一种新的解决方案。

Description

一种页面搭建方法、装置、设备以及存储介质

技术领域

本发明实施例涉及计算机处理技术领域，尤其涉及一种页面搭建方法、装置、设备以及存储介质。

背景技术

传统开发交付一个活动页面的流程，需要产品人员输出交互图给UI设计人员进行视觉稿设计，然后开发人员根据视觉设计稿进行开发，进一步的若是新项目可能还需要配置其他复杂的环境和框架，进而进行联调、测试和发布。这种方式，对应产品的开发上线周期非常长，因此，亟需一种有效的页面开发方式。

发明内容

本发明提供一种页面搭建方法、装置、设备以及存储介质，以释放开发成本、提高运营效率。

第一方面，本发明实施例提供了一种页面搭建方法，该方法包括：

若识别到页面搭建请求，则从组件管理平台获取候选组件，并将所述候选组件显示于编辑页面的第一区域；

响应于用户的拖拽指令，从所述候选组件中确定目标组件，并将所述目标组件从所述编辑页面的第一区域拖拽至第二区域；

在所述编辑页面的第三区域向用户展示所述目标组件的配置面板；

获取用户在所述配置面板上对所述目标组件的配置信息；

基于所述目标组件的配置信息，对所述目标组件进行渲染，以生成目标页面。

第二方面，本发明实施例还提供了一种页面搭建装置，该装置包括：

候选组件确定模块，用于若识别到页面搭建请求，则从组件管理平台获取候选组件，并将所述候选组件显示于编辑页面的第一区域；

目标组件确定模块，用于响应于用户的拖拽指令，从所述候选组件中确定目标组件，并将所述目标组件从所述编辑页面的第一区域拖拽至第二区域；

配置面板展示模块，用于在所述编辑页面的第三区域向用户展示所述目标组件的配置面板；

配置信息获取模块，用于获取用户在所述配置面板上对所述目标组件的配置信息；

目标页面生成模块，用于基于所述目标组件的配置信息，对所述目标组件进行渲染，以生成目标页面。

第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明任一实施例所提供的页面搭建方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任一实施例所提供的页面搭建方法。

本发明实施例的技术方案，通过若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域，之后响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域，进而在编辑页面的第三区域向用户展示目标组件的配置面板，最后获取用户在配置面板上对目标组件的配置信息，并基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。上述技术方案，提高了页面搭建的效率，释放了活动开发人力，实现了业务的快速交付，为营销活动类页面搭建提供了一种新的解决方案。

附图说明

图1是本发明实施例一提供的一种页面搭建方法的流程图；

图2是本发明实施例二提供的一种页面搭建方法的流程图；

图3是本发明实施例三提供的一种页面搭建装置的结构示意图；

图4是本发明实施例四提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1是本发明实施例一提供的一种页面搭建方法的流程图，本实施例可适用于页面搭建的情况，尤其适用于营销活动类页面搭建的情况，该方法可以由页面搭建装置来执行，该装置可以由软件和/或硬件的方式实现，并可集成于承载页面搭建功能的电子设备中，如服务端中，示例性的，可以是服务端中的页面搭建平台。

如图1所示，该方法具体可以包括：

S110、若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域。

本实施例中，页面搭建请求是指用于指示进行页面创建的请求。所谓组件管理平台是指对组件进行管理的平台，该平台提供组件新增、编辑、查询、上传和管理等功能；进一步的，该平台还可以将最新上传的组件设置成当前生效版本，以完成组件的更新，比保证后续在编辑页面中的组件的版本是最新的。

本实施例中，组件是通过CLI工具设计实现的，开发人员可以通过CLI工具设计好组件后，进行打包，上传至组件管理平台，以供运营人员使用。其中，CLI开发工具提供初始化工程、初始化组件模板、热更新组件构建和打包组件等功能。需要说明的是，组件可以由各个团队中的开发人员进行开发，上传至组件管理平台，以供不同团队的人员使用。

本实施例中，候选组件是指从组件管理平台中获取的，可用于用户使用的组件。

本实施例中，编辑页面是指进行页面搭建的页面，编辑页面可以包括三个区域，其中，示例性的，第一区域，用于展示候选组件，例如可以在编辑页面左侧区域；第二区域，用于展示页面搭建效果，例如可以在编辑页面中间区域；第三区域，用于展示候选组件对应的配置面板，例如可以在编辑页面右侧区域。其中，配置面板可以用于对候选组件的配置信息进行设置修改，进一步的，配置信息可以包括组件的背景色、位置、文案色和尺寸等信息。

本实施例中，页面搭建平台若识别到页面搭建请求，则从组件管理平台中获取候选组件，并将候选组件显示于编辑页面的第一区域。

S120、响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域。

本实施例中，目标组件是指从候选组件中选择的任一组件，也即用户想要拖拽的候选组件。

本实施例中，页面搭建平台响应于用户的拖拽指令，从候选组件中确定目标组件，即用户点击的候选组件，将目标组件从编辑页面的第一区域拖拽指第二区域。

S130、在编辑页面的第三区域向用户展示目标组件的配置面板。

本实施例中，在编辑页面的第三区域向用户展示目标组件的配置面板，配置面板中有目标组件的初始配置信息。

S140、获取用户在配置面板上对目标组件的配置信息。

本实施例中，获取用户在配置面板上对目标组件的配置信息，例如组件的背景色等信息。若用户未设置目标组件的配置信息，则采用目标组件的初始配置信息。

S150、基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。

本实施例中，目标页面是指线上活动的落地页。

本实施例中，基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。

本发明实施例的技术方案，通过若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域，之后响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域，进而在编辑页面的第三区域向用户展示目标组件的配置面板，最后获取用户在配置面板上对目标组件的配置信息，并基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。上述技术方案，提高了页面搭建的效率，释放了活动开发人力，实现了业务的快速交付，为营销活动类页面搭建提供了一种新的解决方案。

在上述技术方案的基础上，作为本发明的一种可选方式，还可以在目标页面生成过程中，若识别到页面锁定事件，对编辑页面进行锁定。需要说明的是，在创建目标页面时，会设置用户权限，即哪些用户可以编辑目标页面，例如某活动项目中的项目成员可以访问编辑目标页面，非该活动项目成员不可以对目标页面进行编辑。

其中，页面锁定事件是指用于触发锁定编辑页面的事件，例如在编辑页面上方设置锁定页面按钮等。

具体的，页面搭建平台识别到页面锁定事件，则对编辑页面进行锁定，即不响应非该目标页面的项目成员对编辑页面的操作。

可以理解的是，通过对编辑页面进行锁定，可以确保目标页面不被轻易更改，从而提高页面搭建效率。

实施例二

图2是本发明实施例二提供的一种页面搭建方法的流程图，在上述实施例的基础上，进一步优化，提供一种可选实施方案。

如图2所示，该方法具体可以包括：

S210、若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域。

S220、响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域。

本实施例中，若监测到任一候选组件存在新版本，则生成组件更新通知，组件更新通知包括组件更新标识和更新版本，在编辑页面向用户展示组件更新通知。

其中，组件更新通知用于提醒用户有组件更新，是否要对当前编辑页面的候选组件进行更新。组件更新标识是指要更新的候选组件的标识；更新版本是指要更新的候选组件的最新的版本信息。

具体的，对于编辑页面的任一候选组件，若监测到该候选组件的版本信息，与组件管理平台中该候选组件的版本信息不一致，则确定该候选组件存在新版本，进而生成组件更新通知，并在编辑页面向用户展示组件更新通知。

可选的，若识别到组件更新事件，则从候选组件中确定待更新组件，对第一区域内的待更新组件进行更新。

其中，组件更新事件是指用于指示进行候选组件更新的事件。

具体的，若识别到组件更新事件，则从候选组件中确定待更新组件，并对第一区域内的待更新组件进行更新，即从组件管理平台中获取待更新组件的新版本，用新版本替换旧版本。

可选的，若识别到第二区域内的目标组件的版本已更新，则向用户询问是否对第二区域内的目标组件的版本进行更新；若检测到询问结果为是，则对第二区域内的目标组件的版本进行更新。

示例性的，在页面搭建过程中，若识别到第二区域内的目标组件的版本已更新，则生成一个询问提示框，向用户询问是否对第二区域内的目标组件的版本进行更新；若检测到询问结果为是，则对第二区域内的目标组件的版本进行更新。

示例性的，对第二区域内的对目标组件的版本进行更新还可以是，在目标页面已经发布的情况下，对第二区域内的目标组件进行更新，并对已发布的目标页面中的目标组件进行更新。具体的，在当前编辑页面中的目标页面已经发布的情况下，对第二区域内的目标组件进行更新，并对已发布的目标页面中的目标组件进行更新。需要说明的是，对于使用了目标组件的其他落地页，当目标组件更新后，不影响使用了目标组件的其他落地页。

S230、在编辑页面的第三区域向用户展示目标组件的配置面板。

S240、获取用户在配置面板上对目标组件的配置信息。

S250、基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。

本发明实施例的技术方案，通过若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域，之后响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域，进而在编辑页面的第三区域向用户展示目标组件的配置面板，最后获取用户在配置面板上对目标组件的配置信息，并基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。上述技术方案，提高了页面搭建的效率，释放了活动开发人力，实现了业务的快速交付，为营销活动类页面搭建提供了一种新的解决方案。

实施例三

图3是本发明实施例三提供的一种页面搭建装置的结构示意图，本实施例可适用于页面搭建的情况，尤其适用于营销活动类页面搭建的情况，该装置可以由软件和/或硬件的方式实现，并可集成于承载页面搭建功能的电子设备中，如服务端中，示例性的，可以是服务端中的页面搭建平台。

如图3所示，该装置具体可以包括：

候选组件确定模块310，用于若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域；

目标组件确定模块320，用于响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域；

配置面板展示模块330，用于在编辑页面的第三区域向用户展示目标组件的配置面板；

配置信息获取模块340，用于获取用户在配置面板上对目标组件的配置信息；

目标页面生成模块350，用于基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。

本发明实施例的技术方案，通过若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域，之后响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域，进而在编辑页面的第三区域向用户展示目标组件的配置面板，最后获取用户在配置面板上对目标组件的配置信息，并基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。上述技术方案，提高了页面搭建的效率，释放了活动开发人力，实现了业务的快速交付，为营销活动类页面搭建提供了一种新的解决方案。

进一步地，配置信息至少包括背景色、位置、文案色和尺寸。

进一步地，该装置还包括更新模块，该更新模块包括：

更新通知单元，用于若监测到任一候选组件存在新版本，则生成组件更新通知，组件更新通知包括组件更新标识和更新版本；

更新通知展示单元，用于在编辑页面向用户展示组件更新通知。

进一步地，该更新模块还包括：

待更新组件确定单元，用于若识别到组件更新事件，则从候选组件中确定待更新组件；

待更新组件更新单元，用于对第一区域内的待更新组件进行更新。

进一步地，该更新模块还包括：

组件更新询问单元，用于若识别到第二区域内的目标组件的版本已更新，则向用户询问是否对第二区域内的目标组件的版本进行更新；

目标组件更新单元，用于若检测到询问结果为是，则对第二区域内的目标组件的版本进行更新。

进一步地，目标组件更新单元具体用于：

在目标页面已经发布的情况下，对第二区域内的目标组件进行更新，并对已发布的目标页面中的目标组件进行更新。

上述页面搭建装置可执行本发明任意实施例所提供的页面搭建方法，具备执行方法相应的功能模块和有益效果。

实施例四

图4是本发明实施例四提供的一种电子设备的结构示意图，图4示出了适于用来实现本发明实施例实施方式的示例性设备的框图。图4显示的设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，电子设备12以通用计算设备的形式表现。电子设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器(高速缓存32)。电子设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。系统存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明实施例各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如系统存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明实施例所描述的实施例中的功能和/或方法。

电子设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该电子设备12交互的设备通信，和/或与使得该电子设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，电子设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与电子设备12的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的页面搭建方法。

实施例五

本发明实施例五还提供一种计算机可读存储介质，其上存储有计算机程序(或称为计算机可执行指令)，该程序被处理器执行时用于执行本发明实施例所提供的页面搭建方法，该方法包括：

若识别到页面搭建请求，则从组件管理平台获取候选组件，并将候选组件显示于编辑页面的第一区域；

响应于用户的拖拽指令，从候选组件中确定目标组件，并将目标组件从编辑页面的第一区域拖拽至第二区域；

在编辑页面的第三区域向用户展示目标组件的配置面板；

获取用户在配置面板上对目标组件的配置信息；

基于目标组件的配置信息，对目标组件进行渲染，以生成目标页面。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明实施例进行了较为详细的说明，但是本发明实施例不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种页面搭建方法，其特征在于，包括：

若识别到页面搭建请求，则从组件管理平台获取候选组件，并将所述候选组件显示于编辑页面的第一区域；

响应于用户的拖拽指令，从所述候选组件中确定目标组件，并将所述目标组件从所述编辑页面的第一区域拖拽至第二区域；

在所述编辑页面的第三区域向用户展示所述目标组件的配置面板；

获取用户在所述配置面板上对所述目标组件的配置信息；

基于所述目标组件的配置信息，对所述目标组件进行渲染，以生成目标页面。

2.根据权利要求1所述的方法，其特征在于，所述配置信息至少包括背景色、位置、文案色和尺寸。

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

若监测到任一候选组件存在新版本，则生成组件更新通知，所述组件更新通知包括组件更新标识和更新版本；

在所述编辑页面向用户展示所述组件更新通知。

4.根据权利要求3所述的方法，其特征在于，还包括：

若识别到组件更新事件，则从候选组件中确定待更新组件；

对所述第一区域内的待更新组件进行更新。

5.根据权利要求3所述的方法，其特征在于，还包括：

若识别到所述第二区域内的所述目标组件的版本已更新，则向用户询问是否对所述第二区域内的所述目标组件的版本进行更新；

若检测到询问结果为是，则对所述第二区域内的所述目标组件的版本进行更新。

6.根据权利要求5所述的方法，其特征在于，所述对所述第二区域内的对所述目标组件的版本进行更新，包括：

在所述目标页面已经发布的情况下，对所述第二区域内的目标组件进行更新，并对已发布的所述目标页面中的所述目标组件进行更新。

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

在所述目标页面生成过程中，若识别到页面锁定事件，对所述编辑页面进行锁定。

8.一种页面搭建装置，其特征在于，包括：

候选组件确定模块，用于若识别到页面搭建请求，则从组件管理平台获取候选组件，并将所述候选组件显示于编辑页面的第一区域；

目标组件确定模块，用于响应于用户的拖拽指令，从所述候选组件中确定目标组件，并将所述目标组件从所述编辑页面的第一区域拖拽至第二区域；

配置面板展示模块，用于在所述编辑页面的第三区域向用户展示所述目标组件的配置面板；

配置信息获取模块，用于获取用户在所述配置面板上对所述目标组件的配置信息；

目标页面生成模块，用于基于所述目标组件的配置信息，对所述目标组件进行渲染，以生成目标页面。

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

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一项所述的页面搭建方法。

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

Images