CN113849175A

CN113849175A - 一种代码生成方法、装置、设备及存储介质

Info

Publication number: CN113849175A
Application number: CN202111082197.4A
Authority: CN
Inventors: 左元; 闫海波; 马甜甜
Original assignee: Shanghai Pudong Development Bank Co Ltd
Current assignee: Shanghai Pudong Development Bank Co Ltd
Priority date: 2021-09-15
Filing date: 2021-09-15
Publication date: 2021-12-28

Abstract

本申请实施例公开了一种代码生成方法、装置、设备及存储介质。其中，该方法包括：获取用户对布局界面的容器处理操作；根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码；其中，所述页面布局文件在运行时展示所述设计区域中所显示的页面布局。本申请实施例减小了页面布局的开发学习成本，降低了开发人员的技术门槛，提高了页面布局的开发效率。

Description

一种代码生成方法、装置、设备及存储介质

技术领域

本申请实施例涉及计算机技术领域，尤其涉及一种代码生成方法、装置、设备及存储介质。

背景技术

网页布局是一个前端页面的骨架，其很大程度上决定了网页最终的呈现方式。随着前端技术不断发展的同时，网页的布局方式也在不断更新，新的布局方式能够为个人或企业带来便利，设计出更加理想的前端页面布局。

随着新的布局方式更新的同时，也增加了开发人员的学习成本，设计出一个优秀的前端页面布局，需要有专业的页面设计知识储备，提高了开发人员的技术门槛，从而降低了页面布局的开发效率。

发明内容

本申请提供一种代码生成方法、装置、设备及存储介质，以降低开发人员的技术门槛，减小页面布局的开发学习成本，同时提高页面布局的开发效率。

第一方面，本申请实施例提供了一种代码生成方法，该方法包括：

获取用户对布局界面的容器处理操作；

根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码；

其中，所述页面布局文件在运行时展示所述设计区域中所显示的页面布局。

第二方面，本申请实施例还提供了一种代码生成装置，该装置包括：

操作获取模块，用于获取用户对布局界面的容器处理操作；

页面布局显示模块，用于根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码；

第三方面，本申请实施例还提供了一种代码生成设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如本申请第一方面实施例中任一所述的代码生成方法。

第四方面，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如本申请第一方面实施例中任一所述的代码生成方法。

本申请实施例通过获取用户对布局界面的容器处理操作；根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码。上述方案实现了开发人员能够根据可视化界面完成页面的布局，并且自动化生成与页面布局相关联的布局代码，降低了开发人员的技术门槛，减小了开发人员的学习成本；无需人为进行代码编写，即可实现对网页布局的开发，提高了页面布局的开发效率。

附图说明

图1是本申请实施例一中的一种代码生成方法的流程示意图；

图2A是本申请实施例二中的一种代码生成方法的流程示意图；

图2B是本申请实施例二中的父容器基础配置页面示意图；

图2C是本申请实施例二中的容器显示属性设置页面示意图；

图2D是本申请实施例二中的一种代码生成方法的页面布局示意图；

图3A是本申请实施例三中的一种代码生成方法的流程示意图；

图3B是本申请实施例三中的子容器基础配置页面示意图；

图4A是本申请实施例四中的一种代码生成方法的流程示意图；

图4B是本申请实施例四中的一种代码生成方法的容器节点示意图；

图4C是本申请实施例四中的一种代码生成方法的容器节点示意图；

图4D是本申请实施例四中的一种代码生成方法的容器节点示意图；

图5是本申请实施例五中的一种代码生成装置的结构框图；

图6是本申请实施例六中的一种代码生成设备的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部结构。

实施例一

图1为本申请实施例一提供的一种代码生成方法的流程示意图，本实施例可适用于对前端页面布局进行设计的情况，该方法可以由代码生成装置来执行，该装置可采用软件和/或硬件的方式实现。如图1所示，该方法具体包括如下步骤：

S110、获取用户对布局界面的容器处理操作。

其中，布局界面可以是能够进行容器处理操作和显示页面布局的界面。布局界面可以包括操作区域和设计区域。操作区域可以用于供用户进行容器处理操作；设计区域可以用于根据用户在操作区域进行的容器处理操作，显示与容器处理操作结果相对应的页面布局。其中，操作区域可以与设计区域存在部分交叉或完全独立设置，本申请对此不作任何限定。

容器处理操作包括父容器创建操作、父容器基础配置操作、容器显示属性设置操作和子容器基础配置操作中的至少一种。容器显示属性设置操作包括父容器显示属性设置操作和子容器显示属性设置操作。

具体的，用户在布局界面的操作区域中所进行的容器处理操作不同，对应在设计区域中显示的页面布局结果不同。

S120、根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码。

页面布局文件在运行时展示设计区域中所显示的页面布局，其中，页面布局文件的文件类型可以是JSON文件类型。布局代码可以是根据用户在布局界面进行的容器处理操作，生成的与设计区域中显示的页面布局相对应的代码。

根据用户在布局界面的操作区域中的容器处理操作，在布局界面的设计区域中显示页面布局；关联更新布局界面对应的页面布局文件中的布局代码。其中，关联更新的方式可以由相关技术人员进行提前设定。

示例性的，可以根据用户在布局界面的容器处理操作执行步骤，对布局界面对应的页面布局文件中的布局代码进行关联更新。具体的，用户在布局界面的操作区域中，每执行一次容器处理操作，布局界面对应的页面布局文件中的布局代码自动进行更新操作。

示例性的，还可以在布局界面的操作区域中添加操作提交控件，其中，操作提交控件的控件类型可以是按钮或图标等。用户在布局界面的操作区域中执行容器处理操作，容器处理操作确定后，若用户点击操作提交控件，则布局界面对应的页面布局文件中的布局代码进行更新；若用户未点击操作提交控件，则布局界面对应的页面布局文件中的布局代码不进行更新。

需要说明的是，用户在布局界面的操作区域执行容器处理操作后，在设计区域中显示的页面布局，可能并非用户所期望的结果。还可以通过撤销操作直接复原操作前的页面布局结果。也即，用户在该场景下，可以通过撤销上一步执行的容器处理操作，返回到最新容器处理操作之前的页面布局结果。

在一个可选实施例中，根据容器处理操作对应的已更新代码所属分区、以及已更新代码所属分区的更新前代码和更新后代码，更新近期更新列表；响应于用户的撤销操作，从近期更新列表中确定待撤销分区、以及待撤销分区的更新前代码和更新后代码；在设计区域中，根据待撤销分区的更新前代码更新页面布局，并将页面布局文件中待撤销分区的更新后代码替换为待撤销分区的更新前代码。

根据容器处理操作中的操作内容不同，页面布局文件可以对应划分至少一个布局代码的分区，以供页面布局文件的布局代码，能够根据用户执行的不同容器处理操作，更新对应分区的布局代码。以页面布局文件的文件类型为JSON文件为例，可以通过<div>标签，表征不同容器处理操作的分区。

其中，近期更新列表中可以包括预设周期内，用户在布局界面的操作区域中，执行的全部容器处理操作。预设周期可以是预设时间周期和/或预设数量周期，预设时间周期和预设次数周期可以由相关技术人员进行提前设定，例如，预设时间周期可以是10分钟；预设次数周期可以是10次。

在预设周期内，若监测到用户在布局界面的操作区域中，执行了容器处理操作，则根据用户执行的容器处理操作，更新代码所属分区，并实时将已更新代码所属分区对应的更新前代码和更新后代码，保存在近期更新列表中。

以预设周期为预设时间周期为例，进行举例说明。例如，预设时间周期为10分钟，则获取10分钟内用户执行的容器处理操作，并实时将10分钟内用户执行的容器处理操作对应的更新前代码和更新后代码，保存在近期更新列表中。近期更新列表随着时间的推移，列表中的代码更新记录不断变化，但始终保持近10分钟的代码更新记录，以供用户能够根据近期更新列表，从至少一个代码更新记录中选择相应的代码完成撤销操作。

以预设周期为预设次数周期为例，进行举例说明。例如，预设次数周期为10次。获取用户执行的容器处理操作，并实时的将用户执行的近10次容器处理操作对应的更新前代码和更新后代码，保存在近期更新列表中。近期更新列表随着代码更新次数的推移，列表中的代码更新记录不断变化，但始终保持近10次的代码更新记录，以供用户能够根据近期更新列表，从至少一个代码更新记录中选择相应的代码完成撤销操作。

通过不断覆盖预设周期之外的更新记录，实现在更新列表中，仅对预设周期内代码更新记录的保留，从而减小页面布局文件的大小，进而减少内存空间的占用。

若用户执行撤销操作，则确定用户在近期更新列表中的待撤销的容器处理操作，并确定该操作对应的待撤销分区、以及待撤销分区的更新前代码和更新后代码。根据待撤销分区的更新前代码，更新布局界面的设计区域中的页面布局，并采用更新前代码，替换页面布局文件中的待撤销分区中更新后的代码，从而实现用户在布局界面的撤销操作。

本可选实施例通过响应于用户的撤销操作，从近期更新列表中确定待撤销分区、以及待撤销分区的更新前代码和更新后代码；在设计区域中，根据待撤销分区的更新前代码更新页面布局，并将页面布局文件中待撤销分区的更新后代码替换为待撤销分区的更新前代码。上述方案实现了用户能够在预设周期内，根据自身需求，撤销相应的容器处理操作；同时，为用户提供了便利性，避免了用户在执行容器处理操作过程中的误操作，导致的显示页面布局与期望的不符，而无法退回操作步骤的情况。

实施例二

图2A为本申请实施例二提供的一种代码生成方法的流程图，本实施例在上述各技术方案的基础上，进行了优化改进。

进一步的，将“容器处理操作”具体细化为对父容器的“父容器处理操作”，以完善对父容器的处理操作与页面布局。

如图2A所示，该方法包括以下具体步骤：

S210、获取用户对布局界面的父容器处理操作。

S220、根据父容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码。

其中，父容器处理操作可以包括父容器创建操作、父容器基础配置操作和容器显示属性设置操作等中的至少一种。布局界面中还可以包括可进行拖拽的容器控件，例如可以包括父容器控件和子容器控件等。

在一个可选实施例中，若容器处理操作包括父容器创建操作，则根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码，包括：根据父容器创建操作，确定父容器生成区域；在设计区域的父容器生成区域，添加目标父容器对应网格；以及，在页面布局文件中父容器生成区域对应分区内，添加目标父容器的容器创建代码。

其中，父容器创建方式可以包括至少一种，例如可以是直接在布局界面的设计区域中点击(例如左击或右击)，选择创建父容器，并在设计区域进行父容器的布局显示；还可以是在布局界面的操作区域中，将父容器控件直接拖拽至设计区域中，并在设计区域中进行父容器的布局显示。

其中，父容器生成区域可以是在任一父容器中所包含的任一子容器的基础上所生成的区域；具体的，若一父容器B1中包含子容器B11和子容器B12，则父容器生成区域可以是在子容器B11或子容器B12的基础上所生成的区域。若设计区域中不存在已生成的子容器，则父容器生成区域还可以是设计区域。

用户可以选择任一父容器创建方式，完成对父容器的创建，并确定父容器生成区域。在设计区域的父容器生成区域，添加目标父容器对应网格；具体可以是根据不同父容器生成区域，确定不同父容器生成区域对应的目标父容器，以及添加不同目标父容器对应网格。

示例性的，若父容器生成区域为设计区域，则用户根据父容器创建方式，在设计区域中添加目标父容器对应网格；其中，目标父容器可以是用户在设计区域中所显示的父容器，目标父容器对应网格可以是当前设计区域中所显示的网格。

示例性的，若父容器生成区域为任一子容器所对应的区域，则用户根据对应的子容器，以及父容器的创建方式，在对应的子容器的基础上添加目标父容器对应网格。例如，若父容器B2中包含子容器B21和子容器B22，则用户可以选择在子容器B21或子容器B22的基础上添加目标父容器对应网格。

在页面布局文件中父容器生成区域对应分区内，添加目标父容器的容器创建代码，其中，父容器生成区域在页面布局文件中可以对应至少一个分区。以页面布局文件为JSON文件为例，父容器生成区域对应分区可以通过至少一对<div></div>标签加以表示。当在设计区域的父容器生成区域中，添加目标父容器对应网格时，可以在页面布局文件中父容器生成区域对应分区内，添加目标父容器的容器创建代码，例如，在JSON文件中父容器生成分区对应分区<div>…</div>内，添加目标父容器的容器创建代码。

本可选实施例通过父容器创建操作，实现了对父容器生成区域的确定；通过在设计区域的父容器生成区域，添加目标父容器对应网格，实现了用户能够在设计区域中直观的看到自身创建的父容器生成区域；通过在页面布局文件中父容器生成区域对应分区内，添加目标父容器的容器创建代码，实现了对目标父容器创建代码的自动化确定，无需用户进行容器创建代码的手动编写，提高了开发人员工作效率。

在一可选实施例中，若容器处理操作包括父容器基础配置操作，则根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码，包括：响应于对目标父容器的父容器基础配置操作，展示父容器基础配置页面；获取用户在父容器基础配置页面中对可配置项输入的容器划分参数；在设计区域中，根据容器划分参数在目标父容器对应网格内，添加至少一个子容器对应网格；以及，在页面布局文件中目标父容器对应分区内，根据容器划分参数，更新将目标父容器拆分成至少一个子容器的容器拆分代码。

其中，目标父容器可以是用户当前想要进行操作的父容器。可选的，父容器基础配置操作的实现方式可以是：选中设计区域中的目标父容器对应网格，或选中目标父容器对应的父容器标识，在操作区域中的父容器配置页面，对选中的目标父容器进行父容器配置操作。或者可选的，父容器基础配置操作的实现方式还可以是：在设计区域中右击目标父容器对应网格，或右击目标父容器的父容器标识，在设计区域中右击弹出的父容器基础配置页面中进行父容器配置操作。例如，父容器标识可以是由至少一种字符组成的有序的字符串，其中，字符可以是字母、数字、文字或符号等。。

父容器基础配置页面如图2B所示，其中，父容器基础配置页面中可以包括父容器模板选择控件、父容器列比例输入控件、父容器行高比输入控件、父容器高度输入控件和父容器宽度输入控件等中的至少一种。相应的，可配置项包括父容器模板选择、父容器列比例、父容器行高比、父容器高度和父容器宽度等中的至少一种。容器划分参数可以包括父容器模板选择参数、父容器列比例参数、父容器行比例参数、父容器高度参数和父容器宽度参数等中的至少一种。

父容器模板选择控件中可以包括，由相关技术人员提前预设的不同列比例或行比例的父容器模板；用户可以根据实际需求，在父容器模板选择控件中，对不同比例的父容器进行选择。父容器的默认列比例与行比例可以由相关技术人员进行提前设定。例如，可以将父容器的默认列比例设置为12等份，父容器的默认行比例设置为1:8。用户可以根据实际需求，通过父容器列比例输入控件与父容器行比例输入控件，自定义父容器的列比例和行比例，以实现对父容器的划分。还可以通过父容器配置页面中，父容器高度输入控件和父容器宽度输入控件，对划分前或划分后的各容器进行高度和宽度的设置。

示例性的，用户在父容器列比例输入控件中输入的列比例，与在父容器行比例输入控件中输入的列比例，可以采用预设符号的形式进行分隔，例如，预设符号可以是逗号。例如，用户在父容器列比例输入控件输入的列比例可以是“9,3”，代表将目标父容器按9:3的比例进行划分，划分为两个目标子容器，且两个目标子容器的列比例为9:3。若用户输入的列比例为“2,3,4,3”，则代表目标容器按2:3:4:3的比例进行划分，划分为四个目标子容器，且四个目标子容器的列比例为2:3:4:3。

示例性的，若用户在父容器基础配置页面的父容器列比例输入控件中，输入的列比例超过默认列比例，则可以根据用户输入的列比例，对目标子容器进行分行显示。例如，默认列比例为12等份，用户输入的列比例为“9,5”，则可以在目标父容器的第一行显示9等份的目标子容器的划分区域，第二行显示5等份的目标子容器的划分区域。

示例性的，若用户在父容器基础配置页面的父容器列比例输入控件中，输入的列比例小于默认列比例，则可以按照用户实际输入的列比例，对目标容器进行划分，而划分后的空白区域不进行任何容器的显示。例如，默认列比例为12等份，用户输入的列比例为“9,1”，则可以在目标父容器中划分两个目标子容器，且两个目标子容器的列比例为9:1，而划分后的空白区域占据目标父容器列比例中的2等份，而在2等份的空白区域中，不进行任何容器的显示。

用户可以在父容器基础配置页面中，对目标父容器进行父容器基础配置操作；确定用户在父容器基础配置页面中，对可配置项输入的容器划分参数；在设计区域中，根据容器划分参数在目标父容器对应网格内，添加至少一个子容器对应网格；并且，在页面布局文件中的目标父容器对应分区内，根据获取的容器划分参数，更新将目标父容器拆分成至少一个子容器的容器拆分代码。

例如，若获取到的容器划分参数为列比例12:2:10，行比例为2:6，则按此比例划分目标父容器对应网格，划分后的目标父容器对应网格中共添加了三个子容器对应网格。

示例性的，可以在目标父容器创建代码的基础上，根据获取的容器划分参数，创建至少一个子容器的容器拆分代码；将创建后的至少一个容器拆分代码，添加至页面布局文件中目标父容器对应分区内，从而实现目标父容器的代码更新操作。

本可选实施例通过向用户展示父容器基础配置页面，获取用户在父容器基础配置页面中，根据可配置项输入的目标父容器的容器划分参数，实现了用户能够根据实际需求，对目标父容器区域进行划分。通过获取用户输入的容器划分参数，并根据容器划分参数，在设计区域中添加至少一个对应网格并进行显示，实现了用户能够根据输入的容器划分参数，直观的看到目标父容器划分后的展示结果，从而使得用户能够根据展示结果与实际需求对参数进行相应调整，提高了用户的便利性。同时，根据获取的容器划分参数，在页面布局文件中目标父容器对应分区内，更新目标父容器拆分成至少一个子容器的容器拆分代码，实现了对拆分后的目标父容器的代码同步更新，提高了开发人员的开发效率。

在一个可选实施例中，若容器处理操作包括容器显示属性设置操作，则根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码，包括：响应于对目标容器的容器显示属性设置操作，展示容器显示属性设置页面；获取用户在容器显示属性设置页面中对可设置项输入的显示设置参数；在设计区域中，根据显示设置参数，显示目标容器对应网格；以及，在页面布局文件中目标容器对应分区内，根据显示设置参数，更新目标容器的显示属性设置代码。

容器显示属性设置操作可以是父容器显示属性设置操作或子容器显示属性设置操作。可选的，容器显示属性操作的实现方式可以是：选中设计区域中的目标容器对应网格，或选中目标容器对应的容器标识，在操作区域中的容器显示属性设置页面，对选中的目标容器进行容器显示属性设置操作。或者可选的，容器显示属性操作的实现方式还可以是在设计区域中点击(例如左击或右击)选择目标容器对应网格，或点击目标容器的容器标识，在设计区域中点击弹出的容器显示属性设置页面中进行容器显示属性设置操作。

容器显示属性设置页面如图2C所示，其中，容器显示属性设置页面中可以包括容器外边距输入控件、容器内边距输入控件、容器边框及圆角选择控件和容器背景色选择控件等中的至少一种。相应的，可设置项包括容器外边距、容器内边距、容器边框及圆角选择和容器背景色选择等中的至少一种。显示设置参数可以包括容器外边距参数、容器内边距参数、容器边框及圆角选择参数、和容器背景色选择参数等中的至少一种。

容器边框及圆角选择参数中可以包括：由相关技术人员提前预设的不同的边框及圆角的可选择项；容器背景色选择参数中可以包括：由相关技术人员提前预设的不同颜色的可选择项，以供用户根据实际需求进行选择。示例性的，相关技术人员还可以为容器设置默认的外边距、内边距、边框及圆角、和背景色；例如，可以将外边距和内边距默认设置为0，边框及圆角默认设置为无边框无圆角，背景色默认设置为白色。其中，容器内边距与容器外边距的默认单位可以设置为像素。

示例性的，用户在容器外边距输入控件中输入的外边距，以及在容器内边距输入的内边距，可以采用预设符号的形式进行分隔，其中，预设符号可以是逗号。例如，容器外边距的输入形式可以是“X,X,X,X”，从左至右可以分别代表容器左边框的外边距、容器上边框的外边距、容器右边框的外边距和容器下边框的外边距。同理，容器内边距的输入形式可以是“Y,Y,Y,Y”，从左至右可以分别代表容器左边框的内边距、容器上边框的内边距、容器右边框的内边距和容器下边框的内边距。

示例性的，用户在容器外边距输入控件与容器内边距输入控件输入的数值个数若超过4个，则默认取前4个数值作为最终的容器外边距或容器内边距的输入数值。例如，若用户在容器外边距输入控件中的输入为“1,1,2,2,2”，则取“1,1,2,2”作为容器外边距的输入数值。

示例性的，用户在容器显示属性设置页面中，容器外边距输入控件与容器内边距输入控件输入的数值个数若低于4个，则按外边距或内边距的默认值将输入的数值补充完整，并将补充后的数值作为最终的容器外边距或容器内边距的输入数值。例如，若用户在容器外边距输入控件中的输入为“1,1,2”，则将“1,1,2”补充为“1,1,2,0”，并将“1,1,2,0”作为容器外边距的输入数值。

若容器显示属性操作为父容器显示属性设置操作时，则响应用户对目标父容器的显示属性设置操作，并在操作区域展示容器显示属性设置页面，以供用户根据容器显示属性设置页面，进行目标父容器的显示属性的设置操作。用户根据目标父容器，在容器显示属性设置页面的可设置项输入的显示设置参数。在设计区域中，根据获取的用户输入的显示设置参数，显示目标父容器对应网格，例如，可以显示目标父容器对应网格的内边距、外边距、边框及圆角、和背景色等中的至少一项。

用户在容器显示属性设置页面的可设置项中输入显示设置参数；根据获取的用户输入的显示设置参数，在页面布局文件中目标父容器对应分区内，更新目标父容器的显示属性设置代码。例如，可以是在目标父容器创建代码或目标父容器的容器拆分代码基础上，添加目标父容器的显示属性设置代码，从而实现目标父容器的代码更新操作。

本可选实施例通过向用户展示容器显示属性设置页面，获取用户在容器显示属性设置页面中，根据可设置项输入的目标父容器的显示设置参数，实现了用户对目标父容器的显示属性的设置。通过获取用户输入的显示设置参数，并根据显示设置参数，在设计区域中显示目标父容器对应网格，实现了用户能够根据输入的显示设置参数，直观的看到目标父容器对应网格的展示结果，为用户带来了便利。同时，根据获取的显示设置参数，在页面布局文件中目标父容器对应分区内，更新目标父容器的显示属性设置代码，实现了对目标父容器对应的代码同步更新，且能够直接通过更新后的代码进行前端开发，提高了开发人员的工作效率。

在一个具体实施方式中，如图2D所示，首先，在设计布局中创建父容器aG1，根据父容器aG1的创建操作，在页面布局文件中父容器aG1生成区域对应分区内，添加父容器aG1的容器创建代码。若获取的父容器列比例为12:2:10，行比例为默认行比例1:8，则父容器aG1被分为三个子容器，分别为aGG1、aGG2和aGG3。第一行子容器aGG1占满一行，第二行子容器aGG2和aGG3的宽度比为2:10；第一行与第二行的高度比为1:8。根据获取的容器划分参数，在页面布局文件中父容器aG1对应分区内，更新父容器aG1拆分成子容器aGG1、aGG2和aGG3的容器拆分代码。获取的aG1的内边距为10,10,10,10px，则父容器aG1对应的容器左边框的内边距、容器上边框的内边距，容器下边框的内边距和容器右边框的内边距均为10px。根据获取的显示设置参数，在页面布局文件中父容器aG1对应分区内，更新父容器aG1的显示属性设置代码。

其次，为子容器aGG3内添加父容器aG2，且获取到的父容器aG2的列比例为6:4:2，则aG2被分为三个子容器aGG4，aGG5，aGG6，且三个子容器的列宽比为6:4:2。根据父容器aG2的创建操作，在页面布局文件中父容器aG2生成区域对应分区内，添加父容器aG2的容器创建代码；并且，根据获取的容器划分参数，在页面布局文件中父容器aG2对应分区内，更新父容器aG2拆分成子容器aGG4、aGG5和aGG6的容器拆分代码。

最后，为子容器aGG4添加父容器aG3，为子容器aGG5添加父容器aG4，为子容器aGG6添加父容器aG5。将父容器aG3、aG4和aG5进行拆分，拆分成父容器包含的各子容器。获取到的aG3的列比例为12，行高比为1，则父容器aG3拆分后的子容器aGG7充满整个父容器aG3的区域。获取到的aG4的列比例为12:12，行高比为1:1，则父容器aG4拆分后包含两个子容器，分别为aGG8和aGG9，且aGG8与aGG9均分父容器aG4，并均等份的占据父容器aG4的上下两行。获取到的aG5的列比例为12:12:12，行高比为1:1:1。则父容器aG5拆分后包含三个子容器，分别为aGG10，aGG11，aGG12，且aGG10，aGG11，aGG12均分父容器aG5，并均等份的占据父容器aG5的上、中、下三行。

根据父容器aGG4、父容器aGG5和父容器aGG6的创建操作，在页面布局文件中父容器aGG4、父容器aGG5和父容器aGG6生成区域对应分区内，添加父容器aGG4、父容器aGG5和父容器aGG6的容器创建代码。根据获取的容器划分参数，在页面布局文件中父容器aGG4、父容器aGG5和父容器aGG6对应分区内，更新父容器aGG4、父容器aGG5和父容器aGG6拆分成对应子容器的容器拆分代码。

本实施例方案通过获取用户对父容器创建操作、父容器配置操作以及容器显示属性设置操作，并根据各父容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码。上述方案实现了对父容器的创建、配置以及属性的设置，且操作后的父容器对应的页面布局具有良好的适配性，页面布局能够做到多端自适应，提高了开发人员的开发效率。

实施例三

图3A为本申请实施例三提供的一种代码生成方法的流程图，本实施例在上述各技术方案的基础上，进行了优化改进。

进一步的，将“容器处理操作”具体细化为对子容器的“子容器处理操作”，以完善对子容器的处理操作与页面布局。

如图3A所示，该方法包括以下具体步骤：

S310、获取用户对布局界面的子容器处理操作。

S320、根据子容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码。

其中，子容器处理操作可以包括子容器基础配置操作和容器显示属性设置操作。

在一个可选实施例中，若容器处理操作包括子容器基础配置操作，则根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码，包括：响应于对目标子容器的子容器基础配置操作，展示子容器基础配置页面；获取用户在子容器基础配置页面中对可配置项输入的组件布局参数；将设计区域中目标子容器对应网格，绑定组件布局参数；以及，在页面布局文件中目标子容器对应分区内，根据组件布局参数，更新目标子容器的组件布局设置代码。

其中，目标子容器可以是用户当前想要进行操作的子容器。可选的，子容器基础配置操作的实现方式可以是：选中设计区域中的目标子容器对应网格，或选中目标子容器对应的子容器标识，在操作区域中的子容器配置页面，对选中的目标子容器进行子容器配置操作。或者可选的，子容器基础配置操作的实现方式还可以是：在设计区域中点击(例如左击或右击)目标子容器对应网格，或点击目标子容器的子容器标识，在设计区域中点击弹出的子容器基础配置页面中进行子容器配置操作。例如，子容器标识可以是由至少一种字符组成的有序的字符串，其中，字符可以是字母、数字、文字或符号等。

子容器基础配置页面如图3B所示，其中，子容器基础配置页面中包括组件布局选择控件，以及与组件布局选择控件相对应的组件排列选择控件。相应的，可配置项包括组件布局选择，以及与组件布局对应的组件排列选择。组件布局参数可以包括组件布局选择参数和与组件布局对应的组件排列选择参数。示例性的，操作区域中可以包括供用户进行选择的至少一个组件，用户可以将组件直接拖拽至目标子容器对应网格中，还可以点击目标子容器对应网格，或右击目标子容器对应的子容器标识，在设计区域中弹出的组件选择框中，选择相应的组件添加至目标子容器中。

组件布局可以包括弹性布局(flex布局)方式、行内布局(inline布局)方式、块布局(block布局)方式、行内块布局(inline-block布局)方式、表格布局(table布局)方式和浮动布局(float布局)方式等中的至少一种。其中，flex布局对应的组件排列方式可以包括主轴水平方向排列和主轴垂直方向排列。主轴水平方向排列还可以包括主轴水平排列且组件左对齐，主轴水平排列且组件水平居中对齐，以及主轴水平排列且组件右对齐；主轴垂直方向排列还可以包括主轴垂直排列且组件上对齐，主轴垂直排列且组件垂直居中对齐，以及主轴垂直排列且组件下对齐。例如，inline-block布局对应的组件排列方式可以包括纵向排列、横向排列和两端对齐等中的至少一种。

用户可以在目标子容器基础配置页面中，对目标子容器进行子容器基础配置操作；确定用户在子容器基础配置页面中，对可配置项输入的组件布局参数；在设计区域中，为目标子容器对应网格绑定组件布局参数，以及在页面布局文件中目标子容器对应分区内，根据组件布局参数，更新目标子容器的组件布局设置代码。例如，若用户在子容器基础配置页面中选择的是flex布局，以及选择了与flex布局下的主轴水平排列且组件左对齐的组件排列方式，则目标子容器对应网格绑定flex布局，且目标子容器中的组件排列方式绑定为主轴水平排列且组件左对齐；将目标子容器对应的flex布局，以及flex布局对应的排列方式对应的代码，同步更新在页面布局文件中目标子容器对应分区内。

本可选实施例通过向用户展示子容器基础配置页面，实现了用户对目标子容器的子容器基础配置操作；通过获取用户输入的组件布局参数，并将设计区域中目标子容器对应网格，绑定组件布局参数；在页面布局文件中目标子容器对应分区内，根据组件布局参数，更新目标子容器的组件布局设置代码，实现了用户对目标子容器中组件的布局和排列，同时，能够直接获取到组件布局和排列对应的组件布局设置代码，为用户提供便利，提高了用户开发的效率。

在一可选实施例中，若容器处理操作包括容器显示属性设置操作，则根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码，包括：响应于对目标容器的容器显示属性设置操作，展示容器显示属性设置页面；获取用户在容器显示属性设置页面中对可设置项输入的显示设置参数；在设计区域中，根据显示设置参数，显示目标容器对应网格；以及，在页面布局文件中目标容器对应分区内，根据显示设置参数，更新目标容器的显示属性设置代码。

若容器显示属性操作为子容器显示属性设置操作时，则响应用户对子容器的显示属性设置操作，并在操作区域展示容器显示属性设置页面，以供用户根据容器显示属性设置页面，进行目标子容器的显示属性的设置操作。用户根据目标子容器，在容器显示属性设置页面的可设置项输入的显示设置参数。在设计区域中，根据获取的用户输入的显示设置参数，显示目标子容器对应网格，例如，可以显示目标子容器对应网格的内边距、外边距、边框及圆角或背景色等。

用户根据目标子容器，在容器显示属性设置页面的可设置项输入的显示设置参数；根据获取的用户输入的显示设置参数，在页面布局文件中目标子容器对应分区内，更新目标子容器的显示属性设置代码。例如，可以是在目标子容器创建代码或目标子容器的容器拆分代码基础上，添加目标子容器的显示属性设置代码，从而实现目标子容器的代码更新操作。

本可选实施例通过获取用户输入的显示设置参数，并根据显示设置参数，在设计区域中显示目标子容器对应网格，实现了用户能够根据输入的显示设置参数，直观的看到目标子容器对应网格的展示结果，为用户提供便利。同时，根据获取的显示设置参数，在页面布局文件中目标子容器对应分区内，更新目标子容器的显示属性设置代码，实现了对目标子容器对应网格的代码同步更新，且能够直接通过更新后的代码进行前端开发，提高了开发人员的工作效率。

本实施例方案通过获取用户对子容器配置操作以及容器显示属性设置操作，并根据各子容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码。上述方案实现了对子容器属性的设置，以及对子容器内各组件排列方式的确定，并将确定后的子容器属性以及组件排列方式生成对应的布局代码，开发人员可以直接使用对应的布局代码进行前端开发，提高了发开人员的开发效率。

实施例四

图4为本申请实施例四提供的一种代码生成方法的流程图，本实施例在上述各技术方案的基础上，进行了优化改进。

进一步的，将“获取用户对布局界面的容器处理操作”操作，细化为“根据用户对设计区域中已显示网格的选取操作，或用户对设计区域对应容器节点图中的节点选取操作，确定目标容器；其中，容器节点图中各节点对应容器，节点边对应所连接容器的父子关系；根据用户选取的功能控件，确定对目标容器的容器处理操作”，以完善用户对布局界面的容器处理操作的获取。

S410、根据用户对设计区域中已显示网格的选取操作，或用户对设计区域对应容器节点图中的节点选取操作，确定目标容器；其中，容器节点图中各节点对应容器，节点边对应所连接容器的父子关系。

容器节点图如图4B所示，其中，节点A、C对应父容器；节点a、b和c分别对应父容器A的子容器，节点d、e分别对应父容器C的子容器。图中实线节点边对应所连接容器的父子关系，例如，父容器A与子容器c的节点边对应父容器A与子容器c的父子关系。子容器c与父容器C节点边代表在子容器c中创建父容器C，此时可以理解子容器c与父容器C之间具备父子关系，也即子容器c是父容器C的父容器。

用户可以对设计区域对应容器节点图中的节点选取操作，确定目标容器。具体可以是用户可以单击或双击选中容器节点图中的目标父容器或目标子容器，若想要取消选中的目标父容器或目标子容器，则可以采用预设操作方式(例如单击或双击设计区域中空白区域)释放选中操作，并在容器节点图中重新进行目标父容器或目标子容器的选择。

S420、根据用户选取的功能控件，确定对目标容器的容器处理操作。

若容器处理操作为父容器基础配置操作，则功能控件可以包括父容器模板选择控件、父容器列比例输入控件、父容器行高比输入控件、父容器高度输入控件和父容器宽度输入控件等中的至少一种。

若容器处理操作为容器显示属性设置操作，则功能控件可以包括容器外边距输入控件、容器内边距输入控件、容器边框及圆角选择控件和容器背景色选择控件等中的至少一种。

若容器处理操作为子容器基础配置操作，则功能控件可以包括组件布局选择控件，以及与组件布局选择控件相对应的组件排列选择控件。

可以理解的是，可以根据用户选择的功能控件不同，确定用户对目标父容器或目标子容器的不同容器处理操作。

S430、根据容器处理操作，在布局界面的设计区域中显示页面布局，并关联更新布局界面对应的页面布局文件中的布局代码。

其中，页面布局文件在运行时展示设计区域中所显示的页面布局。

在一个可选实施例中，在设计区域中存在容器对应网格的增删时，根据当前增删网格对应的当前增删容器与设计区域中其他网格对应容器之间的父子关系，更新容器节点图。

设计区域对应的容器节点图，随着用户对父容器或子容器的容器处理操作进行不断更新。若用户在设计区域中，将容器对应网格进行增加或删除时，则对应容器节点图也同步进行自动增加或删除。具体可以是根据当前增加或删除网格对应的当前增加或删除容器，与设计区域中其他网格对应容器之间的父子关系，更新相应的容器节点图。需要说明的是，当用户对父容器进行删除时，则父容器对应网格中所包含的子容器也进行相应的删除。

示例性的，以用户在设计区域创建的页面布局对应的容器节点图对应图4B为例，若用户在此页面布局的基础上删除父容器C，则对应更新后的容器节点图如图4C所示；若用户在此页面布局的基础上，在子容器d中创建父容器D，并创建父容器D对应的子容器f和子容器g，则对应更新后的容器节点图如图4D所示。

本可选实施例通过在设计区域中存在容器对应网格的增删时，根据当前增删网格对应的当前增删容器与设计区域中其他网格对应容器之间的父子关系，更新容器节点图，实现了根据用户对设计区域中目标容器的更新操作，自动化的同步更新容器节点图，从而使得能够根据更新后的容器节点图进行目标容器的选取。

本实施例方案通过根据用户对设计区域中已显示网格的选取操作，或用户对设计区域对应容器节点图中的节点选取操作，实现了对目标容器的确定；用户能够直接选取容器节点图中的节点确定目标容器，提高了用户对目标容器确定的便利性。同时，实现了容器节点图能够随着设计区域中页面布局的变化进行自动化的同步更新。

实施例五

图5为本申请实施例五提供的一种代码生成装置的结构示意图。本申请实施例所提供的一种代码生成装置可执行本申请任意实施例所提供的一种代码生成方法，具备执行方法相应的功能模块和有益效果。该装置可采用软件和/或硬件的方式实现。如图5所示，该装置具体包括：操作获取模块501和页面布局显示模块502。其中，

操作获取模块501，用于获取用户对布局界面的容器处理操作；

页面布局显示模块502，用于根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码；

可选的，页面布局显示模块502，包括：

区域确定单元，用于若所述容器处理操作包括父容器创建操作，则根据所述父容器创建操作，确定父容器生成区域；

第一网格添加单元，用于在所述设计区域的所述父容器生成区域，添加目标父容器对应网格；以及，

代码添加单元，用于在所述页面布局文件中所述父容器生成区域对应分区内，添加所述目标父容器的容器创建代码。

可选的，页面布局显示模块502，包括：

第一页面展示单元，用于若所述容器处理操作包括父容器基础配置操作，则响应于对目标父容器的所述父容器基础配置操作，展示父容器基础配置页面；

第一参数获取单元，用于获取用户在所述父容器基础配置页面中对可配置项输入的容器划分参数；

第二网格添加单元，用于在所述设计区域中，根据所述容器划分参数在所述目标父容器对应网格内，添加至少一个子容器对应网格；以及，

第一代码更新单元，用于在所述页面布局文件中所述目标父容器对应分区内，根据所述容器划分参数，更新将所述目标父容器拆分成所述至少一个子容器的容器拆分代码。

可选的，页面布局显示模块502，包括：

第二页面展示单元，用于若所述容器处理操作包括容器显示属性设置操作，则响应于对目标容器的所述容器显示属性设置操作，展示容器显示属性设置页面；

第二参数获取单元，用于获取用户在所述容器显示属性设置页面中对可设置项输入的显示设置参数；

网格显示单元，用于在所述设计区域中，根据所述显示设置参数，显示所述目标容器对应网格；以及，

第二代码更新单元，用于在所述页面布局文件中所述目标容器对应分区内，根据所述显示设置参数，更新所述目标容器的显示属性设置代码。

可选的，页面布局显示模块502，包括：

第三页面展示单元，用于若所述容器处理操作包括子容器基础配置操作，则响应于对目标子容器的所述子容器基础配置操作，展示子容器基础配置页面；

第三参数获取单元，用于获取用户在所述子容器基础配置页面中对可配置项输入的组件布局参数；

参数绑定单元，用于将所述设计区域中所述目标子容器对应网格，绑定所述组件布局参数；以及，

第三代码更新单元，用于在所述页面布局文件中所述目标子容器对应分区内，根据所述组件布局参数，更新所述目标子容器的组件布局设置代码。

可选的，操作获取模块501，包括：

目标容器确定单元，用于根据用户对所述设计区域中已显示网格的选取操作，或用户对所述设计区域对应容器节点图中的节点选取操作，确定目标容器；其中，所述容器节点图中各节点对应容器，节点边对应所连接容器的父子关系；

处理操作确定单元，用于根据用户选取的功能控件，确定对所述目标容器的容器处理操作。

可选的，该装置还包括：

容器节点图更新模块，用于在所述设计区域中存在容器对应网格的增删时，根据当前增删网格对应的当前增删容器与所述设计区域中其他网格对应容器之间的父子关系，更新容器节点图。

上述代码生成装置可执行本申请任意实施例所提供的代码生成方法，具备执行各代码生成方法相应的功能模块和有益效果。

实施例六

图6是本申请实施例六提供的一种代码生成设备的结构示意图。代码生成的设备是一种电子设备，图6示出了适于用来实现本申请实施方式的示例性电子设备600的框图。图6显示的电子设备600仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：一个或者多个处理器或者处理单元601，系统存储器602，连接不同系统组件(包括系统存储器602和处理单元601)的总线603。

总线603表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备600典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备600访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器602可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)604和/或高速缓存存储器605。电子设备600可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统606可以用于读写不可移动的、非易失性磁介质(图6未显示，通常称为“硬盘驱动器”)。尽管图6中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线603相连。存储器602可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本申请各实施例的功能。

具有一组(至少一个)程序模块607的程序/实用工具608，可以存储在例如存储器602中，这样的程序模块607包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块607通常执行本申请所描述的实施例中的功能和/或方法。

电子设备600也可以与一个或多个外部设备609(例如键盘、指向设备、显示器610等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口611进行。并且，电子设备600还可以通过网络适配器512与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图6所示，网络适配器612通过总线603与电子设备600的其它模块通信。应当明白，尽管图6中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元601通过运行存储在系统存储器602中的程序，从而执行各种功能应用以及数据处理，例如实现本申请实施例所提供的一种代码生成的方法。

实施例七

本申请实施例七还提供一种包含计算机可执行指令的存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例所提供的代码生成方法，包括：获取用户对布局界面的容器处理操作；根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码；其中，所述页面布局文件在运行时展示所述设计区域中所显示的页面布局。

本申请实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本申请操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)

注意，上述仅为本申请的较佳实施例及所运用技术原理。本领域技术人员会理解，本申请不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本申请的保护范围。因此，虽然通过以上实施例对本申请进行了较为详细的说明，但是本申请不仅仅限于以上实施例，在不脱离本申请构思的情况下，还可以包括更多其他等效实施例，而本申请的范围由所附的权利要求范围决定。

Claims

1.一种代码生成方法，其特征在于，包括：

获取用户对布局界面的容器处理操作；

2.根据权利要求1所述的方法，其特征在于，若所述容器处理操作包括父容器创建操作，则所述根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码，包括：

根据所述父容器创建操作，确定父容器生成区域；

在所述设计区域的所述父容器生成区域，添加目标父容器对应网格；以及，

在所述页面布局文件中所述父容器生成区域对应分区内，添加所述目标父容器的容器创建代码。

3.根据权利要求1所述的方法，其特征在于，若所述容器处理操作包括父容器基础配置操作，则所述根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码，包括：

响应于对目标父容器的所述父容器基础配置操作，展示父容器基础配置页面；

获取用户在所述父容器基础配置页面中对可配置项输入的容器划分参数；

在所述设计区域中，根据所述容器划分参数在所述目标父容器对应网格内，添加至少一个子容器对应网格；以及，

在所述页面布局文件中所述目标父容器对应分区内，根据所述容器划分参数，更新将所述目标父容器拆分成所述至少一个子容器的容器拆分代码。

4.根据权利要求1所述的方法，其特征在于，若所述容器处理操作包括容器显示属性设置操作，则所述根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码，包括：

响应于对目标容器的所述容器显示属性设置操作，展示容器显示属性设置页面；

获取用户在所述容器显示属性设置页面中对可设置项输入的显示设置参数；

在所述设计区域中，根据所述显示设置参数，显示所述目标容器对应网格；以及，

在所述页面布局文件中所述目标容器对应分区内，根据所述显示设置参数，更新所述目标容器的显示属性设置代码。

5.根据权利要求1所述的方法，其特征在于，若所述容器处理操作包括子容器基础配置操作，则所述根据所述容器处理操作，在所述布局界面的设计区域中显示页面布局，并关联更新所述布局界面对应的页面布局文件中的布局代码，包括：

响应于对目标子容器的所述子容器基础配置操作，展示子容器基础配置页面；

获取用户在所述子容器基础配置页面中对可配置项输入的组件布局参数；

将所述设计区域中所述目标子容器对应网格，绑定所述组件布局参数；以及，

在所述页面布局文件中所述目标子容器对应分区内，根据所述组件布局参数，更新所述目标子容器的组件布局设置代码。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述获取用户对布局界面的容器处理操作，包括：

根据用户对所述设计区域中已显示网格的选取操作，或用户对所述设计区域对应容器节点图中的节点选取操作，确定目标容器；其中，所述容器节点图中各节点对应容器，节点边对应所连接容器的父子关系；

根据用户选取的功能控件，确定对所述目标容器的容器处理操作。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

在所述设计区域中存在容器对应网格的增删时，根据当前增删网格对应的当前增删容器与所述设计区域中其他网格对应容器之间的父子关系，更新容器节点图。

8.一种代码生成装置，其特征在于，包括：

操作获取模块，用于获取用户对布局界面的容器处理操作；

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7中任一所述的代码生成方法。

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