页面生成方法技术

本申请实施例提供一种页面生成系统

【技术实现步骤摘要】
页面生成方法、系统、装置、设备及存储介质


[0001]本申请涉及互联网
，尤其涉及一种页面生成方法
、
系统
、
装置
、
设备及存储介质
。

技术介绍

[0002]随着互联网技术的不断发展，互联网应用的数量越来越多
。
其中，页面是互联网应用的核心组成，页面不仅是互联网应用向用户展示各种信息的媒介，也是用户与互联网应用进行交互的接口
。
其中，页面的开发效率决定互联网应用的交付时效
。
为此，现有技术中出现了一些所见即所得的页面生成系统，用以辅助开发人员快速完成页面布局等界面设计
。
[0003]但是，这些现有页面生成系统仅能针对不依赖模态类
(Moda l)
组件的页面进行布局设计，如果页面需要用到模态类组件，例如模态框，现有这些页面生成系统并不支持对模态类组件的编辑操作，在页面布局上存在局限性
。
这是因为模态类组件是指一些迫使用户聚焦模态类组件关联的信息，直至用户完成模态类组件关联的任务或关闭模态类组件对应的视图才会消失的一类组件，在模态类组件出现的情况下，用户无法进行与模态类组件无关的操作，进而导致页面生成系统的操作失效
。

技术实现思路

[0004]本申请的多个方面提供一种页面生成方法
、
系统
、
装置
、
设备及存储介质，用以解决现有模态类组件不能编辑的问题，从而实现对模态类组件进行编辑，以提高页面生成系统的操作功能
。
[0005]本申请实施例提供一种页面生成系统，包括展示层
、
编辑层以及可动态接入页面生成系统的渲染层：
[0006]展示层，用于显示布局编辑界面，布局编辑界面至少包括组件区
、
效果展示区和属性操作区，组件区中显示有模态组件，模态组件包括蒙层和组件主体，组件主体包括至少一个组件元素，效果展示区是基于页面内嵌标签实现的内嵌于布局编辑界面中的隔离区域；
[0007]渲染层，用于响应针对组件区中的模态组件的选择操作，根据模态组件对应的初始属性信息，将模态组件中的蒙层以及组件主体中的各个组件元素渲染至效果展示区中，以得到目标页面的第一布局信息；其中，蒙层仅覆盖效果展示区，未被蒙层覆盖的属性操作区和组件区处于可操作状态；
[0008]编辑层，用于从渲染层获取第一布局信息，根据第一布局信息在效果展示区显示蒙层关联的第一选框以及各个组件元素分别关联的第二选框；以及响应对第一选框和
/
或第二选框的选择操作，通过属性操作区编辑模态组件和
/
或与被选择的第二选框关联的目标组件元素的属性信息；
[0009]渲染层，还用于根据模态组件和
/
或目标组件元素的编辑后的属性信息，重新将模态组件渲染至效果展示区，以得到目标页面对应的第二布局信息
。
[0010]本申请实施例还提供一种页面生成方法，包括：
[0011]显示布局编辑界面，布局编辑界面至少包括组件区
、
效果展示区和属性操作区，组件区中显示有模态组件，模态组件包括蒙层和组件主体，组件主体包括至少一个组件元素，效果展示区是基于页面内嵌标签实现的内嵌于布局编辑界面中的隔离区域；
[0012]响应针对组件区中模态组件的选择操作，根据模态组件对应的初始属性信息，将模态组件中的蒙层以及组件主体中的各个组件元素渲染至效果展示区中，以得到目标页面的第一布局信息；其中，蒙层仅覆盖效果展示区，未被蒙层覆盖的属性操作区和组件区处于可操作状态；
[0013]根据第一布局信息在效果展示区显示蒙层关联的第一选框以及各个组件元素分别关联的第二选框；以及响应对第一选框和
/
或第二选框的选择操作，通过属性操作区编辑模态组件和
/
或与被选择的第二选框关联的目标组件元素的属性信息；
[0014]根据模态组件和
/
或目标组件元素的编辑后的属性信息，重新将模态组件渲染至效果展示区，以得到目标页面对应的第二布局信息
。
[0015]本申请实施例还提供一种页面生成装置，包括：
[0016]编辑界面显示模块，用于显示布局编辑界面，布局编辑界面至少包括组件区
、
效果展示区和属性操作区，组件区中显示有模态组件，模态组件包括蒙层和组件主体，组件主体包括至少一个组件元素，效果展示区是基于页面内嵌标签实现的内嵌于布局编辑界面中的隔离区域；
[0017]模态组件渲染模块，用于响应组件区中模态组件的选择操作，根据模态组件对应的初始属性信息，将模态组件中的蒙层以及组件主体中的各个组件元素渲染至效果展示区中，以得到目标页面的第一布局信息；其中，蒙层仅覆盖效果展示区，未被蒙层覆盖的属性操作区和组件区处于可操作状态；
[0018]属性信息编辑模块，用于根据第一布局信息在效果展示区显示蒙层关联的第一选框以及各个组件元素分别关联的第二选框；以及响应对第一选框和
/
或第二选框的选择操作，通过属性操作区编辑模态组件和
/
或与被选择的第二选框关联的目标组件元素的属性信息；
[0019]模态组件渲染模块，还用于根据模态组件和
/
或目标组件元素的编辑后的属性信息，重新将模态组件渲染至效果展示区，以得到目标页面对应的第二布局信息
。
[0020]本申请实施例还提供一种电子设备，包括：存储器和处理器；存储器用于存储计算机程序；处理器与存储器耦合，用于执行计算机程序，以用于实现以上方法中的步骤
。
[0021]本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，当计算机程序被处理器执行时，致使处理器实现以上方法中的步骤
。
[0022]本申请实施例提供的技术方案，展示层显示的布局编辑界面包括组件区
、
效果展示区和属性操作区，由于效果展示区是基于页面内嵌标签实现的内嵌于布局编辑界面中的隔离区域，那么在从组件区中选择模态组件展示于效果展示区后，模态组件的蒙层和组件主体均被隔离在效果展示区中，不会遮挡效果展示区中的组件区和属性操作区等其它操作区域，可以对其它操作区域进行相应操作，例如，可以从组件区拖动其他组件至效果展示区中，也可以通过操作属性操作区对效果展示区中的模态类组件进行编辑操作，并且可以根据模态组件和
/
或模态组件中的目标组件元素的编辑后的属性信息，重新将模态组件渲染
至效果展示区，以得到目标页面对应的新的布局信息，恢复了页面生成系统的操作功能
。
附图说明
[0023]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定
。
在附图中：
[0024本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种页面生成系统，其特征在于，包括：展示层
、
编辑层以及可动态接入所述页面生成系统的渲染层；所述展示层，用于显示布局编辑界面，所述布局编辑界面至少包括组件区
、
效果展示区和属性操作区，所述组件区中显示有模态组件，所述模态组件包括蒙层和组件主体，所述组件主体包括至少一个组件元素，所述效果展示区是基于页面内嵌标签实现的内嵌于所述布局编辑界面中的隔离区域；所述渲染层，用于响应针对所述组件区中模态组件的选择操作，根据所述模态组件对应的初始属性信息，将所述模态组件中的蒙层以及组件主体中的各个组件元素渲染至所述效果展示区中，以得到目标页面的第一布局信息；其中，所述蒙层仅覆盖所述效果展示区，未被所述蒙层覆盖的所述属性操作区和所述组件区处于可操作状态；所述编辑层，用于从所述渲染层获取所述第一布局信息，根据所述第一布局信息在所述效果展示区显示所述蒙层关联的第一选框以及各个组件元素分别关联的第二选框；以及响应对所述第一选框和
/
或所述第二选框的选择操作，通过所述属性操作区编辑所述模态组件和
/
或与被选择的第二选框关联的目标组件元素的属性信息；所述渲染层，还用于根据所述模态组件和
/
或目标组件元素的编辑后的属性信息，重新将所述模态组件渲染至所述效果展示区，以得到所述目标页面对应的第二布局信息
。2.
根据权利要求1所述的系统，其特征在于，根据所述模态组件对应的初始属性信息，将所述模态组件中的蒙层以及组件主体中的各个组件元素渲染至所述效果展示区中，以得到所述目标页面的第一布局信息，包括：根据所述模态组件的标识信息，从目标组件库中加载所述模态组件的领域特定语言
DSL
描述文件，所述模态组件的
DSL
描述文件包含所述模态组件的初始属性信息；根据所述模态组件的初始属性信息，将所述模态组件中的蒙层以及组件主体中的各个组件元素渲染至所述效果展示区中；根据所述模态组件中的蒙层以及组件主体中的各个组件元素在所述效果展示区中的样式信息和展示位置，生成所述目标页面的
DSL
描述文件，所述目标页面的
DSL
描述文件至少包括所述第一布局信息
。3.
根据权利要求2所述的系统，其特征在于，在所述效果展示区中还包含被所述蒙层覆盖的其它目标组件的情况下，渲染层还用于：根据所述蒙层
、
各个组件元素以及其它目标组件在所述效果展示区中的样式信息和展示位置，结合所述蒙层与所述其它目标组件之间的覆盖关系，生成所述目标页面的
DSL
描述文件，所述目标页面的
DSL
描述文件至少包括所述第一布局信息
。4.
根据权利要求1所述的系统，其特征在于，所述模态组件具有领域特定语言
DSL
描述文件，所述
DSL
描述文件中包括所述模态组件的初始属性信息和选框描述信息，所述选框描述信息用于描述所述模态组件中需要选框的组件元素以及需要的选框数量；根据所述模态组件的初始属性信息，将所述模态组件中的蒙层以及组件主体中的各个组件元素渲染至所述效果展示区中，包括：根据所述模态组件的初始属性信息，创建所述模态组件的初始结构树，所述初始结构树至少包括代表所述蒙层的蒙层节点
、
代表各个组件元素的子节点以及所述蒙层节点与子节点之间的层级关系，所述蒙层节点具有选框属性，所述选框属性包括第一选框的标识信
息；根据所述选框描述信息，在所述初始结构树中的各子节点下面添加表示第二选框的二级子节点，以得到目标结构树，所述目标结构树用于维护蒙层节点代表的蒙层与第一选框之间的第一绑定关系以及各子节点代表的组件元素与第二选框之间的第二绑定关系；将所述目标结构树中二级子节点代表的第二选框的标识信息作为所述二级子节点所属子节点的选框属性，并根据所述目标结构树中的蒙层节点和子节点转换得到基于
DSL
描述的中间语法树；根据所述中间语法树，将所述模态组件中的蒙层以及组件主体中的各个组件元素渲染至所述效果展示区中
。5.
根据权利要求1所述的系统，其特征在于，所述编辑层还用于：在所述效果展示区显示所述第一选框和所述第二选框之前，根据预设的模态组件与常规组件之间的层级关系，为所述第一选框以及所述第二选框设置层级属性，且所述第一选框和所述第二选框的层级属性高于常规组件关联的选框的层级属性；响应对所述第一选框和
/
或所述第二选框的选择操作，通过所述属性操作区编辑所述模态组件和
/
或与被选择的第二选框关联的目标组件元素的属性信息，包括：响应于所述效果展示区中用于选择选框的选择操作，确定所述选择操作在所述效果展示区中的位置信息；若所述位置信息落入所述效果展示区中存在的至少一个选框的覆盖范围内，判断所述至少一个选框是否包含所述第一选框或所述第二选框；当所述至少一个选框仅包含所述第一选框时，确定所述选择操作选中所述第一选框，通过所述属性操作区编辑所述模态组件的属性信息；当所述至少一个选框包含所述第二选框时，确定所述选择操作选中所述第二选框，通过所述属性操作区编辑与被选中的第二选框关联的目标组件元素的属性信息
。6.
根据权利要求5所述的系统，其特征在于，当所述至少一个选框包含所述第二选框时，确定所述选择操作选中所述第二选框，通过所述属性操作区编辑与被选择的所述第二选框关联的目标组件元素的属性信息，包括：响应于对所述第一选框的选择操作，在所述效果展示区内包含被所述蒙层覆盖的其它目标组件的情况下，隐藏被所述蒙层覆盖的其它目标组件，以使所述效果展示区内仅展示所述蒙层
、
各个组件元素以及各组件元素关联的第二选框；响应于对任一第二选框的选择操作，隐藏所述蒙层和与未被选择的第二选框关联的组件元素，以使所述效果展示区内仅展示与被选择的第二选框关联的目标组件元素；以及响应于所述属性操作区编辑中的编辑操作，编辑所述目标组件元素的属性信息
。7.
根据权利要求1‑6任一项所述的系统，其特征在于，所述渲染层还用于：在所述效果展示区中不存在模态组件的情况下，响应对目标常规组件的选择操作，根据所述目标常规组件对应的初始属性信息，将所述目标常规组件渲染至所述效果展示区中；和
/
或在效果展示区中存在模态组件，且将所述模态组件中的蒙层以及组件主体中的各个组件元素渲染至所述效果展示区中的情况下，响应于所述属性操作区中的隐藏设置操作，将所述模态组件设置为隐藏状态，并在将所述模态组件设置为隐藏状态之后，响应对目标常规组件的选择操作，根据所述目标常规组件对应的初始属性信息，将所述目标常规组件渲
染至所述效果展示区中
。8.
一种页面生成方法，其特征在于，包括：显示布局编辑界面，所述布局编辑界面至少包括组件区
、
效果展示区和属性操作区，所述组件区中显示有模态组件，所述模...

【专利技术属性】
技术研发人员：杨萌，高飞宇，
申请(专利权)人：上海瑞家信息技术有限公司，
类型：发明
国别省市：