一种页面开发方法及装置与流程

文档序号:14156295阅读:187来源:国知局

本发明涉及计算机技术领域,特别涉及一种页面开发方法及装置。



背景技术:

随着计算机技术和互联网技术的不断发展与进步,各类网站和应用程序为生活和生产带来了极大的便利。页面作为用户与网站和应用程序进行交互的媒介,页面的质量直接影响用户的使用体验,因此页面开发是网站开发和应用程序开发的重要组成部分。

目前在进行页面开发时,根据待开发页面需要展示的内容和排版,对页面进行开发。

针对目前进行页面开发的方法,页面通常为写死状态,即页面所包括模块的数量、各个模块所能够展示信息的类型和各模块之间相对位置是固定的。因此,当需要在已开发完成的页面中新增模块、删除模块、修改模块所展示信息的类型或各模块之间相对位置时,需要耗费较长的时间对页面进行重新开发,造成页面开发的效率较低。



技术实现要素:

本发明实施例提供了一种页面开发方法及装置,可以提高页面开发的效率。

第一方面,本发明实施例提供了一种页面开发方法,创建页面模板和至少一个页面组件,其中,每一个所述页面组件对应至少一种信息展示形式,还包括:

确定待开发页面中需要进行展示的至少一个待展示信息;

针对每一个所述待展示信息,根据所述待展示信息的信息展示形式获取对应的所述页面组件;

获取所述页面模板,并将获取到的各个所述页面组件添加到所述页面模板上;

分别配置所述页面模板上每一个所述页面组件的位置配置信息,以确定每一个所述页面组件在所述页面模板上的位置;

分别配置每一个所述页面组件的数据源配置信息,以确定每一个所述页面组件的数据源;

对各个所述页面组件对应的所述位置配置信息和所述数据源配置信息进行持久化,形成所述待开发页面的加载文件。

可选地,

在所述形成所述待开发页面的加载文件之后,进一步包括:

在接收到用户的触发后,通过加载所述加载文件对所述待开发页面进行展示;

根据所述用户对所展示的所述待开发页面上各个所述页面组件与所述页面模板之间相对位置进行的调整,以及所述用户对各个所述页面组件的信息展示形式进行的调整,获得个性化配置信息;

将所述个性化配置信息与所述用户的用户标识相关联,并对所述个性化配置信息进行持久化,以在所述用户再次访问所述待开发页面时根据所述个性化配置信息和所述加载文件对所述用户进行调整后的所述待开发页面进行展示。

可选地,

在所述将所述个性化配置信息与所述用户的用户标识相关联,并对所述个性化配置信息进行持久化之后,进一步包括:

在接收到所述用户的触发后,对所述待开发页面的所述页面模板进行加载;

针对所述待开发页面包括的每一个所述页面组件,判断所述个性化配置信息中是否包括有用于对所述页面组件与所述页面模板之间相对位置进行配置的个性化位置配置信息,如果是,根据所述个性化位置配置信息将所述页面组件加载到所述页面模板上,否则根据所述加载文件中的所述位置配置信息将所述页面组件加载到所述页面模板上;

根据所述加载文件包括的所述数据源配置信息,分别为每一个所述页面组件分配待展示信息;

针对所述待开发页面包括的每一个所述页面组件,判断所述个性化配置信息中是否包括有用于对所述页面组件的信息展示形式进行配置的个性化渲染配置信息,如果是,根据所述个性化渲染配置信息和所述页面组件对应的所述待展示信息对所述页面组件进行渲染,否则根据所述加载文件中包括的默认渲染配置信息和所述页面组件对应的所述待展示信息对所述页面组件进行渲染。

可选地,

在所述通过加载所述加载文件对所述待开发页面进行展示之后,进一步包括:

在所述用户对所述待开发页面上的至少一个所述页面组件进行删除后,形成页面组件禁用信息;

将所述页面组件禁用信息与所述用户标识相关联,并对所述页面组件禁用信息进行持久化,以在所述用户再次访问所述待开发页面时根据所述页面组件禁用信息不对被所述用户删除的各个所述页面组件进行展示。

可选地,

在所述通过加载所述加载文件对所述待开发页面进行展示之后,进一步包括:

当所述用户在所述待开发页面上新增至少一个所述页面组件后,形成页面组件新增信息;

将所述页面组件新增信息与所述用户表示相关联,并对所述页面组件新增信息进行持久化,以在所述用户再次访问所述待开发页面时根据所述页面组件新增信息对所述用户新增的各个所述页面组件进行展示。

第二方面,本发明实施例还提供了一种页面开发装置,包括:创建单元、组合单元、配置单元和存储单元;

所述创建单元,用于创建页面模板和至少一个页面组件,其中,每一个所述页面组件对应至少一种信息展示形式;

所述组合单元,用于确定待开发页面中需要进行展示的至少一个待展示信息,针对每一个所述待展示信息,根据所述待展示信息的信息展示形式从所述创建单元创建的各个所述页面组件中获取对应的所述页面组件,并在获取到所述创建单元创建的所述页面模板后将获取到的各个所述页面组件添加到所述页面模板上;

所述配置单元,用于分别配置由所述组合单元添加到所述页面模板上的每一个所述页面组件的位置配置信息,以确定每一个所述页面组件在所述页面模板上的位置,并分别配置每一个所述页面组件的数据源配置信息,以确定每一个所述页面组件的数据源;

所述存储单元,用于对各个所述页面组件对应的所述位置配置信息和所述数据源配置信息进行持久化,形成所述待开发页面的加载文件。

可选地,

该页面开发装置进一步包括:进一步包括:展示单元和自定义单元;

所述展示单元,用于在接收到用户的触发后,通过加载所述存储单元形成的所述加载文件对所述待开发页面进行展示;

所述自定义单元,用于根据所述用户对所述展示单元所展示的所述待开发页面上各个所述页面组件与所述页面模板之间相对位置进行的调整,以及所述用户对各个所述页面组件的信息展示形式进行的调整,获得个性化配置信息;

所述存储单元,进一步用于将所述自定义单元获得的所述个性化配置信息与所述用户的用户标识相关联,并对所述个性化配置信息进行持久化,以在所述用户再次访问所述待开发页面时根据所述个性化配置信息和所述加载文件对所述用户调整后的所述待开发页面进行展示。

可选地,

所述展示单元包括:页面模板加载子单元、页面组件加载子单元、数据加载子单元和页面组件渲染子单元;

所述页面模板加载子单元,用于在所述存储单元对所述个性化配置信息进行持久化之后,当接收到所述用户的触发后,对所述待开发页面的所述页面模板进行加载;

所述页面组件加载子单元,用于针对所述待开发页面包括的每一个所述页面组件,判断所述存储单元持久化的所述个性化配置信息中是否包括有用于对所述页面组件与所述页面模板之间相对位置进行配置的个性化位置配置信息,如果是,根据所述个性化位置配置信息将所述页面组件加载到所述页面模板加载子单元加载的所述页面模板上,否则根据所述加载文件中的所述位置配置信息将所述页面组件加载到所述页面模板加载子单元加载的所述页面模板上;

所述数据加载子单元,用于根据所述加载文件包括的所述数据源配置信息,分别为每一个所述页面组件分配待展示信息;

所述页面组件渲染子单元,用于针对所述待开发页面包括的每一个所述页面组件,判断所述个性化配置信息中是否包括有用于对所述页面组件的信息展示形式进行配置的个性化渲染配置信息,如果是,根据所述个性化渲染配置信息和所述页面组件对应的所述待展示信息对所述页面组件进行渲染,否则根据所述加载文件中包括的默认渲染配置信息和所述页面组件对应的所述待展示信息对所述页面组件进行渲染。

可选地,

所述自定义单元,进一步用于在所述用户对所述待开发页面上的至少一个所述页面组件进行删除后,形成页面组件禁用信息,并将所述页面组件禁用信息与所述用户标识相关联,并对所述页面组件禁用信息进行持久化,以在所述用户再次访问所述待开发页面时根据所述页面组件禁用信息不对被所述用户删除的各个所述页面组件进行展示。

可选地,

所述自定义单元,进一步用于当所述用户在所述待开发页面上新增至少一个所述页面组件后,形成页面组件新增信息,并将所述页面组件新增信息与所述用户表示相关联,并对所述页面组件新增信息进行持久化,以在所述用户再次访问所述待开发页面时根据所述页面组件新增信息对所述用户新增的各个所述页面组件进行展示。

本发明实施例提供的页面开发方法及装置,预先创建页面模板和多个页面组件,在需要开发页面时,根据待开发页面上的每一个待展示信息的信息展示形式获取相对应的页面组件,将获取到的各个页面组件添加到页面模板上之后,通过配置各个页面组件的位置配置信息和数据源配置信息,调整各个页面组件在页面模板上的位置和页面组件的数据源,将各个页面组件对应的位置配置信息和数据源配置信息持久化后,形成待开发页面的加载文件,当接收到用户的触发后对加载文件进行加载便可以对待开发页面进行展示。由此可见,开发完成的页面由页面模板和各个相对独立的页面组件组成,当需要对开发完成的页面进行修改时,可以在原有页面的基础对新增页面组件、删除页面组件、重新配置页面组件的位置配置信息和数据源配置信息,而无需对整个页面进行重新开发,从而提高了页面开发的效率。

附图说明

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

图1是本发明一个实施例提供的一种页面开发方法的流程图;

图2是本发明一个实施例提供的另一种页面开发方法的流程图;

图3是本发明一个实施例提供的一种页面开发装置所在设备的示意图;

图4是本发明一个实施例提供的一种页面开发装置的示意图;

图5是本发明一个实施例提供的另一种页面开发装置的示意图;

图6是本发明一个实施例提供的又一种页面开发装置的示意图。

具体实施方式

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

如图1所示,本发明实施例提供了一种页面开发方法,该方法可以包括以下步骤:

步骤101:创建页面模板和至少一个页面组件,其中,每一个页面组件对应至少一种信息展示形式;

步骤102:确定待开发页面中需要进行展示的至少一个待展示信息;

步骤103:针对每一个待展示信息,根据待展示信息的信息展示形式获取对应的页面组件;

步骤104:获取页面模板,并将获取到的各个页面组件添加到页面模板上;

步骤105:分别配置页面模板上每一个页面组件的位置配置信息,以确定每一个页面组件在页面模板上的位置;

步骤106:分别配置每一个页面组件的数据源配置信息,以确定每一个页面组件的数据源;

步骤107:对各个页面组件对应的位置配置信息和数据源配置信息进行持久化,形成待开发页面的加载文件。

本发明实施例提供了一种页面开发方法,预先创建页面模板和多个页面组件,在需要开发页面时,根据待开发页面上的每一个待展示信息的信息展示形式获取相对应的页面组件,将获取到的各个页面组件添加到页面模板上之后,通过配置各个页面组件的位置配置信息和数据源配置信息,调整各个页面组件在页面模板上的位置和页面组件的数据源,将各个页面组件对应的位置配置信息和数据源配置信息持久化后,形成待开发页面的加载文件,当接收到用户的触发后对加载文件进行加载便可以对待开发页面进行展示。由此可见,开发完成的页面由页面模板和各个相对独立的页面组件组成,当需要对开发完成的页面进行修改时,可以在原有页面的基础对新增页面组件、删除页面组件、重新配置页面组件的位置配置信息和数据源配置信息,而无需对整个页面进行重新开发,从而提高了页面开发的效率。

可选地,在图1所示页面开发方法的基础上,在步骤107形成待开发页面的加载文件之后,用户可以对待开发页面的展示形式进行个性化设置,具体过程如下:

在接收到用户的触发后,通过加载已形成的加载文件,对待开发页面进行展示;用户可以对所展示的待开发页面上各个页面组件与页面模板之间的相对位置进行调整,还可以对各个页面组件的信息展示形式进行调整,根据用户进行的调整形成对应的个性化配置信息;将形成的个性化配置信息与该用户的用户标识相关联后,对个性化配置信息进行持久化。这样,当该用户再次对该待开发页面进行访问时,根据与该用户的用户标识相关联的个性化配置信息和加载文件,对该用户个性化调整后的待开发页面进行展示。

用户在访问一个页面时,可以在该页面上对所展示的各个页面组件的位置以及各个页面组件的信息展示形式进行调整,在用户调整完成并接收到用户的保持指令后,可以根据用户调整后各个页面组件的位置和信息展示形式,形成相对应的个性化配置信息,将所形成的个性化配置信息与用户的用户标识相关联后进行持久化。这样,当同一用户再次对该页面进行访问时,根据用户的用户标识获取相对应的个性化配置信息,根据获取到的个性化配置信息和加载文件对页面进行加载,使得展示的页面为用户个性化调整之后的页面。

用户根据自己的使用习惯和需求对页面进行个性化调整后,形成与调整后页面相对应的个性化配置信息,当同一用户再次对该页面进行访问时,根据对应于该用户的个性化配置信息和加载文件对该页面进行加载,使得加载出的页面为用户进行个性化调整后的页面,从而满足不同用户对同一页面进行个性化定制的需求,提高了用户的使用体验。

例如,一个页面a包括分布在页面模板上的4个页面组件,其中,页面组件1用于展示表格,页面组件2用于展示图片,页面组件3用于展示图表,页面组件4用于展示文字内容,在用户b的触发下页面a加载完成后,页面组件1至4从左至右依次排布,且页面组件3以饼状图展示比例数据。用户b通过相应的页面行列布局选项交换页面组件1和页面组件2的位置,并将页面组件3的信息展示形式更改后柱状图后,用户b触发相应的保存选项后,形成对应于用户b的个性化配置信息,并将该个性化配置信息存储到对应的存储空间。当用户b再次访问页面a时,根据用户b对应的个性化配置信息和加载文件对页面a进行加载,在所加载出的页面a中,页面组件2、页面组件1、页面组件3和页面组件4从左至右依次排布,且页面组件3以柱状图展示比例数据。从而实现了用户b根据自身使用习惯和需求个性化定义页面a展示形式的目的。

另外,用户在对页面组件的位置和信息展示信息进行调整时,实时对页面进行刷新,使得用户在对页面进行调整后,可以实时看到页面调整后的展示效果。在页面调整过程中对页面进行实时刷新,使得用户可以所见即所得对页面中各个页面组件的布局和信息展示形式进行个性化调整,进一步体提高了用户的使用体验。

可选地,针对一个页面,将一个用户对该页面进行调整后获得的个性化配置信息进行持久化之后,当该用户再次对该页面进行访问时,需要根据该用户对应的个性化配置信息和该页面对应的加载文件,完成对该页面的加载,具体地:

在接收到该用户的触发后,对该页面的页面模板进行加载;

针对该页面包括的每一个页面组件,判断与该用户的用户标识相关联的个性化配置信息中是否包括有用于对该页面组件位置进行配置的个性化位置配置信息,如果是,根据所述个性化位置配置信息将该页面组件加载到页面模板上,否则根据该页面所对应加载文件中用于对该页面组件位置进行配置的位置配置信息将该页面组件加载到页面模板上;

根据该页面所对应加载文件包括的数据源配置信息,分别为该页面包括的每一个页面组件分配待展示信息;

针对该页面包括的每一个页面组件,判断与该用户的用户标识相关联的个性化配置信息中是否包括有用于对该页面组件的信息展示形式进行配置的个性化渲染配置信息,如果是,根据所述个性化渲染配置信息和该页面组件对应的待展示信息对该页面组件进行渲染,否则根据该页面所对应加载文件中包括的默认渲染配置信息和该页面组件对应的待展示信息对该页面组件进行渲染。

由于每一种页面组件对应有至少一种信息展示形式,每一种信息展示形式具有相对应的渲染配置信息,在根据一个待展示信息的信息展示形式确定页面组件后,根据该待展示信息的信息展示方式配置所确定页面组件的渲染配置信息,在形成加载文件时该渲染配置信息将作为加载文件的一部分进行持久化。

用户在对页面上的各个页面组件进行个性化调整时,可以仅对部分页面组件进行个性化调整,还可以对全部页面组件进行个性化调整,而个性化配置信息仅记录经用户个性化调整的页面组件的位置配置信息和数据源配置信息。在用户对一个页面进行访问时,针对该页面包括的每一个页面组件,如果与该用户的用户标识相关联的个性化配置信息中包括有对该页面组件的位置进行配置的个性化位置配置信息,则根据所包括的个性化位置配置信息对该页面组件进行加载,如果与该用户的用户标识相关联的个性化配置信息中没有对该页面组件的位置进行配置的个性化位置配置信息,则根据加载文件中包括的对该页面组件的位置进行配置的位置配置信息对该页面组件进行加载;相应地,如果与该用户的用户标识相关联的个性化配置信息中包括有对该页面组件的信息展示形式进行配置的个性化渲染配置信息,则根据所包括的个性化渲染配置信息对该页面组件进行渲染,如果与该用户的用户标识相关联的个性化配置信息中没有对该页面组件的信息展示形式进行配置的个性化渲染配置信息,则根据加载文件中包括的对该页面组件的信息展示形式进行配置的默认渲染配置信息对该页面组件进行渲染。

当一个用户访问一个页面时,针对该页面包括的每一个页面组件,如果与该用户的用户标识相关联的个性化配置信息中包括有对该页面组件进行配置的配置信息(个性化位置配置信息和/或个性化渲染配置信息),则在加载和/或渲染该页面组件时根据个性化配置信息中记录的配置信息进行;如果个性化配置信息中没有对该页面组件细节配置的配置信息(个性化位置配置信息和/或个性化渲染配置信息),则在加载和/或渲染该页面组件时根据加载文件中记录的配置信息进行。由此可见,在加载页面过程中,个性化配置信息的优先级高于加载文件中记录的配置信息,使得加载出的页面为用户个性化调整后的页面,保证同一页面根据用户的不同以不同的排版界面、页面组件展现形态进行展示,满足用户个性化定制的需求,提升用户的使用体验。

可选地,在通过对加载文件进行加载展示待开发页面后,用户可以对所展示的待开发页面上的一个或多个页面组件进行删除,根据用户删除的页面组件形成对应的页面组件禁用信息,将形成的页面组件禁用信息与用户的用户标识相关联后,对页面组件禁用信息进行持久化。这样,同一用户再次访问同一页面时,根据与用户的用户标识相关联的页面组件禁用信息和加载文件对页面进行加载,所加载出的页面不对被用户删除掉的各个页面组件进行展示。

用户在访问一个页面的过程中,通过触发相应的页面组件编辑选项,可以对页面包括的页面组件进行删除操作,当用户删除一个或多个页面组件并进行保存操作后,根据被删除的页面组件形成对应的页面组件禁用信息,当同一用户再次访问该页面时,被用户删除的各个页面组件将不再显示。这样,用户可以删除页面上不需要的页面组件并进行保存,在后续访问该页面时将不再展示被删除的页面组件,进一步提升了用户的使用体验。

可选地,在通过对加载文件进行加载展示待开发页面后,用户可以在所展示待开发页面上新增一个或多个页面组件,根据所增加的各个页面组件在页面模板上的位置、页面组件的信息展示形式以及页面组件的数据源形成对应的页面组件新增信息,将形成的页面组件新增信息与用户的用户标识相关联后,对页面组件新增信息进行持久化。这样,同一用户再次访问同一页面时,根据与用户的用户标识相关联的页面组件新增信息和加载文件对页面进行加载,所加载出的页面不仅包括加载文件定义的各个页面组件,还包括页面组件新增信息定义的各个页面组件。

用户在访问一个页面的过程中,通过触发相应的页面组件编辑选项,可以在页面中新增页面组件,以在原有页面中增加相应的功能。当用户新增一个或多个页面组件并进行保存后,根据新增页面组件形成对应的页面组件新增信息,当同一用户再次访问该页面时,除了展示该页面原有页面组件外,还展示用户新增的各个页面组件。这样,用户可以根据需求在页面上增加具有相应信息展示形式的页面组件并进行保存,在后续访问该页面时将对新增页面组件进行展示,以增加页面的功能,从而可以满足不同用户的需求,提高了用户的满意度。

具体地,用户在页面上新增页面组件时,首先,需要选择所要新增页面组件,系统提供多种可供选择的页面组件,每种页面组件对应有不同的信息展示形式,用户可以通过拖拽的方式将所需的页面组件添加到页面模板上相应的位置;然后,配置新增页面组件的形式展示形式,由于同一个页面组件可以对应多种信息展示形式,比如可以通过饼状图展示比例数据,还可以通过柱状图展示比例数据;最后,配置新增页面组件的数据源,数据源即为页面组件所展示信息的来源,比如可以为网址、数据库存储目录等。因此,页面组件新增信息中包括新增页面组件的标识、用户标识、新增页面组件位置配置信息、新增页面组件渲染配置信息以及新增页面组件数据源配置信息等。

在本发明实施例中,加载文件中除了包括有各个页面组件对应的位置配置信息和数据源配置信息外,还包括有各个页面组件的标识、各个页面组件的渲染配置信息以及页面模板上的参数信息。其中,页面模板的参数信息包括页面基本的dom结构、页面的小组件容器抓手、页面的布局抓手和页面布局等。

页面基本的dom结构用于定义页面的主体框架结构,对与符合该框架结构标准的页面才能支持运行时定制。页面基本的dom结构包括5个约定,分别为页面唯一标识、页面配置信息标签、浏览器兼容性说明、页面引用样式文件结构、app入口。页面唯一标识用于位置标识一个页面,用于在查找页面、保存页面个性化配置信息是作为唯一识别;页面配置信息标签用于记录此页面是否支持个性化、用户选用页面布局、页面渲染方式等页面配置信息;浏览器兼容性说明用于描述此页面需要使用哪种浏览器引擎渲染,提高对多种主流浏览器的兼容性;页面应用样式文件结构用于指定页面样式文件引入时机,指定必须引入的用于支撑此类页面正常运转的基本页面样式;app入口用于指定此页面公共脚本处理器的入口。

页面的小组件容器抓手,用于标记在整个页面中,此部分中的内容为动态变化的,使用页面组件进行填充。

页面的布局抓手,用于标记页面个性化布局应该填充的位置。

页面布局,用于标记页面中页面组件排版方式及填充位置。布局应以行列划分,每一行平分为固定的x等份,行中每列都可以自定义设置为占用n等份,但同一行中所有列所占等份之和应等于x。每个列应该有个针对于此页面的唯一标示,用于标示页面组件放置位置。

通过对页面模板的各项配置参数进行配置,可以对页面模板的主题布局进行切换。比如,在页面模板的第一种主题布局中,页眉位置为固定的图片预览区,页脚位置为固定的版权信息展示区;在页面模板的第二种主题布局中,左侧边为固定的图片预览区,右侧边为固定的版权信息展示区。开发人员通过对页面模板的配置信息进行配置,可以选择页面模块的主题布局。

为了实现界面可个性化,实现个性化排版及局部刷新,需要将相对独立且完整的部分封装为符合标准规范的页面组件。页面组件标准包含组件基本组成元素、组件配置信息、小组件的服务端控制器和小组件的客户端控制器等。

组件基本组成为用于描述组件基本组成元素,具体包括:视图,即页面组件展示所使用的基本dom结构;客户端控制器,用于在客户端指导页面组件显示及交互的控制器;数据源,即页面组件展示的数据来源;配置页面,用于定义组件的配置页面路径;配置信息,用于指导页面组件展示及数据获取的配置信息;样式,即页面组件的展示样式。

组件配置信息为页面组件的一组配置信息,用于指导页面组件获取数据及渲染。配置信息分为默认配置信息和个性化配置信息,其中,默认配置信息为页面组件默认的配置信息,在用户未个性化配置组件的情况下有效,个性化配置信息为用户针对页面组件进行配置所保留的配置信息。当页面组件渲染时,需要对个性化配置信息及默认配置信息进行合并,对于重复的配置项以个性化配置信息为准,对于个性化配置信息中未配置的配置项使用默认配置信息。

小组件的服务端控制器用于指导服务端加载方式的页面组件,在加载过程中服务端所进行的控制,控制依据以小组件配置信息及公共组件配置信息为准,其具体工作包括:根据小组件配置信息获取数据、根据小组件配置信息选择组件渲染使用的视图、根据小组件配置信息进行数据及视图的绑定。

小组件客户端控制器用于对小组件客户端显示进行控制。小组件客户端控制器为javascript脚本,应遵循amd规范,具体工作为:指定小组件加载前、第一次加载、每次加载完成、大小变化、关闭等事件完成后,小组件应进行的相应操作;加载小组件使用的样式文件;加载小组件所依赖的javascript包;暴露小组件对外提供的事件、方法,在设置组件间联动通讯时使用。

页面在运行时增加配置功能,并在配置结束后将配置信息持久化到数据库中。具体包含以下内容:页面行列布局的选择、组件整理、组件配置、持久化配置信息。要实现上述内容,页面中应有一个用于负责指导页面加载及提供页面调整接口的前端js引擎,称之为前端页面引擎。

页面行列布局的选择,前端页面引擎中提供布局选择窗口,用于调整页面整体布局结构。

组件整理,前端页面引擎中提供组件调整接口,用于通过拖动调整页面中组件位置、删除组件、增加组件。组件调整抓手多样化,比如,前端页面引擎在页面渲染完成后,自动在页面中右下角固定位置注入一个页面调整按钮,按钮在鼠标滑动上后,在上方弹出两个新按钮(共三个按钮:一个为布局切换按钮,一个为增加组件按钮,一个为布局编辑按钮),当点击编辑按钮,进入页面编辑模式。每个小组件上覆盖遮罩层,遮罩层上有删除按钮、部件配置按钮,并且行列信息颜色加深来突出。

部件上都有个部件配置按钮,点击部件配置按钮,弹出部件配置界面,其中部件配置包含三部分内容:部件配置、公共配置、高级配置。部件配置为针对部件中允许个性化的配置信息,使用权利要求8中的配置页面。其中配置页面中应包含两个接口:getconfig、setconfig。getconfig为用户通过部件配置页面配置完成,前端页面引擎调用此接口,获取用户配置信息,并将配置信息序列化为标准的json字符串,调用组件配置信息保存接口,将配置信息持久化到数据库中。setconfig接口用于当用户打开配置页面时,前端页面引擎获取当前部件的配置信息,将其通过此接口传入配置页面,初始化配置信息相关控件的默认值。其中页面配置信息改变是,调用小组件刷新方法,自动刷新当前正在配置的小组件。

持久化配置信息用于当页面配置完成后,将配置结果持久化到数据库中。其中持久化分页面排版配置信息与页面组件配置信息两部分。前端页面引擎能够序列化页面排版配置信息为标准的json结构,当页面加载时,能够根据此json结构,反序列化为页面的dom结构。示例结构如下:

上述页面排版配置信息持久化需要包含以下4个关键内容:页面标示、用户标示、页面布局标示、具体配置信息内容。上述页面组件配置信息持久化需要包含以下4个关键内容:页面标示、用户标示、组件标示、具体配置信息内容

当用户通过浏览器访问页面时,页面引擎根据持久化的页面及组件配置信息动态生成页面,具体包含以下内容:组装页面模板、解析页面排版配置信息,填充组件容器和加载组件。

组装页面模板用于web服务器添加拦截器,当用户通过浏览器访问动态页面是,拦截器拦截此类动态页面请求,执行服务端页面引擎渲染页面模板,具体渲染步骤如下:解析请求路径,查找页面标示;根据页面标示、当前用户,获取页面配置信息;根据页面配置信息中页面所选择的布局类型,填充页面布局;填充页面排版配置信息到页面中;返回页面模板。

解析页面排版配置信息,填充组件容器。当浏览器获取到页面模板后,会自动执行页面的入口脚本,前端页面引擎开始执行。前端页面引擎从页面模板中获取到页面排版配置信息,根据配置信息,生成组件容器,填充到相应的页面位置。其中组件容器中包含组件标示。

当组件容器填充完毕,前端页面引擎遍历部件容器,异步调用服务端组件引擎加载组件dom结构,并执行组件前端控制器,指导页面组件显示及交互。

下面开发一个工作中心页面为例,对本发明实施例提供的页面开发方法作进一步详细说明,如图2所示,该方法可以包括以下步骤:

步骤201:创建页面模板和至少一个页面组件。

在本发明一个实施例中,预先创建页面模板和多个页面组件,其中,每一个页面组件对应一种或多种信息展示形式,页面模板可以进行配置,以提供不同的布局规则。

例如,工作中心页面包括有个人基本信息、个人消息、常用功能入口、我的待办任务、我的已办任务、我的申请这6项内容,这6项内容可以抽象为3个页面组件,分别为个人信息组件、常用功能组件和列表组件。从而创建个人信息组件、常用功能组件和列表组件。并创建页面模板a。

步骤202:将页面组件添加到页面模板上,获得加载文件。

在本发明一个实施例中,根据待开发页面包括的待展示信息,分别为每一项待展示信息选择对应的页面组件,将选择的各个页面组件添加到页面模板上,并分别配置每一个页面组件的位置配置参数和数据源配置参数,确定各个页面组件在页面模板上的位置以及获取待展示信息的来源。且可以对页面模进行配置,调整页面模板的布局。将各个页面组件的标识、每一个页面组件对应的位置配置信息和数据源配置信息、页面模板的配置信息等信息进行持久化,获得对应于待开发页面的加载文件。

例如,针对工作中心页面包括的6项内容,选择1个个人信息组件展示个人基本信息内容,选择1个常用功能组件展示常用功能入口内容,选择4个列表组件分别展示个人消息、我的待办任务、我的已办任务和我的申请内容。将选择的6个页面组件添加到页面模板a上,并分别设置6个页面组件的位置配置信息和数据源配置信息,并对页面模板a的配置信息进行设置,之后进行持久化操作,将各个6个页面组件对应的位置配置信息和数据源配置信息、页面模板a的配置信息、6个页面组件的标识持久化到加载文件a中,之后通过对加载文件a进行加载,展示工作中心页面。

步骤203:根据用户的触发,通过对加载文件进行加载,展示待开发页面。

在本发明一个实施例中,在获得加载文件之后,在接收到用户的触发之后,可以对加载文件进行加载,从而展示已经开发完成的待开发页面。

例如,在接收到用户b发送的访问请求后,对加载文件a进行加载,向用户b展示工作中心页面。在工作中心页面上,6个页面组件从两行排列,第一行从左至右依次为个人信息组件、常用功能组件和列表组件1,第二行从左至右依次为列表组件2、列表组件3和列表组件4,其中,列表组件1用于展示个人消息,列表组件2用于展示我的待办任务,列表组件3用于展示我的已办任务,列表组件4用于展示我的申请。

步骤204:根据用户对页面组件的调整,形成个性化配置信息。

在本发明一个实施例中,将已开发完成的待开发页面展示给用户后,用户可以对所展示页面上的各个页面组件的位置及信息展示信息进行调整,在用户对页面组件调整完成后,根据已被调整过的页面组件的状态形成个性配置信息。

例如,用户b触发工作中心页面上相应的编辑选项后,以拖动的形式交换个人信息组件和列表组件4的位置,在用户触发保持选项后,根据个人信息组件和列表组件4的位置,形成个性化配置信息b。

步骤205:将形成的个性化配置信息与用户的用户标识相关联后,对个性化配置信息进行持久化。

在本发明一个实施例中,在形成个性化配置信息后,将个性化配置信息与用户的用户标识相关联,以能够识别出个性化配置信息所对应的用户,在关联完成后对个性化配置信息进行持久化。

例如,将个性化配置信息b与用户b的用户标识b相关联后,对个性化配置信息b进行持久化。

步骤206:接收同一用户的再次触发,根据相对应个性化配置信息和加载文件,对待开发页面进行展示。

在本发明一个实施例中,当同一用户再次对已经调整过的页面进行访时,在接收到用户的触发后,获取用户的用户标识,根据获取到的用户标识确定相关联的个性化配置信息,根据确定出的个性化配置信息和加载文件对用户所要访问的页面进行加载,加载出用户调整后页面。在根据个性化配置信息和加载文件对页面进行加载时,对个性化配置信息和加载文件中都包括的页面组件,按照个性化配置信息对该页面组件进行加载,对个性化配置信息中部包括的页面组件,按照加载文件对该页面组件进行加载。

例如,用户b再次对工作中心页面进行访问时,获取用户b的用户标识b,根据用户标识b确定相关联的个性配置信息b,根据配置信息b和加载文件对工作中心页面进行加载。在加载出的工作中心页面上,第一行从左至右依次为列表组件4、常用功能组件和列表组件1,第二行从左至右依次为列表组件2、列表组件3和个人信息组件。

需要说明的是,当用户再次对页面进行访问时,如果用户再次对页面上的页面组件进行调整,则相应地执行204。

如图3、图4所示,本发明实施例提供了一种页面开发装置。装置实施例可以通过软件实现,也可以通过硬件或者软硬件结合的方式实现。从硬件层面而言,如图3所示,为本发明实施例提供的页面开发装置所在设备的一种硬件结构图,除了图3所示的处理器、内存、网络接口、以及非易失性存储器之外,实施例中装置所在的设备通常还可以包括其他硬件,如负责处理报文的转发芯片等等。以软件实现为例,如图4所示,作为一个逻辑意义上的装置,是通过其所在设备的cpu将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。本实施例提供的页面开发装置,包括:创建单元401、组合单元402、配置单元403和存储单元404;

创建单元401,用于创建页面模板和至少一个页面组件,其中,每一个页面组件对应至少一种信息展示形式;

组合单元402,用于确定待开发页面中需要进行展示的至少一个待展示信息,针对每一个待展示信息,根据待展示信息的信息展示形式从创建单元401创建的各个页面组件中获取对应的页面组件,并在获取到创建单元401创建的页面模板后将获取到的各个页面组件添加到页面模板上;

配置单元403,用于分别配置由组合单元402添加到页面模板上的每一个页面组件的位置配置信息,以确定每一个页面组件在页面模板上的位置,并分别配置每一个页面组件的数据源配置信息,以确定每一个页面组件的数据源;

存储单元404,用于对各个页面组件对应的位置配置信息和数据源配置信息进行持久化,形成待开发页面的加载文件。

可选地,在图4所示页面开发装置的基础上,如图5所示,该页面开发装置还可以包括:展示单元505和自定义单元506;

展示单元505,用于在接收到用户的触发后,通过加载存储单元404形成的加载文件对待开发页面进行展示;

自定义单元506,用于根据用户对展示单元505所展示的待开发页面上各个页面组件与页面模板之间相对位置进行的调整,以及用户对各个页面组件的信息展示形式进行的调整,获得个性化配置信息;

存储单元404,进一步用于将自定义单元506获得的个性化配置信息与用户的用户标识相关联,并对个性化配置信息进行持久化,以在用户再次访问待开发页面时根据个性化配置信息和加载文件对用户调整后的待开发页面进行展示。

可选地,在图5所示页面开发装置的基础上,如图6所示,展示单元505可以包括:页面模板加载子单元5051、页面组件加载子单元5052、数据加载子单元5053和页面组件渲染子单元5054;

页面模板加载子单元5051,用于在存储单元404对个性化配置信息进行持久化之后,当接收到用户的触发后,对待开发页面的页面模板进行加载;

页面组件加载子单元5052,用于针对待开发页面包括的每一个页面组件,判断存储单元404持久化的个性化配置信息中是否包括有用于对页面组件与页面模板之间相对位置进行配置的个性化位置配置信息,如果是,根据个性化位置配置信息将页面组件加载到页面模板加载子单元5051加载的页面模板上,否则根据加载文件中的位置配置信息将页面组件加载到页面模板加载子单元5051加载的页面模板上;

数据加载子单元5053,用于根据加载文件包括的数据源配置信息,分别为每一个页面组件分配待展示信息;

页面组件渲染子单元5054,用于针对待开发页面包括的每一个页面组件,判断个性化配置信息中是否包括有用于对页面组件的信息展示形式进行配置的个性化渲染配置信息,如果是,根据个性化渲染配置信息和页面组件对应的待展示信息对页面组件进行渲染,否则根据加载文件中包括的默认渲染配置信息和页面组件对应的待展示信息对页面组件进行渲染。

可选地,在图5所示页面开发装置的基础上,自定义单元506进一步用于在用户对待开发页面上的至少一个页面组件进行删除后,形成页面组件禁用信息,并将页面组件禁用信息与用户标识相关联,并对页面组件禁用信息进行持久化,以在用户再次访问待开发页面时根据页面组件禁用信息不对被用户删除的各个页面组件进行展示。

可选地,在图5或图6所示页面开发装置的基础上,自定义单元406进一步用于当用户在待开发页面上新增至少一个页面组件后,形成页面组件新增信息,并将页面组件新增信息与用户表示相关联,并对页面组件新增信息进行持久化,以在用户再次访问待开发页面时根据页面组件新增信息对用户新增的各个页面组件进行展示。

上述装置内的各单元之间的信息交互、执行过程等内容,由于与本发明方法实施例基于同一构思,具体内容可参见本发明方法实施例中的叙述,此处不再赘述。

本发明实施例还提供了一种可读介质,所述可读介质上存储有执行指令,当存储控制器的处理器执行所述执行指令时,所述存储控制器执行上述各个实施例提供的页面开发方法。

本发明实施例还提供了一种存储控制器,包括:处理器、存储器和总线;

所述存储器用于存储执行指令,所述处理器与所述存储器通过所述总线连接,当所述存储控制器运行时,所述处理器执行所述存储器存储的所述执行指令,以使所述存储控制器执行上述各个实施例提供的页面开发方法。

综上所述,本发明各个实施例提供的页面开发方法及装置,至少具有如下有益效果:

1、在本发明实施例中,预先创建页面模板和多个页面组件,在需要开发页面时,根据待开发页面上的每一个待展示信息的信息展示形式获取相对应的页面组件,将获取到的各个页面组件添加到页面模板上之后,通过配置各个页面组件的位置配置信息和数据源配置信息,调整各个页面组件在页面模板上的位置和页面组件的数据源,将各个页面组件对应的位置配置信息和数据源配置信息持久化后,形成待开发页面的加载文件,当接收到用户的触发后对加载文件进行加载便可以对待开发页面进行展示。由此可见,开发完成的页面由页面模板和各个相对独立的页面组件组成,当需要对开发完成的页面进行修改时,可以在原有页面的基础对新增页面组件、删除页面组件、重新配置页面组件的位置配置信息和数据源配置信息,而无需对整个页面进行重新开发,从而提高了页面开发的效率。

2、在本发明实施例中,用户根据自己的使用习惯和需求对页面进行个性化调整后,形成与调整后页面相对应的个性化配置信息,当同一用户再次对该页面进行访问时,根据对应于该用户的个性化配置信息和加载文件对该页面进行加载,使得加载出的页面为用户进行个性化调整后的页面,从而满足不同用户对同一页面进行个性化定制的需求,提高了用户的使用体验。

3、在本发明实施例中,用户在对页面组件的位置和信息展示信息进行调整时,实时对页面进行刷新,使得用户在对页面进行调整后,可以实时看到页面调整后的展示效果。在页面调整过程中对页面进行实时刷新,使得用户可以所见即所得对页面中各个页面组件的布局和信息展示形式进行个性化调整,进一步体提高了用户的使用体验。

4、在本发明实施例中,用户在访问一个页面的过程中,通过触发相应的页面组件编辑选项,可以对页面包括的页面组件进行删除操作,当用户删除一个或多个页面组件并进行保存操作后,根据被删除的页面组件形成对应的页面组件禁用信息,当同一用户再次访问该页面时,被用户删除的各个页面组件将不再显示。这样,用户可以删除页面上不需要的页面组件并进行保存,在后续访问该页面时将不再展示被删除的页面组件,进一步提升了用户的使用体验。

5、在本发明实施例中,用户在访问一个页面的过程中,通过触发相应的页面组件编辑选项,可以在页面中新增页面组件,以在原有页面中增加相应的功能。当用户新增一个或多个页面组件并进行保存后,根据新增页面组件形成对应的页面组件新增信息,当同一用户再次访问该页面时,除了展示该页面原有页面组件外,还展示用户新增的各个页面组件。这样,用户可以根据需求在页面上增加具有相应信息展示形式的页面组件并进行保存,在后续访问该页面时将对新增页面组件进行展示,以增加页面的功能,从而可以满足不同用户的需求,提高了用户的满意度。

需要说明的是,在本文中,诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个〃····〃”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。

本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成,前述的程序可以存储在计算机可读取的存储介质中,该程序在执行时,执行包括上述方法实施例的步骤;而前述的存储介质包括:rom、ram、磁碟或者光盘等各种可以存储程序代码的介质中。

最后需要说明的是:以上所述仅为本发明的较佳实施例,仅用于说明本发明的技术方案,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等,均包含在本发明的保护范围内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1