CN113988039A - 无代码自动排版生成网页方法及装置 - Google Patents

Abstract

本发明涉及网页设计技术领域，尤其涉及无代码自动排版生成网页方法及装置，该方法应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，包括：获取N个待排布的目标组件，N个待排布的目标组件位于组件列表区域，组件列表区域的组件内均集成有M个交互事件，接收目标组件被拖拽至编辑器区域的操作；基于操作，在编辑器区域内对目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；基于编辑器区域的自动排版的目标组件，以及对工具区域的操作，生成目标网页，通过自动排版的方式，无需多次调整，使得排版效果更佳，且排版效率提高。

Description

无代码自动排版生成网页方法及装置

技术领域

本发明涉及网页设计技术领域，尤其涉及无代码自动排版生成网页方法及装置。

背景技术

现有可以通过用户拖拽组件到画布上，其位置以及大小均需要用户自定义，最后生成网页页面。

但是，采用上述的方式生成的网页容易出现排版没有对齐，排版错位，导致制作页面的时间长，且效果不佳的技术问题。

因此，如何提高网页排版的效率和效果是目前亟待解决的技术问题。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的无代码自动排版生成网页方法及装置。

第一方面，本发明提供了无代码自动排版生成网页方法，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，包括：

获取N个待排布的目标组件，所述N个待排布的目标组件位于所述组件列表区域，所述组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；

接收所述目标组件被拖拽至所述编辑器区域的操作；

基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；

基于所述编辑器区域的自动排版的目标组件，以及对所述工具区域的操作，生成目标网页。

进一步地，所述目标组件在所述编辑器区域形成预设区域，所述基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版之后，还包括：

接收对所述预设区域的所述目标组件进行调整的操作。

进一步地，所述预设区域包括由外至内的边框、拖拽点、遮罩层以及组件内容，其中，所述遮罩层集成有拖拽事件接口和点击事件接口，所述拖拽点用于在所述目标组件被拖拽时获取所述目标组件的相关信息和用户释放所述目标组件的目标位置信息和整行的其他目标组件的信息，所述组件内容用于显示所述目标组件内容，所述接收对所述预设区域的所述目标组件进行调整的操作，包括：

接收对所述拖拽点的拖拽操作；

基于对所述拖拽点的拖拽操作，实现对所述目标组件的宽度或者高度的调整，以及与所述目标组件相邻的其他目标组件的宽度或者高度的调整。

进一步地，接收对所述预设区域的所述目标组件进行调整的操作，还包括：

接收对所述遮罩层的选择操作，实现对所述目标组件的高亮显示；或者

接收对所述遮罩层的拖拽操作，实现对所述目标组件的位置调整的操作。

进一步地，在接收对所述遮罩层的选择操作，实现对所述目标组件的高亮显示之后，还包括：

接收对所述遮罩层的再次选择操作，使得所述遮罩层消失，以实现对所述组件内容的编辑。

进一步地，所述接收所述目标组件被拖拽至所述编辑器区域的操作，包括：

接收到目标组件被拖拽至所述编辑器区域的操作时，创建FLIP动画，以记录所述目标组件从所述组件列表区域被拖拽至所述编辑器区域的操作过程，并将所述操作过程存入历史记录栈。

进一步地，所述基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔之后，还包括：

在接收到新的目标组件被拖拽至所述编辑器区域的已有目标组件所在行的操作时，将所述已有目标组件所在行的目标组件的宽度缩短，以预留出新的空位供所述新目标组件排放。

进一步地，还包括：

对所述编辑页面上的所述N个目标组件以及其他数据进行数据存储，且按照树形结构进行存储；

增加数组形结构，以使得原有的树形结构实现数据记录，所述数组形结构实现数据渲染。

第二方面，本发明还提供了无代码自动排版生成网页装置，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，其特征在于，包括：

获取模块，用于获取N个待排布的目标组件，所述N个待排布的目标组件位于所述组件列表区域，所述组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；

接收模块，用于接收所述目标组件被拖拽至所述编辑器区域的操作；

排版模块，用于基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；

生成模块，用于基于所述编辑器区域的自动排版的目标组件，以及对所述工具区域的操作，生成目标网页。

第三方面，本发明还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述的方法步骤。

第四方面，本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上法步骤。

本发明实施例中的一个或多个技术方案，至少具有如下技术效果或优点：

本发明提供了无代码自动排版生成网页方法，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，包括：获取N个待排布的目标组件，N个待排布的目标组件位于组件列表区域，组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；接收目标组件被拖拽至编辑器区域的操作；基于操作，在编辑器区域内对目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；基于编辑器区域的自动排版的目标组件，以及对工具区域的操作，生成目标网页，通过自动排版的方式，使得同一行的目标组件能够依次排布且占满整行，同一列的多个目标组件依次排布，且无论是同一行还是同一列的多个目标组件中相邻的目标组件之间预留间隔，无需多次调整，使得排版效果更佳，且排版效率提高。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考图形表示相同的部件。在附图中：

图1示出了本发明实施例中无代码自动排版生成网页方法的步骤流程示意图；

图2示出了本发明实施例中编辑软件的结构示意图；

图3示出了本发明实施例中画布上行、列以及组件的排布位置的示意图；

图4示出了本发明实施例中预设区域的结构示意图；

图5示出了本发明实施例中组件内部的数据是单向的数据流的示意图；

图6示出了本发明实施例中该编辑软件的实现流程示意图；

图7示出了本发明实施例中无代码自动排版生成网页装置的结构示意图；

图8示出了本发明实施例中实现无代码自动排版生成网页方法的计算机设备的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

实施例一

本发明的实施例提供了无代码自动排版生成网页方法，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中。

如图1所述，该方法包括：

S101，获取N个待排布的目标组件，N个待排布的目标组件位于组件列表区域，组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；

S102，接收目标组件被拖拽至编辑器区域的操作；

S103，基于该操作，在编辑器区域内对目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；

S104，基于编辑器区域的自动排版的目标组件，以及对工具区域的操作，生成目标网页。

首先，该方法应用在编辑软件中，该编辑软件用于实现对网页的内容的编辑。如图2所示，在该编辑软件的编辑页面上具有组件列表区域201、编辑器区域202以及工具区域203。

该组件列表区域包括多个目标组件，包括：输入框组件、文本组件、图片组件、视频组件、音频组件、按钮组件、表格组件、图表组件，选项卡组件，以及其他定制组件（根据业务和网页内容需求所制作的组件），在此就不再详细赘述了。

该编辑器区域，用于展示被拖拽至编辑器区域的组件，在该编辑器区域可以识别用户拖拽进行来的组件，还可以将拖拽进来的组件渲染成对应的组件元素，通过操作右键菜单对组件元素进行删除、复制、粘贴等操作，还可以改变组件元素的位置以及大小，以实现排版布局。

该工具模块，用于实现网页的导入导出，撤销，前进以及新增页面、删除页面等功能。

在具体对该编辑软件使用的过程中，需要先创建空白画布，即新建一个空对象（Obiect，用于存储大量字符的数据类型）用作画布对象，赋值相应的ID（Identitydocument 身份证标识号），绑定拖拽相关的事件监听API（Application ProgrammingInterface，应用程序接口）。

S101中，获取N个待排布的目标组件，N个待排布的目标组件位于组件列表区域，组件列表区域的组件内均集成有M个交互事件，M和N均为正整数。

由于该组件列表区域包括很多组件，用户在制作网页的过程中需选择其中的部分组件进行排版，当然，可以是一个一个的选择，也可以是批量选择，在此并不作限定。被选择的组件作为N个目标组件。

接着，执行S102，接收目标组件被拖拽至编辑器区域的操作。

在目标组件在编辑器区域形成预设区域，该S102，具体包括：

接收目标组件被拖拽至编辑器区域，并对所述预设区域的目标组件进行调整的操作。

在接收目标组件被拖拽至编辑器区域的操作之后，S103中，基于该操作在编辑器区域内对目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一行的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔。

在目标组件被拖拽至编辑器区域之后，在该编辑器区域内，当一行内只有一个组件时，使得该组件占满该行，当然，若有多个组件时，多个组件之间预留间隔且占满整行。

在该编辑器区域内，一列上组件由上至下依次排列，且相邻组件之间预留间隔。

自动排版中，行的高度由列的高度撑开，列的高度由预设区域撑开，行一直铺满，宽度为960px（像素）；列的宽度由该列最宽的预设区域撑开，高度由整列的预设区域叠加撑开，该预设区域的宽度和高度通过计算分配。该组件内容按照内容的不同有两种布局，1、组件内容宽度不可变，则由上下左右居中；2、宽度可变，该组件内容宽度和高度从父级组件内容继承。

在排版的顺序中，采用类表格方式排版，在纵向上，一列一列从上向下排版，横向上，将一整行的宽度分成24份，位于同一行的目标组件占满整行，所有组件不能有重合部分，所有组件内自带有间隔，通过调整组件内间距实现目标组件与目标组件之间分隔距离。

在画布中形成的行、列以及组件具体如图3所示。

上述的自动排版并不一定满足用户对网页的设计需求，当然，还需要对该编辑器内的组件进行调整。

因此，在S103之后，还包括：

接收对预设区域的目标组件进行调整的操作，该目标组件在编辑器区域形成预设区域。

对预设区域的目标组件进行调整的操作具体可以是对目标组件的排版位置，排版尺寸等调整的操作。

具体地，在调整过程中具体是对该预设区域进行调整。

其中，如图4所示，该预设区域包括：由外至内的边框、拖拽点、遮罩层以及组件内容。该遮罩层集成有拖拽事件接口和点击事件接口，并且用于在目标组件被拖拽时获取目标组件的相关信息和用户释放目标组件的目标位置信息和整行的其他目标组件的信息，以调整目标组件的位置，该组件内容用于显示目标组件内容。

在接收对预设区域的目标组件进行调整的操作，包括：

接收对拖拽点的拖拽操作，基于对拖拽点的拖拽操作，实现对目标组件的宽度或者高度的调整，以及与目标组件相邻的其他目标组件的宽度或者高度的调整。

举例来说，若同一行的目标组件有5个，在对其中一个组件的宽度进行调整时，相邻组件组件的宽度也随之调整。若对其中一个组件的高度进行调整，在对该行最高的组件的高度调整时，进而整行的高度都会随之调整，该行以下的位置会下调，但是高度不变；在对该行除最高的组件之外的其他组件的高度调整时，整行其他组件的高度不会变化。

在接收对预设区域的目标组件进行调整的操作，还包括：

接收对遮罩层的选择操作，实现对目标组件的高亮显示；或者接收对遮罩层的拖拽操作，实现对目标组件的位置调整的操作。

在具体的实施方式中，在第一次选择点击该遮罩层时，使得目标组件高亮显示，以显示该目标组件被选中。

在该目标组件高亮显示之后，若接收对该遮罩层的再次选择操作，使得该遮罩层消失，以实现对组件内容的编辑。

具体地，在第一次选择点击该遮罩层之后，通过再次点击该遮罩层，此时，遮罩层消失，能够对目标组件内容进行编辑。

如图5所示，该组件内部的数据可以是来自于用户输入的数据，也可以是编辑器区域得到的，在此并不作限定。该数据流是单向的数据流，由编辑器传向组件，由该组件内部监听到数据变更时，进行统一处理，以便统一管理和存入历史栈。

在S102中，接收目标组件被拖拽至编辑器区域的操作，具体包括：

通过创建FILP动画，以记录目标组件从组件列表区域被拖拽至编辑器区域的操作过程，并将该操作过程存入记录栈。

采用FILP动画的方式，能够将用户的操作进行清晰展示。将用户的操作存入历史记录栈中是将新的画布对象存入该历史记录栈中，以实现后撤前进的功能。

其中，该FILP（First- Last- Invert-Play）中，First是获取当前组件DOM（文档对象模型（Document Object Model，简称DOM））的信息，Last，将新的画布对象渲染到页面变成新的DOM并获取新DOM信息；Invert：根据first和last两个状态下获得的DOM信息创建两个状态之间的过度动画，play：播放过渡动画。

在对目标组件被拖拽至编辑器区域之后，对所形成的预设区域进行调整的过程也采用上述的FILP动画，以便于清晰展示。

对于组件内容，根据组件的不同，可以传入不同的数据，比如，文本格式数据，图片、视频、音频等，这些数据都是由组件内部获取的，通过事件总线以Object格式传输到编辑器所在的处理层，通过编辑传入到组件内部。

最后，执行S104，基于编辑其区域的自动排版的目标组件，以及对工具区域的操作，生成目标网页。

该目标网页可导出、导入，导出时是采用JSON格式，该JSON格式是一种轻量级的数据交换格式，在对目标网页导出时，拷贝画布对象，并过滤出网络资源地址（包括图片、音频、视频等网络资源），调用下载接口，下载并存放到导出文件内，最后将画布对象转换成JSON格式，放入导出文件内，调用压缩接口，压缩整个文件，并调用浏览器下载接口，最后呈现给用户。

导入：是通过导入压缩文件、调用解压缩接口，解压出相关资源和JSON文件，将JSON转为画布对象并判断当前状态是否是离线状态，如果是离线状态，则将资源地址替换为本地地址，否则，将数据传给编辑器区域，由编辑器区域解码渲染。

该编辑软件的实现流程如图6所示，首先，接收新建页面S601或者接收导入页面S602，在接收到对组件列表区域的组件进行选择，即选中组件S603，通过拖拽的方式将选中组件放入编辑器区域S604，由于此时的排版S605可以是满足用户设计需求的，也可以不是满足用户的设计需求，在不是满足用户的设计需求时，还可以新增组件S606，对新增组件进行重新拖拽后排版，得到新的排版之后，再对所有的组件添加组件数据S607，最后进行导出S608。

上述是组件被拖拽到编辑页面从而生成网页的过程。由于有些网页只需要简单组件，有些网页需要复杂组件，因此，对于复杂组件，在正常文档流下在浏览器中拖拽变更原有组件的位置，进而导致组件会反复创建销毁，在含有比较复杂组件或者对性能要求较高的使用场景需要避免这种反复开销，提高浏览器的处理性能。

为了解决这种问题，一种实施方式中，对编辑页面上的N个目标组件以及其他数据进行数据存储，且按照树形结构进行存储；通过增加数组形结构，以使得原有的树形结构实现数据记录，数组形结构实现数据渲染。

在增加该数组形结构之后，创建FLIP动画时，只保留First和Last两步，在Last完成后通过转换函数进行画布对象树转换，过渡动画直接通过css(层叠样式表)中Transition属性实现即可的。

组件的高度、宽度需要根据浏览器的正常文档流方式进行手动计算，通过宽度计算转换函数，高度更改，将树形结构的数据中数组的高度、宽度以及层级信息转换为绝对定位树，存入到数组结构，并通过数组形结构渲染到界面上。

在另一种实施方式中，将编辑器区域看作“棋盘”，通过树形结构将对应的数据改为最简单的div标签作为“伪元素”，并将css中z-index属性改为-1作为棋盘；再将数组形数据渲染用绝对定位渲染到页面，再通过两个数据中元素id一一对应，映射起来，实现绑定作为棋子。

具体的绑定方法：通过遍历“棋盘”上所有“伪元素”，并通过浏览器的getBoundingClientRect接口获取所有伪元素位置高度信息，从而存入数组形结构数据中。最后，对数据形结构进行渲染即可。

对于该减小浏览器的开销，提高浏览器的处理性能的其他应用场景中，具体是针对有复杂DOM结构（比如3D模型，含有大量数据的表格，大量数据图表），且有移动更改结构的需求的场景。

具体的场景中，在进行正常文档流排版时，遇到需要进行移动的目标DOM结构时，创建一个同DOM一样大小的空白div，替代原DOM。随后，将目标DOM结构采用绝对定位方式定位在整个文档中，利用getBoundingClientRect接口获取空白div的位置信息pos1=(top1,left1)和宽度信息（width，height），再同样利用getBoundingClientRect接口获取整个文档的根节点的位置pos3=（top3=top2-top1,left3=left2-left1）,最后将pos3中的top3和left3设置成目标DOM结构的位置，即可达到和空白div重合。在需要移动该复杂DOM的时候，只需要在新的位置创建一个新的空白div，按照上述方式获取新的位置，再将其赋值给目标DOM结构达到移动的目的。如果需要加动画可以采用FLIP动画或者直接利用transition动画即可。

页面上绘制的3D模型，需要进行移动时，或者多页面复用该组件（可将该组件降低层级达到隐藏的效果）时，采用上述方案，当需要在不同页面使用时（需要含有前端路由跳转，不能整个页面跳转，否则会直接销毁目标路由），改变目标DOM结构的层级为-1即可隐藏，在需要出现的位置，按照上述创建新的空白div方式，获取位置即可。

本发明中的适合复杂页面的应用场景还可以是，视频小窗，正常文档流，大量复杂组件交互（如各种网页虚拟实验），都类似，在此就不再详细赘述了。

本发明实施例中的一个或多个技术方案，至少具有如下技术效果或优点：

本发明提供了无代码自动排版生成网页方法，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，包括：获取N个待排布的目标组件，N个待排布的目标组件位于组件列表区域，组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；接收目标组件被拖拽至编辑器区域的操作；基于操作，在编辑器区域内对目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；基于编辑器区域的自动排版的目标组件，以及对工具区域的操作，生成目标网页，通过自动排版的方式，使得同一行的目标组件能够依次排布且占满整行，同一列的多个目标组件依次排布，且无论是同一行还是同一列的多个目标组件中相邻的目标组件之间预留间隔，无需多次调整，使得排版效果更佳，且排版效率提高。

实施例二

基于相同的发明构思，本发明还提供了无代码自动排版生成网页装置，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，如图7所示，包括：

获取模块701，用于获取N个待排布的目标组件，所述N个待排布的目标组件位于所述组件列表区域，所述组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；

接收模块702，用于接收所述目标组件被拖拽至所述编辑器区域的操作；

排版模块703，用于基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；

生成模块704，用于基于所述编辑器区域的自动排版的目标组件，以及对所述工具区域的操作，生成目标网页。

在一种可选的实施方式中，还包括：

调整模块，用于接收对所述预设区域的所述目标组件进行调整的操作。

在一种可选的实施方式中，所述预设区域包括由外至内的边框、拖拽点、遮罩层以及组件内容，其中，所述遮罩层集成有拖拽事件接口和点击事件接口，并且用于在所述目标组件被拖拽时获取所述目标组件的相关信息和用户释放所述目标组件的目标位置信息和整行的其他目标组件的信息，所述组件内容用于显示所述目标组件内容，该调整模块，用于：接收对所述拖拽点的拖拽操作；基于对所述拖拽点的拖拽操作，实现对所述目标组件的宽度或者高度的调整，以及与所述目标组件相邻的其他目标组件的宽度或者高度的调整。

在一种可选的实施方式中，所述调整模块，还用于：

接收对所述遮罩层的选择操作，实现对所述目标组件的高亮显示；或者

接收对所述遮罩层的拖拽操作，实现对所述目标组件的位置调整的操作。

在一种可选的实施方式中，所述调整模块，还用于：

在接收对所述遮罩层的选择操作，实现对所述目标组件的高亮显示之后，接收对所述遮罩层的再次选择操作，使得所述遮罩层消失，以实现对所述组件内容的编辑。

在一种可选的实施方式中，所述调整操作，包括：

接收到目标组件被拖拽至所述编辑器区域的操作时，创建FLIP动画，以记录所述目标组件从所述组件列表区域被拖拽至所述编辑器区域的操作过程，并将所述操作过程存入历史记录栈。

在一种可选的实施方式中，还包括，新增组件模块，用于：

在接收到新的目标组件被拖拽至所述编辑器区域的已有目标组件所在行的操作时，将所述已有目标组件所在行的目标组件的宽度缩短，以预留出新的空位供所述新目标组件排放。

在一种可选的实施方式中，还包括：存储模块，用于：

对所述编辑页面上的所述N个目标组件以及其他数据进行数据存储，且按照树形结构进行存储；

增加数组形结构，以使得原有的树形结构实现数据记录，所述数组形结构实现数据渲染。

实施例三

基于相同的发明构思，本发明实施例提供了一种计算机设备，如图8所示，包括存储器804、处理器802及存储在存储器804上并可在处理器802上运行的计算机程序，所述处理器802执行所述程序时实现上述无代码自动排版生成网页方法的步骤。

其中，在图8中，总线架构（用总线800来代表），总线800可以包括任意数量的互联的总线和桥，总线800将包括由处理器802代表的一个或多个处理器和存储器804代表的存储器的各种电路链接在一起。总线800还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口806在总线800和接收器801和发送器803之间提供接口。接收器801和发送器803可以是同一个元件，即收发机，提供用于在传输介质上与各种其他装置通信的单元。处理器802负责管理总线800和通常的处理，而存储器804可以被用于存储处理器802在执行操作时所使用的数据。

实施例四

基于相同的发明构思，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述无代码自动排版生成网页方法的步骤。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的无代码自动排版生成网页装置、计算机设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

1.无代码自动排版生成网页方法，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，其特征在于，包括：

获取N个待排布的目标组件，所述N个待排布的目标组件位于所述组件列表区域，所述组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；

接收所述目标组件被拖拽至所述编辑器区域的操作；

基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；

基于所述编辑器区域的自动排版的目标组件，以及对所述工具区域的操作，生成目标网页。

2.如权利要求1所述的方法，其特征在于，所述目标组件在所述编辑器区域形成预设区域，所述基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版之后，还包括：

接收对所述预设区域的所述目标组件进行调整的操作。

3.如权利要求2所述的方法，其特征在于，所述预设区域包括由外至内的边框、拖拽点、遮罩层以及组件内容，其中，所述遮罩层集成有拖拽事件接口和点击事件接口，并且用于在所述目标组件被拖拽时获取所述目标组件的相关信息和用户释放所述目标组件的目标位置信息和整行的其他目标组件的信息，所述组件内容用于显示所述目标组件内容，所述接收对所述预设区域的所述目标组件进行调整的操作，包括：

接收对所述拖拽点的拖拽操作；

基于对所述拖拽点的拖拽操作，实现对所述目标组件的宽度或者高度的调整，以及与所述目标组件相邻的其他目标组件的宽度或者高度的调整。

4.如权利要求3所述的方法，其特征在于，所述接收对所述预设区域的所述目标组件进行调整的操作，还包括：

接收对所述遮罩层的选择操作，实现对所述目标组件的高亮显示；或者

接收对所述遮罩层的拖拽操作，实现对所述目标组件的位置调整的操作。

5.如权利要求4所述的方法，其特征在于，在接收对所述遮罩层的选择操作，实现对所述目标组件的高亮显示之后，还包括：

接收对所述遮罩层的再次选择操作，使得所述遮罩层消失，以实现对所述组件内容的编辑。

6.如权利要求1所述的方法，其特征在于，所述接收所述目标组件被拖拽至所述编辑器区域的操作，包括：

接收到目标组件被拖拽至所述编辑器区域的操作时，创建FLIP动画，以记录所述目标组件从所述组件列表区域被拖拽至所述编辑器区域的操作过程，并将所述操作过程存入历史记录栈。

7.如权利要求1所述的方法，其特征在于，所述基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔之后，还包括：

在接收到新的目标组件被拖拽至所述编辑器区域的已有目标组件所在行的操作时，将所述已有目标组件所在行的目标组件的宽度缩短，以预留出新的空位供所述新目标组件排放。

8.如权利要求1所述的方法，其特征在于，还包括：

对所述编辑页面上的所述N个目标组件以及其他数据进行数据存储，且按照树形结构进行存储；

增加数组形结构，以使得原有的树形结构实现数据记录，所述数组形结构实现数据渲染。

9.无代码自动排版生成网页装置，应用于具有组件列表区域、编辑器区域以及工具区域的编辑页面中，其特征在于，包括：

获取模块，用于获取N个待排布的目标组件，所述N个待排布的目标组件位于所述组件列表区域，所述组件列表区域的组件内均集成有M个交互事件，M和N均为正整数；

接收模块，用于接收所述目标组件被拖拽至所述编辑器区域的操作；

排版模块，用于基于所述操作，在所述编辑器区域内对所述目标组件进行自动排版，以使得同一行的多个目标组件依次相邻排版且占满整行，同一列的多个目标组件由上至下依次排版，且相邻目标组件之间预留间隔；

生成模块，用于基于所述编辑器区域的自动排版的目标组件，以及对所述工具区域的操作，生成目标网页。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-8中任一权利要求所述的方法步骤。

Images