CN115129303A - 一种可视化编译方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明涉及一种可视化编译方法、装置、电子设备及存储介质。编译方法包括：根据第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置；根据第二拖拽操作对相应的编译控件进行关联，并生成关联关系；根据点击操作弹出对编译控件的属性配置面板，并根据属性配置面板中输入的信息对编译控件配置属性信息；根据编译完成的可视化图表生成编译代码。本方案通过获取到的对预定控件的操作，进行相应的编译控件位置排布、编译控件之间的关联关系绑定和编译控件的属性配置，实现对于可视化图表的排布和属性配置，最终根据编译完成的可视化图表生成相应的编译代码，使得用户可以从重复的代码撰写工作中解放出来，通过可视化编译的过程让用户可以直观的通过各个空间完成自己所想要的需求，提高开发效率。

Description

一种可视化编译方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种可视化编译方法、装置、电子设备及存储介质。

背景技术

编程是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

前端技术：HTML、CSS、JS是我们所谓结构样式行为的分离，构成今天前端的主体；前后端分层：让前端更加专注前台的UI层、逻辑层，后端关注后台的接口；组件化思维：从需求出发，拆解页面表达结构和所需组件。

现有的编程技术主要以表格，文字展示，业务复杂，页面多，交互层级深，运营效率低，重复性业务页面设计制作、反复低效率的沟通、纠结的还原度修复，编码效率低，消费者体验诉求，随着前端不断的发展，消费者更需要速度快，界面美观，功能易懂，操作便捷等需求。

发明内容

为了解决现有技术存在的程序开发困难，编码效率低的问题，本发明的至少一个实施例提供了一种可视化编译方法、装置、电子设备及存储介质。

第一方面，本发明实施例提供了一种可视化编译方法，所述编译方法包括：

获取对每个预定控件执行的第一拖拽操作，根据所述第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置；

获取对所述编译控件的预设位置之间的第二拖拽操作，根据所述第二拖拽操作对相应的编译控件进行关联，并生成关联关系；

获取对编译控件的点击操作，根据所述点击操作弹出对所述编译控件的属性配置面板，并根据所述属性配置面板中输入的信息对所述编译控件配置属性信息；

根据编译完成的可视化图表生成编译代码。

基于上述技术方案，本发明实施例还可以做出如下改进。

结合第一方面，在第一方面的第一种实施例中，所述获取对所述编译控件的预设位置之间的第二拖拽操作，根据所述第二拖拽操作对相应的编译控件进行关联，并生成关联关系，包括：

获取所述第二拖拽操作的起始触控点和最终触控点；

判断所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距是否小于第一预设间距；

当所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距小于或等于第一预设间距时，将与所述起始触控点的间距最小的编译控件作为起始控件；

判断所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距是否小于第二预设间距；

当所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距小于或等于第二预设间距时，将与所述最终触控点的间距最小的编译控件作为最终控件；

生成所述起始控件指向所述最终控件的指向线，并生成所述起始控件指向所述最终控件的数据流转关系，作为关联关系。

结合第一方面的第一种实施例，在第一方面的第二种实施例中，所述编译方法还包括：

当所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距大于第一预设间距，或者，所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距大于第二预设间距时，将所述第二拖拽操作删除。

结合第一方面，在第一方面的第三种实施例中，所述根据编译完成的可视化图表生成编译代码，包括：

根据所述可视化图表中的各个编译控件获取对应的预设的代码模板；

根据所述代码模板、编译控件之间的关联关系和编译控件的属性信息生成所述编译代码。

结合第一方面或第一方面的第一、第二或第三种实施例，在第一方面的第四种实施例中，所述编译方法还包括：

获取所述编译代码运行时，各个所述编译控件对应的代码模板的访问次数和故障次数；

在所述可视化图表上，根据所述编译控件之间的关联关系，在所述编译控件之间添加相应的访问次数和故障次数。

第二方面，本发明实施例提供了一种可视化编译装置，所述编译装置包括：

第一处理单元，用于获取对每个预定控件执行的第一拖拽操作，根据所述第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置；

第二处理单元，用于获取对所述编译控件的预设位置之间的第二拖拽操作，根据所述第二拖拽操作对相应的编译控件进行关联，并生成关联关系；

第三处理单元，用于获取对编译控件的点击操作，根据所述点击操作弹出对所述编译控件的属性配置面板；

属性配置单元，用于根据所述属性配置面板中输入的信息对所述编译控件配置属性信息；

编译单元，用于根据编译完成的可视化图表生成编译代码。

结合第二方面，在第二方面的第一种实施例中，第二处理单元，具体用于获取所述第二拖拽操作的起始触控点和最终触控点；判断所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距是否小于第一预设间距；当所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距小于或等于第一预设间距时，将与所述起始触控点的间距最小的编译控件作为起始控件；判断所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距是否小于第二预设间距；当所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距小于或等于第二预设间距时，将与所述最终触控点的间距最小的编译控件作为最终控件；生成所述起始控件指向所述最终控件的指向线，并生成所述起始控件指向所述最终控件的数据流转关系，作为关联关系。

结合第二方面或第二方面的第一种实施例，在第二方面的第二种实施例中，所述编译装置还包括：运行可视化单元，用于获取所述编译代码运行时，各个所述编译控件对应的代码模板的访问次数和故障次数；在所述可视化图表上，根据所述编译控件之间的关联关系，在所述编译控件之间添加相应的访问次数和故障次数。

第三方面，本发明实施例提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现第一方面中任一项实施例所述的可视化编译方法的步骤。

第四方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现第一方面种任一项实施例所述的可视化编译方法的步骤。

本发明的上述技术方案与现有技术相比具有如下优点：本方案通过获取到的对预定控件的操作，进行相应的编译控件位置排布、编译控件之间的关联关系绑定和编译控件的属性配置，实现对于可视化图表的排布和属性配置，最终根据编译完成的可视化图表生成相应的编译代码，使得用户可以从重复的代码撰写工作中解放出来，通过可视化编译的过程让用户可以直观的通过各个空间完成自己所想要的需求，提高开发效率。

附图说明

图1是本发明实施例提供的一种可视化编译方法流程示意图；

图2是本发明另一实施例提供的客户端的操作界面示意图；

图3是本发明又一实施例提供的一种可视化编译方法流程示意图其一；

图4是本发明又一实施例提供的一种可视化编译方法流程示意图其二；

图5是本发明又一实施例提供的客户端的操作界面示意图；

图6是本发明又一实施例提供的一种可视化编译装置结构示意图；

图7是本发明又一实施例提供的一种电子设备结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。

本发明实施例提供的为实现本发明各个实施例的一种客户端，客户端可以是诸如手机、平板电脑、笔记本电脑、掌上电脑、个人数字助理(Personal Digital Assistant，PDA)、便捷式媒体播放器(Portable Media Player，PMP)、导航装置、可穿戴设备、智能手环、计步器等移动终端，以及诸如数字TV、台式计算机等固定终端。

如图1所示，本发明实施例提供了一种可视化编译方法，应用于客户端。参照图1，方法包括如下步骤：

S11、获取对每个预定控件执行的第一拖拽操作，根据第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置。

在本实施例中，在客户端的操作界面上添加各个预定控件，可以根据用户的使用需求针对不同的代码模块分别构建预定控件，参照图2，预定控件包括：短信控件、push消息控件、利益点控件、加入群组控件、移出群组控件、承接设置控件、客服控件、变量控件、埋点控件、电销控件、微信控件、智能Push控件、智能短信控件、推荐控件、外投广告、商城短信控件、站内信控件、数据交互控件、结束控件、等待控件、条件分支控件、AB测试控件、条件多分支控件等控件。具体的，根据程序需求和代码块所能实现的方案，还可以构建更多的控件。

具体的，短信控件对应的代码实现向目标用户发送手机短信；push消息控件对应的代码实现向安装了客户端的目标用户推送Push消息；利益点控件对应的代码实现向指定用户的账户中直接发放指定的奖品，无需用户的任何界面交互操作，发放行为用户无感知；加入群组控件对应的代码实现将正在执行的Pin加入指定的群组中；移出群组控件对应的代码实现将正在执行的Pin从指定的群组中删除；承接控件对应的代码实现向目标用户展示制定内容；变量控件对应的代码实现改变指定变量的取值；埋点控件对应的代码实现对利益点信息进行补充埋点；电销控件对应的代码实现将需要外呼用户的相关数据推送到电销CRM系统；微信控件对应的代码实现向目标用户发送微信模版消息；智能Push控件对应的代码实现按照指定的策略，将向安装了客户端的目标用户推送Push消息；智能短信控件对应的代码实现按照指定的策略，将向目标推送短信消息；推荐控件对应的代码实现通过多种算法对触达物料进行最优计算，推荐发送；外投广告控件对应的代码实现将用户推送至广告投放池，投放数据T+1生效；短信控件对应的代码实现将向目标用户发送手机短信，站内信控件将向用户发送站内信信息；数据交互控件对应的代码实现支持将数据发送至其他系统；结束控件对应的代码实现将结束流程的执行，并标记结束的分支，等待控件将挂起正在运行的任务实例，并在指定时间段内等待所选事件的发生，事件发生或等待超时均会唤醒并继续运行该任务实例；条件分支控件对应的代码实现将判断所选条件是否成立，并决定之后运行哪一个分支；AB测试控件中包含了实验配置参数；条件多分支对应的代码实现可以将用户选择的所有枚举进行罗列，便于用户针对不同枚举配置不同策略。

在本实施例中，获取对预定控件的第一拖拽操作后，将第一拖拽操作的起始触控点所点击的预定控件作为编译控件，将编译控件拖拽到第一拖拽控件的最终触控点处，以实现对于对于预定控件的排布进行设置。

在本实施例中，可视化图表的相应位置集第一拖拽操作的最终触控点对应的位置，最终触控点即第一拖拽操作最后点击到的可视化图表上的位置。

在本实施例中，预定控件在可视化编译界面中并不是一个具有具体功能的控件，只是一个控件图标，方便用户根据图标的内容确定该图标所能实现的功能。

在本实施例中，由于可视化编译过程中需要对控件的排布情况进行调整，所以，将起始触控点的位置位于预定控件的拖拽操作作为第一拖拽操作，实现对于预定控件的拖拽，也可以将起始触控点的位置位于编译控件的拖拽操作也作为第一拖拽操作，实现对于编译控件的位置调整。

S12、获取对编译控件的预设位置之间的第二拖拽操作，根据第二拖拽操作对相应的编译控件进行关联，并生成关联关系。

在本实施例中，针对编译控件之间的因果和数据关系，可以根据对编译控件的预设位置之间进行的第二拖拽操作，对相应的编译控件进行关联。

具体的，可以区别与上述第一拖拽操作，将在编译控件之间拖拽产生的指向线作为第二拖拽操作，还可以在编译控件被第一拖拽操作拖拽到指定位置后，根据编译控件的特性在编译控件上生成至少一条连接线，连接线的头部设置为圆球或者其他形状，当任一拖拽操作的起始触控点为该连接线或者连接线的头部时，将该拖拽操作作为第二拖拽操作，比如，一般的控件对应的代码运行后都会具有至少两条，push消息的控件最终会有消息发送成功和消息发送失败的两条结果，而后分别到不同的下一个控件，比如，消息发送成功可以直接到结束控件，而消息发送失败可能还要到消息发送失败跳出弹窗提示的控件；条件分支控件会至少有是或者否的判断，而随着条件分支控件上配置的属性的数量增多，生成的连接线也会更多，而开始控件对应的连接线就只有一条，而结束控件则不会再有后续步骤，则不会有后续连接线。

在本实施例中，编译控件之间的关联关系不仅包含着代码之间的关联性，也控制着各个编译控件内代码的运行情况和数据流向情况，比如，一个简单的条件分支控件对应的代码根据用户配置的属性可以根据用户的点击所选择的条件或者上一控件传入条件分支控件的数据进入相应条件分支关联的下一编译控件，以实现比如跳转、发送消息、存储信息等各种各样的功能，根据用户配置的另一套属性还可以实现定时触发的方法，比如针对条件分支控件配置触发时间，具体的，可以将七条条件分支，条件分别为当前时间是周几，并在周一、周二、周三、周四、周五、周六和周日的条件分支下分别设置push控件向用户push不同的消息提示，实现快速开发出在每周的每一天分别向用户push不同的消息提示的代码功能。

S13、获取对编译控件的点击操作，根据点击操作弹出对编译控件的属性配置面板，并根据属性配置面板中输入的信息对编译控件配置属性信息。

在本实施例中，当获取到编译控件的点击操作时，对应该编译控件弹出属性配置面板，方便用户对编译控件进行属性配置，参照上述步骤中的描述，对编译控件进行不同的属性配置可以使得编译控件对应的代码执行不用的方法逻辑，比如，以条件分支控件为例，可以配置一周七天的条件分支，也可以配置一年十二个月的条件分支，具体的，比如确定用户生日对应的星座的功能模块，可以配置十二个的条件分支控件，每个条件分支上的条件为对应星座的月份，条件分支控件之前的控件为获取用户输入的生日信息的控件，确定与用户输入的生日信息相匹配的条件分支，符合条件的条件分支后续关联的控件可以是push消息控件也可以是显示数据控件，实现将用户的星座push到指定位置或者直接在客户端的预设位置上显示用户星座的功能。

具体的，比如对条件分支控件进行属性配置时，首先填写条件分支控件的条件分支数量，而后针对每个条件分支分别配置相应的判断条件，比如，一周七天的话，条件分支控件之前关联的控件就应该拿到当前是星期几，对获取当前时间的控件配置的属性可以是配置一个网络地址或者获取本机当前时间信息，从中筛选出当前是星期几，而后将星期几传入条件分支控件，而条件分支控件在代码层来看就是if else逻辑代码，判断条件分别是传入的数据是星期一、还是星期二、最终选定确定的条件分支，进入该条件分支关联的控件，以实现后续功能。

在本实施例中，在条件分支控件的代码层面，条件分支控件对应的代码块就是ifelse逻辑代码，而条件分支的对比的过程中一般是比对字符串、数字等，可以根据对条件分支控件配置的判断条件来确定向条件分支控件传入何种类型的数据，比如，比对当前时间是星期几，由于一周有7天，在条件分支控件之前获取当前是星期几的控件中，最终输出的数据可以是具体的数字，以便于条件分支控件根据传入的数据进行条件比对。

S14、根据编译完成的可视化图表生成编译代码。

在本实施例中，根据编译完成的可视化图表生成编译代码，可以通过可视化图标中各个编译控件对应的代码模板，将上述步骤配置的属性信息添加进代码模板中得到该编译控件对应的代码块，而后根据各个编译控件之间的关联关系将各个编译控件对应的代码块进行排列，得到该编译代码；还可以仅记录可视化图表中各个编译控件的数据，将相关数据上传至服务端中，在服务端中找到每个编译控件对应的代码块，将各个代码块组成该编译代码，该方案中根据服务端中提供的代码块执行相关业务，以实现本方案的功能，当服务端中的代码块数量越来越多时，用户编译的可视化图表中各个控件的功能能被实现的概率越高，即在服务端中提供了不同功能的“积木”，用户编译完成的可视化图表中限定了所需要的“积木”的属性和“积木”之间的关联关系，当“积木”的数量越多，越能为用户提供良好的代码服务，用户也能进行更多不同可视化编译的逻辑方案。

在本实施例中，本方案中进行的拖拽操作和点击操作所实现的方案都可以撤销和删除，比如已拖拽到编译区域内的编译控件，可以选择删除，或者进行回退撤销在先操作，同理，可以对第二拖拽操作绑定的关联关系删除，已添加的属性可以通过再次点击编译控件改写在先添加的属性。

在本实施例中，本方案通过获取到的对预定控件的操作，进行相应的编译控件位置排布、编译控件之间的关联关系绑定和编译控件的属性配置，实现对于可视化图表的排布和属性配置，最终根据编译完成的可视化图表生成相应的编译代码，使得用户可以从重复的代码撰写工作中解放出来，通过可视化编译的过程让用户可以直观的通过各个空间完成自己所想要的需求，提高开发效率。

在本实施例中，由于可视化图表中显示的是各个控件的图表，而用户运行最终得到的编译代码时，用户是无法直观的观察到代码的运行情况的，所以，针对用户无法直观的观察到代码运行情况的问题，本方案获取编译代码运行时，各个编译控件对应的代码模板的访问次数和故障次数；在可视化图表上，根据编译控件之间的关联关系，在编译控件之间添加相应的访问次数和故障次数。

在本实施例中，本方案获取编译代码运行时各个控件对应的代码块的运行情况，并在可视化图标上实时显示相应的访问次数和故障次数，通过监听各个方法的运行次数即可得到各个编译控件的访问次数，故障次数就可以根据相关联的两个控件的访问次数的不同得到，比如，条件分支控件的某个条件分支的判断条件被满足后，就会运行该条件分支对应编译控件对应的代码，所以，该条件分支对应的编译控件对应的代码的运行次数减去该条件分支的判断条件被满足的次数，就是这条关联关系上的运行故障的次数。

在本实施例中，可以通过现有技术中的监控系统实时监控各个方法的运行情况，比如，在代码的方法上添加注解，通过注解来记录各个方法的执行情况，可以把注解理解为代码里的特殊标记，这些标记可以在编译，类加载，运行时被读取，并执行相应的处理。本方案对此不做特别限定。

如图3所示，本发明实施例提供了一种可视化编译方法。参照图3，与图1所示可视化编译方法相比，区别在于，编译方法包括如下步骤：

S21、获取第二拖拽操作的起始触控点和最终触控点。

在本实施例中，第二拖拽操作的起始触控点即进行第二拖拽操作的光标点击到编译界面上的点，最终触控点即光标点击编译界面后进行拖拽动作最后与编译界面接触的点，结合上述实施例中通过第二拖拽操作确定相关联的编译控件的表述，本方案可以通过起始触控点与最终触控点来生成指向线，即以起始触控点为起点，最终触控点为终点生成由一个编译控件指向另一编译控件的数据流转关系线。

S22、判断起始触控点和与起始触控点的间距最小的编译控件之间的间距是否小于第一预设间距。

S23、当起始触控点和与起始触控点的间距最小的编译控件之间的间距小于或等于第一预设间距时，将与起始触控点的间距最小的编译控件作为起始控件。

S24、判断最终触控点和与最终触控点的间距最小的编译控件之间的间距是否小于第二预设间距。

S25、当最终触控点和与最终触控点的间距最小的编译控件之间的间距小于或等于第二预设间距时，将与最终触控点的间距最小的编译控件作为最终控件。

在本实施例中，由于编译区域中会存在较多的编译控件，而获取到的第二拖拽操作可能会出现变形或者拖拽错误的情况，若是对于绑定不同编译控件之间的关联关系的第二拖拽操作进行较大的限定，反而会影响到用户的使用体验，所以，结合即使用户比较随意的进行第二拖拽操作，也会选择与需要进行关联关系限定的编译控件较近的点作为第二拖拽操作的起点和终点，所以，本方案中，通过限定第一预设间距和第二预设间距，第一预设间距和第二预设间距可以为同一值，用户也可以根据自身操作习惯自由限定第一预设间距和第二预设间距，以便于用户进行操作，第一预设间距和第二预设间距越小，对用户的操作要求越高，可以有效的规范用户的操作习惯，同时保证被限定关联关系的编译控件的准确性，避免重复操作，而第一预设间距和第二预设间距越大，则可以保证用户可以快速进行操作，提高使用体验。

S26、生成起始控件指向最终控件的指向线，并生成起始控件指向最终控件的数据流转关系，作为关联关系。

在本实施例中，在确定了第二拖拽操作对应的起始控件和最终控件后，可以生成一条起始控件到最终控件的指向线，方便用于直观观察所关联的两个编译控件，并可以确定是否关联错误，然后生成从起始控件指向最终控件的数据流转关系作为上述实施例中的关联关系。

在本实施例中，本方案通过设定第一预设间距和第二预设间距，使得与第二拖拽操作的起始点最近的编译控件和与最终点最近的编译控件的间距必须在保持在第一预设间距和第二预设间距之内，保证用户操作的有效性，同时，可以避免识别到无意识的拖拽行为，并根据这些无效行为对编译控件进行排布，提高排布效率。

在本实施例中，当起始控件和最终控件均确定后，可以对两个控件进行关联，而若是出现起始触控点和与起始触控点的间距最小的编译控件之间的间距大于第一预设间距，或者，最终触控点和与最终触控点的间距最小的编译控件之间的间距大于第二预设间距，可以判定这个第二拖拽行为无效，将第二拖拽操作删除。

如图4所示，本发明实施例提供了一种可视化编译方法。参照图4，编译方法包括如下步骤：

S31、获取对每个预定控件执行的第一拖拽操作，根据第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置。

在本实施例中，有关步骤S31，详细可参见步骤S11中的描述，本实施例在此不再赘述。

S32、获取对编译控件的预设位置之间的第二拖拽操作，根据第二拖拽操作对相应的编译控件进行关联，并生成关联关系。

在本实施例中，有关步骤S32，详细可参见步骤S12中的描述，本实施例在此不再赘述。

S33、获取对编译控件的点击操作，根据点击操作弹出对编译控件的属性配置面板，并根据属性配置面板中输入的信息对编译控件配置属性信息。

在本实施例中，有关步骤S33，详细可参见步骤S13中的描述，本实施例在此不再赘述。

S34、根据可视化图表中的各个编译控件获取对应的预设的代码模板。

在本实施例中，可以从数据库或者服务端中获取各个编译控件对应的代码模板，比如，条件分支控件就是常见的if else逻辑代码，页面跳转控件就是系统提供的页面跳转代码，其他控件也会有相应的代码模板。

S35、根据代码模板、编译控件之间的关联关系和编译控件的属性信息生成编译代码。

在本实施例中，结合代码模板、编译控件之间的关联关系和编译控件的属性信息得到该编译代码，以条件分支控件为例，if else逻辑代码的判断条件就是针对条件分支控件所添加的属性，if else逻辑代码满足条件后所运行的代码就是符合条件的条件分支所关联的编译控件对应的代码，以页面跳转控件为例，页面跳转的方式就是对页面跳转控件所添加的属性，跳转之后的页面就是页面跳转控件所关联的控件对应的代码。

在本实施例中，由于不同的控件其对应的代码都具有相应的运行特点，只需针对每个控件开发相应的代码模板，在可视化编译过程中添加属性和关联关系，在拿到最终的可视化图表后，将相应的的属性和关联关系对代码模板分别按照相应的规则进行补充，即可得到完成相应功能的代码块。

在一个具体的实施例中，本方案还提供了了一种可视化编译方法，与上述实施例的可视化编译方法相比，编译方法还包括：当接收到一键添加结束控件图标的点击操作时，获取可视化图表中各个编译控件的关联关系，并根据关联关系生成相应的关联关系链路，判断是否存在关联关系链路的最后是否是结束控件，若存在任一关联关系链路的最后不是结束控件，则在对应关联关系链路生成相应的结束控件，并将该关联关系链路最后的编译控件与结束控件进行关联。

如图5所示，在本实施例中，不仅仅是一件添加结束控件的图标，还包括：显示网格图标、自动对齐图标、定位图标、变量管理图标、截图图标和控件组合图标，分别为可视化编译工作提供不同的快速服务按钮，以提高编译效率。

比如，自动对齐被点击后，可以将各个编译控件按树状图的形式进行排布，以便于用户进行观看，只需限定各个编译控件之间的间距，然后将同一层级的编译控件放置在同一层即可。

比如，控件组合图标被点击后，可以将已完成的部分编译控件记性组合，以实现同步拖拽，提高编译效率。

如图6所示，本发明实施例提供了一种可视化编译装置，编译装置包括：第一处理单元11、第二处理单元12、第三处理单元13、属性配置单元14和编译单元15。

在本实施例中，第一处理单元11，用于获取对每个预定控件执行的第一拖拽操作，根据第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置；

在本实施例中，第二处理单元12，用于获取对编译控件的预设位置之间的第二拖拽操作，根据第二拖拽操作对相应的编译控件进行关联，并生成关联关系；

在本实施例中，第三处理单元13，用于获取对编译控件的点击操作，根据点击操作弹出对编译控件的属性配置面板；

在本实施例中，属性配置单元14，用于根据属性配置面板中输入的信息对编译控件配置属性信息；

在本实施例中，编译单元15，用于根据编译完成的可视化图表生成编译代码。

在本实施例中，第二处理单元12，具体用于获取第二拖拽操作的起始触控点和最终触控点；判断起始触控点和与起始触控点的间距最小的编译控件之间的间距是否小于第一预设间距；当起始触控点和与起始触控点的间距最小的编译控件之间的间距小于或等于第一预设间距时，将与起始触控点的间距最小的编译控件作为起始控件；判断最终触控点和与最终触控点的间距最小的编译控件之间的间距是否小于第二预设间距；当最终触控点和与最终触控点的间距最小的编译控件之间的间距小于或等于第二预设间距时，将与最终触控点的间距最小的编译控件作为最终控件；生成起始控件指向最终控件的指向线，并生成起始控件指向最终控件的数据流转关系，作为关联关系。

在本实施例中，第二处理单元12，还用于当起始触控点和与起始触控点的间距最小的编译控件之间的间距大于第一预设间距，或者，最终触控点和与最终触控点的间距最小的编译控件之间的间距大于第二预设间距时，将第二拖拽操作删除。

在本实施例中，编译单元15，具体用于根据可视化图表中的各个编译控件获取对应的预设的代码模板；根据代码模板、编译控件之间的关联关系和编译控件的属性信息生成编译代码。

在本实施例中，编译装置还包括：运行可视化单元，用于获取编译代码运行时，各个编译控件对应的代码模板的访问次数和故障次数；在可视化图表上，根据编译控件之间的关联关系，在编译控件之间添加相应的访问次数和故障次数。

在本实施例中，编译装置还包括：快捷功能单元，快捷功能单元包括：显示网格图标、自动对齐图标、定位图标、变量管理图标、一键添加结束控件图标、截图图标和控件组合图标。

快捷功能单元，具体用于当接收到一键添加结束控件图标的点击操作时，获取可视化图表中各个编译控件的关联关系，并根据关联关系生成相应的关联关系链路，判断是否存在关联关系链路的最后是否是结束控件，若存在任一关联关系链路的最后不是结束控件，则在对应关联关系链路生成相应的结束控件，并将该关联关系链路最后的编译控件与结束控件进行关联。

本发明实施例的装置的功能已经在上述的方法实施例中进行了描述，故本实施例的描述中未详尽之处，可以参见前述实施例中的相关说明，在此不做赘述。

如图7所示，本发明实施例提供了一种电子设备，包括处理器1110、通信接口1120、存储器1130和通信总线1140，其中，处理器1110，通信接口1120，存储器1130通过通信总线1140完成相互间的通信；

存储器1130，用于存放计算机程序；

处理器1110，用于执行存储器1130上所存放的程序时，实现如下所示的方法：

获取对每个预定控件执行的第一拖拽操作，根据第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置；

获取对编译控件的预设位置之间的第二拖拽操作，根据第二拖拽操作对相应的编译控件进行关联，并生成关联关系；

获取对编译控件的点击操作，根据点击操作弹出对编译控件的属性配置面板，并根据属性配置面板中输入的信息对编译控件配置属性信息；

根据编译完成的可视化图表生成编译代码。

上述电子设备提到的通信总线可以是外设部件互连标准(PeripheralComponentInterconnect，简称PCI)总线或扩展工业标准结构(ExtendedIndustryStandardArchitecture，简称EISA)总线等。该通信总线1140可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括随机存取存储器(RandomAccessMemory，简称RAM)，也可以包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(CentralProcessingUnit，简称CPU)、网络处理器(NetworkProcessor，简称NP)等；还可以是数字信号处理器(DigitalSignalProcessing，简称DSP)、专用集成电路(ApplicationSpecificIntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-ProgrammableGateArray，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述中任一项的可视化编译方法的步骤。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本发明实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘SolidStateDisk(SSD))等。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种可视化编译方法，其特征在于，所述编译方法包括：

获取对每个预定控件执行的第一拖拽操作，根据所述第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置；

获取对所述编译控件的预设位置之间的第二拖拽操作，根据所述第二拖拽操作对相应的编译控件进行关联，并生成关联关系；

获取对编译控件的点击操作，根据所述点击操作弹出对所述编译控件的属性配置面板，并根据所述属性配置面板中输入的信息对所述编译控件配置属性信息；

根据编译完成的可视化图表生成编译代码。

2.根据权利要求1所述的编译方法，其特征在于，所述获取对所述编译控件的预设位置之间的第二拖拽操作，根据所述第二拖拽操作对相应的编译控件进行关联，并生成关联关系，包括：

获取所述第二拖拽操作的起始触控点和最终触控点；

判断所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距是否小于第一预设间距；

当所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距小于或等于第一预设间距时，将与所述起始触控点的间距最小的编译控件作为起始控件；

判断所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距是否小于第二预设间距；

当所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距小于或等于第二预设间距时，将与所述最终触控点的间距最小的编译控件作为最终控件；

生成所述起始控件指向所述最终控件的指向线，并生成所述起始控件指向所述最终控件的数据流转关系，作为关联关系。

3.根据权利要求2所述的编译方法，其特征在于，所述编译方法还包括：

当所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距大于第一预设间距，或者，所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距大于第二预设间距时，将所述第二拖拽操作删除。

4.根据权利要求1所述的编译方法，其特征在于，所述根据编译完成的可视化图表生成编译代码，包括：

根据所述可视化图表中的各个编译控件获取对应的预设的代码模板；

根据所述代码模板、编译控件之间的关联关系和编译控件的属性信息生成所述编译代码。

5.根据权利要求1～4中任一所述的编译方法，其特征在于，所述编译方法还包括：

获取所述编译代码运行时，各个所述编译控件对应的代码模板的访问次数和故障次数；

在所述可视化图表上，根据所述编译控件之间的关联关系，在所述编译控件之间添加相应的访问次数和故障次数。

6.一种可视化编译装置，其特征在于，所述编译装置包括：

第一处理单元，用于获取对每个预定控件执行的第一拖拽操作，根据所述第一拖拽操作将相应的预定控件作为编译控件拖拽到可视化图表的相应位置；

第二处理单元，用于获取对所述编译控件的预设位置之间的第二拖拽操作，根据所述第二拖拽操作对相应的编译控件进行关联，并生成关联关系；

第三处理单元，用于获取对编译控件的点击操作，根据所述点击操作弹出对所述编译控件的属性配置面板；

属性配置单元，用于根据所述属性配置面板中输入的信息对所述编译控件配置属性信息；

编译单元，用于根据编译完成的可视化图表生成编译代码。

7.根据权利要求6所述的编译装置，其特征在于，第二处理单元，具体用于获取所述第二拖拽操作的起始触控点和最终触控点；判断所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距是否小于第一预设间距；当所述起始触控点和与所述起始触控点的间距最小的编译控件之间的间距小于或等于第一预设间距时，将与所述起始触控点的间距最小的编译控件作为起始控件；判断所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距是否小于第二预设间距；当所述最终触控点和与所述最终触控点的间距最小的编译控件之间的间距小于或等于第二预设间距时，将与所述最终触控点的间距最小的编译控件作为最终控件；生成所述起始控件指向所述最终控件的指向线，并生成所述起始控件指向所述最终控件的数据流转关系，作为关联关系。

8.根据权利要求6或7所述的编译装置，其特征在于，所述编译装置还包括：运行可视化单元，用于获取所述编译代码运行时，各个所述编译控件对应的代码模板的访问次数和故障次数；在所述可视化图表上，根据所述编译控件之间的关联关系，在所述编译控件之间添加相应的访问次数和故障次数。

9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-5中任一项所述的可视化编译方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-5任一项所述的可视化编译方法的步骤。

Images