CN115618144A - 基于网页的动态布局方法、系统、设备及介质 - Google Patents
基于网页的动态布局方法、系统、设备及介质 Download PDFInfo
- Publication number
- CN115618144A CN115618144A CN202211637936.6A CN202211637936A CN115618144A CN 115618144 A CN115618144 A CN 115618144A CN 202211637936 A CN202211637936 A CN 202211637936A CN 115618144 A CN115618144 A CN 115618144A
- Authority
- CN
- China
- Prior art keywords
- information
- layout
- configuration information
- control unit
- layout configuration
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本公开提供一种基于网页的动态布局方法、系统、电子设备及存储介质，包括对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。本公开实施例的方法能够解决WEB前端行业中代码冗余，不统一，耗时的问题，节省人力，节约成本。
Description
技术领域
本公开涉及网页开发技术领域，尤其涉及一种基于网页的动态布局方法、系统、设备及介质。
背景技术
目前，WEB前端行业在实现HTML布局时，往往采用编程的方式去实现，正因为如此，在页面布局中存在一段相同控件单元时，需要重复的编写这一段代码，消耗时间，浪费人力成本。在一些情况下，功能开发较多，页面布局相似，劳动强度大且会造成代码冗余，影响代码质量，影响功能的完成，影响到企业的生产效益。
公开于本申请背景技术部分的信息仅仅旨在加深对本申请的一般背景技术的理解，而不应当被视为承认或以任何形式暗示该信息构成已为本领域技术人员所公知的现有技术。
发明内容
本公开实施例提供一种基于网页的动态布局方法、系统、设备及介质，能够解决WEB前端行业中代码冗余，不统一，耗时的问题，节省人力，节约成本。
本公开实施例的第一方面，
提供一种基于网页的动态布局方法，其特征在于，包括：
对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，
若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；
若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；
通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
在一种可选的实施方式中，
所述方法还包括将所述控件单元的布局配置信息存储在网页布局器中，其中，所述网页布局器包括：
第一存储单元，包括多个第二存储单元，用于存储所述网页布局器中的页面信息；
第二存储单元，包括多个第三存储单元，用于存储所述网页布局器中页面的行信息；
第三存储单元，用于存储所述网页布局器中多个栏目信息。
在一种可选的实施方式中，
所述方法还包括：
根据所述控件单元的布局配置信息的类别，对所述控件单元进行分类，并根据所述控件单元的布局配置信息，为所述控件单元分配对应的ID信息；
响应对所述控件单元的属性编辑指令，根据所述布局配置信息的类别，显示对应的编辑界面，其中，显示对应的编辑界面的方法包括：
以弹出菜单的形式显示对应的编辑界面，并且保存编辑后的信息，并更新所述控件单元的布局配置信息。
在一种可选的实施方式中，
所述方法还包括：
获取登录用户的身份信息，根据所述身份信息从与所述身份信息对应的历史行为信息中，获取与所述身份信息对应的偏好信息；
根据所述偏好信息确定与所述偏好信息对应的偏好属性值，基于所述偏好属性值与布局样式的对应关系，显示与所述偏好属性值对应的布局样式。
在一种可选的实施方式中，
所述方法还包括：
获取对所述控件单元的拖拽命令对应的网页代码，确定所述网页代码中拖拽命令对应的拖拽标签信息以及拖拽属性信息；
将所述拖拽标签信息以及所述拖拽属性信息与所述网页界面中预设标签信息以及预设拖拽属性信息进行匹配，
若标签信息和/或属性信息无法匹配，则通过网页代码过滤器将所述拖拽标签信息中冗余标签以及所述拖拽属性信息中冗余属性进行过滤。
在一种可选的实施方式中，
所述通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页包括：
根据渲染完的控件单元生成第一代码信息，其中，所述第一代码信息用于指示所述控件单元对应的网页架构信息；
基于所述第一代码信息，以及所述控件单元确定与所述控件单元对应的预览信息；
确定所述预览信息无误后，结合网页布局信息，生成布局调整后的网页。
本公开实施例的第二方面，
提供一种基于网页的动态布局系统，包括：
第一单元，用于对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，
第二单元，用于若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；
第三单元，用于若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；
第四单元，用于通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
本公开实施例的第三方面，
提供一种电子设备，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为调用所述存储器存储的指令，以执行前述所述的方法。
本公开实施例的第四方面，
提供一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现前述所述的方法。
本公开实施例的方法可以在需要调整页面视觉效果时，不需要修改代码就可实现，既方便又快捷，能够快速响应用户的需求，节省时间，节约成本。
附图说明
图1为本公开实施例基于网页的动态布局方法的流程示意图；
图2为本公开实施例基于网页的动态布局系统的结构示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等（如果存在）是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
应当理解，在本公开的各种实施例中，各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本公开实施例的实施过程构成任何限定。
应当理解，在本公开中，“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
应当理解，在本公开中，“多个”是指两个或两个以上。“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，和/或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个。
应当理解，在本公开中，“与A对应的B”、“与A相对应的B”、“A与B相对应”或者“B与A相对应”，表示B与A相关联，根据A可以确定B。根据A确定B并不意味着仅仅根据A确定B，还可以根据A和/或其他信息确定B。A与B的匹配，是A与B的相似度大于或等于预设的阈值。
取决于语境，如在此所使用的“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。
下面以具体地实施例对本公开的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。
图1为本公开实施例基于网页的动态布局方法的流程示意图，如图1所示，所述方法包括：
S101. 对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息；
HTML(Hyper Text Markup Language)，中文名称“超文本标记语言”，作为标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页的各个部分。网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
在传统自适应页面设计中，媒介查询主要通过在页面中引入 meta 标签，然后根据浏览器宽度的不同，对页面样式进行替换覆盖，因此在加载页面的过程时需要将所有样式下的 CSS 文件加载出来，再根据页面宽度进行匹配调整。这就意味着在加载页面时需要下载和解析全部 CSS 文件，必将浪费带宽，增加页面加载时间。
本公开实施例对当前网页界面进行初始化，并且判断初始化后的网页界面是否存在布局配置信息，将不同媒介下的页面样式分别写在不同的 CSS样式中，并未在页面中直接引用，而是通过 JavaScript 代码进行判断引入，从而减少页面加载和解析多余的 CSS样式的时间，提高页面相应速度。同时也为下文中服务器端的按组响应提供媒介类别。总得来说，优化后的媒介查询方法对自适应页面框架性能的提升来说意义非凡。
S102. 若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；
示例性地，本公开实施例通过vuejs技术加递归技术将布局配置信息转为对应的布局，用户拖拽页面上的输入框控件单元到布局控件单元中，根据用户拖拽的控件单元，获取对应的输入框控件单元配置信息，向布局配置信息中添加输入框控件单元配置信息，再通过vuejs技术加递归技术将布局配置信息转为对应的布局，形成一个闭环，最后当拖拽完成后，浏览器显示最后的布局。
在一种可选的实施方式中，
所述方法还包括将所述控件单元的布局配置信息存储在网页布局器中，其中，所述网页布局器包括：
第一存储单元，包括多个第二存储单元，用于存储所述网页布局器中的页面信息；
第二存储单元，包括多个第三存储单元，用于存储所述网页布局器中页面的行信息；
第三存储单元，用于存储所述网页布局器中多个栏目信息。
示例性地，为了能够更加准确地控制网页布局，可以将网页元素进行更为细化的划分，将其划分为更细的粒度。可选地，
本公开实施例的网页布局器可以包括多个存储单元，其中，第一存储单元包括多个第二存储单元，第二存储单元可以包括多个第三存储单元，通过层层嵌套的存储单元，能够组装出任意样式的布局，增加实际应用场景的应用范围。
可选地，第一存储单元可以包括放置通过手动拖拽生成的页面，在网页布局器中主要用来放置行容器，一个页面容器可放置多个行容器；第二存储单元可以包括行容器，行容器相当于是页面布局中的一行，存在于页面容器中，用来放置子容器，从而完成一行中的布局，一个行容器中可以放置多个子容器；第三存储单元可以包括子容器，子容器相当于网页布局中列的概念，子容器存在于行容器中，用来放置栏目容器，一个子容器可以包含多个栏目容器。
示例性地，本公开实施例的网页布局器能够支持通过手动拖拽的交互方式，实现“所见即所得”的网页布局；可以对生成的网页布局多次编辑，通过拖拽生成的网页布局并非拖拽生成完了以后就不可再编辑，每次加载该布局之后都可以通过拖拽的方式再次编辑；能够满足大部分网页布局的需求，网页布局器不局限于固定的布局，可以根据用户设计的需求来变动。
在一种可选的实施方式中，
获取登录用户的身份信息，根据所述身份信息从与所述身份信息对应的历史行为信息中，获取与所述身份信息对应的偏好信息；
根据所述偏好信息确定与所述偏好信息对应的偏好属性值，基于所述偏好属性值与布局样式的对应关系，显示与所述偏好属性值对应的布局样式。
示例性地，通过获取登录用户的身份信息，获取与所述身份信息对应的历史行为信息，通过历史行为信息，确定该用户的偏好信息，例如常用的控件单元，拖拽习惯，网页布局喜好等等，能够有利于减少用户操作的繁琐步骤，能够生成个性化的信息。
其中，偏好信息对应的偏好属性值，可以包括客户端中记录的日志文件，也可以是针对用户以往对网页的操作行为进行的记录结果，如：用户在网页上进行的点击操作信息、点击操作对应于网页中的具体模块或内容信息等。通过偏好信息能够建立用户专属的网页规则，提高用户体验。
S103. 若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；
在一种可选的实施方式中，
所述方法还包括：
根据所述控件单元的布局配置信息的类别，对所述控件单元进行分类，并根据所述控件单元的布局配置信息，为所述控件单元分配对应的ID信息；
响应对所述控件单元的属性编辑指令，根据所述布局配置信息的类别，显示对应的编辑界面，其中，显示对应的编辑界面的方法包括：
以弹出菜单的形式显示对应的编辑界面，并且保存编辑后的信息，并更新所述控件单元的布局配置信息。
示例性地，不同类别的控件单元的布局配置信息存在着差别，可以根据其类别进行分类，并且为每个控件单元分配对应的ID信息，便于后续开发者的查询，快速高效；
而对于不同类别的控件单元，其类别不同，所对应的布局配置信息以及对应的显示界面均不相同，并且后续随着信息进一步更新，需要对控件单元进行信息拓展，弹出菜单栏的交互方式，主要是考虑到页面中每个栏目己经绑定过拖拽事件和点击事件，而且每个栏目中也没有多余的空间来放置编辑栏目属性的标示，从而采用弹出菜单栏的交互方式，这样既符合用户的使用习惯，也解决了事件绑定冲突和页面交互空间不足的问题。同时，菜单的方式也使栏目属性编辑模块变得可扩展，用户如果想要增加新的需要编辑的属性的话，只需要在菜单中添加一项即可。
S104. 通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
在一种可选的实施方式中，
获取对所述控件单元的拖拽命令对应的网页代码，确定所述网页代码中拖拽命令对应的拖拽标签信息以及拖拽属性信息；
将所述拖拽标签信息以及所述拖拽属性信息与所述网页界面中预设标签信息以及预设拖拽属性信息进行匹配，
若标签信息和/或属性信息无法匹配，则通过网页代码过滤器将所述拖拽标签信息中冗余标签以及所述拖拽属性信息中冗余属性进行过滤。
示例性地，本公开实施例的网页代码过滤器在接收到生成的网页代码之后，首先会检测和过滤掉页面中因为拖拽或其他交互而产生的多余代码；然后，检测网页标签中的属性，过滤掉不需要的标签属性；最后，将过滤后的代码格式化转为格式工整、利于网页开发者阅读的 HTML代码。
在一种可选的实施方式中，
所述通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页包括：
根据渲染完的控件单元生成第一代码信息，其中，所述第一代码信息用于指示所述控件单元对应的网页架构信息；
基于所述第一代码信息，以及所述控件单元确定与所述控件单元对应的预览信息；
确定所述预览信息无误后，结合网页布局信息，生成布局调整后的网页。
本公开实施例支持网页预览，通过生成网页架构信息，将控件单元的预览信息进行显示，若预览信息无误后，则生成对应的布局调整后的网页，能够减少网页发布后来回修改的步骤，提高开发效率。
本公开实施例的第二方面，
提供一种基于网页的动态布局系统，图1为本公开实施例基于网页的动态布局系统的流程示意图，如图2所示，包括：
第一单元，用于对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，
第二单元，用于若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；
第三单元，用于若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；
第四单元，用于通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
本公开实施例的第三方面，
提供一种电子设备，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为调用所述存储器存储的指令，以执行前述所述的方法。
本公开实施例的第四方面，
提供一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现前述所述的方法。
本发明可以是方法、装置、系统和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于执行本发明的各个方面的计算机可读程序指令。
计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子（非穷举的列表）包括：便携式计算机盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、静态随机存取存储器（SRAM）、便携式压缩盘只读存储器（CD-ROM）、数字多功能盘（DVD）、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波（例如，通过光纤电缆的光脉冲）、或者通过电线传输的电信号。
这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。
用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构（ISA）指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机（例如利用因特网服务提供商来通过因特网连接）。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列（FPGA）或可编程逻辑阵列（PLA），该电子电路可以执行计算机可读程序指令，从而实现本发明的各个方面。
这里参照根据本发明实施例的方法、装置（系统）和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。
这些计算机可读程序指令可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理单元，从而生产出一种机器，使得这些指令在通过计算机或其他可编程数据处理装置的处理单元执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。
也可以把计算机可读程序指令加载到计算机、其他可编程数据处理装置、或其他设备上，使得在计算机、其他可编程数据处理装置或其他设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其他可编程数据处理装置、或其他设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。
附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
注意，除非另有直接说明，否则本说明书(包含任何所附权利要求、摘要和附图)中所揭示的所有特征皆可由用于达到相同、等效或类似目的的可替代特征来替换。因此，除非另有明确说明，否则所公开的每一个特征仅是一组等效或类似特征的一个示例。在使用到的情况下，进一步地、较优地、更进一步地和更优地是在前述实施例基础上进行另一实施例阐述的简单起头，该进一步地、较优地、更进一步地或更优地后带的内容与前述实施例的结合作为另一实施例的完整构成。在同一实施例后带的若干个进一步地、较优地、更进一步地或更优地设置之间可任意组合的组成又一实施例。
本领域的技术人员应理解，上述描述及附图中所示的本发明的实施例只作为举例而并不限制本发明。本发明的目的已经完整并有效地实现。本发明的功能及结构原理已在实施例中展示和说明，在没有背离所述原理下，本发明的实施方式可以有任何变形或修改。
最后应说明的是：以上各实施例仅用以说明本公开的技术方案，而非对其限制；尽管参照前述各实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本公开各实施例技术方案的范围。
Claims (9)
1.一种基于网页的动态布局方法，其特征在于，包括：
对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，
若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；
若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；
通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括将所述控件单元的布局配置信息存储在网页布局器中，其中，所述网页布局器包括：
第一存储单元，包括多个第二存储单元，用于存储所述网页布局器中的页面信息；
第二存储单元，包括多个第三存储单元，用于存储所述网页布局器中页面的行信息；
第三存储单元，用于存储所述网页布局器中多个栏目信息。
3.根据权利要求1所述的方法，其特征在于，所述方法还包括：
根据所述控件单元的布局配置信息的类别，对所述控件单元进行分类，并根据所述控件单元的布局配置信息，为所述控件单元分配对应的ID信息；
响应对所述控件单元的属性编辑指令，根据所述布局配置信息的类别，显示对应的编辑界面，其中，显示对应的编辑界面的方法包括：
以弹出菜单的形式显示对应的编辑界面，并且保存编辑后的信息，并更新所述控件单元的布局配置信息。
4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
获取登录用户的身份信息，根据所述身份信息从与所述身份信息对应的历史行为信息中，获取与所述身份信息对应的偏好信息；
根据所述偏好信息确定与所述偏好信息对应的偏好属性值，基于所述偏好属性值与布局样式的对应关系，显示与所述偏好属性值对应的布局样式。
5.根据权利要求1所述的方法，其特征在于，所述方法还包括：
获取对所述控件单元的拖拽命令对应的网页代码，确定所述网页代码中拖拽命令对应的拖拽标签信息以及拖拽属性信息；
将所述拖拽标签信息以及所述拖拽属性信息与所述网页界面中预设标签信息以及预设拖拽属性信息进行匹配，
若标签信息和/或属性信息无法匹配，则通过网页代码过滤器将所述拖拽标签信息中冗余标签以及所述拖拽属性信息中冗余属性进行过滤。
6.根据权利要求1所述的方法，其特征在于，所述通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页包括：
根据渲染完的控件单元生成第一代码信息，其中，所述第一代码信息用于指示所述控件单元对应的网页架构信息；
基于所述第一代码信息，以及所述控件单元确定与所述控件单元对应的预览信息；
确定所述预览信息无误后，结合网页布局信息，生成布局调整后的网页。
7.一种基于网页的动态布局系统，其特征在于，包括：
第一单元，用于对当前网页界面进行初始化，并判断初始化后的网页界面是否存在布局配置信息，
第二单元，用于若不存在，则通过预设的布局引擎解析所述布局配置信息，并将所述布局配置信息转换为控件单元；响应对所述控件单元的拖拽命令，并将所述拖拽命令与所述控件单元的布局配置信息进行绑定，更新所述控件单元的布局配置信息并存储；
第三单元，用于若存在，则执行网页请求指令，获取所述布局配置信息并将其存储；
第四单元，用于通过递归所述布局配置信息渲染所述控件单元，生成布局调整后的网页。
8.一种电子设备，其特征在于，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为调用所述存储器存储的指令，以执行权利要求1至6中任意一项所述的方法。
9.一种计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1至6中任意一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211637936.6A CN115618144B (zh) | 2022-12-20 | 2022-12-20 | 基于网页的动态布局方法、系统、设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211637936.6A CN115618144B (zh) | 2022-12-20 | 2022-12-20 | 基于网页的动态布局方法、系统、设备及介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115618144A true CN115618144A (zh) | 2023-01-17 |
| CN115618144B CN115618144B (zh) | 2023-03-28 |
Family
ID=84881055
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211637936.6A Active CN115618144B (zh) | 2022-12-20 | 2022-12-20 | 基于网页的动态布局方法、系统、设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115618144B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116301847A (zh) * | 2023-01-28 | 2023-06-23 | 广西数字大脑智能科技有限责任公司 | 一种基于开发平台快速生成页面的系统及方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070204216A1 (en) * | 2006-02-24 | 2007-08-30 | Morgan Brian S | System and method for creating layouts using a layout editor |
| CN107562428A (zh) * | 2017-09-08 | 2018-01-09 | 上海博科资讯股份有限公司 | 基于规则的自适应软件界面布局方法及系统 |
| CN110032420A (zh) * | 2019-04-18 | 2019-07-19 | 合肥天毅网络传媒有限公司 | 一种前端网页设计系统及其方法 |
| CN113064593A (zh) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | 移动app动态化的方法、装置、计算机设备及存储介质 |
| CN115220618A (zh) * | 2021-04-15 | 2022-10-21 | 腾讯科技（深圳）有限公司 | 一种表单生成方法和装置 |
-
2022
- 2022-12-20 CN CN202211637936.6A patent/CN115618144B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070204216A1 (en) * | 2006-02-24 | 2007-08-30 | Morgan Brian S | System and method for creating layouts using a layout editor |
| CN107562428A (zh) * | 2017-09-08 | 2018-01-09 | 上海博科资讯股份有限公司 | 基于规则的自适应软件界面布局方法及系统 |
| CN110032420A (zh) * | 2019-04-18 | 2019-07-19 | 合肥天毅网络传媒有限公司 | 一种前端网页设计系统及其方法 |
| CN113064593A (zh) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | 移动app动态化的方法、装置、计算机设备及存储介质 |
| CN115220618A (zh) * | 2021-04-15 | 2022-10-21 | 腾讯科技（深圳）有限公司 | 一种表单生成方法和装置 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116301847A (zh) * | 2023-01-28 | 2023-06-23 | 广西数字大脑智能科技有限责任公司 | 一种基于开发平台快速生成页面的系统及方法 |
| CN116301847B (zh) * | 2023-01-28 | 2023-11-21 | 广西数字大脑智能科技有限责任公司 | 一种基于开发平台快速生成页面的系统及方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115618144B (zh) | 2023-03-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11030392B2 (en) | Optimization for rendering web pages | |
| US10425501B2 (en) | Element mapping and rule building systems and methods for contextual site visitor engagement | |
| US20110191671A1 (en) | Website Font Previewing | |
| Reid | jQuery Mobile | |
| US9672197B2 (en) | Universal rebranding engine | |
| US20150254713A1 (en) | Content dynamically targetted according to context | |
| CN115618144B (zh) | 基于网页的动态布局方法、系统、设备及介质 | |
| CN113239672A (zh) | 目标文件编辑方法及装置、电子设备、存储介质 | |
| US11175800B2 (en) | Element mapping and rule building systems and methods for contextual site visitor engagement | |
| CN113095056B (zh) | 生成方法、处理方法、装置、电子设备以及介质 | |
| CN113419711A (zh) | 页面引导方法、装置、电子设备及存储介质 | |
| CN108694043B (zh) | 页面装修方法和系统 | |
| CN113360106A (zh) | 一种网页打印方法和装置 | |
| US9501457B2 (en) | Creating a communication editable in a browser independent of platform and operating system | |
| EP3819760A1 (en) | Methods and apparatus for generating a platform-agnostic mobile application configuration data structure with a dynamic quiz | |
| CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
| US11126410B2 (en) | Method and apparatus for building pages, apparatus and non-volatile computer storage medium | |
| Kyrnin | Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours | |
| CN113361242A (zh) | 自定义问卷模板的方法及装置 | |
| CN113849257A (zh) | 页面处理方法、装置、介质及电子设备 | |
| CN116009863B (zh) | 前端页面渲染方法、设备及存储介质 | |
| Meloni | HTML, CSS and JavaScript All in One, Sams Teach Yourself: Covering HTML5, CSS3, and jQuery | |
| US20230116021A1 (en) | Visual recorder for demonstrations of web-based software applications | |
| Regmi | Building a responsive website | |
| Meloni | Sams Teach Yourself HTML, CSS, and JavaScript All in One |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |