CN113703743A - 配置页面的方法和装置、渲染页面方法、客户端及服务器 - Google Patents
配置页面的方法和装置、渲染页面方法、客户端及服务器 Download PDFInfo
- Publication number
- CN113703743A CN113703743A CN202111004977.7A CN202111004977A CN113703743A CN 113703743 A CN113703743 A CN 113703743A CN 202111004977 A CN202111004977 A CN 202111004977A CN 113703743 A CN113703743 A CN 113703743A
- Authority
- CN
- China
- Prior art keywords
- page
- component
- configuration information
- page configuration
- container
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 103
- 238000009877 rendering Methods 0.000 title claims abstract description 51
- 230000000694 effects Effects 0.000 claims description 122
- 238000004590 computer program Methods 0.000 claims description 15
- 230000000977 initiatory effect Effects 0.000 claims description 7
- 230000008859 change Effects 0.000 claims description 6
- 238000010586 diagram Methods 0.000 description 17
- 230000008569 process Effects 0.000 description 13
- 230000006870 function Effects 0.000 description 11
- 238000011161 development Methods 0.000 description 6
- 238000012986 modification Methods 0.000 description 6
- 230000004048 modification Effects 0.000 description 6
- 230000008901 benefit Effects 0.000 description 4
- 238000004519 manufacturing process Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000010276 construction Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000007667 floating Methods 0.000 description 2
- 230000010354 integration Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011981 development test Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明实施例提供一种配置页面的方法和装置、渲染页面方法、客户端及服务器,属于计算机技术领域。该方法包括:获取欲使用的组件包的组件包信息;基于预设组件包数据库和所获取的组件包信息,确定所述欲使用的组件包对应的可访问链接,其中,所述预设组件包数据库中描述了所述组件包信息和所述可访问链接之间的对应关系;基于所确定的可访问链接,获取所述欲使用的组件包的可执行文件;运行所获取的可执行文件,呈现所述欲使用的组件包包括的组件;接收对所呈现的组件中欲使用的组件的选定;以及基于所选定的组件和预设基础页面模板,确定所述页面的页面配置信息,以配置所述页面。藉此,实现了组件的灵活使用。
Description
技术领域
本发明涉及计算机技术领域,具体地涉及一种配置页面的方法和装置、渲染页面方法、客户端及服务器。
背景技术
前端动态模块集成的方案属于Web前端编程的范畴,目前前端开发的项目需要整体构建编译后发布上线,缺点包括:1)不同的代码仓库中的组件,无法灵活的组合使用;2)统一发布上线需要测试回归的内容多,影响范围大。
发明内容
本发明实施例的目的是提供一种配置页面的方法和装置、渲染页面方法、客户端及服务器,其可解决或至少部分解决上述问题。
为了实现上述目的,本发明实施例的一个方面提供一种用于配置页面的方法,该方法包括:获取欲使用的组件包的组件包信息;基于预设组件包数据库和所获取的组件包信息,确定所述欲使用的组件包对应的可访问链接,其中,所述预设组件包数据库中描述了所述组件包信息和所述可访问链接之间的对应关系;基于所确定的可访问链接,获取所述欲使用的组件包的可执行文件;运行所获取的可执行文件,呈现所述欲使用的组件包包括的组件;接收对所呈现的组件中欲使用的组件的选定;以及基于所选定的组件和预设基础页面模板,确定所述页面的页面配置信息,以配置所述页面。
可选地,基于所选定的组件和预设基础页面模板确定所述页面的页面配置信息包括:将以下内容添加至所述预设基础页面模板的基础页面配置信息中对所述基础页面配置信息进行更新以确定所述页面的页面配置信息:所选定的组件的组件信息、所选定的组件对应的组件包的组件包信息、所选定的组件与预设基础页面模板中包括的组件容器的对应关系以及所选定的组件在渲染页面时出现的顺序。
可选地,该方法还包括:接收对欲使用的组件容器的选定,其中,对所述欲使用的组件的选定包括为所述欲使用的组件容器和所述预设基础页面模板中包括的组件容器中的至少一个组件容器配备所述组件;所述基于所选定的组件和预设基础页面模板确定所述页面的页面配置信息还包括:将所选定的组件容器的组件容器信息以及所选定的组件容器在渲染页面时出现的顺序添加至所述基础页面配置信息中,对所述基础页面配置信息进行更新,以确定所述页面的页面配置信息。
可选地,该方法还包括:接收所述页面宣传的活动的活动配置信息;根据所接收的活动配置信息生成所述活动的活动ID;以及将所述页面的页面配置信息与所生成的活动ID进行绑定。
可选地,在一所述页面已被确定出所述页面配置信息的情况下,该方法还包括:获取已被确定所述页面配置信息的页面对应的活动ID;基于所获取的活动ID,获得已被确定所述页面配置信息的页面的页面配置信息;基于所获得的页面配置信息,渲染出已被确定出所述页面配置信息的所述页面被配置的结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,其中,所述结构元素包括页面容器、组件容器和组件;接收对所显示出的结构元素和/或所显示的属性的更改,得到更新结构元素和/或更新属性;以及基于所述更新结构元素和/或所述更新属性,对所获得的页面配置信息进行更改,获得更新页面配置信息,以重新配置已被确定出所述页面配置信息的所述页面。
此外,本发明实施例的另一方面提供一种由客户端执行的用于渲染页面的方法,该方法包括:发起针对所述页面的页面配置信息的请求,其中,所述页面根据上述的用于配置页面的方法被配置;获取所请求的页面配置信息;以及基于所获取的页面配置信息,渲染出结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,以渲染所述页面,其中,所述结构元素包括页面容器、组件容器和组件。
可选地,所述请求针对的所述页面配置信息基于所述客户端打开的活动链接中包括的活动ID而被确定,其中,针对任一所述页面,所述页面配置信息被绑定一所述活动ID。
另外,本发明实施例的另一方面还提供一种由服务器执行的用于渲染页面的方法,该方法包括:接收对所述页面的页面配置信息的请求,其中,所述页面根据上述的用于配置页面的方法被配置;获取所请求的页面配置信息;以及发送所请求的页面配置信息。
相应地,本发明实施例的另一方面提供一种用于配置页面的装置,该装置包括:组件包信息获取模块,用于获取欲使用的组件包的组件包信息;可访问链接确定模块,用于基于预设组件包数据库和所获取的组件包信息,确定所述欲使用的组件包对应的可访问链接,其中,所述预设组件包数据库中描述了所述组件包信息和所述可访问链接之间的对应关系;可执行文件获取模块,用于基于所确定的可访问链接,获取所述欲使用的组件包的可执行文件;组件呈现模块,用于运行所获取的可执行文件,呈现所述欲使用的组件包包括的组件;选定组件接收模块,用于接收对所呈现的组件中欲使用的组件的选定;以及页面配置信息确定模块,用于基于所选定的组件和预设基础页面模板,确定所述页面的页面配置信息,以配置所述页面。
可选地,所述页面配置信息确定模块基于所选定的组件和预设基础页面模板确定所述页面的页面配置信息包括:将以下内容添加至所述预设基础页面模板的基础页面配置信息中对所述基础页面配置信息进行更新以确定所述页面的页面配置信息:所选定的组件的组件信息、所选定的组件对应的组件包的组件包信息、所选定的组件与预设基础页面模板中包括的组件容器的对应关系以及所选定的组件在渲染页面时出现的顺序。
可选地,该装置还包括:选定组件容器接收模块,用于接收对欲使用的组件容器的选定,其中,对所述欲使用的组件的选定包括为所述欲使用的组件容器和所述预设基础页面模板中包括的组件容器中的至少一个组件容器配备所述组件;所述页面配置信息确定模块基于所选定的组件和预设基础页面模板确定所述页面的页面配置信息还包括:将所选定的组件容器的组件容器信息以及所选定的组件容器在渲染页面时出现的顺序添加至所述基础页面配置信息中,对所述基础页面配置信息进行更新,以确定所述页面的页面配置信息。
可选地,该装置还包括:活动配置信息接收模块,用于接收所述页面宣传的活动的活动配置信息;活动ID生成模块,用于根据所接收的活动配置信息生成所述活动的活动ID;以及绑定模块,用于将所述页面的页面配置信息与所生成的活动ID进行绑定。
可选地,该装置还包括:页面配置信息更新模块,用于在一所述页面已被确定出所述页面配置信息的情况下,获取已被确定所述页面配置信息的页面对应的活动ID;基于所获取的活动ID,获得已被确定所述页面配置信息的页面的页面配置信息;基于所获得的页面配置信息,渲染出已被确定出所述页面配置信息的所述页面被配置的结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性;接收对所显示出的结构元素和/或所显示的属性的更改,得到更新结构元素和/或更新属性;以及基于所述更新结构元素和/或所述更新属性,对所获得的页面配置信息进行更改,获得更新页面配置信息,以重新配置已被确定出所述页面配置信息的所述页面。
相应地,本发明实施例的另一方面还提供一种客户端,该客户端包括:请求发起模块,用于发起针对所述页面的页面配置信息的请求,其中,所述页面根据上述用于配置页面的方法被配置;第一页面配置信息获取模块,用于获取所请求的页面配置信息;以及页面渲染模块,用于基于所获取的页面配置信息,渲染出结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,以渲染页面,其中,结构元素包括页面容器、组件容器和组件。
可选地,所述请求针对的所述页面配置信息基于所述客户端打开的活动链接中包括的活动ID而被确定,其中,针对任一所述页面,所述页面配置信息被绑定一所述活动ID。
相应地,本发明实施例的另一方面提供一种服务器,该服务器包括:请求接收模块,用于接收对所述页面的页面配置信息的请求,其中,所述页面根据上述的用于配置页面的方法被配置;第二页面配置信息获取模块,用于获取所请求的页面配置信息;以及页面配置信息发送模块,用于发送所请求的页面配置信息。
此外,本发明实施例的另一方面还提供一种机器可读存储介质,该机器可读存储介质上存储有指令,该指令用于使得机器执行上述的方法。
另外,本发明实施例的另一方面还提供一种计算机程序产品,包括计算机程序/指令,该计算机程序/指令被处理器执行时实现上述的方法。
通过上述技术方案,在预设组件包数据库中描述组件包信息和可访问链接之间的关系,获取想要使用的组件包的组件包信息,通过预设组件包数据库获得想要使用的组件包的可访问链接,根据可访问链接获得想要使用的组件包的可执行文件,通过运行可执行文件对想要使用的组件包包括的组件进行展示,页面设计者可以从所展示的组件中选择想要使用的组件,根据选定的组件和预设基础页面模板配置页面的页面配置信息,从而实现配置页面;通过设置组件包信息和可访问链接之间的关系,在确定想要使用的组件包的组件包信息的情况下,即可用到想要使用的组件包,在选定想要使用的组件的情况下,就可以使用想要组件配置页面,所有的组件均可以灵活组合使用,只需确定好想要使用的组件包以及在想要使用的组件包中确定出想要使用的组件即可。如此,解决了不同的代码仓库中的组件无法灵活的组合使用的问题。此外,通过设置预设组件包数据库管理所有的组件包,无需每个页面设计者自己去开发自己需要的组件,每个页面设计者均可以调用组件包,使用所调用的组件包中包括的组件,组件互通且可以灵活组合使用,避免不同的页面设计者开发相同的组件而造成工作的重复,提高工作效率。
本发明实施例的其它特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
附图是用来提供对本发明实施例的进一步理解,并且构成说明书的一部分,与下面的具体实施方式一起用于解释本发明实施例,但并不构成对本发明实施例的限制。在附图中:
图1是本发明一实施例提供的用于配置页面的方法的流程图;
图2是本发明另一实施例提供的构建预设组件包数据库的逻辑示意图;
图3是本发明另一实施例提供的由客户端执行的用于渲染页面的方法的流程图;
图4是本发明另一实施例提供的由服务器执行的用于渲染页面的方法的流程图;
图5是本发明另一实施例提供的用于渲染页面的方法的逻辑示意图;
图6是本发明另一实施例提供的用于配置页面的装置的结构框图;
图7是本发明另一实施例提供的客户端的结构框图;以及
图8是本发明另一实施例提供的服务器的结构框图。
附图标记说明
1 组件包信息获取模块 2 可访问链接确定模块
3 可执行文件获取模块 4 组件呈现模块
5 选定组件接收模块 6 页面配置信息确定模块
7 请求发起模块 8 第一页面配置信息获取模块
9 页面渲染模块 10 请求接收模块
11 第二页面配置信息获取模块 12 页面配置信息发送模块
具体实施方式
以下结合附图对本发明实施例的具体实施方式进行详细说明。应当理解的是,此处所描述的具体实施方式仅用于说明和解释本发明实施例,并不用于限制本发明实施例。
本发明实施例的一个方面提供一种用于配置页面的方法。
图1是本发明一实施例提供的用于配置页面的方法。如图1所示,该方法包括以下内容。
在步骤S10中,获取欲使用的组件包的组件包信息。其中,组件包信息可以包括组件包名称和版本号,组件包中包括至少一个组件。例如,可以是页面设计者在交互界面上输入其想要使用的组件包的组件包信息,从而可以获取到欲使用的组件包的组件包信息。此外,欲使用的组件包可以是一个组件包也可以是多个组件包。
在步骤S11中,基于预设组件包数据库和所获取的组件包信息,确定欲使用的组件包对应的可访问链接,其中,预设组件包数据库中描述了组件包信息和可访问链接之间的对应关系。在获取到组件包信息的情况下,通过预设组件包数据库中描述的对应关系可以查到与获取到的组件包信息对应的可访问链接。无论欲使用的组件包包括几个组件包,欲使用的组件包中的每个组件包均可以被确定出一对应的可访问链接。此外,预设组件包数据库可以根据以下内容被建立。其中,预设组件包数据库的构建可以结合图2来理解,组件包信息包括组件包名称和版本号。基于相同的项目结构和构建配置初始化多个组件包项目(例如通过脚手架初始化创建组件包项目),如图2 所示,并开发对应的业务逻辑,其中每个组件包中包括至少一个组件。开发完成后,分别独立构建组件包并发布到CDN上,如图2所示,获取到每一个组件包的main.js线上可访问url,main.js url,即为组件包的可访问链接。将组件包名称、版本号、main.js url添加维护到预设组件包数据库中。例如,将可访问链接存入预设组件包数据库,同时设置一个唯一的版本号,另将组件包名称存入预设组件包数据库中。另外,在创建活动时,选择特定版本号的组件包构建页面,同时将版本号和可访问链接存入页面配置信息中,升降级组件包只需要修改页面配置信息中存储的版本号和可访问链接。
在步骤S12中,基于所确定的可访问链接,获取欲使用的组件包的可执行文件。具体地,根据所确定的可访问链接在存储组件包的可执行文件的存储器中,查找到组件包的可执行文件。例如,以上述描述构建预设组件包数据库的示例为例,组件包被发布到CDN上,根据确定出的可访问链接main.js url,查到对应的可执行文件main.js。其中,无论欲使用的组件包包括几个组件包,均可以根据欲使用的组件包中的每一个组件包对应的可访问链接找到其可执行文件。
在步骤S13中,运行所获取的可执行文件,呈现欲使用的组件包包括的组件。其中,在该步骤中,在欲使用的组件包包括一个组件包的情况下,呈现该一个组件包包括的组件;在欲使用的组件包包括多个组件包的情况下,针对多个组件包中的每一个组件包,分别运行对应的可执行文件,呈现其所包括的组件。
在步骤S14中,接收对所呈现的组件中欲使用的组件的选定。其中,页面设计者可以通过交互界面选择欲使用的组件。
在步骤S15中,基于所选定的组件和预设基础页面模板,确定页面的页面配置信息,以配置页面。具体地,根据所选定的组件和预设基础页面模板的基础页面配置信息确定页面的页面配置信息。根据选定的组件对预设基础页面模板的基础页面配置信息进行更新,从而确定出想要配置的页面的页面配置信息。其中,配置页面即为确定出页面的页面配置信息。在本发明实施例中,页面配置信息可以包括页面容器名称和页面属性、组件容器名称和组件容器属性、组件名称和组件属性、组件对应的组件包的组件包名称和版本号以及页面结构信息。其中,页面结构信息为多维数组对象结构,包括页面有多少组件容器和/或每个组件容器内有哪些组件以及在渲染页面时组件容器和/或组件出现的顺序。比如:当前页面由三个组件容器构成,从上至下 ABC,A组件容器内有一个按钮组件,B组件容器内有一个图片组件,C组件容器内有一个文本组件。此外,每一个组件容器和组件都会分配一个全局唯一标识templateId,作为身份标识,并与容器组件配置信息作映射关联。其中,容器组件配置信息包括每一个组件容器和组件的定制化配置内容,包括但不限于:字体字号、背景图、边框颜色、尺寸位置等信息,即希望让使用者能够灵活配置修改的内容,都可以放到容器组件配置信息内,供解析渲染时使用。此外,容器组件配置信息包括组件容器属性和组件属性。
通过上述技术方案,在预设组件包数据库中描述组件包信息和可访问链接之间的关系,获取想要使用的组件包的组件包信息,通过预设组件包数据库获得想要使用的组件包的可访问链接,根据可访问链接获得想要使用的组件包的可执行文件,通过运行可执行文件对想要使用的组件包包括的组件进行展示,页面设计者可以从所展示的组件中选择想要使用的组件,根据选定的组件和预设基础页面模板配置页面的页面配置信息,从而实现配置页面;通过设置组件包信息和可访问链接之间的关系,在确定想要使用的组件包的组件包信息的情况下,即可用到想要使用的组件包,在选定想要使用的组件的情况下,就可以使用想要组件配置页面,所有的组件均可以灵活组合使用,只需确定好想要使用的组件包以及在想要使用的组件包中确定出想要使用的组件即可。如此,解决了不同的代码仓库中的组件无法灵活的组合使用的问题。此外,通过设置预设组件包数据库管理所有的组件包,无需每个页面设计者自己去开发自己需要的组件,每个页面设计者均可以调用组件包,使用所调用的组件包中包括的组件,组件互通且可以灵活组合使用,避免不同的页面设计者开发相同的组件而造成工作的重复,提高工作效率。
可选地,在本发明实施例中,基于所选定的组件和预设基础页面模板确定页面的页面配置信息包括:将以下内容添加至预设基础页面模板的基础页面配置信息中对基础页面配置信息进行更新以确定页面的页面配置信息:所选定的组件的组件信息、所选定的组件对应的组件包的组件包信息、所选定的组件与预设基础页面模板中包括的组件容器的对应关系以及所选定的组件在渲染页面时出现的顺序。具体地,在配置页面时,可以是在页面设计者选择组件之前,根据预设基础页面模板的基础页面配置信息渲染出预设基础页面模板。其中,基础页面配置信息包括页面容器名称和页面属性、组件容器名称和组件容器属性以及页面结构信息;页面属性可以是页面标题、浮球弹窗等。首先,增加一个空的DIV元素,渲染出页面容器,显示出页面容器。然后,根据页面结构信息里的组件容器的ID,知道要渲染的组件容器类型,根据页面结构信息中组件容器出现在数组中的顺序,在页面中从上至下渲染组件容器,显示所渲染出的容器。其中,组件容器出现在数组中的顺序即为渲染页面时出现的顺序。在渲染的过程中,获取页面配置信息中的组件容器属性,根据templateId的映射关系,将组件容器属性传递给对应的组件容器实例,组件容器实例会根据代码中预设好的逻辑使用这些组件容器属性决定具体的展现样式和内容,从而渲染并显示出组件容器属性。具体地,将组件容器属性注入到组件容器名称对应的数据接收字段中以渲染出组件容器的属性,显示出所渲染出的组件容器属性。另外,在渲染的过程中,将页面属性注入到页面容器名称对应的数据接收字段中以渲染出页面属性,显示出所渲染出的页面属性。如此,渲染出预设基础页面模板。此外,可以将页面属性和组件容器属性写入到配置面板中,其中配置面板可以向用户展示页面属性和组件容器属性,并且能够接收对页面属性和组件容器属性的修改。页面设计者在看到预设基础页面模板后,可以对已有的组件容器中的至少一个组件容器添加组件,从所呈现的组件中选择想要使用的组件,页面设计者可以通过选择一组件的组件名称来选定欲使用的组件并设置好其组件属性。在接收到对组件的选定以及设置的组件属性后,将所选定的组件的组件信息、所选定的组件对应的组件包的组件包信息、所选定的组件与预设基础页面模板中包括的组件容器的对应关系和所选定的组件在渲染页面时出现的顺序添加至预设基础页面模板的基础页面配置信息中,对基础页面配置信息进行更新以确定页面的页面配置信息。其中,组件信息包括组件名称和组件属性,组件包信息包括组件包名称和版本号。此外,所选定的组件在渲染页面时出现的顺序可以是其被选定的顺序。在选择组件的过程中,每选择一个组件,则会修改页面结构信息。另外,组件与组件容器的对应关系为该组件是为哪一组件容器添加的。
可选地,在本发明实施例中,该方法还包括:接收对欲使用的组件容器的选定,其中,对欲使用的组件的选定包括为欲使用的组件容器和预设基础页面模板中包括的组件容器中的至少一个组件容器配备组件;基于所选定的组件和预设基础页面模板确定页面的页面配置信息还包括:将所选定的组件容器的组件容器信息以及所选定的组件容器在渲染页面时出现的顺序添加至基础页面配置信息中,对基础页面配置信息进行更新,以确定页面的页面配置信息。其中,组件容器信息包括组件容器名称和组件容器属性。具体地,在本发明实施例中,除了可以对预设基础页面模板添加组件以外,还可以对预设基础页面模板添加组件容器。例如,采用上述的方法渲染出预设基础页面模板,页面设计者首先从所呈现的组件容器中选择想要使用的组件容器并设置好其组件容器属性,例如,可以通过选择组件容器的组件容器名称来选择组件容器。在接收到页面设计者选择的组件容器的组件容器名称和组件容器属性后,将接收到的组件容器名称和组件容器属性以及渲染页面时所选择的组件容器出现的顺序添加至预设基础页面模板的基础页面配置信息中。此外,在本发明实施例中,可以是仅对预设基础页面模板中包括的组件容器中的至少一个组件容器添加组件;也可以是仅对所选定的组件容器中的至少一个组件容器添加组件;还可以除了对预设基础页面模板中包括的组件容器中的至少一个组件容器添加组件外,也对所选定的组件容器中的至少一个组件容器添加组件。其中,对所选定的组件容器中的至少一个组件容器添加组件,为在选定组件容器后进行组件的添加。例如,可以是先选定所有想要的使用的组件容器,然后再对想要添加组件的组件容器进行添加组件;也可以是在选定某一想要添加组件的组件容器随即添加组件,然后再选定另一组件容器。无论怎么样添加组件和/或组件容器,均是在接收到关于组件容器的选定和/ 或关于组件的选定后,将关于选定的组件容器的组件容器信息和/或关于选定的组件的组件信息、组件对应的组件包的组件包信息、所选定的组件与组件容器的对应关系以及渲染页面时所选定的组件和/或组件容器出现的顺序添加至基础页面配置信息中,对基础页面配置信息进行更新,以确定页面的页面配置信息。
可选地,在本发明实施例中,该方法还包括:接收页面宣传的活动的活动配置信息;根据所接收的活动配置信息生成活动的活动ID;以及将页面的页面配置信息与所生成的活动ID进行绑定。具体地,在本发明实施例中,配置的页面可以是用于宣传某一活动,例如,针对某一产品的营销活动,为活动设置一活动ID,将页面配置信息与活动ID绑定,通过活动ID可以方便调取页面配置信息,以方便对保存、获取和/或修改配置好的页面配置信息。具体地,可以通过将页面配置信息存入活动ID的数据项中来实现页面配置信息与活动ID的绑定。此外,活动配置信息可以包括以下中的至少一者:活动名称、描述、业务线标识、支持的城市、面向人群、分享配置信息等。
可选地,在本发明实施例中,还可以对已被配置好页面配置信息的页面进行再配置,例如,通过修改已配置好的页面配置信息来实现。其中,页面配置信息包括页面容器名称和页面属性、组件容器名称和组件容器属性、组件名称和组件属性、组件对应的组件包的组件包名称和版本号以及页面结构信息。具体地,在一页面已被确定出页面配置信息的情况下,该方法还可以包括以下内容。获取已被确定页面配置信息的页面对应的活动ID。基于所获取的活动ID,获得已被确定页面配置信息的页面的页面配置信息。页面配置信息与活动ID绑定,可以通过活动ID获取到页面配置信息。基于所获得的页面配置信息,渲染出已被确定出页面配置信息的页面被配置的结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,其中,结构元素包括页面容器、组件容器和组件。例如,首先,增加一个空的DIV元素,渲染出页面容器,显示所渲染出的页面容器。然后,根据页面结构信息里的组件容器和组件的ID,知道要渲染的组件容器和组件类型,根据页面结构信息中组件容器和组件出现在数组中的顺序,在页面中从上至下渲染组件容器和组件,并显示所渲染出的组件容器和组件。其中,组件容器和组件出现在数组中的顺序即为渲染页面时出现的顺序。在渲染的过程中,获取页面配置信息中的组件容器属性和组件属性,根据 templateId的映射关系,将组件容器属性或组件属性传递给对应的组件容器或组件实例,组件容器或组件实例会根据代码中预设好的逻辑使用这些组件容器属性和组件属性决定具体的展现样式和内容,从而渲染并显示出组件容器属性和组件属性。具体地,将组件容器属性注入到组件容器名称对应的数据接收字段中以渲染出组件容器的属性,显示出组件容器的属性。将组件属性注入到组件名称对应的数据接收字段中以渲染出组件的属性,显示出组件的属性。另外,在渲染的过程中,将页面属性注入到页面容器名称对应的数据接收字段中以渲染出页面属性,并显示页面属性。如此,渲染出已被确定出页面配置信息的页面。另外,显示页面容器的页面属性、组件容器的组件容器属性以及组件的组件属性,具体地,可以通过设置配置面板,将页面属性、组件容器属性以及组件属性写入到配置面板中,通过配置面板显示页面属性、组件容器属性和组件属性。接收对所显示出的结构元素和/或所显示的属性的更改,得到更新结构元素和/或更新属性。例如,通过删除和/或添加结构元素来更改显示出的结构元素,通过对显示的属性进行编辑来更改属性。基于更新结构元素和/或更新属性,对所获得的页面配置信息进行更改,获得更新页面配置信息,以重新配置已被确定出页面配置信息的所述页面。具体地,若添加了新的结构元素和/或属性,则将新添加的结构元素和/或属性以及渲染页面时添加的结构元素出现的顺序添加至所获得的页面配置信息中,来获得更新页面配置信息;若是对已有的结构元素和/或属性进行更新,则在所获得页面配置信息中用更新的结构元素和/或属性替换对应的被更新前的结构元素和/或属性,来获得更新页面配置信息。此外,还可以对通过以下内容显示页面配置信息中包括的组件包名称对应的组件的列表。获取页面配置信息中的组件包名称和版本号。通过预设组件包数据库中描述的组件包信息和可访问链接之间的对应关系,获取到所包括的组件包信息对应的可访问链接,其中,组件包信息包括组件包名称和版本号。执行可访问链接,呈现出组件。如此,在对已经配置好的页面进行更改时,仅更改页面配置信息即可,无需统一发布上线,避免因统一发布上线需要测试回归的内容多而导致影响范围大,降低影响范围。
另外,本发明实施例的另一方面还提供一种由客户端执行的用于渲染页面的方法。
图3是本发明另一实施例提供的由客户端执行的用于渲染页面的方法的流程图。如图3所示,该方法包括以下内容。
在步骤S30中,发起针对页面的页面配置信息的请求,其中,页面根据上述实施例中所述的用于配置页面的方法被配置。
在步骤S31中,获取所请求的页面配置信息。例如,页面配置信息可以被包括在html模板中,接收到html模板,从html模板中获取到所请求的页面配置信息。具体地,接收html模板,其中,html模板中包括所请求的页面配置信息。其中,在本发明实施例中,可以通过以下内容将页面配置信息添加至html模板中。可选地,页面配置信息中包括组件包信息,基于预设组件包数据库和组件包信息确定组件包信息对应的组件包的可访问链接,具体地,可以参见上述实施例中所述的内容来获取可访问链接。另外,不论页面配置信息中包括关于几个组件包的组件包信息,均获取对应的可访问链接。将所获取到的每个可访问链接通过script标签包裹后添加至html标签中。具体地,针对任一组件包信息,为所确定的可访问链接创建一script标签,将所创建的script标签的src属性值设置为所确定的可访问链接,并将所创建的script标签添加一html模板中。如此,提前组件包的加载时机,减少用户的等待时间,加快渲染速度。另外,无论页面配置信息中包括哪些内容,将页面配置信息通过script标签包裹后,添加至html模板。如此,将页面配置信息添加至html模板中。从html模板中获取所请求的页面配置信息。具体地,获取script标签中的页面配置信息。
在步骤S32中,基于所获取的页面配置信息,渲染出结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,以渲染出页面。其中,结构元素包括页面容器、组件容器和组件。具体地,根据页面配置信息渲染出页面,可以参见本发明实施例中关于渲染页面的相关描述,渲染出与编辑端一致的页面结构和样式。另外,显示页面容器的页面属性、组件容器的组件容器属性以及组件的组件属性,具体地,可以通过设置配置面板,将页面属性、组件容器属性以及组件属性写入到配置面板中,通过配置面板显示页面属性、组件容器属性和组件属性。
可选地,在本发明实施例中,发起的请求针对的页面配置信息基于客户端打开的活动链接中包括的活动ID而被确定,其中,针对任一页面,页面配置信息被绑定一活动ID。活动链接中会带有活动ID的查询参数,从活动链接中可以获取到活动ID。服务器接收到活动ID,根据活动ID可以查询到页面配置信息。
另外,本发明实施例的另一方面还提供一种由服务器执行的用于渲染页面的方法。
图4是本发明另一实施例提供的由服务器执行的用于渲染页面的方法。如图4所示,该方法包括以下内容。
在步骤S40中,接收对页面的页面配置信息的请求,其中,页面根据上述实施例中所述的用于配置页面的方法被配置。
在步骤S41中,获取所请求的页面配置信息。例如,请求针对的页面配置信息客户端打开的活动链接中包括的活动ID而被确定,其中,针对任一页面,页面配置信息被绑定一活动ID。活动链接中会带有活动ID的查询参数,从活动链接中可以获取到活动ID。在请求中包括活动ID,服务器接收到活动ID,根据活动ID可以查询到页面配置信息,从而获取到所请求的页面配置信息。
在步骤S42中,发送所请求的页面配置信息。具体地,可以通过发送包括所请求的页面配置信息的html模板来发送所请求的页面配置信息。其中,可以根据以下内容获得包括所请求的页面配置信息的html模板中。获取所请求的页面配置信息中包括的至少一个组件包信息。组件包信息包括组件包名称和版本号,页面配置信息中包括页面容器名称和页面属性、组件容器名称和组件容器属性、组件名称和组件属性及组件对应的组件包的组件包名称和版本号。在页面配置信息中可以获取到组件包信息。确定至少一个组件包信息中的任一组件包信息对应的可访问链接。具体地,可以根据参照上述内容确定可访问链接。针对至少一个组件包信息中的任一组件包信息,为所确定的可访问链接创建一script标签,将所创建的script标签的src属性值设置为所确定的可访问链接,并将所创建的script标签添加一html模板中;将所请求的页面配置信息通过script标签包裹后,添加至html模板。
图5是本发明另一实施例提供的用于渲染页面的方法的逻辑示意图。如图5所示,该方法包括以下内容。
在步骤S50中,发起针对页面的页面配置信息的请求,其中,页面根据上述实施例中所述的用于配置页面的方法被配置。在步骤S51中,接收对页面的页面配置信息的请求。在步骤S52中,获取所请求的页面配置信息中包括的至少一个组件包信息。在步骤S53中,确定至少一个组件包信息中的任一组件包信息对应的可访问链接。在步骤S54中,获得包括所请求的页面配置信息的html模板。在步骤S55中,发送所获得的html模板。在步骤S56 中,接收html模板。在步骤S57中,从html模板中获取所请求的页面配置信息。在步骤S58中,基于所获取的页面配置信息,渲染出页面中的结构元素并显示所渲染出的结构元素的属性,以渲染出页面。
下面对本发明实施例提供的用于配置页面的方法的逻辑进行示例性介绍。其中,在该实施例中,以为营销类活动配置页面为例进行说明。有一些页面需要高频的更新甚至重写,比如营销活动类页面,常见的会有抽奖、领券、组队、助力等核心玩法元素,因为活动追求变化和新意,所以每次都会有所变化,需要重新开发活动页;活动在线期间,也需要经常替换图片、文案等素材,导致上线频繁,并且易出错误。为了满足营销活动求变求新的诉求,同时又能减少重复工作量,让已有开发的功能最大程度复用,负责活动运营的同事能够自助创建、配置、修改活动页面,设计开发了营销活动平台,也就是通过本发明实施例提供的用于配置页面的方法进行页面配置。旧的页面配置流程为:活动策划-需求设计-评审-UI设计-代码开发-测试回归-上线投放-修改-上线。在本发明实施例中,页面配置流程为:代码开发被平台可视化操作取代,通过简单的参数配置,可以实时的预览页面效果,完成活动页创建,不需要研发人员介入。
其中,在页面设计者的角度来讲,自助生产活动页面可以包括以下内容。 )在活动创建页面填写活动配置信息,包括活动名称、描述、业务线标识、支持的城市、面向人群、分享配置信息等,将这些活动配置信息传送至服务器端入数据库存储,并生成唯一的活动ID。2)跳转至活动编辑界面,点击添加页面按钮,页面中心会出现比例为375*667的空白页面容器,可以在右侧的配置面板配置如页面标题、浮球弹窗等页面属性。3)选中页面容器后,点击添加组件容器按钮,向页面中增加组件容器,点击选中组件容器后,右侧的配置面板可以配置如组件容器高度、背景图片、颜色等组件容器属性。 )选中组件容器后,从显示的组件中为组件容器选择组件,点击某一组件 (可选组件有按钮、图片、文本、城市选择、抽奖、卡券等)可向某一组件容器中添加此类型的组件,同一类组件可以多次添加,同时选中组件时,右侧配置面板可以配置此组件专有的属性。5)重复2、3、4步骤(不限顺序) 直到配置出预期的页面结构和功能搭配,点击保存,将配置信息存储到服务器端。具体地,在配置页面的过程中,可以实时预览配置的效果,以判断是否配置出预期的页面结构和功能搭配。6)保存后,可以在活动列表中,找到配置过页面的活动,并且预览活动页效果。7)再次点击编辑按钮,会出现选择编辑通用模板和某一城市的选项,默认状态下,所有在步骤1)中配置的支持城市都会继承通用模板,如果选择编辑某一城市(例如北京),则会在继承通用模板配置项的前提下,合并某一城市的定制修改。在步骤1) 中填写的活动配置信息包括支持的城市,已经配置好的页面配置信息对于活动配置信息中包括的城市来讲是相同的,也就是已经配置好的页面配置信息对于活动配置信息中包括的城市来讲默认是通用的。针对某一城市,对于已经配置好页面配置信息的页面来讲,可能会对已经配置好的页面配置信息进行修改,若有修改,则会保存修改的地方。当再次打开该城市的页面时,用修改的地方覆盖对应的部分,实现定制化。8)验证功能符合预期后,点击发布按钮,活动会在正式(外网环境)生效,此时使用marketing.ke.con域名下的链接可以访问活动页。9)上线和下线功能会对特定组件起到限制作用,比如抽奖功能只有在活动上线状态下才有效。
此外,还可以从以下角度来理解本发明实施例提供的用于配置页面的方法。1)为某一活动配置页面创建新的页面配置信息会生成唯一的活动ID (activityID),通过活动ID可以保存、获取、修改此活动的页面配置信息,例如JSON配置数据。2)进入编辑页后,首先会通过活动ID获取页面配置信息,若没有与活动ID对应的页面配置信息,则说明没有保存与该活动ID 对应的页面配置信息,此次编辑为第一次为该活动ID配置页面配置信息,那么,拉取一个预设基础页面模板并将预设基础页面模板的基础页面配置信息写入本地内存中;若有与活动ID对应的页面配置信息,将其写入本地内存中。3)编辑页渲染器读取本地缓存的页面配置信息,根据页面配置信息进行渲染,解析绘制预览区域页面结构,并将当前选中的结构元素(页面容器或组件容器或组件)的配置信息回写入右侧的配置项面板,参见上述实施例中所述的内容。4)每次添加结构元素,或改变结构元素(页面容器或组件容器或组件)的配置信息,会更新内存中的页面配置信息。5)页面配置信息的更新会触发编辑页渲染器的重绘更新,此过程为单向数据流的观察者模式;渲染器会实时呈现一下效果,结构元素的更新触发页面配置信息的更新,页面配置信息的更新触发渲染器的更新,渲染器实时呈现效果。渲染器监听页面配置信息的更新,如果有更新则呈现一个新的效果。6)重复3、4、 5步骤,实现用户操作的实时预览效果和数据的同步更新。7)保存时会将页面配置信息(全局Modal对象)存入服务器端此活动ID的数据项中。
通过本发明实施例提供的技术方案,1)因为编辑端和生产端使用相同的数据源,所以可以实现编辑端修改实时同步到生产端,免去了修改代码上线的步骤;2)当仅仅需要配置组件时,页面的开发可以从面向页面转为面向组件,同时组件依托组件包的动态加载机制,可以固化版本,避免组件的修改上线对旧有活动的影响。通过本发明实施例提供的技术方案可以使用 React作为前端界面的开发技术框架,通过动态组件包集成,可以将不同的组件包中的组件集成在同一个页面上展示,同时可以即时的修改组件包版本、增删依赖哪些组件包,大大提高了生产活动页的效率,降低了风险。本发明实施例提供的技术方案解决的技术问题包括不同的开发团队维护的组件工程如何集成运行在同一个页面上,传统的方案是整体构建打包在一起,然后发布;在本发明实施例中,不同的组件独立构建发布,彼此解耦互不干扰,并且可以管理集成的组件和版本;此外,在本发明实施例中,开发者可以创建任意多的组件工程,不依赖运行环境工程的构建发布,就可以运行在线上的页面中,并且组件可以随时增删和升降版本,实现灵活轻量的开发流程。
相应地,本发明实施例的另一方面还提供一种用于配置页面的装置。
图6是本发明另一实施例提供的用于配置页面的装置的结构框图。如图 6所示,该装置包括组件包信息获取模块1、可访问链接确定模块2、可执行文件获取模块3、组件呈现模块4、选定组件接收模块5和页面配置信息确定模块6。其中,组件包信息获取模块1用于获取欲使用的组件包的组件包信息;可访问链接确定模块2用于基于预设组件包数据库和所获取的组件包信息,确定欲使用的组件包对应的可访问链接,其中,预设组件包数据库中描述了组件包信息和可访问链接之间的对应关系;可执行文件获取模块3用于基于所确定的可访问链接,获取欲使用的组件包的可执行文件;组件呈现模块4用于运行所获取的可执行文件,呈现欲使用的组件包包括的组件;选定组件接收模块5用于接收对所呈现的组件中欲使用的组件的选定;页面配置信息确定模块6用于基于所选定的组件和预设基础页面模板,确定页面的页面配置信息,以配置页面。
可选地,在本发明实施例中,页面配置信息确定模块基于所选定的组件和预设基础页面模板确定页面的页面配置信息包括:将以下内容添加至所述预设基础页面模板的基础页面配置信息中对所述基础页面配置信息进行更新以确定所述页面的页面配置信息:所选定的组件的组件信息、所选定的组件对应的组件包的组件包信息、所选定的组件与预设基础页面模板中包括的组件容器的对应关系以及所选定的组件在渲染页面时出现的顺序。
可选地,在本发明实施例中,该装置还包括:选定组件容器接收模块,用于接收对欲使用的组件容器的选定,其中,对欲使用的组件的选定包括为欲使用的组件容器和预设基础页面模板中包括的组件容器中的至少一个组件容器配备组件;页面配置信息确定模块基于所选定的组件和预设基础页面模板确定页面的页面配置信息还包括:将所选定的组件容器的组件容器信息以及所选定的组件容器在渲染页面时出现的顺序添加至基础页面配置信息中,对基础页面配置信息进行更新,以确定页面的页面配置信息。
可选地,在本发明实施例中,该装置还包括:活动配置信息接收模块,用于接收页面宣传的活动的活动配置信息;活动ID生成模块,用于根据所接收的活动配置信息生成活动的活动ID;以及绑定模块,用于将页面的页面配置信息与所生成的活动ID进行绑定。
可选地,在本发明实施例中,该装置还包括:页面配置信息更新模块,用于在一页面已被确定出页面配置信息的情况下,获取已被确定页面配置信息的页面对应的活动ID;基于所获取的活动ID,获得已被确定页面配置信息的页面的页面配置信息;基于所获得的页面配置信息,渲染出已被确定出所述页面配置信息的所述页面被配置的结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性;接收对所显示出的结构元素和/或所显示的属性的更改,得到更新结构元素和/或更新属性;以及基于更新结构元素和/或所述更新属性,对所获得的页面配置信息进行更改,获得更新页面配置信息,以重新配置已被确定出所述页面配置信息的所述页面。
本发明实施例提供的用于配置页面的装置的具体工作原理及益处与本发明实施例提供的用于配置页面的方法具体工作原理及益处相似,这里将不再赘述。
所述用于配置页面的装置包括处理器和存储器,上述组件包信息获取模块、可访问链接确定模块、可执行文件获取模块、组件呈现模块、选定组件接收模块和页面配置信息确定模块等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数来实现组件灵活组合使用。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器 (RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
相应地,本发明实施例的另一方面还提供一种客户端。
图7是本发明另一实施例提供的客户端的结构框图。如图7所示,客户端包括请求发起模块7、第一页面配置信息获取模块8和页面渲染模块9。其中,请求发起模块7用于发起针对页面的页面配置信息的请求,其中,页面根据上述实施例中所述的用于配置页面的方法被配置;第一页面配置信息获取模块8用于获取所请求的页面配置信息;页面渲染模块9用于基于所获取的页面配置信息,渲染出结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,以渲染页面,其中,结构元素包括页面容器、组件容器和组件。
可选地,在本发明实施例中,请求针对的页面配置信息基于客户端打开的活动链接中包括的活动ID而被确定,其中,针对任一页面,页面配置信息被绑定一活动ID。
本发明实施例提供的客户端的具体工作原理及益处与本发明实施例提供的由客户端执行的用于渲染页面的方法的具体工作原理及益处相似,这里将不再赘述。
相应地,本发明实施例的另一方面还提供一种服务器。
图8是本发明另一实施例提供的服务器的结构框图。如图8所示,服务器包括请求接收模块10、第二页面配置信息获取模块11、和页面配置信息发送模块12。其中,请求接收模块10用于接收对页面的页面配置信息的请求,其中,页面根据上述的用于配置页面的方法被配置;第二页面配置信息获取模块11用于获取所请求的页面配置信息;页面配置信息发送模块12用于发送所请求的页面配置信息。
本发明实施例提供的服务器的具体工作原理及益处与本发明实施例提供的由服务器执行的用于渲染页面的方法的具体工作原理及益处相似,这里将不再赘述。
本发明实施例提供了一种机器可读存储介质,其上存储有程序,该程序被处理器执行时实现上述实施例中所述的方法。
本发明实施例提供了一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行上述实施例中所述的方法。
本发明实施例提供了一种电子设备,电子设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序,处理器执行程序时实现以下步骤:用于配置页面的方法包括:获取欲使用的组件包的组件包信息;基于预设组件包数据库和所获取的组件包信息,确定欲使用的组件包对应的可访问链接,其中,预设组件包数据库中描述了组件包信息和可访问链接之间的对应关系;基于所确定的可访问链接,获取欲使用的组件包的可执行文件;运行所获取的可执行文件,呈现欲使用的组件包包括的组件;接收对所呈现的组件中欲使用的组件的选定;以及基于所选定的组件和预设基础页面模板,确定页面的页面配置信息,以配置页面;基于所选定的组件和预设基础页面模板确定页面的页面配置信息包括:将以下内容添加至预设基础页面模板的基础页面配置信息中对基础页面配置信息进行更新以确定页面的页面配置信息:所选定的组件的组件信息、所选定的组件对应的组件包的组件包信息、所选定的组件与预设基础页面模板中包括的组件容器的对应关系以及所选定的组件在渲染页面时出现的顺序;该方法还包括:接收对欲使用的组件容器的选定,其中,对欲使用的组件的选定包括为欲使用的组件容器和预设基础页面模板中包括的组件容器中的至少一个组件容器配备组件;基于所选定的组件和预设基础页面模板确定页面的页面配置信息还包括:将所选定的组件容器的组件容器信息以及所选定的组件容器在渲染页面时出现的顺序添加至基础页面配置信息中,对基础页面配置信息进行更新,以确定页面的页面配置信息;该方法还包括:接收页面宣传的活动的活动配置信息;根据所接收的活动配置信息生成活动的活动ID;以及将页面的页面配置信息与所生成的活动ID 进行绑定;在一页面已被确定出页面配置信息的情况下,该方法还包括:获取已被确定页面配置信息的页面对应的活动ID;基于所获取的活动ID,获得已被确定页面配置信息的页面的页面配置信息;基于所获得的页面配置信息,渲染出已被确定出页面配置信息的页面被配置的结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,其中,结构元素包括页面容器、组件容器和组件;接收对所显示出的结构元素和/或所显示的属性的更改,得到更新结构元素和/或更新属性;以及基于更新结构元素和/或更新属性,对所获得的页面配置信息进行更改,获得更新页面配置信息,以重新配置已被确定出页面配置信息的页面;由客户端执行的用于渲染页面的方法包括:发起针对页面的页面配置信息的请求,其中,页面根据上述的用于配置页面的方法被配置;获取所请求的页面配置信息;以及基于所获取的页面配置信息,渲染出结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,以渲染所述页面,其中,所述结构元素包括页面容器、组件容器和组件;请求针对的页面配置信息基于客户端打开的活动链接中包括的活动ID而被确定,其中,针对任一页面,页面配置信息被绑定一活动ID;由服务器执行的用于渲染页面的方法包括:接收对页面的页面配置信息的请求,其中,页面根据上述的用于配置页面的方法被配置;获取所请求的页面配置信息;以及发送所请求的页面配置信息。本文中的电子设备可以是服务器、PC、PAD、手机等。
本申请还提供了一种计算机程序产品,包括计算机程序/指令,该计算机程序/指令被处理器执行时实现上述实施例中所述的方法。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器 (RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存 (PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEOROM)、快闪记忆体或其他内存技术、只读光盘只读存储器 (CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。
Claims (10)
1.一种用于配置页面的方法,其特征在于,该方法包括:
获取欲使用的组件包的组件包信息;
基于预设组件包数据库和所获取的组件包信息,确定所述欲使用的组件包对应的可访问链接,其中,所述预设组件包数据库中描述了所述组件包信息和所述可访问链接之间的对应关系;
基于所确定的可访问链接,获取所述欲使用的组件包的可执行文件;
运行所获取的可执行文件,呈现所述欲使用的组件包包括的组件;
接收对所呈现的组件中欲使用的组件的选定;以及
基于所选定的组件和预设基础页面模板,确定所述页面的页面配置信息,以配置所述页面。
2.根据权利要求1所述的方法,其特征在于,所述基于所选定的组件和预设基础页面模板确定所述页面的页面配置信息包括:
将以下内容添加至所述预设基础页面模板的基础页面配置信息中对所述基础页面配置信息进行更新以确定所述页面的页面配置信息:所选定的组件的组件信息、所选定的组件对应的组件包的组件包信息、所选定的组件与预设基础页面模板中包括的组件容器的对应关系以及所选定的组件在渲染页面时出现的顺序。
3.根据权利要求2所述的方法,其特征在于,该方法还包括:接收对欲使用的组件容器的选定,其中,对所述欲使用的组件的选定包括为所述欲使用的组件容器和所述预设基础页面模板中包括的组件容器中的至少一个组件容器配备所述组件;
所述基于所选定的组件和预设基础页面模板确定所述页面的页面配置信息还包括:
将所选定的组件容器的组件容器信息以及所选定的组件容器在渲染页面时出现的顺序添加至所述基础页面配置信息中,对所述基础页面配置信息进行更新,以确定所述页面的页面配置信息。
4.根据权利要求1-3中任一项所述的方法,其特征在于,该方法还包括:
接收所述页面宣传的活动的活动配置信息;
根据所接收的活动配置信息生成所述活动的活动ID;以及
将所述页面的页面配置信息与所生成的活动ID进行绑定。
5.根据权利要求4所述的方法,其特征在于,在一所述页面已被确定出所述页面配置信息的情况下,该方法还包括:
获取已被确定所述页面配置信息的页面对应的活动ID;
基于所获取的活动ID,获得已被确定所述页面配置信息的页面的页面配置信息;
基于所获得的页面配置信息,渲染出已被确定出所述页面配置信息的所述页面被配置的结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,其中,所述结构元素包括页面容器、组件容器和组件;
接收对所显示出的结构元素和/或所显示的属性的更改,得到更新结构元素和/或更新属性;以及
基于所述更新结构元素和/或所述更新属性,对所获得的页面配置信息进行更改,获得更新页面配置信息,以重新配置已被确定出所述页面配置信息的所述页面。
6.一种由客户端执行的用于渲染页面的方法,其特征在于,该方法包括:
发起针对所述页面的页面配置信息的请求,其中,所述页面根据权利要求1-5中任一项所述的方法被配置;
获取所请求的页面配置信息;以及
基于所获取的页面配置信息,渲染出结构元素和所渲染出的结构元素的属性并显示所渲染出的结构元素和所渲染出的结构元素的属性,以渲染所述页面,其中,所述结构元素包括页面容器、组件容器和组件。
7.根据权利要求6所述的方法,其特征在于,所述请求针对的所述页面配置信息基于所述客户端打开的活动链接中包括的活动ID而被确定,其中,针对任一所述页面,所述页面配置信息被绑定一所述活动ID。
8.一种由服务器执行的用于渲染页面的方法,其特征在于,该方法包括:
接收对所述页面的页面配置信息的请求,其中,所述页面根据权利要求1-5中任一项所述的方法被配置;
获取所请求的页面配置信息;以及
发送所请求的页面配置信息。
9.一种机器可读存储介质,其特征在于,该机器可读存储介质上存储有指令,该指令用于使得机器执行权利要求1-8中任一项所述的方法。
10.一种计算机程序产品,包括计算机程序/指令,其特征在于,该计算机程序/指令被处理器执行时实现权利要求1-8中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111004977.7A CN113703743B (zh) | 2021-08-30 | 2021-08-30 | 配置页面的方法和装置、渲染页面方法、客户端及服务器 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111004977.7A CN113703743B (zh) | 2021-08-30 | 2021-08-30 | 配置页面的方法和装置、渲染页面方法、客户端及服务器 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113703743A true CN113703743A (zh) | 2021-11-26 |
CN113703743B CN113703743B (zh) | 2023-12-26 |
Family
ID=78656858
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111004977.7A Active CN113703743B (zh) | 2021-08-30 | 2021-08-30 | 配置页面的方法和装置、渲染页面方法、客户端及服务器 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113703743B (zh) |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106096049A (zh) * | 2016-06-29 | 2016-11-09 | 江苏中威科技软件系统有限公司 | 一种可视化生成网页模板的方法及系统 |
WO2018086463A1 (zh) * | 2016-11-09 | 2018-05-17 | 阿里巴巴集团控股有限公司 | 一种用户信息获取系统、方法及装置 |
US20180181556A1 (en) * | 2016-12-21 | 2018-06-28 | Open Text Corporation | Systems and methods for conversion of web content into reusable templates and components |
WO2019233292A1 (zh) * | 2018-06-07 | 2019-12-12 | 阿里巴巴集团控股有限公司 | 一种应用程序的开发方法和装置 |
CN112051994A (zh) * | 2019-06-06 | 2020-12-08 | 阿里巴巴集团控股有限公司 | 可视化组件信息处理、页面可视化设计方法及装置 |
CN112215960A (zh) * | 2019-07-10 | 2021-01-12 | 阿里巴巴集团控股有限公司 | 场景搭建方法、场景渲染方法、装置及计算设备 |
CN112214250A (zh) * | 2019-06-24 | 2021-01-12 | 北京京东尚科信息技术有限公司 | 一种应用程序组件的加载方法和装置 |
CN113094049A (zh) * | 2021-04-29 | 2021-07-09 | 北京金山云网络技术有限公司 | 一种页面生成方法、页面展示方法、装置及电子设备 |
CN113312032A (zh) * | 2021-06-25 | 2021-08-27 | 深圳集智数字科技有限公司 | 前端项目资源更新方法、装置、电子设备及存储介质 |
-
2021
- 2021-08-30 CN CN202111004977.7A patent/CN113703743B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106096049A (zh) * | 2016-06-29 | 2016-11-09 | 江苏中威科技软件系统有限公司 | 一种可视化生成网页模板的方法及系统 |
WO2018086463A1 (zh) * | 2016-11-09 | 2018-05-17 | 阿里巴巴集团控股有限公司 | 一种用户信息获取系统、方法及装置 |
US20180181556A1 (en) * | 2016-12-21 | 2018-06-28 | Open Text Corporation | Systems and methods for conversion of web content into reusable templates and components |
WO2019233292A1 (zh) * | 2018-06-07 | 2019-12-12 | 阿里巴巴集团控股有限公司 | 一种应用程序的开发方法和装置 |
CN112051994A (zh) * | 2019-06-06 | 2020-12-08 | 阿里巴巴集团控股有限公司 | 可视化组件信息处理、页面可视化设计方法及装置 |
CN112214250A (zh) * | 2019-06-24 | 2021-01-12 | 北京京东尚科信息技术有限公司 | 一种应用程序组件的加载方法和装置 |
CN112215960A (zh) * | 2019-07-10 | 2021-01-12 | 阿里巴巴集团控股有限公司 | 场景搭建方法、场景渲染方法、装置及计算设备 |
CN113094049A (zh) * | 2021-04-29 | 2021-07-09 | 北京金山云网络技术有限公司 | 一种页面生成方法、页面展示方法、装置及电子设备 |
CN113312032A (zh) * | 2021-06-25 | 2021-08-27 | 深圳集智数字科技有限公司 | 前端项目资源更新方法、装置、电子设备及存储介质 |
Non-Patent Citations (4)
Title |
---|
LAKMAL MEEGAHAPOLA 等: "Optimizing Change Detection in Distributed Digital Collections", 《2017 18TH IEEE/ACIS INTERNATIONAL CONFERENCE ON SOFTWARE ENGINEERING, ARTIFICIAL INTELLIGENCE, NETWORKING AND PARALLEL/DISTRIBUTED COMPUTING》, pages 277 - 282 * |
MSGYVCICI: "webpack使用HtmlWebpackPlugin进行cdn配置", pages 1 - 8, Retrieved from the Internet <URL:《https://zhuanlan.zhihu.com/p/101950693》> * |
吴昌政: "基于前后端分离技术的web开发框架设计", 《中国优秀硕士学位论文全文数据库 信息科技辑》, pages 139 - 115 * |
岁月如歌: "CDN引入优化加载vue项目", pages 1 - 5, Retrieved from the Internet <URL:《https://blog.csdn.net/namechenfl/article/details/90265924》> * |
Also Published As
Publication number | Publication date |
---|---|
CN113703743B (zh) | 2023-12-26 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US8296665B2 (en) | Developing and executing applications with configurable patterns | |
US8850420B2 (en) | Dynamically updating on-demand runtime platforms executing business applications | |
US7761865B2 (en) | Upgrading pattern configurations | |
US8312382B2 (en) | Developing and executing applications with configurable patterns | |
US7366723B2 (en) | Visual query modeling for configurable patterns | |
US8887132B1 (en) | Application runtime environment and framework | |
CN109445783B (zh) | 由服务驱动的动态配置应用的构建方法及装置 | |
US20160170732A1 (en) | Customer tailored release master plan generation for hybrid networked solutions | |
US8839192B2 (en) | System and method for presentation of cross organizational applications | |
KR101892702B1 (ko) | 멀티 플랫폼을 지원하는 앱 저작 서버, 장치 및 방법 | |
US20210208854A1 (en) | System and method for enhancing component based development models with auto-wiring | |
US8694544B2 (en) | Layering concept for a repository of a user interface framework for web applications | |
US20050268232A1 (en) | Software logistics for pattern-based applications | |
CN111124533B (zh) | 一种活动页面动态配置的方法及装置 | |
CN106484394A (zh) | 一种双引擎快速软件开发系统 | |
CN110910203A (zh) | 一种商品页面的内容展示方法及装置 | |
CN111857718A (zh) | 列表的编辑方法、装置、设备及存储介质 | |
CN109582302A (zh) | 项目创建系统及自动化项目创建方法 | |
US8122381B2 (en) | Context debugger | |
US20160147903A1 (en) | Dynamic data source binding | |
US9760381B2 (en) | Configurable toolbar | |
CN113515281A (zh) | 一种移动应用的自定义界面实现方法 | |
CN116301856B (zh) | 一种可视化表单设计器的设计方法、装置、设备及介质 | |
CN110457010B (zh) | 基于协作平台批量更改任务单的方法及装置 | |
CN113703743B (zh) | 配置页面的方法和装置、渲染页面方法、客户端及服务器 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
TA01 | Transfer of patent application right |
Effective date of registration: 20231130 Address after: Room 102, floor 1, building 1, No. 2, Chuangye Road, Haidian District, Beijing 100085 Applicant after: Seashell Housing (Beijing) Technology Co.,Ltd. Address before: 101309 room 24, 62 Farm Road, Erjie village, Yangzhen, Shunyi District, Beijing Applicant before: Beijing fangjianghu Technology Co.,Ltd. |
|
TA01 | Transfer of patent application right | ||
GR01 | Patent grant | ||
GR01 | Patent grant |