可生成代码的可视化系统原型设计方法、系统及存储介质技术方案

本发明专利技术提供一种可生成代码的可视化系统原型设计方法，系统原型包括多个组件，该方法包括：根据页面操作确定各组件的组件属性以及组件之间的层级关系；根据各组件的代码标签以及组件属性确定代码生成模型；根据各组件的组件属性，代码生成模型以及基础代码片段确定组件代码块；根据层级关系以及各组件代码块输出整体组件代码。本方案使用户可视化地设计原型，在组件开发的基础上，有效生成可编辑代码，实现基础代码的复现，节省了用户的工作量。

【技术实现步骤摘要】
可生成代码的可视化系统原型设计方法、系统及存储介质
本专利技术实施例涉及计算机技术，尤其涉及一种可生成代码的可视化系统原型设计方法、系统及存储介质。
技术介绍
随着计算机技术的飞速发展和人类需求的不断提高，软件设计的功能越来越复杂。而市场的竞争和不同客户的个性化需求又使软件的开发周期不断缩短，这给软件的开发提出了严格要求。软件开发需要编写大量的源代码，但是，传统的手工编码方式不仅费时费力，而且代码的可靠性不能保证，开发人员需要将大量的精力投入到枯燥的代码编写中而不是软件的构架设计和逻辑设计上，这大大降低了软件的开发效率。目前，提高开发阶段效率的途径是使用代码重复利用技术和代码自动生成技术，现有的代码重用和自动生成技术的使用门槛较高，非专业人士难以操作而且在使用时需要大量的人工配置和干预。
技术实现思路
本专利技术实施例提供一种可生成代码的可视化系统原型设计方法、系统及存储介质，通过组件编辑进行原型设计，获得可编辑代码继续开发。第一方面，本专利技术实施例提供了一种可生成代码的可视化系统原型设计方法，系统原型包括多个组件，该可视化系统原型设计方法包括：根据页面操作确定各组件的组件属性以及组件之间的层级关系；根据各组件的代码标签以及组件属性确定代码生成模型；根据各组件的组件属性，代码生成模型以及基础代码片段确定各组件代码块；根据层级关系以及各组件代码块输出整体组件代码。在一些可选的实施例中，组件包括特殊组件和一般组件，特殊组件通过特殊组件处理器处理，一般组件通过公共处理器处理。在一些可选的实施例中，根据页面操作确定各组件的组件属性以及组件之间的层级关系，包括：根据页面操作以及嵌套约束规则确定各组件的组件属性以及各组件之间的层级关系；根据所述层级关系生成第一组件树；根据第一组件树生成可视化的图层树；其中，各组件之间的层级关系包括第一父子关系以及第一兄弟关系，属于第一父子关系的组件为第一父子组件，属于第一兄弟关系的组件为第一兄弟组件。在一些可选的实施例中，第一父子组件中的第一父组件通过数据流与第一子组件进行信息传递，第一父子组件中的第一子组件通过事件与第一父组件进行信息传递。在一些可选的实施例中，根据各组件的代码标签以及层级关系确定代码生成模型，包括：根据组件的组件属性，确定各组件内部的第二组件树；其中，第二组件树包括第二父子关系以及第二兄弟关系，属于第二父子关系的组件为第二父子组件，属于第二兄弟关系的组件为第二兄弟组件；将第二父子组件中的第二子组件的代码标签分别嵌套在对应的第二父组件的代码标签内，生成对应组件的代码生成模型。在一些可选的实施例中，根据层级关系以及各组件代码块输出整体组件代码，包括：从第一组件树的根节点开始向下遍历，判断当前节点是否存在子节点，若存在子节点，则继续向下遍历；若不存在子节点，则从最末端的一个或多个子节点开始，执行如下步骤：S1：获取当前子节点的组件代码块；S2：获取当前子节点对应的当前父节点的组件代码块；S3：用所述当前父节点的组件代码块包裹所述当前子节点的组件代码块，生成组合代码块，将所述组合代码块重新作为所述当前父节点的组件代码块；S4：判断所述当前父节点是否为所述根节点；S5：若不是所述根节点，则将所述当前父节点重新作为当前子节点，返回执行步骤S1；S6：若是所述根节点，则将所述当前父节点的组件代码块作为所述整体组件代码输出。在一些可选的实施例中，在第一组件树的节点中选取一个或多个缓存节点，用于缓存缓存节点作为父节点时，对应的所有子组件的组件代码块。第二方面，本专利技术实施例还提供了一种可生成代码的可视化系统原型设计系统，包括：组件处理模块，用于根据页面操作确定各组件的组件属性以及组件之间的层级关系；第一数据处理模块，用于根据各组件的代码标签以及组件属性确定代码生成模型；第二数据处理模块，用于根据各组件的组件属性，代码生成模型以及基础代码片段确定各组件代码块；代码生成模块，用于根据层级关系以及各组件代码块输出整体组件代码。在一些可选的实施例中，该系统还包括：属性面板模块，用于对组件的组件属性进行修改；数据存储模块，用于存储用户操作以及设计组件的过程信息，并且用于存储数据字典以设计组件；图层树模块，用于展示和编辑第一组件树的结构。第三方面，本专利技术实施例还提供了一种计算机可读存储介质，计算机可读存储介质包括指令，当所述指令在计算机上运行时，使得计算机执行如上述所述的可生成代码的可视化系统原型设计方法。上述技术方案具有如下有益效果：1、通过本专利技术实施例提供的可生成代码的可视化系统原型设计方法、系统及存储介质，能够使开发人员可视化地设计系统原型，并在组件开发的基础上，有效生成可编辑代码，完成基础代码的复现，大大节省了开发人员的工作量。并且通过组件树定义组件之间父子、兄弟的层级关系,并根据组件树生成对应结构的可视化的图层树，通过生成图层树的方式，用户可直接对对应的组件树进行可视化编辑。2、本专利技术实施例提供的可生成代码的可视化系统原型设计方法通过设计缓存节点，有效提高了组件修改时的处理性能。3、用户所设计的原型以及生成的整体组件代码能够自动适配主流的分辨率，并自动缩放，完成页面的自适应。4、本专利技术实施例提供的可生成代码的可视化系统原型设计系统，能够实现数据字典的查询和导出，有效便捷的支持数据源的移植与复用。在设计过程中能够做到设计态与预览态达到99%的无差别。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是示出根据本专利技术一个实施例的可生成代码的可视化系统原型设计方法的流程图；图2是图1所示可生成代码的可视化系统原型设计方法中根据页面操作确定各组件的组件属性以及组件之间的层级关系的流程图；图3是示出根据本专利技术一个实施例的第一组件树以及第二组件树的部分结构示意图；图4是图1所示可生成代码的可视化系统原型设计方法中根据层级关系以及各组件代码块输出整体组件代码的流程图；图5是示出根据本专利技术另一个实施例的第一组件树的部分结构示意图；图6是示出根据本专利技术又一个实施例的第一组件树的部分结构示意图；图7是示出根据本专利技术一个实施例的可生成代码的可视化系统原型设计系统的结构示意图；图8是示出根据本专利技术另一个实施例的可生成代码的可视化系统原型设计系统的结构示意图；图9是示出根据本专利技术一个实施例的可生成代码的可视化系统原型设计系统的数据处理流程图；图10是示出根据本专利技术一个实施例的可生成代码的可视化系统原本文档来自技高网...

【技术保护点】
1.一种可生成代码的可视化系统原型设计方法，所述系统原型包括多个组件，其特征在于，所述可视化系统原型设计方法包括：/n根据页面操作确定各组件的组件属性以及所述组件之间的层级关系；/n根据各所述组件的代码标签以及所述组件属性确定代码生成模型；/n根据各所述组件的所述组件属性，所述代码生成模型以及基础代码片段确定各组件代码块；/n根据所述层级关系以及各所述组件代码块输出整体组件代码。/n

【技术特征摘要】
1.一种可生成代码的可视化系统原型设计方法，所述系统原型包括多个组件，其特征在于，所述可视化系统原型设计方法包括：
根据页面操作确定各组件的组件属性以及所述组件之间的层级关系；
根据各所述组件的代码标签以及所述组件属性确定代码生成模型；
根据各所述组件的所述组件属性，所述代码生成模型以及基础代码片段确定各组件代码块；
根据所述层级关系以及各所述组件代码块输出整体组件代码。


2.根据权利要求1所述的可生成代码的可视化系统原型设计方法，其特征在于，所述组件包括特殊组件和一般组件，所述特殊组件通过特殊组件处理器处理，所述一般组件通过公共处理器处理。


3.根据权利要求1所述的可生成代码的可视化系统原型设计方法，其特征在于，所述根据页面操作确定各组件的组件属性以及所述组件之间的层级关系，包括：
根据页面操作以及嵌套约束规则确定各所述组件的组件属性以及各所述组件之间的所述层级关系；
根据所述层级关系生成第一组件树；
根据所述第一组件树生成可视化的图层树；
其中，各所述组件之间的层级关系包括第一父子关系以及第一兄弟关系，属于所述第一父子关系的所述组件为第一父子组件，属于所述第一兄弟关系的所述组件为第一兄弟组件。


4.根据权利要求3所述的可生成代码的可视化系统原型设计方法，其特征在于，
所述第一父子组件中的第一父组件通过数据流与第一子组件进行信息传递，所述第一父子组件中的第一子组件通过事件与第一父组件进行信息传递。


5.根据权利要求1-4中任一项所述的可生成代码的可视化系统原型设计方法，其特征在于，所述根据各所述组件的代码标签以及所述组件属性确定代码生成模型，包括：
根据所述组件的组件属性，确定各所述组件内部的第二组件树；
其中，所述第二组件树包括第二父子关系以及第二兄弟关系，属于所述第二父子关系的所述组件为第二父子组件，属于所述第二兄弟关系的所述组件为第二兄弟组件；
将所述第二父子组件中的第二子组件的代码标签分别嵌套在对应的第二父组件的代码标签内，生成对应所述组件的代码生成模型。


6.根据权利要求3所述的可生成代码的可视化系统原型...

【专利技术属性】
技术研发人员：杨恒，肖登国，
申请(专利权)人：北京宇信科技集团股份有限公司，
类型：发明
国别省市：北京;11