实现图形化无代码开发用户界面的方法、计算机设备、存储介质与流程

1.本发明涉及计算机技术领域，尤其涉及一种实现图形化无代码开发用户界面的方法、计算机设备、存储介质。


背景技术：

2.当计算机程序开发团队(例如，一个或多个设计架构师、开发者、程序员、编码员等)开始实施如应用(application,app)之类的计算机程序开发时，开发团队与需求者进行沟通，然后利用制图软件创建计算机程序的示意图(例如，业务流程图、架构图等示意图)，并将图形传递给对应的开发者(例如，编码员、程序员)。然后，开发者需要花费相当长的时间来审阅这些示意图以识别设计架构中的各方面(例如，组件、组件的结构、组件的交互和/或组件的行为)。在审阅设计架构之后，开发者开始为计算机程序创建代码结构(例如，从头开始编写代码)。
3.然而，在创建代码结构的同时，开发者不知道和/或不熟悉需求者的业务场景，无法深入全面的理解企业的业务需求，往往无法开发出适用需求者的应用软件。


技术实现要素：

4.本发明提供一种实现图形化无代码开发用户界面的方法、计算机设备、存储介质，开发者只需要创建出示意图，即可生成所需的软件的用户界面，无需创建代码，更容易达到需求。
5.第一方面，本发明提供一种实现图形化无代码开发用户界面的方法，该方法包括：
6.根据用户界面软件开发所采用的预设处理逻辑编程语句框架和所述预设处理逻辑编程语句框架所需页面元素生成构建用户界面所需的事件流组件图形和页面组件图形；
7.响应用户对所述页面组件图形和预设所述事件流组件图形的操作，根据预设配置规则对应配置出事件流示意图，所述事件流示意图包括互连的节点、和各节点所需的页面元素，其中，所述事件流组件与所述节点相关联，所述节点与所述事件流编程语句框架相关联，所述页面元素采用树形存储结构进行存储；
8.根据预设解析规则对所述事件流示意图进行解析得出对应的配置信息，所述配置信息包括各节点信息、各节点所配置的页面元素、和各节点的顺序关系；以及
9.根据所述配置信息和所述预设处理逻辑编程语句框架生成计算机可执行代码。
10.第二方面，本发明还提供一种计算机设备，所述计算机设备包括：
11.存储器，所述存储器用于存储计算机可执行程序；以及
12.处理器，所述处理器用于执行所述可执行程序以实现上述图形化无代码开发用户界面的方法。
13.第三方面，本发明提供一种存储介质，所述存储介质用于存储计算机可执行程序，所述计算机可执行程序由处理器执行以实现上述图形化无代码开发用户界面的方法。
14.上述实现图形化无代码开发用户界面的方法、计算机设备、存储介质，可以供用户配置的事件流示意图，并可以根据事件流示意图生成与用户界面相对应的可执行代码，无需创建代码，更容易达到需求。
附图说明
15.图1为本发明第一实施例提供的图形化无代码开发用户界面的系统架构图。
16.图2为本发明第一实施例提供的实现图形化无代码开发用户界面的方法的流程示意图。
17.图3为本发明第一实施例提供的配置界面的示意图。
18.图4为本发明实施例提供的树形存储结构示意图。
19.图5为本发明第一实施例提供的实现图形化无代码开发用户界面的方法子流程示意图。
20.图6为本发明第实施例提供的前端软件开发的可视化图形示意图。
21.图7为本发明第二实施例提供的配置界面的示意图。
22.图8为本发明第二实施例提供的实现图形化无代码开发用户界面的方法子流程图示意图。
23.图9为本发明第二实施例提供的实现图形化无代码开发用户界面的方法的流程示意图。
24.图10为本发明第三实施例提供的实现图形化无代码开发用户界面的方法的部分流程示意图。
25.图11为本发明第三实施例提供的配置界面的示意图。
26.图12为本发明实施例提供的一种计算机设备的结构示意图。
27.本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
28.为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
29.本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
30.需要说明的是，在本发明中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技
术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。
31.请参看图1，其为第一实施例提供的图形化无代码开发用户界面的系统架构图。图形化无代码开发用户界面的系统1000包括客户端1001和后台服务器端 1002。后台服务器端1002通过网络与客户端1001通讯。在本实施例中，后台服务器端1002根据客户端1001的启动请求显示相应用户界面于客户端1001供用户配置对应的示意图。客户端1001用于响应用户操作产生对应的操作指令并传送给后台服务器端1002。后台服务器端1002响应该操作指令执行实现图形化无代码开发用户界面的程序以实现图形化无代码开发用户界面，进而生成用户所期望的用户界面。在一些可行的实施例中，实现图形化无代码开发用户界面的程序也可以执行于客户端1001中以实现图形化无代码开发用户界面。在本实施例中，客户端1001和服务器端1002分别为执行图形化无代码软件开发程序客户端和服务器端程序的计算机设备。计算机设备可以为平板电脑、台式计算机、笔记型计算机。计算机设备可以装载有或等操作系统。
32.请参看图2，其为第一实施例提供的实现图形化无代码开发用户界面的方法流程示意图。实现图形化无代码开发用户界面的方法包括下面步骤。
33.步骤s201，服务器端1002根据用户界面软件开发所采用的预设处理逻辑编程语句框架和处理逻辑编程语句框架所需页面元素生成构建用户界面所需的事件流组件图形和页面组件图形。可以理解地，用户界面设计主要包括各静态页面和各静态页面的处理逻辑(事件流)。各静态页面和各静态页面的处理逻辑结合可实现人机交互效果。各静态页面中包含所展示的页面元素，页面元素可以为容器、输入框、按钮、图片、文本框、或者开关等。事件流用于在各节点对各页面元素进行处理以及处理各节点之间顺序关系，从而实现静态页面在进行人机交互的动态变化过程。
34.如图3所示，该事件流组件图形31和页面组件图形32显示于客户端1001。在本实施例中，将对页面元素进行特定的处理转换成对应的事件流组件图形31。将页面元素转换成对应的页面组件图形32。进一步理解，将开发用户界面软件中，采用某一编程语句框架来表达页面元素的逻辑处理转换为采用对应的事件流组件图形31来表达。采用某一编程语句框架来表达页面元素转换为采用页面组件图形32来表达。各节点之间顺序关系通过互连节点来表示。每一个节点用于表示对某一事件，即在该节点，对输入的页面元素(页面情报)进行特定的处理形成对应输出页面元素(页面情报)，且该输出页面元素可以作为与该节点下一个节点的输入页面元素。
35.步骤s203，服务器端1002响应用户对页面组件图形32和事件流组件图形 31的操作，根据预设的配置规则对应配置出事件流示意图12。该事件流示意图12包括互连的节点121、和各节点121所需的页面元素123。其中，该事件流组件图形31与节点121相关联，节点121与事件流编程语句框架相关联，页面元素123采用树形存储结构进行存储。可以理解地，事件流示意图12即为由一个或者多个互连节点组成的图。在本实施例中，互连节点图也采用表示一定顺序关系的流程图来展示。在本实施例中，该页面元素123采用树形存储结构t进行存储。
36.针对一个对象而言，用树形结构进行分解，可以无限极地进行分解，即可以涵盖业
务场景中所需对象情报的情报要素。如图4所示树形图t。例如，在刻画某一国家政府时，可以按照树形结构划分，则可以划分至具体的某一个小组，如一个家庭。
37.流程图可以反应一个对象从一个节点到下一个节点的变化过程，如图5所示，流程图包含图形301、图形之间的配置线302、以及图形或者配置线上的内容303。其中，每个图形301相当于页面事件流中的一个节点，而配置线302可以展现出页面从一个节点到下一个节点关联关系，内容303为所需的页面元素。也可以说，流程图中的图形301、图形之间的配置线302、页面元素可以展现出页面从一个节点到下一个节点的变化过程。
38.在应用软件开发用户界面的场景中，处理的对象是页面。对页面的逻辑处理就是用程序设计语言来描述一个或者多个页面从一个节点到下一个节点的处理变化过程，即描述在一个节点根据所需的页面情报进行处理后产生下一个节点所需的页面情报。由于每个节点所需的页面情报可以通过页面元素来表示，且页面元素又采用树形结构，因此，可以将每一个节点所需的页面都进行完整刻画。而对页面逻辑处理通过流程图表示，可以反映出页面的动态变化过程。因此，用户界面的编程语句和编程语句所需页面可以通过树形存储结构的页面元素和用流程图表示的变化过程进行组合来表达出。
39.步骤s205，根据预设解析规则对该事件流示意图进行解析得出对应的配置信息，该配置信息包括各节点信息、各节点所配置的页面元素、和各节点的顺序关系。具体地，预设解析规则包括如何确定事件流示意图中节点之间的顺序、如何确定需要调用的编程语句框架、如何确定节点中的页面情报。该配置信息用于表示各节点需要调用的编程语句框架、各节点之间的顺序、和各节点的页面情报。其中，事件流节点还包括后台数据处理逻辑。配置信息包括如何确定调用的后台数据处理逻辑。可以理解地，预设解析规则和预设配置规则相对应。不同的功能的节点其预设解析规则也不同。
40.步骤s207，根据所述配置信息和预设处理逻辑编程语句框架生成计算机可执行代码。服务器端1002根据配置信息调用各节点对应的编程语句框架，根据配置信息将对应的页面情报要素加载于节点对应的编程语句框架中组成编程语句，根据配置信息中的顺序进行排序形成计算机可执行代码。在本实施例中，可执行代码为可执行文件，如.class文件。
41.请结合参看图6和图7，图6为步骤s203的子流程示意图。预设配置规则包括图形化规则和嵌套规则。响应用户对该页面组件图形和事件流组件图形的操作对应配置出事件流示意图，具体包括：
42.步骤s601，服务器端1002提供事件流配置区。该页面配置区为服务器端 1002接收到用户开发软件用户界面的指令时输出。在一些可行的实施例中，该实现图形化无代码开发用户界面的程序为一个独立的应用程序，则该实现图形化无代码开发用户界面的程序启动时，则该页面配置区显示于客户端1001的用户界面1003中。在一些可行的实施例中，该实现图形化无代码开发用户界面的程序仅为某一应用程序中一个程序块，则当用户选择启动该图形化无代码开发用户界面的程序时，则该事件流配置区即显示于客户端1001的用户界面1003 中。
43.步骤s603，服务器端1002检测用户操作的事件流组件图形32对应事件流配置区的第一位置。其中，用户操作包括拖拽事件流组件图形32、移动事件流组件图形32等。如图7所示，例如，当用户拖拽某一事件流组件图形32于事件流配置区61的a区域，则服务器端1002检测到a区域。
44.步骤s605，服务器端1002根据该图形化规则和该第一位置再相对应生成可视化的事件流节点于第一位置。如图7所示，服务器端1002在a区域生成与该事件流组件图形32相对应的事件流节点62。
45.步骤s607，服务器端1002响应用户对事件流节点的连接操作，将事件流节点对应地进行连接。如图7所示，当用户对事件流节点62a和62b进行连接操作时，则生成连接事件流节点62a和62b的配置线64将事件流节点62a和62b 进行连接。在一些可行的实施例中，配置线64为直线。在一些可行的实施例中，配置线64也可以利用其他的图示，如圆形，箭头等替换，在此不做限定。
46.在一些可行的实施例中，树形的页面元素可以预先构建。在一些可行的实施例中，树形的页面元素可以通过本发明提供的构建方式来构建。可以理解，即，该方法还包括：响应用户对页面图形操作，配置页面元素的存储数据结构。
47.请参看图8，具体地，响应用户对页面图形操作，配置页面元素的存储数据结构具体包括下面步骤。
48.步骤s801，提供页面配置区。请再次参看图7，在本实施例中，事件流配置区61和页面配置区63纵向排列于用户界面中。
49.步骤s803，检测操作的页面组件图形对应页面配置区的第二位置。其中，用户操作包括拖拽页面组件图形31、移动事件流组件图形32等。如图7所示，例如，当用户拖拽某一拖拽页面组件图形31于页面配置区63的b区域，则服务器端1002检测到b区域。
50.步骤s805，根据图形化规则和第二位置生成可视化页面元素于相对应的第二位置，可视化页面元素构成静态页面。在本实施例中，将页面元素展示于页面配置区63，从而可以供用户查看静态页面的整体效果，使得人机交互更加友好。
51.步骤s807，根据对应的第二位置和预设的嵌套规则配置出各静态页面的数据存储结构。具体地，嵌套规则用于表示各页面元素的存储结构，例如，哪些页面元素是属于同一页面；页面(含一个或者多个页面元素)和页面之间是主从关系还是并列关系；在一个页面中，页面元素之间的存储关系。各静态页面的数据存储结构为页面与页面之间的数据存储关系以及各静态页面的页面元素与页面元素之间的数据存储关系。在本实施例中，预设的配置规则中包含将页面配置区 63根据树形存储结构划分成不同的区域。当用户拖拽不同的页面组件图形31于相应的区域时，即可确定各页面元素之间的嵌套关系，例如，父子关系，并列关系等，从而形成出各静态页面的页面元素和页面元素之间的数据存储关系。对于页面和页面之间的数据存储关系，可以在创建每一页面时提供相应的机制，以实现页面的树形存储关系，如图7所示的页面布局33。每创建一个页面时，引导用户建立页面和已存在的页面之间为父子关系还是并列关系。
52.在一些可行的实施例中，页面元素的树形的数据存储结构可以通过定义的方式进行设置。例如，通过一个或者多个表格的方式定义出页面元素的树形的数据存储结构。
53.在一些可行的实施例中，在创建页面元素的属性数据存储结构时，也可以不对页面元素进行图形化显示，即，不显示页面所需的页面元素，而是通过一些符号或者图标显示即可。
54.请参看图9，在一些可行的实施例中，为了实现在不同的终端中皆可以执行由该方法实现的用户界面软件。该方法还提供多种预设的编程语句框架。例如，根据终端所运行的
环境，例如，终端在ios环境下运行，则设置为ios环境下可运行的编程语句框架。又例如，终端在android环境下运行，则设置为android 环境下可以运行的编程语句框架。具体地，该方法还包括步骤s901，服务器端 1002接收用户输入的运行环境配置信息。在本实施例中，提供对应的配置界面 (图未示)，以供用户输入运行环境配置信息。
55.其中，步骤s207包括：
56.步骤s903，服务器端1002根据用户输入的运行环境配置信息选择相对应的预设编程语句框架；
57.步骤s905，服务器端1002根据配置信息和所选择的预设编程语句框架生成计算机可执行代码。
58.请参看图10，在一些可行的实施例中，为了对用户进行配置指导，以方便用户快捷地配置出所需的用户界面，该方法还包括下面步骤。
59.步骤s1001，服务器端1002检测用户的配置操作是否准确。例如，按照预设的编程语句框架下，所需的页面元素，处理逻辑等都具有一定的规则。例如，在配置事件流示意图时，事件流节点可以配置多少条线，或者接收输入的页面元素为哪些，都需要满足预设的配置规则。
60.步骤s1003，服务器端1002根据检测结果确定是否响应用户的操作配置出事件流示意图。在本实施例中，如果检测结果为用户的配置操作不准确，则未响应用户操作进行配置，反之，响应用户操作实现对应的配置。在本实施例中，如果检测结果为用户的配置操作不准确还输出对应的提示信息给用户。
61.在一些可行的实施例中，该方法还包括步骤：接收用户输入对各可视化页面元素的配置指令，提供相对应的图形化控件以供用户配置可视化页面元素的属性，以配置可视化页面元素的样式。如图11所示，在页面配置区61中显示的页面元素203可以供用户操作进行配置属性。例如，用户点击所需配置的页面元素样式，则可以在页面配置区63一侧显示对应的配置控件供用户操作。配置控件可以为但不限于输入框630、滑块631、开关632等。
62.请参看图12，其为实施例提供的计算机设备800的内部结构示意图。计算机设备800包括存储器801、处理器802和总线803。
63.其中，存储器801至少包括一种类型的可读存储介质，该可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、磁性存储器、磁盘、光盘等。存储器801在一些实施例中可以是计算机设备800的内部存储单元，例如计算机设备800的硬盘。存储器801在另一些实施例中也可以是的外部计算机设备800存储设备，例如计算机设备800上配备的插接式硬盘，智能存储卡(smart media card,smc)，安全数字(secure digital,sd)卡，闪存卡 (flash card)等。进一步地，存储器801还可以既包括计算机设备800的内部存储单元也包括外部存储设备。存储器801不仅可以用于存储安装于计算机设备800的应用软件及各类数据，例如实现图形化无代码开发用户界面的方法的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。
64.总线803可以是外设部件互连标准(peripheral component interconnect，简称 pci)总线或扩展工业标准结构(extended industry standard architecture，简称eisa) 总线等。该总线可以分为地址总线、数据总线、控制总线等。为便于表示，图12 中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
65.进一步地，计算机设备800还可以包括显示组件804。显示组件804可以是 led显示器、液晶显示器、触控式液晶显示器以及oled(organic light-emittingdiode，有机发光二极管)触摸器等。其中，显示组件804也可以适当的称为显示装置或显示单元，用于显示在计算机设备800中处理的信息以及用于显示可视化的用户界面。
66.进一步地，计算机设备800还可以包括通信组件805，通信组件805可选的可以包括有线通信组件和/或无线通信组件(如wi-fi通信组件、蓝牙通信组件等)，通常用于在计算机设备800与其他计算机设备之间建立通信连接。
67.处理器802在一些实施例中可以是一中央处理器(central processing unit, cpu)、控制器、微控制器、微处理器或其他数据处理芯片，用于运行存储器801 中存储的程序代码或处理数据。具体地，处理器802执行图形化无代码编程程序以实现上述实现图形化无代码软件开发方法。
68.图12仅示出了具有组件801-805以及实现图形化无代码开发用户界面的方法的计算机设备800，本领域技术人员可以理解的是，图12示出的结构并不构成对计算机设备800的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。
69.本发明提供的一种图形化无代码软件开发方法、计算机设备及存储介质，利用树形数据存储结构进行存储的情报要素和流程图组合来实现无代码编程，从而让企业在自主信息建设时无需通过专业人员编写程序设计语言完成所需应用软件，让企业快速低成本的拥有自主信息化建设能力，提升企业在整个市场经济活动中的资源配置效率与合理性。
70.在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。
71.该计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行该计算机程序指令时，全部或部分地产生按照本发明实施例的流程或功能。该计算机设备可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。该计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，该计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl)) 或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。该计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。该可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或者半导体介质(例如固态硬盘solid state disk(ssd))等。
72.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
73.在本技术所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，该单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
74.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的
部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
75.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
76.该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例方法的全部或部分步骤。而前述的存储介质包括： u盘、流动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram， random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
77.需要说明的是，上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。并且本文中的术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
78.以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。