CN112000328A - 一种页面可视化编辑方法、装置及设备 - Google Patents

一种页面可视化编辑方法、装置及设备 Download PDF

Info

Publication number
CN112000328A
CN112000328A CN202010919115.6A CN202010919115A CN112000328A CN 112000328 A CN112000328 A CN 112000328A CN 202010919115 A CN202010919115 A CN 202010919115A CN 112000328 A CN112000328 A CN 112000328A
Authority
CN
China
Prior art keywords
target
container
component
grid
editing
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
Application number
CN202010919115.6A
Other languages
English (en)
Other versions
CN112000328B (zh
Inventor
李宇翔
蔡羽
余雄伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Agree Technology Co ltd
Original Assignee
Agree Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Agree Technology Co ltd filed Critical Agree Technology Co ltd
Priority to CN202010919115.6A priority Critical patent/CN112000328B/zh
Publication of CN112000328A publication Critical patent/CN112000328A/zh
Application granted granted Critical
Publication of CN112000328B publication Critical patent/CN112000328B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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/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/33—Intelligent editors
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
    • Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
    • Y02P90/30—Computing systems specially adapted for manufacturing

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种页面可视化编辑方法，该方法接收针对目标页面的编辑指令；根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。可见，本发明不仅实现了网页的快速开发，即使用户不会编写代码也能通过拖拽方式创建出用户想要的页面界面，即简化了页面的布局编辑操作方式，减轻了设计及前端人员负担，大大缩短页面布局编辑的时间，还实现了页面中可以同时兼容多种类型容器的布局，以及可以避免由于人工手动编写程序所导致的页面布局错误问题，进而提高了页面编辑效率。

Description

一种页面可视化编辑方法、装置及设备
技术领域
本发明涉及页面编辑领域，尤其涉及一种页面可视化编辑方法、装置及设备。
背景技术
随着互联网技术的快速发展，使得建立良好用户体验的要求越来越高，页面编辑、布局的可视化是一种趋势。
现有技术的互联网应用布局中，框架搭建、盒模型编写、浏览器兼容问题处理等方面工作量较大，且技术含量较高，一次改版，往往需要各类型专业人员全程参与。可视化，以“所见即所得”的思想为原则，界面展示与最终代码同步调整，用户通过可视化平台即可快速拖拽出自己想要的布局页面，操作过程中可反复回退，确定界面后即可完成页面的布局编辑，可以极大的缩短了项目开发周期，当大部分产品线同时应用时能为公司节省一笔可观的人力成本。故此，目前亟需一种操作简单、可以提高页面编辑效率的页面可视化编辑方法。
发明内容
本发明提供一种页面可视化编辑方法及装置，以简化页面的布局编辑操作方式，减轻设计及前端人员负担，大大缩短页面布局编辑的时间，还实现了页面中可以同时兼容多种类型容器的布局，以及可以避免由于人工手动编写程序所导致的页面布局错误问题，进而提高了页面编辑效率。
第一方面，本发明提供了一种页面可视化编辑方法，所述方法包括：
接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件；
根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；
根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。
第二方面，本发明提供了一种页面可视化编辑装置，所述装置包括：
接收单元，用于接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件；
确定单元，用于根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；
编辑单元，用于根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。
第三方面，本发明提供了一种可读介质，包括执行指令，当电子设备的处理器执行所述执行指令时，所述电子设备执行如第一方面中任一所述的方法。
第四方面，本发明提供了一种电子设备，包括处理器以及存储有执行指令的存储器，当所述处理器执行所述存储器存储的所述执行指令时，所述处理器执行如第一方面中任一所述的方法。
由上述技术方案可以看出，本发明可以先接收针对目标页面的编辑指令，其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件；接着，可以根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；最后，可以根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。可见，本发明所提供的方案中，可以实现目标页面中同时兼容了若干类型容器，即若干类型容器可以共同兼容存在于同一页面中，并且，用户可以根据用户的用户习惯以及用户个人想法，可以直接在目标页面中通过对组件进行操作以及结合各类型容器的特点功能，对页面的布局进行编辑，而不需要和现有技术一样，用户只能在一个页面中利用一种类型容器，并通过手动编写大量代码以完成页面的布局编辑；这样，本发明不仅实现了网页的快速开发，即使用户不会编写代码也能通过拖拽方式创建出用户想要的页面界面，即简化了页面的布局编辑操作方式，减轻了设计及前端人员负担，大大缩短页面布局编辑的时间，还实现了页面中可以同时兼容多种类型容器的布局，以及可以避免由于人工手动编写程序所导致的页面布局错误问题，进而提高了页面编辑效率。
上述的非惯用的优选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
为了更清楚地说明本发明实施例或现有的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明一实施例提供的一种示例性应用场景的框架示意图；
图2为本发明一实施例提供的一种页面可视化编辑方法的流程示意图；
图3为本发明一实施例提供的一种组件、容器的关系示意图；
图4(a)为本发明一实施例提供的一种格栅布局的示意图；
图4(b)为本发明一实施例提供的一种格栅布局的示意图；
图5为本发明一实施例提供的一种自由布局的示意图；
图6为本发明一实施例提供的一种格栅布局的示意图；
图7为本发明一实施例提供的一种自由布局状态下的目标页面示意图；
图8(a)为本发明一实施例提供的一种指示标识的显示示意图；
图8(b)为本发明一实施例提供的一种指示标识的显示示意图；
图9为本发明一实施例提供的一种拖拽句柄的显示示意图；
图10为本发明一实施例提供的一种拖拽句柄的显示示意图；
图11为本发明一实施例提供的一种页面可视化编辑装置的结构示意图；
图12为本发明一实施例提供的一种电子设备的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合具体实施例及相应的附图对本发明的技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
为了解决现有技术的互联网应用布局中，框架搭建、盒模型编写、浏览器兼容问题处理等方面工作量较大，且技术含量较高，一次改版，往往需要各类型专业人员全程参与的问题。本发明提供了一种页面可视化编辑方法，所述方法可以先接收针对目标页面的编辑指令，其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件；接着，可以根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；最后，可以根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。可见，本发明所提供的方案中，可以实现目标页面中同时兼容了若干类型容器，即若干类型容器可以共同兼容存在于同一页面中，并且，用户可以根据用户的用户习惯以及用户个人想法，可以直接在目标页面中通过对组件进行操作以及结合各类型容器的特点功能，对页面的布局进行编辑，即实现了页面编辑的可视化，也就是实现了页面布局操作的直观性，以“所见即所得”的思想为原则，界面展示与最终代码同步调整，用户可通过可视化平台即可快速拖拽出自己想要的布局页面，而不需要和现有技术一样，用户只能在一个页面中利用一种类型容器，并通过手动编写大量代码以完成页面的布局编辑；这样，本发明不仅实现了网页的快速开发，即使用户不会编写代码也能通过拖拽方式创建出用户想要的页面界面，即简化了页面的布局编辑操作方式，减轻了设计及前端人员负担，大大缩短页面布局编辑的时间，还实现了页面中可以同时兼容多种类型容器的布局，以及可以避免由于人工手动编写程序所导致的页面布局错误问题，进而提高了页面编辑效率。
举例说明，本发明实施例可以应用到如图1所示的场景。在该场景中，包括终端101；其中，终端101可以为具有数据处理功能的终端，例如，可以为智能手机、平板电脑、台式电脑、笔记本电脑等终端设备，可以理解的是，终端101还可以为其他终端设备，例如服务器，在本实施例中对此不进行限定。
在本场景中，终端101可以先接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件。然后，终端101可以根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器。接着，终端101可以根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。
服务器102获取待转换有向图和目标编程语言之后，可以先对所述待转换有向图进行解析，得到所述待转换有向图对应的目标业务信息；然后，服务器102可以根据所述目标业务信息，确定所述待转换有向图对应的目标编程语言源码；接着，服务器102可以将该目标编程语言源码返回至终端101，以便终端101根据该目标编程语言源码进行后续处理。可见，本发明所提供的方案中，终端101可以实现目标页面中同时兼容了若干类型容器，即若干类型容器可以共同兼容存在于同一页面中，并且，用户可以根据用户的用户习惯以及用户个人想法，可以直接在目标页面中通过对组件进行操作以及结合各类型容器的特点功能，对页面的布局进行编辑，即实现了页面编辑的可视化，也就是实现了页面布局操作的直观性，以“所见即所得”的思想为原则，界面展示与最终代码同步调整，用户可通过可视化平台即可快速拖拽出自己想要的布局页面，而不需要和现有技术一样，用户只能在一个页面中利用一种类型容器，并通过手动编写大量代码以完成页面的布局编辑；这样，本发明不仅实现了网页的快速开发，即使用户不会编写代码也能通过拖拽方式创建出用户想要的页面界面，即简化了页面的布局编辑操作方式，减轻了设计及前端人员负担，大大缩短页面布局编辑的时间，还实现了页面中可以同时兼容多种类型容器的布局，以及可以避免由于人工手动编写程序所导致的页面布局错误问题，进而提高了页面编辑效率。
可以理解的是，在上述应用场景中，虽然将本发明实施方式的动作全部由终端101执行，但是本发明也可以部分动作为由终端101执行，部分动作由其它设备执行。本发明在执行主体方面不受限制，只要执行了本发明实施方式所公开的动作即可。
需要注意的是，上述应用场景仅是为了便于理解本申请而示出，本申请的实施方式在此方面不受任何限制。相反，本申请的实施方式可以应用于适用的任何场景。
下面结合附图，详细说明本发明的各种非限制性实施方式。
参见图2，示出了本发明实施例中的一种页面可视化编辑方法。在本实施例中，所述方法例如可以包括以下步骤：
S201：接收针对目标页面的编辑指令。
在本实施例中，目标页面可以理解为待编辑的前端页面，例如，可以为web页面。编辑指令可以理解为目标页面中需要进行编辑的内容；在一种实现方式中，编辑指令可以包括目标编辑类型以及目标组件。其中，目标组件可以理解为针对目标页面所需要编辑的组件，例如可以是在目标页面中需要进行编辑的组件，又例如可以是需要在目标页面中创建的组件；目标编辑类型可以理解为需要对目标组件进行的编辑方式，例如，目标编辑类型可以为创建组件类型、删除组件类型、移动组件类型或者调整组件大小类型。
需要说明的是，组件是对数据和方法的简单封装。组件可以分为很多类型；例如，组件可以就是一个单独、独立的特定对象，而不需要由多个组件所组成，比如可以是独立的一个扩展组件，比如文本组件、按钮组件；又例如，组件可以是由各种组件组合起来所形成的一个组件，即组件可以包括了多个组件，这样，可以将多个组件的性能集中起来，需要强调的是，为了便于说明，在本实施例中，可以将能够包括多个组件的组件称之为容器。需要强调的是，容器就和单独的组件一样，可以通过拖拽方式来创建；容器和普通组件(即单独的组件)的区别在于，容器内部还可以放置组件，而普通组件不能再放置其他组件。
如图3所示，容器也可以理解为是一种组件，容器可以根据布局方式的不同，分为多种类型容器，例如，可以分为自由容器和格栅容器。接下来，将分别对自由容器和格栅容器进行介绍。
格栅容器的组件布局方式为格栅布局。栅格布局的概念是把页面的宽度划分N行，每行划分为24等分(也可以是其他等分，不过约定俗成就是24)，可以在一行或一列里添加组件，组件可以声明自身占据多少份，偏移多少份。栅格布局通常用于构建表单，比如，如图4(a)和图4(b)所示。栅格容器的优势为其拖拽出来的页面能够适应各种不同大小的屏幕分辨率；缺点在于：(1)、没办法支持“组件叠加\组件交错”的需求，由于每个组件都是相对于“上一个组件”来进行定位，所以，两个组件之间一定是不重叠的，而实际的业务场景中，会有多个组件重叠的需求，栅格布局无法满足，例如，在图4中，每一朵花都是独立的图片(而非背景)，“春”字压在背景和花上，栅格布局无法做到此效果。(2)、相较于自由容器的自由布局，栅格容器的格栅布局的理解成本偏高，由于拖下来的组件并不是严格按照用户指定的位置，而是放置在用户鼠标位置最近的组件之前\之后，和用户的直觉有所偏差，需要一定的理解成本。
自由容器的组件布局方式为自由布局。在自由容器中可以通过拖拽为组件设置长宽高和位置，自由放置组件。自由布局没有理解成本，和用户的拖拽效果完全一致，且自由布局里的每个组件都有一个层级，层级越高的组件，在组件叠加的时候展示在越上层，所以可以实现叠加组件的需求。自由容器的缺点在于：A、自由布局拖拽出来的组件是以“像素值”进行定位，但是不同分辨率的屏幕其宽度、高度的像素值不一样，导致不同屏幕的高宽比不同，像素密度也不同，自由布局的组件难以适配各种屏幕；B、自由布局组件无法适应“动态高度需求”，以图6的界面为例：A框中的这个列表长度不是固定的，而是会根据文章数量而变化，那么，底下的步骤条也应该随之下移，然而在自由布局中，每个组件的位置都是“固定”的，不会向下移动，所以无法满足动态高度需求。
现有技术中，页面中仅包括自由容器或者仅包括格栅容器，即现有的页面布局仅为自由布局或者栅格布局，而随着科技的发展，用户对于页面布局的灵活性要求越来越高，而现有的页面布局无法满足。故此，在本实施例中，目标页面可以包括若干类型容器，例如可以包括自由容器和格栅容器，这样，目标页面的布局编辑可以实现自由布局和栅格布局的混合使用，即同时兼容了自由布局和栅格布局两种形式的布局，从而可以克服自由布局操作不直观的问题(基于用户习惯的操作分析)，以及栅格布局不能自适应屏幕的问题(全单位换算算法)的问题。由于自由布局和栅格布局在操作上是存在冲突的，故此本发明提供了一系列的规范定义，解决了这些冲突，达到了自由布局和栅格布局可以共存在同一个可视化编辑器上，具体地，将结合S202和S203以及后面的实施例具体说明。需要强调的是，本实施例的一种实现方式中，目标页面可以是以栅格容器为主，自由容器为辅，即页面创建时，可以默认为“栅格布局”，同时也可以支持选择“自由布局”。
作为一种示例，用户需要在目标页面中创建组件时，用户可以在组件操作区选择需要创建的组件，从而可以将该组件作为目标组件，并确定目标编辑类型为创建组件类型，这样，便可以根据该目标组件和创建组件类型生成针对该目标页面的编辑指令。
作为另一种示例，用户需要对目标页面中的组件进行编辑操作时(比如删除、移动、调整大小)，用户可以先选中确定该组件，从而可以将该组件作为目标组件，并可以根据编辑操作确定目标编辑类型，这样，便可以根据该目标组件和目标编辑类型生成针对该目标页面的编辑指令。
需要强调的是，在本实施例中，组件中的内容的大小，不能超出组件的大小，并且，容器中的组件的大小之和，也不能超出容器的大小。
S202：根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器。
其中，目标编辑位置可以理解为目标组件在目标页面中所对应的位置；例如，当目标编辑类型为删除组件类型、移动组件类型或者调整组件大小类型时，目标编辑位置可以是目标组件当前在目标页面中的实时位置；当目标编辑类型为创建组件类型时，目标编辑位置可以是目标组件即将在目标页面中的位置。
由于在同一编辑指令下，即在目标编辑类型相同的情况下，若目标组件对应的目标编辑位置在不同类型容器中，则针对目标组件进行编辑的方式也可能不相同；故此，在本实施例中，接收到编辑指令后，可以先确定所述编辑指令中目标组件在所述目标页面中对应的目标编辑位置，再根据该目标编辑位置确定目标组件对应的目标容器，例如，若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器。需要说明的是，当自由容器和格栅容器存在重叠区域，且该目标编辑位置位于该重叠区域中时，可以将当前页面中位于编辑层中最上层的类型容器作为目标容器，该编辑层中最上层的类型容器可以理解为编辑层中当前正在进行编辑的容器；举例来说，假设目标页面中存在自由容器和格栅容器时，若用户选择当前需要编辑的类型容器为自由容器(比如点击预设的相关选择按钮)，且该目标编辑位置位于自由容器和格栅容器的重叠区域中，则自由容器为当前页面中位于编辑层中最上层的类型容器，此时，可以将自由容器确定为目标容器；反之，若用户选择当前需要编辑的类型容器为格栅容器(比如点击预设的相关选择按钮)，且该目标编辑位置位于自由容器和格栅容器的重叠区域中，则格栅容器为当前页面中位于编辑层中最上层的类型容器，此时，可以将格栅容器确定为目标容器。
S203：根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。
在确定目标组件、需要针对目标组件进行的目标编辑类型以及目标组件所位于的目标容器之后，可以先基于目标编辑类型和目标容器，确定需要对目标组件进行所述目标编辑类型的具体编辑方式；接着，可以根据该具体编辑方式对该目标组件进行编辑，从而解决了自由布局和栅格布局在操作上存在的冲突问题，达到了自由布局和栅格布局可以共存在同一个可视化编辑器上，以及用户可以根据用户的用户习惯以及用户个人想法，可以直接在目标页面中通过对组件进行操作以及结合各类型容器的特点功能，对页面的布局进行编辑，即实现了页面编辑的可视化，简化了页面的布局编辑操作方式，减轻了设计及前端人员负担，大大缩短页面布局编辑的时间。
可见，本发明所提供的方案中，可以实现目标页面中同时兼容了若干类型容器，即若干类型容器可以共同兼容存在于同一页面中，并且，用户可以根据用户的用户习惯以及用户个人想法，可以直接在目标页面中通过对组件进行操作以及结合各类型容器的特点功能，对页面的布局进行编辑，即实现了页面编辑的可视化，也就是实现了页面布局操作的直观性，以“所见即所得”的思想为原则，界面展示与最终代码同步调整，用户可通过可视化平台即可快速拖拽出自己想要的布局页面，而不需要和现有技术一样，用户只能在一个页面中利用一种类型容器，并通过手动编写大量代码以完成页面的布局编辑；这样，本发明不仅实现了网页的快速开发，即使用户不会编写代码也能通过拖拽方式创建出用户想要的页面界面，即简化了页面的布局编辑操作方式，减轻了设计及前端人员负担，大大缩短页面布局编辑的时间，还实现了页面中可以同时兼容多种类型容器的布局，以及可以避免由于人工手动编写程序所导致的页面布局错误问题，进而提高了页面编辑效率。
图2所示仅为本申请所述页面可视化编辑方法的基础实施例，在其基础上进行一定的优化和拓展，还能够得到所述方法的其他可选实施例。
接下来，将介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为创建组件类型的具体实现方式。本实施例在图1对应实施例的基础上，对进行进一步阐述(S201包括S301，S202包括S302-S303，S203包括S304)。在本实施例中，所述方法具体包括以下步骤：
S301：接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括创建组件类型以及目标组件；
需要说明的是，本实施例中的S301与图2对应实施例中的S201相似。因此，在本实施例中，不再对S301进行阐述，具体可以参见S201的介绍。其中，S201中的所述目标编辑类型为创建组件类型，该创建组件类型可以理解为编辑指令为用于指示在目标页面中创建组件，或者，将目标页面的其他容器中的目标组件移动到目标容器中。
S302：确定所述目标组件在所述目标页面中的目标编辑位置；
S303：若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器；
其中，目标组件在所述目标页面中的目标编辑位置可以为光标在目标页面中的位置或者光标拖动目标组件时在目标页面中的位置。
在本实施例中的一种实现方式中，若所述目标编辑位置位于所述目标页面的自由容器中，则可以将该自由容器作为所述目标组件对应的目标容器。也就是说，若目标编辑位置位于目标页面一自由容器对应的区域中，则可以将该自由容器作为该目标组件对应的目标容器。
需要说明的是，在一种实现方式中，在所述根据所述目标组件在所述目标页面中对应的编辑位置，确定所述目标组件对应的目标容器之前，所述方法还可以包括：响应于针对自由容器的第一预设操作，将所述目标页面的编辑状态切换至自由布局状态。其中，目标页面的编辑状态为目标页面当前的编辑的权限情况；所述自由布局状态为所述目标页面中的自由容器为可编辑状态，所述目标页面中除自由容器以外的类型的容器为不可编辑状态，也就是说，在自由布局状态下，仅能在自由容器中创建组件，而不能在目标页面中除自由容器以外的类型的容器中创建组件。结合图7举例来说，假设图7(1)中的所有容器都是处于可编辑的状态，即自由容器对应的区域A和格栅容器对应的区域B均可以编辑，当用户在自由容器上进行了双击(即第一预设操作，当然，第一预设操作还可以为其他操作方式，在此不进行限定)，则目标页面(目标页面对应的编辑器)的编辑状态切换为自由布局状态，此时，只有自由容器占据的区域A可以被拖入组件(即创建组件)，而除区域A以外的区域，比如区域B，均不能创建组件；如图7(2)所示，目标页面在自由布局状态下，可以通过在目标页面中除自由容器对应的区域A以外的区域均展示一个蒙板，即该蒙板覆盖不可编辑区域(目标页面中除自由容器对应的区域A以外的区域)，暴露出可拖入区域(即自由容器对应的区域A)，而自由容器对应的区域A为自由编辑状态，即自由容器对应的区域A为可拖拽区。
在本实施例中的一种实现方式中，若所述目标编辑位置位于所述目标页面的一格栅容器中，则将该格栅容器作为所述目标组件对应的目标容器。也就是说，若目标编辑位置位于目标页面一格栅容器对应的区域中，则可以将该格栅容器作为该目标组件对应的目标容器。
S304：根据所述创建组件类型，在所述目标容器中的所述目标编辑位置，创建所述目标组件，并显示所述目标组件。
在本实施例的一种实现方式中，由于自由容器中可以在任意位置创建目标组件，故若目标容器为自由容器，则可以直接在该自由容器中该目标编辑位置，创建所述目标组件，并显示所述目标组件。
在本实施例的一种实现方式中，由于格栅容器中的布局为特定的布局格式，若目标容器为格栅容器，则可以根据所述创建组件类型、所述目标容器中的格栅布局方式以及所述目标组件对应的目标编辑位置，在所述目标容器中创建所述目标组件，并显示所述目标组件。
具体地，所述格栅容器可以包括多个组件，例如格栅容器可以包括多个格栅容器或普通组件，其中，格栅容器中的每个格栅容器中可以放置一个组件，并且，格栅容器中的格栅布局方式可以为列布局和/或行布局，列布局即为格栅容器中的各个格栅容器为以列的形式进行排列，行布局即为格栅容器中的各个格栅容器为以行的形式进行排列。所述格栅容器布局方式可以为列布局或行布局，同一个格栅容器，必须为两类布局中的一类。格栅容器列布局即为格栅容器中的容器为以列的形式进行排列，一个格栅容器最多包含24列容器，每个容器的高度皆等于格栅容器的高度，所有容器均分格栅容器的宽度。格栅容器行布局即为容器为以行的形式进行排列，一个格栅容器可以包含无限行容器，每个容器的宽度皆等于格栅容器的宽度，每个容器的高度自由设定不做限制。在格栅容器中，格栅为逻辑概念，实际存在于格栅容器内部的内容为组件和容器，组件/容器具备格栅数属性，表示自身占据格栅容器几格格栅。
若所述目标编辑位置位于所述格栅容器中的一格栅容器内，则可以根据该格栅容器的格栅内容类型，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件，其中，格栅内容类型包括空白格栅容器(即格栅容器内不包括任何内容信息，比如不包括文字、图片、组件等)和非空白格栅容器(即格栅容器内包括内容信息，比如包括文字、图片、组件等)。若所述目标编辑位置位于所述格栅容器中的一格栅容器内，且该格栅容器为空白格栅容器，则将该格栅容器作为目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；若该格栅容器为空白格栅容器，说明该格栅容器中并未存在组件，则可以在该格栅容器内创建目标组件。若所述目标编辑位置位于所述格栅容器中的一格栅容器内，且该格栅容器为非空白格栅容器，则可以确定所述格栅容器内的目标格栅容器，以及，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；其中，所述目标格栅容器为所述格栅容器内与所述目标编辑位置的距离最小的空白格栅容器，即可以将格栅容器内与目标编辑位置的距离最小的空白格栅容器作为目标格栅容器。
需要强调的是，在所述若所述目标编辑位置位于所述格栅容器中的一格栅容器内，则根据该格栅容器的格栅内容类型，确定目标格栅容器之后，所述方法还包括：在所述目标格栅容器对应的区域显示指示标识；相应地，所述在所述目标格栅容器中创建所述目标组件，并显示所述目标组件，包括：响应于针对所述目标格栅容器的确定指令，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。需要说明的是，指示标识可以为在目标格栅容器对应的区域上增加提示的标识，例如，目标格栅容器对应的区域变成预设颜色，或者，显示预设标识。也就是说，当检测到目标组件对应的目标编辑位置位于一格栅容器中时便在该格栅容器对应的区域显示指示区域，当检测到目标组件停留在一个格栅容器中或者光标不拖拽目标组件时停留在一个格栅容器(即响应于针对所述目标格栅容器的确定指令)，将该格栅容器作为目标格栅容器，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
若所述目标编辑位置并未位于所述格栅容器中的任一格栅容器或组件内(比如目标组件对应的光标停留的目标编辑位置位于格栅容器内，但位于该格栅容器中所有的格栅容器或组件之外)，则可以根据所述格栅容器的格栅布局方式，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
具体地，若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件上侧，则将该组件所在的格栅容器确定为目标格栅容器，并在所述目标格栅容器的上侧创建所述目标组件，并显示所述目标组件；若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件下侧，则将该组件所在的格栅容器确定为目标格栅容器，并在所述目标格栅容器的下侧创建所述目标组件，并显示所述目标组件。若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件左侧，则删除该组件，并在该组件对应的格栅容器中创建一个列布局容器，将该组件放入所述列布局容器(在一种实施方式中，将该组件的栅格数设置为12)，以及将所述目标组件放入所述列布局容器中的该组件的左侧(在一种实施方式中，将该目标组件的栅格数设置为12)，其中，所述列布局容器和已删除的该组件的高度、宽度相等；若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件右侧，则删除该组件，并在组件对应的格栅容器中创建一个列布局容器，将该组件放入所述列布局容器(在一种实施方式中，将该组件的栅格数设置为12)，以及将所述目标组件放入所述列布局容器中的该组件的右侧(在一种实施方式中，将该目标组件的栅格数设置为12)，其中，所述列布局容器和已删除的该组件的高度、宽度相等。可见，按上述方式进行操作，即可实现无需用户主动添加列容器，且操作逻辑近似于更加人性化的页面编辑布局。
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件左侧，则将所述组件所在的格栅容器作为目标格栅容器，并计算所述格栅容器的剩余栅格数，如果剩余栅格数大于0，在所述目标格栅容器的左侧创建所述目标组件，以及把所述目标组件的栅格数设置为所述剩余栅格数；如果所述剩余栅格数为0，则按与所述目标格栅最接近的顺序缩减所述栅格容器的所有栅格数大于1的组件(其中，容器不可缩减)，直到所述剩余栅格数满足所述目标组件的格栅数要求条件，将所述目标组件创建在所述目标格栅容器的左侧，并显示所述目标组件；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件右侧，则将所述组件所在的格栅容器作为目标格栅，并计算所述格栅容器的剩余栅格数，如果剩余栅格数大于0，在所述目标格栅容器的右侧创建所述目标组件，以及把所述目标组件的栅格数设置为所述剩余栅格数；如果所述剩余栅格数为0，则按与所述目标格栅最接近的顺序缩减所述栅格容器的所有栅格数大于1的组件，直到所述剩余栅格数满足所述目标组件的格栅要求条件，将所述目标组件创建在所述目标格栅容器的右侧，并显示所述目标组件；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件上侧，则删除该组件，并在该组件对应的格栅容器中创建一个行布局容器，将该组件放入所述行布局容器，以及将所述目标组件放入所述行布局容器中的该组件的上侧；若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件下侧，则删除该组件，并在该组件对应的格栅容器中创建一个行布局容器，将该组件放入所述行布局容器，以及将所述目标组件放入所述行布局容器中的该组件的下侧。可见，按上述方式进行操作，即可实现无需用户主动添加行容器，且操作逻辑近似于更加人性化的页面编辑布局。
在一种实现方式中，在所述若所述目标编辑位置位于所述格栅容器中的一格栅容器内，则根据该格栅容器的格栅内容类型，确定目标格栅容器之后，所述方法还包括：在所述目标格栅容器对应的区域显示指示标识；相应地，所述在所述目标格栅容器中创建所述目标组件，并显示所述目标组件，包括：响应于针对所述目标格栅容器的确定指令，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。如图8举例说明，可以根据鼠标对应的光标或者目标组件的中心点，与上下左右四个方向上的区域的距离(可以是区域的边缘，也可以是区域的中心位置)，来决定目标组件将创建在与目标组件距离最近的格栅容器的哪个方向上，如图8(a)所示，指示标识在一格栅容器的左侧，表示将在该格栅容器的左侧创建目标组件，如图8(b)所示，指示标识在一格栅容器的下侧，表示将在该格栅容器的下侧创建目标组件。
换种表述如下：
1.编辑目标在格栅容器内的情况
若所述目标编辑位置位于所述格栅容器内，则可以根据该格栅的格栅布局类型、内容数量、相对位置最接近内容，在所属目标格栅中创建所属目标组件，并显示所属目标组件，其中，格栅布局类型包括行布局或者列布局，内容数量标识格栅容器为空白容器或者非空白容器，位置最接近内容包括所述格栅容器内的组件或者容器，由所述目标编辑位置的x或者y坐标值与所有格栅内容的上下或者左右边进行比对，并取距离最小来确定，其中，需要根据格栅布局类型来确定比对方式：行布局，则比对所述目标编辑位置y坐标和所有格栅内容上下边；列布局，则比对鼠标x坐标和所有格栅内容的左右边。
1.1空白容器情况
若所述目标编辑位置位于所述格栅容器内，且该格栅容器为空白容器，则可以在该格栅内创建目标组件。
1.2非空白容器情况
若所述目标编辑位置位于所述格栅容器内，且该格栅容器为非空白容器，则格栅容器布局类型和相对位置来确定创建位置。
1.2.1行布局情况
若相对位置在上方，则在上方创建组件。
若相对位置下下方，则在下方创建组件。
若相对位置在左方，则删除“最接近组件”，在原最接近组件位置上创建一个列布局容器，该容器和原最接近组件高度和宽度相等；然后，把原最接近组件放入该容器，栅格数设置为12；最后，把所述目标组件放入该容器原目标组件的左方，栅格数设置为12。
若相对位置在右方，和上述操作一致，并交换最接近组件和所属目标组件的位置。
1.2.2列布局情况
若相对位置在左方，则计算格栅容器剩余栅格数，如果剩余栅格数大于0，在最接近组件左方创建所述目标组件，把所述目标组件栅格数设置为“剩余栅格数”；如果剩余栅格数为0，则按最接近顺序缩减所述栅格容器的所有栅格数大于1的组件(容器不可缩减)，直到剩余栅格数大于0。把所述目标组件创建在最接近组件左侧，栅格数据等于剩余栅格数。
若相对位置在右方，沿用上述操作，创建方向为右方。
若想对未知在下方，则删除“最接近组件”，在原最接近组件位置上创建一个行布局容器，该容器和原最接近组件高度和宽度相等；然后，把原最接近组件放入该容器；最后，把所述目标组件放入该容器原目标组件的下方。
若相对位置在上方，和上述操作一致，并交换最接近组件和所属目标组件的位置。
可见，按上述方式进行操作，即可实现无需用户主动添加行、列容器，且操作逻辑近似于更加人性化的页面编辑布局。
在本实施例的一种实现方式中，在所述若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器，之后，所述方法还包括：
将所述目标容器的显示方式切换至预设显示方式；其中，所述预设显示方式包括以下至少一种：所述目标容器对应的区域显示第一预设颜色和/或图案、所述目标容器的边框显示预设第二预设颜色和/或边框花纹。
可以理解的是，如果目标组件对应的光标在目标页面的一容器中或者光标拖动目标组件时在目标页面的一容器中，目标编辑位置在一容器中时，该容器的显示方式切换至预设显示方式，例如可以发生变色，即容器对应的区域的颜色会发生变化，也就是目标容器对应的区域显示第一预设颜色和/或图案，又例如可以目标容器的边框发生变化，比如显示预设第二预设颜色和/或边框花纹。
本实施例介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为创建组件类型的具体实现方式。至此，本实施例结合具体的应用场景实现了目标编辑类型为创建组件类型的具体实现方式的过程。当然应该认为，上述场景仅仅为示例性场景，并不对本申请提供的方法构成限定。本申请提供的方法可延申的应用在其他相同原理的一种页面可视化编辑方法处理过程当中。
图2所示仅为本申请所述页面可视化编辑方法的基础实施例，在其基础上进行一定的优化和拓展，还能够得到所述方法的其他可选实施例。
接下来，将介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为删除组件类型的具体实现方式。本实施例在图1对应实施例的基础上，对进行进一步阐述(S201包括S401，S203包括S403-S404)。在本实施例中，所述方法具体包括以下步骤：
S401：接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括删除组件类型以及目标组件。
需要说明的是，本实施例中的S401与图2对应实施例中的S201相似。因此，在本实施例中，不再对S401进行阐述，具体可以参见S201的介绍。其中，S201中的所述目标编辑类型为删除组件类型，该删除组件类型可以理解为编辑指令为用于指示删除目标组件或目标组件中的内容。
S402：根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器。
需要说明的是，本实施例中的S402与图2对应实施例中的S202相似。因此，在本实施例中，不再对S402进行阐述，具体可以参见S202的介绍，在此不再赘述。
S403：若所述目标组件为非空白容器，则根据所述删除组件类型，清空所述目标组件中的内容信息；
S404：若所述目标组件为空白容器或者非容器类型的组件，则根据所述删除组件类型，删除所述目标组件。
在本实施例中，当目标编辑类型为删除组件类型时，可以根据目标容器的容器类型，确定目标组件的删除方式。当目标组件为非空白容器，说明该目标组件中存在多个组件，则可以根据所述删除组件类型，清空所述目标组件中的内容信息，即不删除目标组件，而仅将目标组件中的所有内容清空，即将目标组件中的所有组件删除。当目标组件为空白容器或者非容器类型的组件(例如为普通组件，即单独的组件)，则可以根据所述删除组件类型，删除所述目标组件，即在目标页面中删除该目标组件本身。
本实施例介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为删除组件类型的具体实现方式。至此，本实施例结合具体的应用场景实现了目标编辑类型为删除组件类型的具体实现方式的过程。当然应该认为，上述场景仅仅为示例性场景，并不对本申请提供的方法构成限定。本申请提供的方法可延申的应用在其他相同原理的一种页面可视化编辑方法处理过程当中。
图2所示仅为本申请所述页面可视化编辑方法的基础实施例，在其基础上进行一定的优化和拓展，还能够得到所述方法的其他可选实施例。
接下来，将介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为移动组件类型的具体实现方式。本实施例在图1对应实施例的基础上，对进行进一步阐述(S201包括S501，S202包括S502-S503，S203包括S504)。在本实施例中，所述方法具体包括以下步骤：
S501：接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括移动组件类型以及目标组件。
需要说明的是，本实施例中的S501与图2对应实施例中的S201相似。因此，在本实施例中，不再对S501进行阐述，具体可以参见S201的介绍。其中，S201中的所述目标编辑类型为移动组件类型，该移动组件类型可以理解为编辑指令为用于指示目标组件进行移动。
S502：确定所述目标组件在所述目标页面中的目标编辑位置；
S503：若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器。
其中，目标组件在所述目标页面中的目标编辑位置可以为光标在目标页面中的位置或者光标拖动目标组件时在目标页面中的位置。
在本实施例中的一种实现方式中，若所述目标编辑位置位于所述目标页面的自由容器中，则可以将该自由容器作为所述目标组件对应的目标容器。也就是说，若目标编辑位置位于目标页面一自由容器对应的区域中，则可以将该自由容器作为该目标组件对应的目标容器。
在本实施例中的一种实现方式中，若所述目标编辑位置位于所述目标页面的一格栅容器中，则将该格栅容器作为所述目标组件对应的目标容器。也就是说，若目标编辑位置位于目标页面一格栅容器对应的区域中，则可以将该格栅容器作为该目标组件对应的目标容器。
S504：根据所述目标编辑类型、所述目标容器的容器类型和所述目标组件移动后的位置，在所述目标页面中对所述目标组件进行移动。
其中，目标组件移动后的位置可以理解为目标组件从目标编辑位置开始移动，直至停止时所停留的位置。
在本实施例的一种实现方式中，由于自由容器中可以在任意位置创建目标组件，故若所述目标容器为自由容器，可以根据所述移动组件类型，将所述目标组件从所述目标编辑位置移动至所述目标容器中的所述目标组件移动后的位置。其中，所述目标容器中的所述目标组件移动后的位置可以是根据光标固定在所述目标组件上移动结束后所确定的位置，或者可以是根据目标组件移动结束后的目标组件的中心点所确定的位置。
在本实施例的一种实现方式中，由于格栅容器中的布局为特定的布局格式。若所述目标容器为格栅容器，根据所述移动组件类型，将所述目标组件从所述目标编辑位置移动至所述目标容器中的所述目标组件移动后的目标格栅容器。其中，所述目标容器中的所述目标组件移动后的目标格栅容器是根据光标固定在所述目标组件的拖拽标识上移动结束后的位置，在所述目标容器中所确定的格栅容器；举例来说，如果光标固定在所述目标组件的拖拽标识上移动结束后的位置位于所述目标容器中的一格栅容器内，则可以将该格栅容器作为所述目标容器中的所述目标组件移动后的目标格栅容器，而如果光标固定在所述目标组件的拖拽标识上移动结束后的位置位于所述目标容器内，但并未位于所述目标容器中的任一格栅容器内时，则可以将格栅容器内与光标固定在所述目标组件的拖拽标识上移动结束后的位置的距离最小的空白格栅容器作为目标组件移动后的目标格栅容器。
需要强调的是，格栅容器中包括多选框的情况，而针对多选框移动操作和自由容器中的拖拽操作的移动操作逻辑是一致的，可以都是按下鼠标，拖动鼠标，放开鼠标，这样，格栅容器和自由容器的移动方式无法区分，而且格栅容器中的栅格布局情况下，组件之间没有空白区域，组件之间是紧密相连的，所以，栅格布局不能采用自由布局的拖拽操作，这也是自由布局和栅格布局很少混用的原因之一。为了将格栅容器和自由容器的移动方式进行区分，在本实施例的一种实现方式中，两者的区别可以在于，对于格栅容器中的目标组件，需要光标点击目标组件的拖拽句柄之后，才能对目标组件进行拖拽移动，这样，目标组件在格栅容器中需要移动操作时多选框需要点击在空白处，自由泳容器中的目标组件的拖拽则是点击在目标组件上。结合图9进行举例说明，在点击格栅容器中的目标组件或者作为目标组件的格栅容器之后，可以在目标组件右上角显示拖拽标记(即拖拽句柄)，只有拖拽该拖拽句柄，才可对目标组件进行拖拽移动操作。
本实施例介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为移动组件类型的具体实现方式。至此，本实施例结合具体的应用场景实现了目标编辑类型为移动组件类型的具体实现方式的过程。当然应该认为，上述场景仅仅为示例性场景，并不对本申请提供的方法构成限定。本申请提供的方法可延申的应用在其他相同原理的一种页面可视化编辑方法处理过程当中。
图2所示仅为本申请所述页面可视化编辑方法的基础实施例，在其基础上进行一定的优化和拓展，还能够得到所述方法的其他可选实施例。
接下来，将介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为调整组件大小类型的具体实现方式。本实施例在图1对应实施例的基础上，对进行进一步阐述(S201包括S601，S202包括S602-S603，S203包括S604)。在本实施例中，所述方法具体包括以下步骤：
S601：接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括调整组件大小类型以及目标组件。
需要说明的是，本实施例中的S601与图2对应实施例中的S201相似。因此，在本实施例中，不再对S601进行阐述，具体可以参见S201的介绍。其中，S201中的所述目标编辑类型为调整组件大小类型，该调整组件大小类型可以理解为编辑指令为用于指示对目标组件的大小进行调整。另外，在本实施例中所述编辑指令还可以包括目标组件对应的目标大小。目标组件对应的目标大小可以是用户输入的，目标大小可以理解为目标组件的长、宽。
S602：确定所述目标组件在所述目标页面中的目标编辑位置；
S603：若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器。
其中，目标组件在所述目标页面中的目标编辑位置可以为光标在目标页面中的位置或者光标拖动目标组件时在目标页面中的位置。
在本实施例中的一种实现方式中，若所述目标编辑位置位于所述目标页面的自由容器中，则可以将该自由容器作为所述目标组件对应的目标容器。也就是说，若目标编辑位置位于目标页面一自由容器对应的区域中，则可以将该自由容器作为该目标组件对应的目标容器。
在本实施例中的一种实现方式中，若所述目标编辑位置位于所述目标页面的一格栅容器中，则将该格栅容器作为所述目标组件对应的目标容器。也就是说，若目标编辑位置位于目标页面一格栅容器对应的区域中，则可以将该格栅容器作为该目标组件对应的目标容器。
S604：根据所述调整组件大小类型、所述目标容器的大小和容器类型、所述目标页面的大小以及所述目标组件对应的所述目标大小，在所述目标页面中将所述目标组件调整至所述目标大小。
在本实施例的一种实现方式中，由于自由容器中目标组件可以在任意位置，故若所述目标容器为自由容器，则可以在自由容器中任意调整目标组件的大小，即目标组件的目标大小需要和自由容器的大小匹配；或者，自由容器可以根据目标大小先进行调整，以便自由容器可以包括目标大小的目标组件，接着，在所述目标页面中将所述目标组件调整至所述目标大小。作为一种示例，如图10所示，在选中自由容器中的目标组件后，可以在目标组件的八个方向上提供对应的拖拽句柄，通过拖拽句柄即可完成改变大小操作，从而在所述目标页面中将所述目标组件调整至目标大小。
在本实施例的一种实现方式中，当目标容器为格栅容器时，因为栅格容器是行列布局，只有四个方向的大小可供改变，故在选中目标组件后，可以在目标组件的四个边缘方向上提供对应的拖拽句柄句柄，通过拖拽句柄即可完成改变大小操作，从而在所述目标页面中将所述目标组件调整至目标大小。若所述目标大小的改变方向与所述目标容器的的格栅布局方式相匹配，则可以基于所述目标容器中的组件的大小或位置，在所述目标容器中将所述目标组件的调整至所述目标大小。其中，目标大小的改变方向可以理解为目标组件的大小变化的趋势方向，例如是在宽度方向还是高度方向；目标大小的改变方向与所述目标容器的的格栅布局方式相匹配，可以理解为目标大小的改变方向与格栅布局方式的延伸方向是相同的，比如，所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为列布局；或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为行布局。
具体地，若所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为列布局；或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为行布局。可以先确定所述目标容器在改变方向上的剩余空间，例如，确定目标容器中还存在几个空白格栅。若所述剩余空间满足所述目标大小，则基于所述目标容器中的组件的位置，在所述目标容器中将所述目标组件的调整至所述目标大小；也就是说，目标组件的大小改变会影响同容器内的组件位置，所以，当需要改变目标组件的大小时，需要先确定有容器中哪些组件会被本次改变所影响，即确定需要调整位置的组件，接着，根据目标大小所需要的空间调整需要调整位置的组件的位置，以便给目标组件的目标大小的调整留出足够的调整空间。若所述剩余空间不满足所述目标大小，则调整所述目标容器中除所述目标组件以外的组件的大小，以及在所述目标容器中将所述目标组件的调整至所述目标大小；也就是说，目标组件的大小改变会影响同容器内的组件大小，所以，当需要改变目标组件的大小时，需要先确定有容器中哪些组件会被本次改变所影响，即确定需要调整大小的组件，接着，根据目标大小所需要的空间调整需要调整大小的组件的大小，以便给目标组件的目标大小的调整留出足够的调整空间。
若所述目标大小的改变方向与所述目标容器的的格栅布局方式不匹配，则根据所述目标大小，调整所述目标容器的大小；以及，在调整后的目标容器中将所述目标组件的调整至所述目标大小。所述目标大小的改变方向与所述目标容器的的格栅布局方式不匹配可以理解为目标大小的改变方向与格栅布局方式的延伸方向是不相同的，比如，所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为行布局，或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为列布局。
具体地，若所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为行布局；或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为列布局。可以先根据所述目标大小，调整所述目标容器在所述改变方向上的大小，得到调整后的目标容器，例如，目标大小的改变方向为高度方向时，可以将目标容器在高度方向上调整到能够满足目标大小的需求，目标大小的改变方向为宽度方向时，可以将目标容器在宽度方向上调整到能够满足目标大小的需求，这样，调整后的目标容器便给目标组件的目标大小的调整留出足够的调整空间。接着，可以在所述调整后的目标容器中将所述目标组件的调整至所述目标大小。
需要说明的是，在一实施例中，所述目标大小中的宽度小于或等于所述目标页面的宽度；若所述目标大小的高度大于所述目标页面的高度，在所述根据所述调整组件大小类型、所述目标容器的大小和容器类型、所述目标页面的大小以及所述目标组件对应的所述目标大小，在所述目标页面中将所述目标组件调整至所述目标大小之前，所述方法还包括：将所述目标页面的高度调整为所述所述目标页面的高度。这样，可以保证目标页面的高度能够满足目标组件的目标大小的需求。
本实施例介绍本申请所述页面可视化编辑方法的一个具体实施例，具体为目标编辑类型为调整组件大小类型的具体实现方式，该实现方式可以以最小的改变弧度，正确修改所有需要被改变的组件，以使得目标组件的大小满足目标大小。至此，本实施例结合具体的应用场景实现了目标编辑类型为调整组件大小类型的具体实现方式的过程。当然应该认为，上述场景仅仅为示例性场景，并不对本申请提供的方法构成限定。本申请提供的方法可延申的应用在其他相同原理的一种页面可视化编辑方法处理过程当中。
如图11所示，为本发明所述页面可视化编辑装置的一个具体实施例。本实施例所述装置，即用于执行上述实施例所述方法的实体装置。其技术方案本质上与上述实施例一致，上述实施例中的相应描述同样适用于本实施例中。本实施例中所述装置包括：
接收单元1101，用于接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件；
确定单元1102，用于根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；
编辑单元1103，用于根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。
可选的，所述目标编辑类型为创建组件类型；
确定单元1102，用于：
确定所述目标组件在所述目标页面中的目标编辑位置；
若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器；
相应地，所述编辑单元1103，用于：
根据所述创建组件类型，在所述目标容器中的所述目标编辑位置，创建所述目标组件，并显示所述目标组件。
可选的，所述确定单元1102，用于
若所述目标编辑位置位于所述目标页面的自由容器中，则将该自由容器作为所述目标组件对应的目标容器。
可选的，所述装置还包括，切换单元，用于：
响应于针对自由容器的第一预设操作，将所述目标页面的编辑状态切换至自由布局状态；
其中，所述自由布局状态为所述目标页面中的自由容器为可编辑状态，所述目标页面中除自由容器以外的类型的容器为不可编辑状态。
可选的，所述确定单元1102，用于：
若所述目标编辑位置位于所述目标页面的一格栅容器中，则将该格栅容器作为所述目标组件对应的目标容器；
相应地，所述编辑单元1103，用于：
根据所述创建组件类型、所述目标容器中的格栅布局方式以及所述目标组件对应的目标编辑位置，在所述目标容器中创建所述目标组件，并显示所述目标组件。
可选的，所述编辑单元1103，用于：
若所述目标编辑位置位于所述格栅容器中的一格栅容器内，则根据该格栅容器的格栅内容类型，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；
若所述目标编辑位置并未位于所述格栅容器中的任一格栅容器内，则根据所述格栅容器的格栅布局方式，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
可选的，格栅内容类型包括空白格栅和非空白格栅；所述编辑单元1103，用于：
若所述目标编辑位置位于所述格栅容器中的一格栅容器内，且该格栅容器为空白格栅容器，则将该格栅容器作为目标格栅，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；
若所述目标编辑位置位于所述格栅容器中的一格栅容器内，且该格栅容器为非空白格栅容器，则确定所述格栅容器内的目标格栅容器，以及，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；其中，所述目标格栅容器为所述格栅容器内与所述目标编辑位置的距离最小的空白格栅容器。
可选的，所述编辑单元1103，用于：
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件上侧，则将该组件所在的格栅容器确定为目标格栅容器，并在所述目标格栅容器的上侧创建所述目标组件，并显示所述目标组件；
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件下侧，则将该组件所在的格栅容器确定为目标格栅容器，并在所述目标格栅容器的下侧创建所述目标组件，并显示所述目标组件；
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件左侧，则删除该组件，并在该组件对应的格栅容器中创建一个列布局容器，将该组件放入所述列布局容器，以及将所述目标组件放入所述列布局容器中的该组件的左侧；
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件右侧，则删除该组件，并在组件对应的格栅容器中创建一个列布局容器，将该组件放入所述列布局容器，以及将所述目标组件放入所述列布局容器中的该组件的右侧；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件左侧，则将所述组件所在的格栅容器作为目标格栅容器，并计算所述格栅容器的剩余栅格数，如果剩余栅格数大于0，在所述目标格栅容器的左侧创建所述目标组件，以及把所述目标组件的栅格数设置为所述剩余栅格数；如果所述剩余栅格数为0，则按与所述目标格栅最接近的顺序缩减所述栅格容器的所有栅格数大于1的组件，直到所述剩余栅格数满足所述目标组件的格栅数要求条件，将所述目标组件创建在所述目标格栅容器的左侧，并显示所述目标组件；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件右侧，则将所述组件所在的格栅容器作为目标格栅，并计算所述格栅容器的剩余栅格数，如果剩余栅格数大于0，在所述目标格栅容器的右侧创建所述目标组件，以及把所述目标组件的栅格数设置为所述剩余栅格数；如果所述剩余栅格数为0，则按与所述目标格栅最接近的顺序缩减所述栅格容器的所有栅格数大于1的组件，直到所述剩余栅格数满足所述目标组件的格栅要求条件，将所述目标组件创建在所述目标格栅容器的右侧，并显示所述目标组件；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件上侧，则删除该组件，并在该组件对应的格栅容器中创建一个行布局容器，将该组件放入所述行布局容器，以及将所述目标组件放入所述行布局容器中的该组件的上侧；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件下侧，则删除该组件，并在该组件对应的格栅容器中创建一个行布局容器，将该组件放入所述行布局容器，以及将所述目标组件放入所述行布局容器中的该组件的下侧。
可选的，所述装置还包括，显示单元，用于：
在所述目标格栅容器对应的区域显示指示标识；
相应地，所述编辑单元1103，用于：
响应于针对所述目标格栅容器的确定指令，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
可选的，所述显示单元，还用于：
在所述目标格栅容器对应的区域显示指示标识；
相应地，所述在编辑单元1103，用于：
响应于针对所述目标格栅容器的确定指令，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
可选的，在所述若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器，之后，所述装置还包括切换单元，用于：
将所述目标容器的显示方式切换至预设显示方式；其中，所述预设显示方式包括以下至少一种：所述目标容器对应的区域显示第一预设颜色和/或图案、所述目标容器的边框显示预设第二预设颜色和/或边框花纹。
可选的，所述目标编辑类型为删除组件类型；
所述编辑单元1103，用于：
若所述目标组件为非空白容器，则根据所述删除组件类型，清空所述目标组件中的内容信息；
若所述目标组件为空白容器或者非容器类型的组件，则根据所述删除组件类型，删除所述目标组件。
可选的，所述目标编辑类型为移动组件类型；
所述确定单元1102，用于：
确定所述目标组件在所述目标页面中的目标编辑位置；
若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器；
相应地，所述编辑单元1103，用于：
根据所述目标编辑类型、所述目标容器的容器类型和所述目标组件移动后的位置，在所述目标页面中对所述目标组件进行移动。
可选的，所述编辑单元1103，用于：
若所述目标容器为自由容器，根据所述移动组件类型，将所述目标组件从所述目标编辑位置移动至所述目标容器中的所述目标组件移动后的位置，其中，所述目标容器中的所述目标组件移动后的位置是根据光标固定在所述目标组件上移动结束后所确定的位置；
若所述目标容器为格栅容器，根据所述移动组件类型，将所述目标组件从所述目标编辑位置移动至所述目标容器中的所述目标组件移动后的目标格栅容器，其中，所述目标容器中的所述目标组件移动后的目标格栅容器是根据光标固定在所述目标组件的拖拽标识上移动结束后的位置，在所述目标容器容器中所确定的格栅。
可选的，所述目标编辑类型为调整组件大小类型；所述编辑指令还包括目标组件对应的目标大小；
确定单元1102，用于确定所述目标组件在所述目标页面中的目标编辑位置；
若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器；
相应地，所述编辑单元1103，用于：
根据所述调整组件大小类型、所述目标容器的大小和容器类型、所述目标页面的大小以及所述目标组件对应的所述目标大小，在所述目标页面中将所述目标组件调整至所述目标大小。
可选的，所述目标大小中的宽度小于或等于所述目标页面的宽度；若所述目标大小的高度大于所述目标页面的高度，在所述根据所述调整组件大小类型、所述目标容器的大小和容器类型、所述目标页面的大小以及所述目标组件对应的所述目标大小在所述目标页面中将所述目标组件调整至所述目标大小之前所述装置还包括高度调整单元：
将所述目标页面的高度调整为所述所述目标页面的高度。
可选的，所述目标容器为格栅容器；
所述编辑单元1103，用于：
若所述目标大小的改变方向与所述目标容器的的格栅布局方式相匹配，则基于所述目标容器中的组件的大小或位置，在所述目标容器中将所述目标组件的调整至所述目标大小；
若所述目标大小的改变方向与所述目标容器的的格栅布局方式不匹配，则根据所述目标大小，调整所述目标容器的大小；以及，在调整后的目标容器中将所述目标组件的调整至所述目标大小。
可选的，所述编辑单元1103，用于：
若所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为列布局；或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为行布局；
确定所述目标容器在改变方向上的剩余空间；
若所述剩余空间满足所述目标大小，则基于所述目标容器中的组件的位置，在所述目标容器中将所述目标组件的调整至所述目标大小；
若所述剩余空间不满足所述目标大小，则调整所述目标容器中除所述目标组件以外的组件的大小，以及在所述目标容器中将所述目标组件的调整至所述目标大小。
可选的，所述编辑单元1103，用于：
若所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为行布局；或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为列布局；
根据所述目标大小，调整所述目标容器在所述改变方向上的大小，得到调整后的目标容器；
在所述调整后的目标容器中将所述目标组件的调整至所述目标大小。
图12是本发明实施例提供的一种电子设备的结构示意图。在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。
处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industr yStandard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图12中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。
存储器，用于存放执行指令。具体地，执行指令即可被执行的计算机程序。存储器可以包括内存和非易失性存储器，并向处理器提供执行指令和数据。
在一种可能实现的方式中，处理器从非易失性存储器中读取对应的执行指令到内存中然后运行，也可从其它设备上获取相应的执行指令，以在逻辑层面上形成页面可视化编辑装置。处理器执行存储器所存放的执行指令，以通过执行的执行指令实现本发明任一实施例中提供的页面可视化编辑方法。
上述如本发明图2所示实施例提供的页面可视化编辑装置执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。
本发明实施例还提出了一种可读介质，该可读存储介质存储有执行指令，存储的执行指令被电子设备的处理器执行时，能够使该电子设备执行本发明任一实施例中提供的页面可视化编辑方法，并具体用于执行上述页面可视化编辑所述的方法。
前述各个实施例中所述的电子设备可以为计算机。
本领域内的技术人员应明白，本发明的实施例可提供为方法或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例，或软件和硬件相结合的形式。
本发明中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上所述仅为本发明的实施例而已，并不用于限制本发明。对于本领域技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。

Claims (22)

1.一种页面可视化编辑方法，其特征在于，所述方法包括：
接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件；
根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；
根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。
2.根据权利要求1所述的方法，其特征在于，所述目标编辑类型为创建组件类型；
根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器，包括：
确定所述目标组件在所述目标页面中的目标编辑位置；
若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器；
相应地，所述根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑，包括：
根据所述创建组件类型，在所述目标容器中的所述目标编辑位置，创建所述目标组件，并显示所述目标组件。
3.根据权利要求2所述的方法，其特征在于，所述若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器，包括：
若所述目标编辑位置位于所述目标页面的自由容器中，则将该自由容器作为所述目标组件对应的目标容器。
4.根据权利要求3所述的方法，其特征在于，在所述根据所述目标组件在所述目标页面中对应的编辑位置，确定所述目标组件对应的目标容器之前，所述方法还包括：
响应于针对自由容器的第一预设操作，将所述目标页面的编辑状态切换至自由布局状态；
其中，所述自由布局状态为所述目标页面中的自由容器为可编辑状态，所述目标页面中除自由容器以外的类型的容器为不可编辑状态。
5.根据权利要求2所述的方法，其特征在于，所述若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器，包括：
若所述目标编辑位置位于所述目标页面的一格栅容器中，则将该格栅容器作为所述目标组件对应的目标容器；
相应地，所述根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑，包括：
根据所述创建组件类型、所述目标容器中的格栅布局方式以及所述目标组件对应的目标编辑位置，在所述目标容器中创建所述目标组件，并显示所述目标组件。
6.根据权利要求5所述的方法，其特征在于，所述根据所述创建组件类型、所述目标容器中的格栅布局方式以及所述目标组件对应的目标编辑位置，在所述目标容器中创建所述目标组件，并显示所述目标组件，包括：
若所述目标编辑位置位于所述格栅容器中的一格栅容器内，则根据该格栅容器的格栅内容类型，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；
若所述目标编辑位置并未位于所述格栅容器中的任一格栅容器内，则根据所述格栅容器的格栅布局方式，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
7.根据权利要求6所述的方法，其特征在于，格栅内容类型包括空白格栅和非空白格栅；所述若所述目标编辑位置位于所述格栅容器中的一格栅容器内，则根据该格栅容器的格栅内容类型，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件，包括：
若所述目标编辑位置位于所述格栅容器中的一格栅容器内，且该格栅容器为空白格栅容器，则将该格栅容器作为目标格栅，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；
若所述目标编辑位置位于所述格栅容器中的一格栅容器内，且该格栅容器为非空白格栅容器，则确定所述格栅容器内的目标格栅容器，以及，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件；其中，所述目标格栅容器为所述格栅容器内与所述目标编辑位置的距离最小的空白格栅容器。
8.根据权利要求6所述的方法，其特征在于，所述若所述目标编辑位置并未位于所述格栅容器中的任一格栅容器内，则根据所述格栅容器的格栅布局方式，确定目标格栅容器，以及在所述目标格栅容器中创建所述目标组件，并显示所述目标组件，包括：
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件上侧，则将该组件所在的格栅容器确定为目标格栅容器，并在所述目标格栅容器的上侧创建所述目标组件，并显示所述目标组件；
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件下侧，则将该组件所在的格栅容器确定为目标格栅容器，并在所述目标格栅容器的下侧创建所述目标组件，并显示所述目标组件；
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件左侧，则删除该组件，并在该组件对应的格栅容器中创建一个列布局容器，将该组件放入所述列布局容器，以及将所述目标组件放入所述列布局容器中的该组件的左侧；
若所述格栅容器的格栅布局方式为行布局，且所述目标编辑位置位于所述格栅容器中的一组件右侧，则删除该组件，并在组件对应的格栅容器中创建一个列布局容器，将该组件放入所述列布局容器，以及将所述目标组件放入所述列布局容器中的该组件的右侧；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件左侧，则将所述组件所在的格栅容器作为目标格栅容器，并计算所述格栅容器的剩余栅格数，如果剩余栅格数大于0，在所述目标格栅容器的左侧创建所述目标组件，以及把所述目标组件的栅格数设置为所述剩余栅格数；如果所述剩余栅格数为0，则按与所述目标格栅最接近的顺序缩减所述栅格容器的所有栅格数大于1的组件，直到所述剩余栅格数满足所述目标组件的格栅数要求条件，将所述目标组件创建在所述目标格栅容器的左侧，并显示所述目标组件；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件右侧，则将所述组件所在的格栅容器作为目标格栅，并计算所述格栅容器的剩余栅格数，如果剩余栅格数大于0，在所述目标格栅容器的右侧创建所述目标组件，以及把所述目标组件的栅格数设置为所述剩余栅格数；如果所述剩余栅格数为0，则按与所述目标格栅最接近的顺序缩减所述栅格容器的所有栅格数大于1的组件，直到所述剩余栅格数满足所述目标组件的格栅要求条件，将所述目标组件创建在所述目标格栅容器的右侧，并显示所述目标组件；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件上侧，则删除该组件，并在该组件对应的格栅容器中创建一个行布局容器，将该组件放入所述行布局容器，以及将所述目标组件放入所述行布局容器中的该组件的上侧；
若所述格栅容器的格栅布局方式为列布局，且所述目标编辑位置位于所述格栅容器中的一组件下侧，则删除该组件，并在该组件对应的格栅容器中创建一个行布局容器，将该组件放入所述行布局容器，以及将所述目标组件放入所述行布局容器中的该组件的下侧。
9.根据权利要求6所述的方法，其特征在于，在所述若所述目标编辑位置位于所述格栅容器中的一格栅容器内，则根据该格栅容器的格栅内容类型，确定目标格栅容器之后，所述方法还包括：
在所述目标格栅容器对应的区域显示指示标识；
相应地，所述在所述目标格栅容器中创建所述目标组件，并显示所述目标组件，包括：
响应于针对所述目标格栅容器的确定指令，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
10.根据权利要求6所述的方法，其特征在于，在所述若所述目标编辑位置并未位于所述格栅容器中的任一格栅容器内，则根据所述格栅容器的格栅布局方式，确定目标格栅容器之后，所述方法还包括：
在所述目标格栅容器对应的区域显示指示标识；
相应地，所述在所述目标格栅容器中创建所述目标组件，并显示所述目标组件，包括：
响应于针对所述目标格栅容器的确定指令，在所述目标格栅容器中创建所述目标组件，并显示所述目标组件。
11.根据所述权利要求2-10中任一项所述的方法，其特征在于，在所述若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器，之后，所述方法还包括：
将所述目标容器的显示方式切换至预设显示方式；其中，所述预设显示方式包括以下至少一种：所述目标容器对应的区域显示第一预设颜色和/或图案、所述目标容器的边框显示预设第二预设颜色和/或边框花纹。
12.根据权利要求1所述的方法，其特征在于，所述目标编辑类型为删除组件类型；
所述根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑，包括：
若所述目标组件为非空白容器，则根据所述删除组件类型，清空所述目标组件中的内容信息；
若所述目标组件为空白容器或者非容器类型的组件，则根据所述删除组件类型，删除所述目标组件。
13.根据权利要求1所述的方法，其特征在于，所述目标编辑类型为移动组件类型；
根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器，包括：
确定所述目标组件在所述目标页面中的目标编辑位置；
若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器；
相应地，所述根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑，包括：
根据所述目标编辑类型、所述目标容器的容器类型和所述目标组件移动后的位置，在所述目标页面中对所述目标组件进行移动。
14.根据权利要求13所述的方法，其特征在于，所述根据所述目标编辑类型、所述目标容器的容器类型和所述目标组件移动后的位置，在所述目标页面中对所述目标组件进行移动，包括：
若所述目标容器为自由容器，根据所述移动组件类型，将所述目标组件从所述目标编辑位置移动至所述目标容器中的所述目标组件移动后的位置，其中，所述目标容器中的所述目标组件移动后的位置是根据光标固定在所述目标组件上移动结束后所确定的位置；
若所述目标容器为格栅容器，根据所述移动组件类型，将所述目标组件从所述目标编辑位置移动至所述目标容器中的所述目标组件移动后的目标格栅容器，其中，所述目标容器中的所述目标组件移动后的目标格栅容器是根据光标固定在所述目标组件的拖拽标识上移动结束后的位置，在所述目标容器中所确定的格栅容器。
15.根据权利要求1所述的方法，其特征在于，所述目标编辑类型为调整组件大小类型；所述编辑指令还包括目标组件对应的目标大小；
根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器，包括：
确定所述目标组件在所述目标页面中的目标编辑位置；
若所述目标编辑位置位于所述目标页面的一容器中，则将该容器作为所述目标组件对应的目标容器；
相应地，所述根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑，包括：
根据所述调整组件大小类型、所述目标容器的大小和容器类型、所述目标页面的大小以及所述目标组件对应的所述目标大小，在所述目标页面中将所述目标组件调整至所述目标大小。
16.根据权利要求15所述的方法，其特征在于，所述目标大小中的宽度小于或等于所述目标页面的宽度；若所述目标大小的高度大于所述目标页面的高度，在所述根据所述调整组件大小类型、所述目标容器的大小和容器类型、所述目标页面的大小以及所述目标组件对应的所述目标大小，在所述目标页面中将所述目标组件调整至所述目标大小之前，所述方法还包括：
将所述目标页面的高度调整为所述所述目标页面的高度。
17.根据权利要求15或16所述的方法，其特征在于，所述目标容器为格栅容器；
所述根据所述调整组件大小类型、所述目标容器的大小和容器类型、所述目标页面的大小以及所述目标组件对应的所述目标大小，在所述目标页面中将所述目标组件调整至所述目标大小，包括：
若所述目标大小的改变方向与所述目标容器的的格栅布局方式相匹配，则基于所述目标容器中的组件的大小或位置，在所述目标容器中将所述目标组件的调整至所述目标大小；
若所述目标大小的改变方向与所述目标容器的的格栅布局方式不匹配，则根据所述目标大小，调整所述目标容器的大小；以及，在调整后的目标容器中将所述目标组件的调整至所述目标大小。
18.根据权利要求17所述的方法，其特征在于，所述若所述目标大小的改变方向与所述目标容器的的格栅布局方式相匹配，则基于所述目标容器中的组件的大小或位置，在所述目标容器中将所述目标组件的调整至所述目标大小，包括：
若所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为列布局；或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为行布局；
确定所述目标容器在改变方向上的剩余空间；
若所述剩余空间满足所述目标大小，则基于所述目标容器中的组件的位置，在所述目标容器中将所述目标组件的调整至所述目标大小；
若所述剩余空间不满足所述目标大小，则调整所述目标容器中除所述目标组件以外的组件的大小，以及在所述目标容器中将所述目标组件的调整至所述目标大小。
19.根据权利要求17所述的方法，其特征在于，所述若所述目标大小的改变方向与所述目标容器的的格栅布局方式不匹配，则根据所述目标大小，调整所述目标容器的大小；以及，在调整后的目标容器中将所述目标组件的调整至所述目标大小，包括：
若所述目标大小的改变方向为高度方向，且所述目标容器的的格栅布局方式为行布局；或者，所述目标大小的改变方向为宽度方向，且所述目标容器的的格栅布局方式为列布局；
根据所述目标大小，调整所述目标容器在所述改变方向上的大小，得到调整后的目标容器；
在所述调整后的目标容器中将所述目标组件的调整至所述目标大小。
20.一种页面可视化编辑装置，其特征在于，所述装置包括：
接收单元，用于接收针对目标页面的编辑指令；其中，所述目标页面包括若干类型容器，所述编辑指令包括目标编辑类型以及目标组件；
确定单元，用于根据所述目标组件在所述目标页面中对应的目标编辑位置，确定所述目标组件对应的目标容器；
编辑单元，用于根据所述目标编辑类型、所述目标容器和所述目标组件，在所述目标页面中对所述目标组件进行编辑。
21.一种电子设备，其特征在于，包括处理器以及存储有执行指令的存储器，当所述处理器执行所述存储器存储的所述执行指令时，所述处理器执行如权利要求1-19中任一所述的方法。
22.一种可读介质，包括执行指令，当电子设备的处理器执行所述执行指令时，所述电子设备执行如权利要求1-19中任一所述的方法。
CN202010919115.6A 2020-09-04 2020-09-04 一种页面可视化编辑方法、装置及设备 Active CN112000328B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010919115.6A CN112000328B (zh) 2020-09-04 2020-09-04 一种页面可视化编辑方法、装置及设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010919115.6A CN112000328B (zh) 2020-09-04 2020-09-04 一种页面可视化编辑方法、装置及设备

Publications (2)

Publication Number Publication Date
CN112000328A true CN112000328A (zh) 2020-11-27
CN112000328B CN112000328B (zh) 2023-12-01

Family

ID=73468287

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010919115.6A Active CN112000328B (zh) 2020-09-04 2020-09-04 一种页面可视化编辑方法、装置及设备

Country Status (1)

Country Link
CN (1) CN112000328B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114115681A (zh) * 2021-12-02 2022-03-01 北京百度网讯科技有限公司 页面生成方法及装置、电子设备和介质

Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050172261A1 (en) * 2004-01-30 2005-08-04 Yuknewicz Paul J. Architecture for creating a user interface using a data schema
CN101207450A (zh) * 2007-12-14 2008-06-25 北大方正集团有限公司 一种专题模板制作方法、系统及客户端和网络侧服务器
CN102221993A (zh) * 2010-04-16 2011-10-19 微软公司 复杂用户界面状态变更的声明性定义
US20150074516A1 (en) * 2013-09-12 2015-03-12 Wixpress Ltd. System and method for automated conversion of interactive sites and applications to support mobile and other display environments
US20170132814A1 (en) * 2015-11-10 2017-05-11 Adobe Systems Incorporated Interactive Scene Graph Manipulation For Visualization Authoring
CN106843904A (zh) * 2017-02-20 2017-06-13 深圳市医诺智能科技发展有限公司 界面动态布局方法及其系统
US20180060292A1 (en) * 2016-08-25 2018-03-01 Oracle International Corporation Data grid components
CN108052322A (zh) * 2017-12-29 2018-05-18 陈菡 一种基于可视化布局系统的拖拽方法
CA3063609A1 (en) * 2017-06-08 2018-12-13 Wix.Com Ltd. System and method for smart interaction between website components
CN110442336A (zh) * 2019-08-05 2019-11-12 上海钧正网络科技有限公司 一种网页开发方法及装置、存储介质及电子设备
CN110515609A (zh) * 2018-05-22 2019-11-29 阿里巴巴集团控股有限公司 应用生成方法、装置、设备以及存储介质
CN111209034A (zh) * 2020-01-13 2020-05-29 成都卓影科技股份有限公司 Tv大屏可视化动态页面配置的方法

Patent Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050172261A1 (en) * 2004-01-30 2005-08-04 Yuknewicz Paul J. Architecture for creating a user interface using a data schema
CN101207450A (zh) * 2007-12-14 2008-06-25 北大方正集团有限公司 一种专题模板制作方法、系统及客户端和网络侧服务器
CN102221993A (zh) * 2010-04-16 2011-10-19 微软公司 复杂用户界面状态变更的声明性定义
US20150074516A1 (en) * 2013-09-12 2015-03-12 Wixpress Ltd. System and method for automated conversion of interactive sites and applications to support mobile and other display environments
US20170132814A1 (en) * 2015-11-10 2017-05-11 Adobe Systems Incorporated Interactive Scene Graph Manipulation For Visualization Authoring
US20180060292A1 (en) * 2016-08-25 2018-03-01 Oracle International Corporation Data grid components
CN106843904A (zh) * 2017-02-20 2017-06-13 深圳市医诺智能科技发展有限公司 界面动态布局方法及其系统
CA3063609A1 (en) * 2017-06-08 2018-12-13 Wix.Com Ltd. System and method for smart interaction between website components
CN108052322A (zh) * 2017-12-29 2018-05-18 陈菡 一种基于可视化布局系统的拖拽方法
CN110515609A (zh) * 2018-05-22 2019-11-29 阿里巴巴集团控股有限公司 应用生成方法、装置、设备以及存储介质
CN110442336A (zh) * 2019-08-05 2019-11-12 上海钧正网络科技有限公司 一种网页开发方法及装置、存储介质及电子设备
CN111209034A (zh) * 2020-01-13 2020-05-29 成都卓影科技股份有限公司 Tv大屏可视化动态页面配置的方法

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
TO ZERO-: "vue中实现拖拽功能/可定制桌面", pages 1 - 13, Retrieved from the Internet <URL:https://blog.csdn.net/LEVsunshine/article/details/103930083> *
ZHICHENG LIU等: "Data Illustrator: Augmenting Vector Design Tools with Lazy Data Binding for Expressive Visualization Authoring", 《PROCEEDINGS OF THE 2018 CHI CONFERENCE ON HUMAN FACTORS IN COMPUTING SYSTEMS》, pages 1 - 13 *
宋奕爽: "WEB端可视化表单生成引擎的设计与实现", 《中国优秀硕士学位论文全文数据库（信息科技辑）》, no. 11, pages 139 - 128 *
董贯慧等: "基于页面流可视化图形工具的研究与实现", 《电脑知识与技术》, no. 2, pages 66 - 67 *
高飞: "快速动态网页构建工具的设计与实现", 《中国优秀硕士学位论文全文数据库（信息科技辑）》, no. 10, pages 139 - 138 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114115681A (zh) * 2021-12-02 2022-03-01 北京百度网讯科技有限公司 页面生成方法及装置、电子设备和介质

Also Published As

Publication number Publication date
CN112000328B (zh) 2023-12-01

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
US11048484B2 (en) Automated responsive grid-based layout design system
EP3220249B1 (en) Method, device and terminal for implementing regional screen capture
KR101811464B1 (ko) 옵션들을 선택하기 위한 스핀 컨트롤 사용자 인터페이스
JP2020173841A (ja) ダイアログカスタマイズのためのシステムおよび方法
US20230036518A1 (en) System and method for smart interaction between website components
CN109408764B (zh) 页面区域划分方法、装置、计算设备和介质
CN106296622B (zh) 一种自动布局的拼图方法及装置
US20080244424A1 (en) Source code generating device
EP3218801B1 (en) Rapid application development method
US11710264B2 (en) Multi-graph display method and computer-readable storage medium
JP7203767B2 (ja) ウェブサイトコンポーネント相互間におけるスマートインタラクションのためのシステム及び方法
CN113420355B (zh) 楼层处理方法、装置及电子设备
KR102543722B1 (ko) 디자인 킷을 이용한 업무 협업을 위한 방법, 시스템, 및 비-일시적인 컴퓨터 판독가능한 기록 매체
WO2021098200A1 (zh) 一种超声报告的显示方法、装置、超声设备及存储介质
CN113010162A (zh) 一种页面构建方法、装置及设备
CN114579912A (zh) 页面布局方法、装置、设备及介质
CN112000328B (zh) 一种页面可视化编辑方法、装置及设备
CN115562665A (zh) 页面访问方法、装置、计算机设备及可读存储介质
CN111813408A (zh) 视图显示处理方法、装置、终端设备及存储介质
CN114327208B (zh) 一种图例展示方法、装置、存储介质及终端
CN117950661A (zh) 一种ui生成方法及装置
CN117707510A (zh) 可视化页面配置方法、装置、计算机设备及存储介质
CN114913267A (zh) 脑图绘制方法、装置、设备和存储介质
CN115543520A (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
GR01 Patent grant
GR01 Patent grant