基于网页的动态布局方法、系统、设备及介质技术方案

本公开提供一种基于网页的动态布局方法、系统、电子设备及存储介质，包括对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。本公开实施例的方法能够解决WEB前端行业中代码冗余，不统一，耗时的问题，节省人力，节约成本。节约成本。节约成本。

【技术实现步骤摘要】
基于网页的动态布局方法、系统、设备及介质


[0001]本公开涉及网页开发
，尤其涉及一种基于网页的动态布局方法、系统、设备及介质。

技术介绍

[0002]目前，WEB前端行业在实现HTML布局时，往往采用编程的方式去实现，正因为如此，在页面布局中存在一段相同控件单元时，需要重复的编写这一段代码，消耗时间，浪费人力成本。在一些情况下，功能开发较多，页面布局相似，劳动强度大且会造成代码冗余，影响代码质量，影响功能的完成，影响到企业的生产效益。
[0003]公开于本申请
技术介绍
部分的信息仅仅旨在加深对本申请的一般
技术介绍
的理解，而不应当被视为承认或以任何形式暗示该信息构成已为本领域技术人员所公知的现有技术。

技术实现思路

[0004]本公开实施例提供一种基于网页的动态布局方法、系统、设备及介质，能够解决WEB前端行业中代码冗余，不统一，耗时的问题，节省人力，节约成本。
[0005]本公开实施例的第一方面，提供一种基于网页的动态布局方法，其特征在于，包括：对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
[0006]在一种可选的实施方式中，所述方法还包括将所述控件单元的布局配置信息存储在网页布局器中，其中，所述网页布局器包括：第一存储单元，包括多个第二存储单元，用于存储所述网页布局器中的页面信息；第二存储单元，包括多个第三存储单元，用于存储所述网页布局器中页面的行信息；第三存储单元，用于存储所述网页布局器中多个栏目信息。
[0007]在一种可选的实施方式中，所述方法还包括：根据所述控件单元的布局配置信息的类别，对所述控件单元进行分类，并根据所述控件单元的布局配置信息，为所述控件单元分配对应的ID信息；
响应对所述控件单元的属性编辑指令，根据所述布局配置信息的类别，显示对应的编辑界面，其中，显示对应的编辑界面的方法包括：以弹出菜单的形式显示对应的编辑界面，并且保存编辑后的信息，并更新所述控件单元的布局配置信息。
[0008]在一种可选的实施方式中，所述方法还包括：获取登录用户的身份信息，根据所述身份信息从与所述身份信息对应的历史行为信息中，获取与所述身份信息对应的偏好信息；根据所述偏好信息确定与所述偏好信息对应的偏好属性值，基于所述偏好属性值与布局样式的对应关系，显示与所述偏好属性值对应的布局样式。
[0009]在一种可选的实施方式中，所述方法还包括：获取对所述控件单元的拖拽命令对应的网页代码，确定所述网页代码中拖拽命令对应的拖拽标签信息以及拖拽属性信息；将所述拖拽标签信息以及所述拖拽属性信息与所述网页界面中预设标签信息以及预设拖拽属性信息进行匹配，若标签信息和/或属性信息无法匹配，则通过网页代码过滤器将所述拖拽标签信息中冗余标签以及所述拖拽属性信息中冗余属性进行过滤。
[0010]在一种可选的实施方式中，所述通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页包括：根据渲染完的控件单元生成第一代码信息，其中，所述第一代码信息用于指示所述控件单元对应的网页架构信息；基于所述第一代码信息，以及所述控件单元确定与所述控件单元对应的预览信息；确定所述预览信息无误后，结合网页布局信息，生成布局调整后的网页。
[0011]本公开实施例的第二方面，提供一种基于网页的动态布局系统，包括：第一单元，用于对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，第二单元，用于若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；第三单元，用于若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；第四单元，用于通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
[0012]本公开实施例的第三方面，提供一种电子设备，包括：
处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为调用所述存储器存储的指令，以执行前述所述的方法。
[0013]本公开实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现前述所述的方法。
[0014]本公开实施例的方法可以在需要调整页面视觉效果时，不需要修改代码就可实现，既方便又快捷，能够快速响应用户的需求，节省时间，节约成本。
附图说明
[0015]图1为本公开实施例基于网页的动态布局方法的流程示意图；图2为本公开实施例基于网页的动态布局系统的结构示意图。
具体实施方式
[0016]为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
[0017]本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等（如果存在）是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
[0018]应当理解，在本公开的各种实施例中，各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本公开实施例的实施过程构成任何限定。
[0019]应当理解，在本公开中，“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
[0020]应当理解，在本公开中，“多个”是指两个或两个以上。“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。“包含A、B和C”、“包含A、B、C”是指A、B、C三者都包含，“包含A、B或C”是指包含A、B、C三者之一，“包含A、B和/或C”是指包含A、B、C三者中任1个或任2个或3个。
[0021]应当理解，在本公开中，“与A对应的B”、“与A相对应的B”、“A与B相对应”或者“B与A相对应”，表本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于网页的动态布局方法，其特征在于，包括：对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。2.根据权利要求1所述的方法，其特征在于，所述方法还包括将所述控件单元的布局配置信息存储在网页布局器中，其中，所述网页布局器包括：第一存储单元，包括多个第二存储单元，用于存储所述网页布局器中的页面信息；第二存储单元，包括多个第三存储单元，用于存储所述网页布局器中页面的行信息；第三存储单元，用于存储所述网页布局器中多个栏目信息。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：根据所述控件单元的布局配置信息的类别，对所述控件单元进行分类，并根据所述控件单元的布局配置信息，为所述控件单元分配对应的ID信息；响应对所述控件单元的属性编辑指令，根据所述布局配置信息的类别，显示对应的编辑界面，其中，显示对应的编辑界面的方法包括：以弹出菜单的形式显示对应的编辑界面，并且保存编辑后的信息，并更新所述控件单元的布局配置信息。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：获取登录用户的身份信息，根据所述身份信息从与所述身份信息对应的历史行为信息中，获取与所述身份信息对应的偏好信息；根据所述偏好信息确定与所述偏好信息对应的偏好属性值，基于所述偏好属性值与布局样式的对应关系，显示与所述偏好属性值对应的布局样式。5.根据权利要求1所述的方法，其特征在于，所述方法...

【专利技术属性】
技术研发人员：吴浩然，朱晶晶，袁俊杰，
申请(专利权)人：冠骋信息技术苏州有限公司，
类型：发明
国别省市：