掌桥专利:专业的专利平台
掌桥专利
首页

网页配置方法、装置、电子设备与存储介质

文献发布时间:2023-06-19 12:13:22


网页配置方法、装置、电子设备与存储介质

技术领域

本发明涉及网络通信技术领域,尤其涉及一种网页配置方法、装置、电子设备与存储介质。

背景技术

随着前端技术的不断发展,为了提高代码的易维护性及易阅读性,一个网页(web页)通常会被封装成多个组件。当需要对网页进行修改时,可通过以下方式中的一种或多种实现:为网页增加组件、改变网页中组件的布局顺序、改变组件所展示的信息。

在现有技术中,无论是要为网页增加组件,还是要改变网页中组件的布局顺序、改变组件所展示的信息,都由技术人员通过调整工程代码的方式实现。

调整工程代码的过程较为繁琐,一般包括编写、测试、构建、打包、部署上线等多个流程。经过上述流程后,用户才能看到修改后的网页。

由此可见,现有技术中对网页进行修改的方法具有流程繁琐的缺陷。

发明内容

针对现有技术存在的问题,本发明提供一种网页配置方法、装置、电子设备与存储介质。

本发明提供一种网页配置方法,包括:

接收用户在预先设定的人机交互界面上的第一操作;

响应于所述第一操作,为待配置网页添加第一网页组件;其中,所述第一网页组件为所述第一操作所选定的网页组件;

在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作;

响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器。

根据本发明提供的一种网页配置方法,在所述在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作之前,方法还包括:

接收用户在所述人机交互界面上的第三操作;

响应于所述第三操作,调整第二网页组件在所述网页中的顺序;其中,所述第二网页组件为所述第三操作所选定的网页组件。

根据本发明提供的一种网页配置方法,在所述在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作之前,方法还包括:

接收用户在所述人机交互界面上的第四操作;

响应于所述第四操作,编辑第三网页组件的信息;其中,所述第三网页组件为所述第四操作所选定的网页组件。

根据本发明提供的一种网页配置方法,在所述在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作之前,方法还包括:

接收用户在所述人机交互界面上的第五操作;

响应于所述第五操作,以预览的方式展示当前配置的网页。

根据本发明提供的一种网页配置方法,所述响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器,包括:

响应于所述第二操作,将已配置网页中的网页组件的配置信息转换为json字符串,并通过HTTP请求发送给服务器。

根据本发明提供的一种网页配置方法,所述响应于所述第五操作,以预览的方式展示当前配置的网页,包括:

响应于所述第五操作,将所述当前配置的网页中的网页组件的配置信息转换为json字符串,根据所述json字符串在本地生成当前配置的网页。

根据本发明提供的一种网页配置方法,所述方法是基于前端框架vue.js实现的。

本发明还提供了一种网页配置装置,包括:

第一操作接收模块,用于接收用户在预先设定的人机交互界面上的第一操作;

网页组件添加模块,用于响应于所述第一操作,为待配置网页添加第一网页组件;其中,所述第一网页组件为所述第一操作所选定的网页组件;

第二操作接收模块,用于在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作;

发布模块,用于响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器。

本发明还提供了一种电子设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述程序时实现如所述网页配置方法的步骤。

本发明还提供了一种非暂态计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现如所述网页配置方法的步骤。

本发明提供的网页配置方法、装置、电子设备与存储介质,提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可将网页组件添加到网页中,并在网页配置成功后,将已配置网页传输给服务器。根据本发明提供的网页配置方法、装置、电子设备与存储介质,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

附图说明

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

图1为本发明提供的网页配置方法的流程图;

图2为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之一;

图3为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之二;

图4为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之三;

图5为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之四;

图6为本发明提供的网页配置装置的示意图;

图7是本发明提供的电子设备的结构示意图。

具体实施方式

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

下面结合图1-图7描述本发明提供的网页配置方法、装置、电子设备与存储介质。

图1为本发明提供的网页配置方法的流程图,如图1所示,本发明提供的网页配置方法,包括:

步骤101、接收用户在预先设定的人机交互界面上的第一操作;

步骤102、响应于所述第一操作,为待配置网页添加第一网页组件;其中,所述第一网页组件为所述第一操作所选定的网页组件;

步骤103、在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作;

步骤104、响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器。

本发明提供的网页配置方法可通过浏览器实现。

在现有技术中,对网页的配置通过调整工程代码的方式实现,存在一定的技术难度。不具有一定代码编写能力的技术人员无法实现网页配置。在本实施例中,提供了一个人机交互界面。用户在该人机交互界面上执行特定的操作,浏览器响应于这些特定操作,可实现网页的配置。

组件(Component)是对数据和/或方法的封装,在本发明中,网页组件包含了各种常用的界面组件,如:表格、表单、弹窗等。

本领域技术人员都知道,网页中包含了网页组件;不同内容的网页,其所包含的网页组件存在差异。例如,若待配置网页为PaaS相关的控制台首页,则所包含的网页组件包括PaaS相关的核心指标,如资源概览,平台健康度等;若待配置网页为mPaaS相关的控制台首页,则所包含的网页组件包括任务总览、移动开发产品、应用场景等。

因此,在本实施例中,用户会根据待配置网页的内容,为待配置网页添加对应的网页组件。

在本实施例中,所述第一操作可以为“点击操作+拖拽操作”,所述点击操作,用于选定网页组件,所选定的网页组件即为第一网页组件。第一网页组件的数量不做限制,可以是一个,也可以是多个。所述拖拽操作用于在所述人机交互界面上将第一网页组件移动到指定位置,以使得所述待配置网页添加第一网页组件。本领域技术人员很容易理解,第一网页组件在被第一操作选中前,其不属于网页的一部分。

图2为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之一,如图2所示,该人机交互界面包括区域A和区域B。区域A用于描述候选的网页组件,区域B用于描述已经被添加到待配置网页中的网页组件。

用户在图2所示的人机交互界面上,通过点击操作在区域A中选定网页组件201,然后通过拖拽操作将网页组件201移动至区域B。这意味着网页组件201已经被添加到网页中。

在本实施例中,网页配置方法是基于前端框架Vue实现的,因此可通过vuedraggable依赖包支持对网页组件的拖拽操作。在本发明的其他实施例中,前端框架也可以采用其他类型的前端框架,如React、Angular等,相应依赖包为react-beautiful-dnd、ngDraggable。

第一网页组件被添加到网页中后,其外部会包裹HTML中的

元素,基于所述div元素,可对第一网页组件进行编辑。在之后的实施例中,将涉及如何编辑网页组件中的信息。

在网页配置完成后,用户可在人机交互界面上执行第二操作,如点击人机交互界面上的“发布按钮”。响应于该第二操作,浏览器会将已配置网页中的网页组件的信息转换为json字符串,并发送给服务器。服务器将所接收到的json字符串保存在数据库中。

例如,已配置网页中的某一网页组件用于接收用户的基本信息,具体包括姓名、年龄、地址、性别等选项。当用户点击“发布按钮”后,浏览器会将该网页组件中的“姓名、年龄、地址、性别”等选项的信息转换成json字符串,然后通过HTTP请求发送给服务器。

可选的,响应于第二操作,浏览器会将已配置网页中的网页组件的配置信息转换为json字符串,并发送给服务器。

例如,已配置网页中的某一网页组件用于接收用户的基本信息,具体包括姓名、年龄、地址、性别等选项。其中,姓名、年龄两个选项可以配置,地址、性别两个选项是固定不变的。当用户点击“发布按钮”后,浏览器会将该网页组件中的可配置的“姓名、年龄”选项的信息转换成json字符串,然后通过HTTP请求发送给服务器。

当用户需要访问网页时,从服务器获取对应网页的json字符串数据。通过所述json字符串数据,可以知道网页中包含有哪些网页组件、网页组件的布局顺序以及网页组件的配置信息等。据此,可引入json数据中包含的网页组件并根据配置信息渲染,从而生成网页。

本发明提供的网页配置方法向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可将网页组件添加到网页中,并在网页配置成功后,将已配置网页传输给服务器。根据本发明提供的网页配置方法,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

基于上述任一实施例,在本实施例中,在所述在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作之前,方法还包括:

接收用户在所述人机交互界面上的第三操作;

响应于所述第三操作,调整第二网页组件在所述网页中的顺序;其中,所述第二网页组件为所述第三操作所选定的网页组件。

在之前的实施例中,描述了如何将网页组件添加到待配置的网页中。在本实施例中,将对如何调整网页组件在网页中的顺序进行说明。出于网页功能调整、网页布局调整、网页美化要求等多方面因素的影响,对于已经添加到网页中的网页组件,需要对其在网页中的顺序进行调整。

具体的说,在本实施例中,所述第三操作为“点击操作+拖拽操作”。例如,通过点击操作从网页已包含的网页组件中选定待调整的网页组件,即第二网页组件。然后通过拖拽操作调整第二网页组件在人机交互界面中的位置,从而调整第二网页组件在网页中的顺序。在其他实施例中,所述第三操作也可以是其他类型的操作。

在本实施例中,网页配置方法是基于前端框架Vue实现的,因此可通过vuedraggable依赖包支持对网页组件的拖拽操作。

图3为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之二,如图3所示,通过点击操作与拖拽操作,将网页组件201在人机交互界面中的位置从网页组件202之前(图3中的虚线框所在位置),调整为网页组件202之后。

网页组件在网页中的顺序发生调整,也就意味着网页组件与其相邻网页组件之间的顺序发生了变化。如在调整前,网页组件a在网页组件b之前,调整后,网页组件a在网页组件b之后。

本发明提供的网页配置方法向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可调整网页组件在网页中的顺序,从而更好地满足客户需求。根据本发明提供的网页配置方法,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

基于上述任一实施例,在本实施例中,在所述在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作之前,方法还包括:

接收用户在所述人机交互界面上的第四操作;

响应于所述第四操作,编辑第三网页组件的信息;其中,所述第三网页组件为所述第四操作所选定的网页组件。

本领域技术人员都知道,网页组件中的一些信息是可以动态配置的,如文本信息、图案信息(例如图标或背景图片)等。虽然在网页组件开发时,这些信息一般已经具有初始值,但在实际应用中,有对这些信息进行重新配置的需求。在本实施例中,将对如何重新编辑网页组件中可动态配置的信息进行说明。

在之前的实施例中已经提到,当网页组件添加到网页中后,其外部会包裹HTML中的

元素。基于所述div元素,可对网页组件进行编辑。因此,在本实施例中,可基于网页组件外部的div元素,对网页组件中的可动态配置的信息进行编辑。

在本实施例中,所述第四操作是信息输入的操作,如待编辑的信息是文本信息,由第四操作输入新的文本信息。

图4为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之三,如图4所示,已经被添加到网页中的网页组件具有编辑按钮,通过该编辑按钮可调用div所提供的编辑功能,从而对div所在网页组件的信息进行编辑。

本发明提供的网页配置方法向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可对已经被添加到网页中的网页组件进行信息编辑,从而更好地满足客户需求。根据本发明提供的网页配置方法,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

基于上述任一实施例,在本实施例中,在所述在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作之前,方法还包括:

接收用户在所述人机交互界面上的第五操作;

响应于所述第五操作,以预览的方式展示当前配置的网页。

在之前的实施例中,已经为网页添加网页组件、调整网页组件之间的顺序,和/或编辑网页组件的信息,得到一个初步配置完成的网页。用户在将该网页发布之前,为了确保网页的效果是自己所期望的,避免对网页的重复修改,通常需要对当前配置的网页进行预览,从而决定是否需要对网页做进一步的调整。

具体的说,在本实施例中,用户在人机交互界面上执行第五操作,如点击“预览按钮”,浏览器响应该第五操作,将所述当前配置的网页中的网页组件的配置信息转换为json字符串,然后根据所述json字符串在本地生成当前配置的网页。

若用户对网页的预览结果较为满意,继续网页发布的操作,若用户对网页的预览结果并不满意,可在网页中增加新的网页组件,或对网页中已有网页组件进行顺序调整和/或信息编辑。如何增加新的网页组件,如何对网页中已有网页组件进行顺序调整,如何编辑网页组件的信息均已经在之前的实施例中有详细说明,因此不在此处重复。

图5为本发明提供的网页配置方法中所涉及的人机交互界面的示意图之四,如图5所示,在人机交互界面上设置有预览按钮,当用户通过第五操作点击预览按钮后,浏览器获取当前已配置网页的json字符串,然后按照配置信息渲染出已配置网页的页面。

需要说明的是,通过预览方式看到的网页页面与网页发布生效后看到的网页页面是一样的。但在预览时,由于浏览器没有发送HTTP请求,服务器没有接收到配置修改后的网页,因此用户端打开的网页依然是上次配置的网页,本次配置的网页尚未生效。

本发明提供的网页配置方法向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可对当前配置的网页进行预览,根据预览结果决定是否发布或是否继续修改,从而更好地满足客户需求。根据本发明提供的网页配置方法,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

下面对本发明提供的网页配置装置进行描述,下文描述的网页配置装置与上文描述的网页配置方法可相互对应参照。

图6为本发明提供的网页配置装置的示意图,如图6所示,本发明提供的网页配置装置,包括:

第一操作接收模块601,用于接收用户在预先设定的人机交互界面上的第一操作;

网页组件添加模块602,用于响应于所述第一操作,为待配置网页添加第一网页组件;其中,所述第一网页组件为所述第一操作所选定的网页组件;

第二操作接收模块603,用于在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作;

发布模块604,用于响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器。

在本实施例中,所述响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器,包括:

响应于所述第二操作,将已配置网页中的网页组件的配置信息转换为json字符串,并通过HTTP请求发送给服务器。

本发明提供的网页配置装置向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可将网页组件添加到网页中,并在网页配置成功后,将已配置网页传输给服务器。根据本发明提供的网页配置装置,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

基于上述任一实施例,在本实施例中,装置还包括:

第三操作接收模块,用于接收用户在所述人机交互界面上的第三操作;

网页组件顺序调整模块,用于响应于所述第三操作,调整第二网页组件在所述网页中的顺序;其中,所述第二网页组件为所述第三操作所选定的网页组件。

本发明提供的网页配置装置向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可调整网页组件在网页中的顺序,从而更好地满足客户需求。根据本发明提供的网页配置装置,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

基于上述任一实施例,在本实施例中,装置还包括:

第四操作接收模块,用于接收用户在所述人机交互界面上的第四操作;

信息编辑模块,用于响应于所述第四操作,编辑第三网页组件的信息;其中,所述第三网页组件为所述第四操作所选定的网页组件。

本发明提供的网页配置装置向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可对已经被添加到网页中的网页组件进行信息编辑,从而更好地满足客户需求。根据本发明提供的网页配置装置,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

基于上述任一实施例,在本实施例中,装置还包括:

第五操作接收模块,用于接收用户在所述人机交互界面上的第五操作;

预览模块,用于响应于所述第五操作,以预览的方式展示当前配置的网页。

在本实施例中,响应于所述第五操作,以预览的方式展示当前配置的网页,具体包括:响应于所述第五操作,将所述当前配置的网页中的网页组件的配置信息转换为json字符串,根据所述json字符串在本地生成当前配置的网页。

本发明提供的网页配置装置向用户提供了一个人机交互界面,用户在人机交互界面中执行操作,浏览器响应于这些操作,可对当前配置的网页进行预览,根据预览结果决定是否发布或是否继续修改,从而更好地满足客户需求。根据本发明提供的网页配置装置,用户不需要掌握专业的编码能力即可实现对网页的配置,降低了网页配置的技术难度,也简化了网页配置的流程。

图7是本发明提供的电子设备的结构示意图,如图7所示,该电子设备可以包括:处理器(processor)710、通信接口(Communications Interface)720、存储器(memory)730和通信总线740,其中,处理器710,通信接口720,存储器730通过通信总线740完成相互间的通信。处理器710可以调用存储器730中的逻辑指令,以执行网页配置方法,该方法包括:

接收用户在预先设定的人机交互界面上的第一操作;

响应于所述第一操作,为待配置网页添加第一网页组件;其中,所述第一网页组件为所述第一操作所选定的网页组件;

在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作;

响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器。

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

另一方面,本发明还提供一种计算机程序产品,所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序,所述计算机程序包括程序指令,当所述程序指令被计算机执行时,计算机能够执行上述各方法所提供的网页配置方法,该方法包括:

接收用户在预先设定的人机交互界面上的第一操作;

响应于所述第一操作,为待配置网页添加第一网页组件;其中,所述第一网页组件为所述第一操作所选定的网页组件;

在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作;

响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器。

又一方面,本发明还提供一种非暂态计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现以执行上述各提供的网页配置方法,该方法包括:

接收用户在预先设定的人机交互界面上的第一操作;

响应于所述第一操作,为待配置网页添加第一网页组件;其中,所述第一网页组件为所述第一操作所选定的网页组件;

在网页配置完成的情况下,接收用户在所述人机交互界面上的第二操作;

响应于所述第二操作,将已配置网页中的网页组件的信息转换为字符串,并发送给服务器。

以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下,即可以理解并实施。

通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

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

相关技术
  • 网页配置方法、装置、电子设备与存储介质
  • 一种网页页面配置方法、装置、电子设备及存储介质
技术分类

06120113212299