可生成代码的可视化系统原型设计方法、系统及存储介质与流程

本发明实施例涉及计算机技术，尤其涉及一种可生成代码的可视化系统原型设计方法、系统及存储介质。

背景技术：

随着计算机技术的飞速发展和人类需求的不断提高，软件设计的功能越来越复杂。而市场的竞争和不同客户的个性化需求又使软件的开发周期不断缩短，这给软件的开发提出了严格要求。软件开发需要编写大量的源代码，但是，传统的手工编码方式不仅费时费力，而且代码的可靠性不能保证，开发人员需要将大量的精力投入到枯燥的代码编写中而不是软件的构架设计和逻辑设计上，这大大降低了软件的开发效率。

目前，提高开发阶段效率的途径是使用代码重复利用技术和代码自动生成技术，现有的代码重用和自动生成技术的使用门槛较高，非专业人士难以操作而且在使用时需要大量的人工配置和干预。

技术实现要素：

本发明实施例提供一种可生成代码的可视化系统原型设计方法、系统及存储介质，通过组件编辑进行原型设计，获得可编辑代码继续开发。

第一方面，本发明实施例提供了一种可生成代码的可视化系统原型设计方法，系统原型包括多个组件，该可视化系统原型设计方法包括：

根据页面操作确定各组件的组件属性以及组件之间的层级关系；

根据各组件的代码标签以及组件属性确定代码生成模型；

根据各组件的组件属性，代码生成模型以及基础代码片段确定各组件代码块；

根据层级关系以及各组件代码块输出整体组件代码。

在一些可选的实施例中，组件包括特殊组件和一般组件，特殊组件通过特殊组件处理器处理，一般组件通过公共处理器处理。

在一些可选的实施例中，根据页面操作确定各组件的组件属性以及组件之间的层级关系，包括：

根据页面操作以及嵌套约束规则确定各组件的组件属性以及各组件之间的层级关系；

根据所述层级关系生成第一组件树；

根据第一组件树生成可视化的图层树；

其中，各组件之间的层级关系包括第一父子关系以及第一兄弟关系，属于第一父子关系的组件为第一父子组件，属于第一兄弟关系的组件为第一兄弟组件。

在一些可选的实施例中，第一父子组件中的第一父组件通过数据流与第一子组件进行信息传递，第一父子组件中的第一子组件通过事件与第一父组件进行信息传递。

在一些可选的实施例中，根据各组件的代码标签以及层级关系确定代码生成模型，包括：

根据组件的组件属性，确定各组件内部的第二组件树；

其中，第二组件树包括第二父子关系以及第二兄弟关系，属于第二父子关系的组件为第二父子组件，属于第二兄弟关系的组件为第二兄弟组件；

将第二父子组件中的第二子组件的代码标签分别嵌套在对应的第二父组件的代码标签内，生成对应组件的代码生成模型。

在一些可选的实施例中，根据层级关系以及各组件代码块输出整体组件代码，包括：

从第一组件树的根节点开始向下遍历，判断当前节点是否存在子节点，若存在子节点，则继续向下遍历；

若不存在子节点，则从最末端的一个或多个子节点开始，执行如下步骤：

s1：获取当前子节点的组件代码块；

s2：获取当前子节点对应的当前父节点的组件代码块；

s3：用所述当前父节点的组件代码块包裹所述当前子节点的组件代码块，生成组合代码块，将所述组合代码块重新作为所述当前父节点的组件代码块；

s4：判断所述当前父节点是否为所述根节点；

s5：若不是所述根节点，则将所述当前父节点重新作为当前子节点，返回执行步骤s1；

s6：若是所述根节点，则将所述当前父节点的组件代码块作为所述整体组件代码输出。

在一些可选的实施例中，在第一组件树的节点中选取一个或多个缓存节点，用于缓存缓存节点作为父节点时，对应的所有子组件的组件代码块。

第二方面，本发明实施例还提供了一种可生成代码的可视化系统原型设计系统，包括：

组件处理模块，用于根据页面操作确定各组件的组件属性以及组件之间的层级关系；

第一数据处理模块，用于根据各组件的代码标签以及组件属性确定代码生成模型；

第二数据处理模块，用于根据各组件的组件属性，代码生成模型以及基础代码片段确定各组件代码块；

代码生成模块，用于根据层级关系以及各组件代码块输出整体组件代码。

在一些可选的实施例中，该系统还包括：

属性面板模块，用于对组件的组件属性进行修改；

数据存储模块，用于存储用户操作以及设计组件的过程信息，并且用于存储数据字典以设计组件；

图层树模块，用于展示和编辑第一组件树的结构。

第三方面，本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质包括指令，当所述指令在计算机上运行时，使得计算机执行如上述所述的可生成代码的可视化系统原型设计方法。

上述技术方案具有如下有益效果：

1、通过本发明实施例提供的可生成代码的可视化系统原型设计方法、系统及存储介质，能够使开发人员可视化地设计系统原型，并在组件开发的基础上，有效生成可编辑代码，完成基础代码的复现，大大节省了开发人员的工作量。并且通过组件树定义组件之间父子、兄弟的层级关系,并根据组件树生成对应结构的可视化的图层树，通过生成图层树的方式，用户可直接对对应的组件树进行可视化编辑。

2、本发明实施例提供的可生成代码的可视化系统原型设计方法通过设计缓存节点，有效提高了组件修改时的处理性能。

3、用户所设计的原型以及生成的整体组件代码能够自动适配主流的分辨率，并自动缩放，完成页面的自适应。

4、本发明实施例提供的可生成代码的可视化系统原型设计系统，能够实现数据字典的查询和导出，有效便捷的支持数据源的移植与复用。在设计过程中能够做到设计态与预览态达到99%的无差别。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是示出根据本发明一个实施例的可生成代码的可视化系统原型设计方法的流程图；

图2是图1所示可生成代码的可视化系统原型设计方法中根据页面操作确定各组件的组件属性以及组件之间的层级关系的流程图；

图3是示出根据本发明一个实施例的第一组件树以及第二组件树的部分结构示意图；

图4是图1所示可生成代码的可视化系统原型设计方法中根据层级关系以及各组件代码块输出整体组件代码的流程图；

图5是示出根据本发明另一个实施例的第一组件树的部分结构示意图；

图6是示出根据本发明又一个实施例的第一组件树的部分结构示意图；

图7是示出根据本发明一个实施例的可生成代码的可视化系统原型设计系统的结构示意图；

图8是示出根据本发明另一个实施例的可生成代码的可视化系统原型设计系统的结构示意图；

图9是示出根据本发明一个实施例的可生成代码的可视化系统原型设计系统的数据处理流程图；

图10是示出根据本发明一个实施例的可生成代码的可视化系统原型设计系统的架构图；

图11是示出了可以实现根据本发明实施例的可生成代码的可视化系统原型设计方法的计算设备的示例性硬件架构的结构图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

一个系统原型需要包含不同的组件，同时一个组件也可以被包含在不同的系统原型中，这为组件的复用（即代码的重复利用）提供了条件。以组件作为系统的表现方式，不仅直观，而且还可以作为系统原型运行时显示信息的载体，此外，基于组件的系统原型设计可以使开发人员把主要尽力投入在系统的设计上而不是枯燥的代码编写中，提高了设计出的软件的质量。

为了更好地理解本发明，下面结合图1至图5对本发明实施例提供的可生成代码的可视化系统原型设计方法、系统及存储介质进行详细描述。应注意，这些实施例并不是用来限制本发明公开的范围。

图1是示出根据本发明一个实施例的可生成代码的可视化系统原型设计方法的流程图。

如图1所述，本发明实施例中的可生成代码的可视化系统原型设计方法100包括步骤s110至步骤s140。

步骤s110：根据页面操作确定各组件的组件属性以及组件之间的层级关系。其中，页面操作可以包括拖动组件，修改组件属性，复制组件，删除组件以及拖动图层树。组件属性可以包括组件的结构属性以及功能属性，结构属性例如包括组件的形状，颜色，样式等，功能属性例如包括组件的可执行功能。具体地，例如按钮组件的组件属性的设计中，结构属性的设计可以包括设计按钮组件的形状大小，功能属性的设计可以包括设计点击该按钮组件之后的响应事件。

可选的，在本发明的一个实施例中，组件可以包括特殊组件和一般组件，特殊组件通过特殊组件处理器处理，一般组件通过公共处理器处理，上述处理器为软件处理器。

具体地，特殊组件例如可以包括弹出框以及步骤条等，特殊组件的设计处理过程不复用公共处理器，而是通过对应的特殊处理器处理，例如弹出框在弹出虚拟面板中进行设计。一般组件则通过公共处理器处理，公共处理器主要判断当前的一般组件是否能够拖动到当前位置，并且以第一组件树的结构存放到数据存储中心。

可选的，在本发明的一个实施例中，如图2所示，步骤s110具体可以包括：

s111：根据页面操作以及嵌套约束规则确定各组件的组件属性以及各组件之间的层级关系；

s112：根据层级关系生成第一组件树；

s113：根据第一组件树生成可视化的图层树。

其中，各组件之间的层级关系可以包括第一父子关系以及第一兄弟关系，属于第一父子关系的组件为第一父子组件，属于第一兄弟关系的组件为第一兄弟组件。

具体地，可以根据各组件的需求以及对应的不同的嵌套约束规则，确定各组件的组件属性以及各组件之间的层级关系。根据用户的页面操作，例如拖入一个输入框组件到表单组件，便建立了输入框组件与表单组件的层级关系，或者直接拖入一个输入框组件到页面中，两个输入框组件的表现形式可以不同。不同的组件对应不同的嵌套约束规则，例如按钮组件不能拖入到输入框中组件。根据用户的设计需求以及组件自身的特点，针对组件的组件属性进行设计，例如设计按钮组件的点击响应，下拉框组件的选择项等，并根据所设计的组件属性渲染到组件中。其中，嵌套约束规则具体可以包括：页面组件可以拖入所有组件，表单组件可以拖入输入框、下拉框、开关、时间选择、单选按钮、复选框、表单组以及自定义表单项等。表格组件只能拖入表格项。布局列组件可以拖入布局行中。折叠面板组件可以拖入面板项，面板项可以拖入任何组件。页签组件可以拖入页签项，页签项组件可以拖入任何组件。弹出框可以拖入任何组件。步骤条组件可以拖入步骤项，步骤项可以拖入任何组件。卡片组件可以拖入图片、按钮、标题、文字组件。输入框、下拉框、开关以及时间选择等组件拖动到表单组件中会展示成表单组件的形式，单独放到其他组件则是其组件本身。组件属性设计还可以包括对组件的外观样式，形状大小等设计。

各组件根据用户确定的层级关系形成第一组件树。在第一组件树中，各节点可以包括多个子节点和/或多个兄弟节点，每个子节点又同时可以包括多个子节点和/或多个兄弟节点。除根节点外，每个节点可以包括一个父节点。各节点位置均包括对应的组件，各组件均包括对应的组件代码块。

根据第一组件树的树形结构生成可视化的图层树结构，图层树与第一组件树的结构一一对应，用于展示第一组件树各组件之间的逻辑结构，用户可通过拖拽等方式对图层树进行编辑，从而改变对应的第一组件树中各组件之间的逻辑结构。通过生成图层树的方式，用户可直接对第一组件树进行可视化编辑。

可选的，在本发明的一个实施例中，第一父子组件中的第一父组件通过数据流与第一子组件进行信息传递，第一父子组件中的第一子组件通过事件与第一父组件进行信息传递。父组件与子组件通过使用数据流和事件的方式进行信息传递，能够有效避免变量污染的问题，例如两个不同的组件同时向各自的子组件传递name值，这两个name值不会相互影响的。

具体地，第一父子组件中的第一父组件通过数据流与第一子组件进行信息传递，例如改变第一父组件上的某个数据，第一子组件的接收器会接收响应，例如可以为props接收器，并反映到第一子组件中。在本实施例中，父组件向子组件传值较佳地通过数据流进行传递，例如：<parent:inputname="name">，子组件会接收到inputname这个属性，而子组件向父组件传值较佳地通过事件去传递，例如在子组件中用this.$emit('childbyvalue',this.childvalue)去向父组件传值。第一父子组件中的第一子组件通过事件与第一父组件进行信息传递，例如第一子组件对某个行为的监听会以事件的形式在第一父组件进行响应。子组件向父组件传值只能通过事件去传递，例如在子组件中用this.$emit('childbyvalue',this.childvalue)去向父组件传值。在本实施例中，父子组件要进行通讯，如果使用全局变量等方式来通讯会造成变量污染，不利于管理。

步骤s120：根据各组件的代码标签以及组件属性确定代码生成模型。

可选的，在本发明的一个实施例中，步骤s120具体可以包括：

根据组件的组件属性，确定各组件内部的第二组件树。

其中，第二组件树包括第二父子关系以及第二兄弟关系，属于第二父子关系的组件为第二父子组件，属于第二兄弟关系的组件为第二兄弟组件。

将第二父子组件中的第二子组件的代码标签分别嵌套在对应的第二父组件的代码标签内，生成对应组件的代码生成模型。

具体地，在本发明的一个实施例中，如图3所示为第一组件树的部分结构200示意，每一个组件根据组件属性，在每个组件的内部又可以包括第二组件树，例如组件202和组件203为组件201的第一子组件，组件204和组件205为组件202的第一子组件，组件206为组件203的第一子组件。组件201，组件202，组件203，组件204，组件205以及组件206共同生成了第一组件树200。其中，组件203中还可以包括第二组件树，组件2032为组件2031的第二子组件。根据第二组件树中的层级关系，将第二组件树中的第二子组件2032的代码标签嵌套在对应的第二父组件2031的代码标签内，生成对应于组件203的代码生成模型。例如表格组件的代码标签可以设置为<a></a>，表格项组件的代码标签可以设置成<b></b>，那么根据表格组件与表格项组件的层级关系，表格组件的代码生成模型可以为<a><b></b></a>，然后添加对应的标签属性就生成了简单的表格组件的代码生成模型。

步骤s130：根据各组件的组件属性，代码生成模型以及基础代码片段确定各组件代码块。

具体地，所有组件均是以第二组件树的结构进行存储的，每个组件还可以包含基础代码片段，再根据每个组件所配置的各组件属性以及所生成的代码生成模型，其中，根据组件属性将基础代码片段存放在对应的代码生成模型中，生成每个组件最终的组件代码块。

步骤s140：根据层级关系以及各组件代码块输出整体组件代码。

可选的，在本发明的一个实施例中，如图4所示，步骤s140具体可以包括：

从第一组件树的根节点开始向下遍历，判断当前节点是否存在子节点，若存在子节点，则继续向下遍历。

若当前节点不存在子节点，则从最末端的一个或多个子节点开始，执行如下步骤：

s1：获取当前子节点的组件代码块；当前子节点的数量可以是一个或多个；

s2：获取当前子节点对应的当前父节点的组件代码块；

s3：用当前父节点的组件代码块包裹当前子节点的组件代码块，生成组合代码块，将组合代码块重新作为当前父节点的组件代码块；本实施例中，可以将本步骤s3生成的组合代码块替换s2步骤中获取的父节点的组件代码块，相当于对当前父节点的组件代码块执行更新操作；

s4：判断当前父节点是否为根节点；

s5：若不是根节点，表明当前父节点还具有上一级的父节点，则当前父节点重新作为当前子节点，返回执行步骤s1。即当前父节点相对于其上一层级的父节点而言，属于在下一个循环执行过程中（s1-s5）的当前子节点；在下一个循环执行过程中，上一个循环执行过程中的父节点的身份或角色被切换为子节点，相应地，上一个循环执行过程中的父节点的组件代码块（组合代码块）被确定为属于子节点的组件代码块。

s6：若是根节点，则将当前父节点的组件代码块作为整体组件代码输出。

具体地，先获取最末端子节点的子级组件代码块，再获取该子节点对应父节点的父级组件代码块，之后用父级组件代码块包裹子级组件代码块，依次向上循环，直到完成根节点的组件代码块对其子节点的子级组件代码块的包裹，输出整体组件代码。

如图5所示为第一组件树的部分结构300示意，从根节点开始向下遍历，如果当前节点有子节点，则先确定子节点对应组件的子级组件代码块，如果该子节点还有子节点，则继续向下遍历该子节点的子节点，以此往复，直到遍历到第一组件树的最末端节点，并由最末端的子节点开始，例如图5的示意性结构，先获取图中最末端子节点的子级组件代码块304，再获取该子节点对应父节点的父级组件代码块303，并用父级组件代码块303包裹子级组件代码块304，形成的组合代码块3031则重新作为该对应父节点的父级组件代码块，判断当前父节点是否为根节点，若不是根节点，则再继续向上获取该父节点对应父节点的父级组件代码块302，并用新获取的父级组件代码块302继续包裹其子节点的子级组件代码块3031，生成新的组合代码块3021，以新的组合代码块3021作为该父节点的父级组件代码块，再次判断当前父节点是否为根节点，若不是根节点，则再向上确定其父级组件代码块301，并用父级组件代码块301包裹子级组件代码块3021，生成新的组合代码块3011，并将组合代码块3011重新作为该父节点的父级组件代码块，依次向上循环，直到判断当前父节点是根节点，例如图5中，若父级组件代码块3011对应的节点为根节点，则将父级组件代码块3011作为可编辑的整体组件代码输出，用于用户编辑。

可选的，在本发明的一个实施例中，在第一组件树的节点中选取一个或多个缓存节点，用于缓存缓存节点作为父节点时，对应的第一子组件的组件代码块。具体的，在第一组件树的节点中选取一个或多个具有代表性的节点设置为缓存节点。可选的，可以根据实际的设计过程，通过收集和分析，选取一些变化最为频繁的节点以及容器节点作为缓存节点。该缓存节点的全部子节点对应的组件代码块均缓存在缓存节点中。在其他节点修改时，缓存节点提供该节点及以下所有子节点的组件代码块，因此，无需再重复遍历缓存节点以下的子节点的组件代码块信息。可选的，在本发明的一个实施例中，如图6所示为第一组件树的部分结构400示意图，其中，b节点402、c节点403、d节点404、e节点405、f节点406以及g节点407分别为上一节点的子节点。若该第一组件树已经生成整体组件代码，且分别选取a节点401和d节点404为缓存节点，则d节点404同时缓存了d节点404，e节点405、f节点406以及g节点407的组件代码块。在修改b节点402的组件属性时，由于d节点404以后的子节点对应的组件代码块均已经缓存在d节点404中，所以只需要遍历b节点402，c节点403以及d节点404三层，便能够完成该第一组件树的整体组件代码的修改，大大提高了修改整体组件代码的效率。

可选的，由于第一组件树的节点的组件属性中并不是每一个节点的组件属性更改都需要重新渲染代码视图，有些节点的组件属性只需要在展示上进行修改，例如修改表格组件中表头的颜色，相应的需要在表格标签上添加color属性的设置，但是在设计过程中检测到该组件属性并不需要对整个第一组件树的代码进行生成，因此仅需在展示界面中进行修改。同时，用户设计的原型以及生成的整体组件代码能够自动适配主流的分辨率，并自动缩放。

图7示出了根据本发明一个实施例的可生成代码的可视化系统原型设计系统500的结构示意图。该系统500适用于如上所述的可生成代码的可视化系统原型设计方法，包括：

组件处理模块501，用于根据页面操作确定各组件的组件属性以及组件之间的层级关系。具体地，组件处理模块501可以分别用于处理一般组件和特殊组件，组件处理模块501可以包括特殊组件处理器以及公共处理器，其中，特殊组件通过对应的特殊组件处理器处理，一般组件通过公共处理器处理。公共处理器主要用于判断当前的一般组件是否能够拖动到当前位置，并且以第一组件树的结构存放到数据存储中心。

第一数据处理模块502，用于根据各组件的代码标签以及组件属性确定代码生成模型。

第二数据处理模块503，用于根据各组件的组件属性，代码生成模型以及基础代码片段确定各组件代码块。

代码生成模块504，用于根据层级关系以及各组件代码块输出整体组件代码。具体地，代码生成模块504根据第一数据处理模块502以及第二数据处理模块503所处理的组件信息，以及其组件的第一父子关系递归生成整体组件代码信息，并可直接用于用户编辑。

可选的，在本发明的一个实施例中，如图8所述，可生成代码的可视化系统原型设计系统500还包括：

属性面板模块505，用于对组件的组件属性进行修改。具体地，每个组件都可以包括可编辑的组件属性提供给用户进行修改，属性面板模块505中的可编辑组件属性可以包括文本、选择框、滑块以及数据编辑器等。又可以根据不同的场景把这几种基础的可编辑组件属性进行组合封装或单独封装成可使用的组件。

数据存储模块506，用于存储用户操作以及设计组件的过程信息，并且能够存储并利用其他系统导出的数据字典，直接作为数据源用于设计组件。具体地，数据存储模块506可以通过vuex（状态管理模式）来做存储模块，以保证数据的双向绑定。通过数据存储模块506把组件处理的结果存储起来，并记录组件的父子层级关系、当前设计页面组件的拖动数据、组件的层级关系、操作步骤、当前组件的路径以及复制的路径等，用以渲染页面和重要数据。同时，数据存储模块506还具有数据字典存储功能，能够从其他系统中直接导出数据字典，并直接作为设计组件的数据源使用。

图层树模块507，用于展示和编辑第一组件树的结构。具体地，图层树模块507根据数据存储模块506的数据生成整个图层树结构，图层树与数据存储模块506中的第一组件树的结构一一对应，图层树模块507中的数据和数据存储模块506中的数据是双向绑定的，用户在操作图层树的同时会影响到数据存储模块506中的数据，各个模块之间涉及到组件传值数据的双向绑定，例如修改了图层树中的某个数据，该修改动作会同时传递到数据存储模块506中，可通过拖拽等方式对图层树进行编辑，从而改变对应的第一组件树中各组件之间的逻辑结构。因此用户能够分别通过组件处理模块501和/或图层树模块507实现对第一组件树的编辑和修改，实现在任意一端修改视图都会重新渲染。

如图9所示为根据本发明一个实施例的可生成代码的可视化系统原型设计系统500的数据处理流程图，根据用户在页面的操作对组件的组件属性以及层级关系进行编辑，并通过数据处理模块对编辑过程产生的数据进行处理，数据处理模块可以包括第一数据处理模块502以及第二数据处理模块503，用于将用户的实际操作转换成数据，对用户的拖动、双击、键盘进行监控，并把所有有效的操作用js对象表示，所有的处理过程全部在前端进行。通过组件处理模块501对组件进行处理，在处理组件时，判断组件是否为特殊组件，若是特殊组件，则通过特殊组件处理器进行处理，若不是特殊组件，则通过公共处理器进行处理，并通过数据存储模块506将处理的过程数据进行存储。具体地，主要通过vuex（状态管理模式）来做存储模块，以保证数据的双向绑定。一方面，编辑的组件数据通过本发明实施例的可生成代码的可视化系统原型设计方法，通过代码生成模块504进行整体组件代码生成，并用于页面渲染，其中，所生成的整体组件代码可直接用于用户编辑和修改。另一方面，通过可视化界面，可直接利用图层树模块507对图层数据加载并且利用属性面板模块505对组件的组件属性进行编辑，用于页面渲染。

图10示出了根据本发明一个实施例的可生成代码的可视化系统原型设计系统500的架构图。可生成代码的可视化系统原型设计系统500可以包括应用层，服务层以及数据层。其中，应用层位于前端，服务层以及数据层位于后端，应用层和数据层分别与服务层进行数据通讯。本发明实施例的可生成代码的可视化系统原型设计方法可以应用于应用层。应用层可以包括编辑面板模块，管理模块，生成模块以及其他应用模块。其中，编辑面板模块可以包括属性面板，图层面板，组件面板以及资源面板，能够对系统原型的组件属性进行编辑，并且通过图层树及组件的方式对系统原型进行设计。通过资源面板，能够对组件进行选择，具体地，资源面板可以包括数据字典，可以从其他系统中导出数据字典，直接作为原型设计的数据资源使用。管理模块可以包括状态管理，事件管理，样式管理以及路由管理。生成模块可以包括版本兼容，代码生成以及页面渲染。其中，通过代码生成功能能够实现将所设计的系统原型转换成可直接编辑的代码。用户可通过对所生成的代码进行编辑和修改实现对系统原型的设计与修改。页面渲染功能用于实现将所设计的系统原型进行原型生成。其他应用模块可以包括后台管理，预览服务以及文档服务。其中，预览服务用于实现将所设计的系统原型的设计态进行预览，预览态能够达到与设计态99%无差别。

服务层可以包括安全认证模块，数据访问模块，权限管理模块以及缓存管理模块，主要用于开发人员在后端为应用层前端进行运维及服务。其中，数据访问模块可以用于对用户设计过程的数据进行存储和管理，并为应用层提供数据接口，用于访问以及交互。

数据层可以包括mysql，redis，mongodb以及minion等数据库，并为服务层提供数据支持。

本发明实施例的可生成代码的可视化系统原型设计方法通过设计缓存节点，有效提高了组件修改时的处理性能。

本发明实施例通过组件树定义组件之间父子、兄弟的层级关系,并根据组件树生成对应结构的可视化的图层树，通过生成图层树的方式，用户可直接对对应的组件树进行可视化编辑。

本发明实施例提供的可生成代码的可视化系统原型设计方法能够使用户在设计界面中通过拖拽组件进行原型设计，并且能够直接导出为可以开发的代码，实现替代近60%的代码开发，有效生成可编辑代码，完成基础代码的复现，大大节省了开发人员的工作量。

本发明实施例基于页面的组件化，通过设计具有自适应特性的封装组件，在设计画布上拖拽以及设计组件时便也具有了自适应的特性。

本发明实施例的可生成代码的可视化系统原型设计系统，能够实现数据字典的查询和导出，有效便捷的支持数据源的移植与复用,用户可以通过原型设计网站下载zip开发代码包，在本发明实施例提供的可生成代码的可视化系统原型设计系统中导出。并且在设计过程中能够做到设计态与预览态达到99%的无差别。

本发明实施例还提供了一种计算机可读存储介质，位于如图11所示的电子设备600中，该电子设备600包括一个或多个处理器601、通信接口602、计算机可读存储介质603和通信总线604，其中，处理器601，通信接口602，计算机可读存储介质603通过通信总线604完成相互间的通信。

计算机可读存储介质603，用于存放计算机程序；

处理器601，用于执行计算机可读存储介质603上所存放的程序时，实现上述可生成代码的可视化系统原型设计方法的各步骤。

计算机可读存储介质可以包括随机存取存储器(randomaccessmemory，ram)，也可以包括非易失性存储器(non-volatilememory，nvm)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(centralprocessingunit，cpu)、网络处理器(networkprocessor，np)等；还可以是数字信号处理器(digitalsignalprocessing，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现场可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备及可读存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。