一种基于可视化搭建平台的代码自动生成方法及装置与流程

1.本技术涉及计算机技术领域，尤其涉及一种基于可视化搭建平台的代码自动生成方法及装置。


背景技术：

2.可视化搭建平台是一种软件开发的重要工具，可以让开发者和非开发者(如运营人员)根据项目需求，通过组件拖拉拽的方式绘制网页的web元素，由当前组件生成对应的开发源码。目前的可视化搭建平台主要分为nocode(无代码)形式或lowcode(低代码)形式。
3.但是，由于可视化搭建平台中组件的版本是不固定，无法保证在所有的业务场景中都会很好的支持，所以当前组件直接生成的开发源码可能并不适用当前业务场景。


技术实现要素：

4.本技术提供一种基于可视化搭建平台的代码自动生成方法及装置，以解决现有技术生成的开发源码的适用性较差等缺陷。
5.本技术第一个方面提供一种基于可视化搭建平台的代码自动生成方法，包括：
6.获取非开发者基于可视化搭建平台构建的页面的项目数据；其中，所述项目数据用于表征非开发者对所述可视化搭建平台的操作情况；
7.根据所述项目数据，下载预设的的开发模板和所述非开发者所采用的业务组件；
8.根据所述开发模板和所述非开发者所采用的业务组件，生成当前页面的开发源码。
9.可选的，所述根据所述开发模板和所述非开发者所采用的业务组件，生成当前页面的开发源码，包括：
10.根据所述非开发者所采用的业务组件，确定当前页面的开发数据；
11.基于预设的ejs引擎，根据所述当前页面的开发数据和所述开发模板，生成当前页面对应的开发源码。
12.可选的，所述开发模板为ejs类型文件。
13.可选的，所述当前页面的开发数据至少包括视图主文件。
14.可选的，若在生成当前页面的开发源码的过程中，所述非开发者基于可视化搭建平台对页面进行编辑，所述方法还包括：
15.根据所述非开发者当前编辑的数据，生成对应的逻辑增量；
16.将所述逻辑增量添加到所述当前页面的视图主文件，以供重新生成当前页面对应的开发源码。
17.可选的，当所述非开发者所采用的业务组件包括自定义组件时，所述方法还包括：
18.获取所述自定义组件的组件信息；其中，所述组件信息至少包括当前页面的开发数据和自定义开发模板；
19.基于预设的ejs引擎，根据所述当前页面的开发数据和所述自定义开发模板，生成
所述自定义组件对应的开发源码；
20.将所述自定义组件对应的开发源码添加到所述当前页面的开发源码。
21.可选的，还包括：
22.对所述当前页面的开发源码进行build压缩，以得到对应的压缩文件；
23.将所述压缩文件部署到服务器。
24.本技术第二个方面提供一种基于可视化搭建平台的代码自动生成装置，包括：
25.获取模块，用于获取非开发者基于可视化搭建平台构建的页面的项目数据；其中，所述项目数据用于表征非开发者对所述可视化搭建平台的操作情况；
26.下载模块，用于根据所述项目数据，下载预设的开发模板和所述非开发者所采用的业务组件；
27.生成模块，用于根据所述开发模板和所述非开发者所采用的业务组件，生成当前页面的开发源码。
28.可选的，所述生成模块，具体用于：
29.根据所述非开发者所采用的业务组件，确定当前页面的开发数据；
30.基于预设的ejs引擎，根据所述当前页面的开发数据和所述开发模板，生成当前页面对应的开发源码。
31.可选的，所述开发模板为ejs类型文件。
32.可选的，所述当前页面的开发数据至少包括视图主文件。
33.可选的，若在生成当前页面的开发源码的过程中，所述非开发者基于可视化搭建平台对页面进行编辑，所述生成模块，还用于：
34.根据所述非开发者当前编辑的数据，生成对应的逻辑增量；
35.将所述逻辑增量添加到所述当前页面的视图主文件，以供重新生成当前页面对应的开发源码。
36.可选的，当所述非开发者所采用的业务组件包括自定义组件时，所述生成模块，还用于：
37.获取所述自定义组件的组件信息；其中，所述组件信息至少包括当前页面的开发数据和自定义开发模板；
38.基于预设的ejs引擎，根据所述当前页面的开发数据和所述自定义开发模板，生成所述自定义组件对应的开发源码；
39.将所述自定义组件对应的开发源码添加到所述当前页面的开发源码。
40.可选的，所述装置还包括：
41.部署模块，用于对所述当前页面的开发源码进行build压缩，以得到对应的压缩文件；将所述压缩文件部署到服务器。
42.本技术第三个方面提供一种电子设备，包括：至少一个处理器和存储器；
43.所述存储器存储计算机执行指令；
44.所述至少一个处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行如上第一个方面以及第一个方面各种可能的设计所述的方法。
45.本技术第四个方面提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上第一个方面以及第
一个方面各种可能的设计所述的方法。
46.本技术技术方案，具有如下优点：
47.本技术提供一种基于可视化搭建平台的代码自动生成方法及装置，该方法包括：获取非开发者基于可视化搭建平台构建的页面的项目数据；其中，项目数据用于表征非开发者对可视化搭建平台的操作情况；根据项目数据，下载预设的开发模板和非开发者所采用的业务组件；根据开发模板和非开发者所采用的业务组件，生成当前页面的开发源码。上述方案提供的方法，通过利用通用的开发模板，根据非开发者所采用的业务组件，生成当前页面的开发源码，得到的开发源码可供开发者修改，以避免最终部署的开发源码不满足当前业务场景，解决了当前业务组件直接生成的开发源码并不适用当前业务场景的技术问题，达到了可视化搭建平台中组件可以覆盖各种业务场景的效果。
附图说明
48.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本技术的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
49.图1为本技术实施例基于的网络结构示意图；
50.图2为本技术实施例提供的基于可视化搭建平台的代码自动生成方法的流程示意图；
51.图3为本技术实施例提供的示例性的基于可视化搭建平台的代码自动生成方法的整体流程示意图；
52.图4为本技术实施例提供的模板解析流程图；
53.图5为本技术实施例提供的非开发者和开发者协同流程图；
54.图6为本技术实施例提供的基于可视化搭建平台的代码自动生成装置的结构示意图；
55.图7为本技术实施例提供的电子设备的结构示意图。
56.通过上述附图，已示出本技术明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本技术的概念。
具体实施方式
57.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
58.此外，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。在以下各实施例的描述中，“多个”的含义是两个以上，除非另有明确具体的限定。
59.下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明实施例进行描述。
60.首先，对本技术所基于的网络结构进行说明：
61.本技术实施例提供的基于可视化搭建平台的代码自动生成方法及装置，适用于生成非开发者基于可视化搭建平台构建的页面的开发源码。如图1所示，为本技术实施例基于的网络结构示意图，主要包括可视化搭建平台、oss服务和基于可视化搭建平台的代码自动生成装置。具体地，该装置采集非开发者基于可视化搭建平台构建的页面的项目数据，代码自动生成装置根据得到的项目信息在oss服务下载对应的业务组件，进而结合生成当前页面的开发源码。
62.本技术实施例提供了一种基于可视化搭建平台的代码自动生成方法，用于生成非开发者基于可视化搭建平台构建的页面的开发源码。本技术实施例的执行主体为电子设备，比如服务器、台式电脑、笔记本电脑、平板电脑及其他可用于自动生成代码的电子设备。
63.如图2所示，为本技术实施例提供的基于可视化搭建平台的代码自动生成方法的流程示意图，该方法包括：
64.步骤201，获取非开发者基于可视化搭建平台构建的页面的项目数据。
65.其中，项目数据用于表征非开发者对可视化搭建平台的操作情况。
66.需要说明的是，非开发者具体可以以nocode的方式，基于可视化搭建平台构建的页面。
67.步骤202，根据项目数据，下载预设的开发模板和非开发者所采用的业务组件。
68.需要说明的是，本技术实施例所提供的方法可以基于ci/cd自动集成服务实现，非开发者在可视化搭建平台进行组件的拖拉拽时，可以首先基于当前采用的业务组件，创建gitlab仓库，并分别创建dev(开发)/test(测试)/staging(准生产)/production(生产)各个环境分支，根据服务层存储的各种业务场景下的页面开发模板，克隆code模板(开发模板)到dev分支，直接提交远程仓库并merge(合并)测试分支代码，最后通过merge gitlab-ci执行预设build脚本，以进入开发模板解析阶段。
69.具体地，在开发模板解析阶段，首先根据非开发者基于可视化搭建平台构建的页面的项目数据，确定开发模板，该开发模板具体可以是之前克隆到dev分支的，然后再根据项目信息，判断非开发者具体都采用了哪些业务组件，并在oss服务下载对应版本的业务组件。
70.其中，开发模板可以分为营销模板、活动模板和业务模板等，本技术实施例主要基于业务模板进行方案的阐述。
71.步骤203，根据开发模板和非开发者所采用的业务组件，生成当前页面的开发源码。
72.其中，所生成的开发源码为可执行的源码，在当前下载的业务组件不满足当前业务场景时，在生成可执行源码后，开发人员可以介入开发，使最终源码可以满足当前业务场景。
73.需要说明的是，开发模板仅记录了整体的页面开发框架，此时可以利用非开发者所采用的业务组件，对当前的开发模板进行实质内容的补充，以使补充后的开发模板与非开发者的业务需求相贴合。
74.具体地，在生成源码的过程中首先下载通用源码模板然后根据项目数据下载页面所需对应版本的业务组件并根据项目数据解析页面源码(nocode形式)此时可以生成可编
译、可打包、可部署的项目源码；在当前业务场景所需业务组件不能够满足当前业务需求的同时，开发者可通过(lowcode形式)进行介入开发，解决了由业务组件不支持业务场景的情况；最终生成可编译、可打包、可部署并符合当前业务场景的源码项目。实现了nocode和lowcode两种方式可同时支持同一项目同时生成的每一项目都是为物理文件的方式存在，达到了可视化搭建平台的扩展性、兼容性可覆盖各种业务场景的效果。具体地，在一实施例中，可以根据非开发者所采用的业务组件，确定当前页面的开发数据；基于预设的ejs引擎，根据当前页面的开发数据和开发模板，生成当前页面对应的开发源码。
75.相应的，开发模板为ejs类型文件。
76.其中，当前页面的开发数据至少包括视图(views)主文件，还可以适应性地包括readme(开发流程说明、需求详情信息等)和pagedata(源数据存储，即项目数据)。
77.需要说明的是，ejs引擎是javascript模板库，用来从json数据中生成开发源码，ejs引擎通常可以根据数据和模板生成开发源码。其中，ejs引擎的具体处理方式可以参考现有技术，本技术实施例不做限定。
78.其中，当出现ejs解析后代码不规范的问题时，可以引入prettier进行相应代码风格的格式化操作，有便于提升lowcode阶段代码可读性。
79.在上述实施例的基础上，为了进一步提高本技术实施例提供的代码自动生成方法的灵活性，作为一种可实施的方式，在一实施例中，若在生成当前页面的开发源码的过程中，非开发者基于可视化搭建平台对页面进行编辑，该方法还包括：
80.步骤301，根据非开发者当前编辑的数据，生成对应的逻辑增量；
81.步骤302，将逻辑增量添加到当前页面的视图主文件，以供重新生成当前页面对应的开发源码。
82.具体地，views视图文件可以基于混入(mixin)形式支持逻辑的增量处理，当非开发者再次进行业务组件的拖拉拽时，也就是再次对页面进行编辑时，针对其当前编辑的数据对应的逻辑增量，可以令其以混入形式对之前的视图主文件做增量处理，不会出现覆盖代码的问题。并且，由于本技术实施例得到的开发源码在dev分支，可由开发者管理，开发者此时可以以lowcode的方式，对当前得到的代码进行调整，即本技术实施例达到了支持nocode和lowcode协同作业的效果。
83.在上述实施例的基础上，当非开发者所采用的业务组件包括自定义组件时，为了保证本技术实施例提供的代码自动生成方法可以正常执行，作为一种可实施的方式，在一实施例中，该方法还包括：
84.步骤401，获取自定义组件的组件信息；其中，组件信息至少包括当前页面的开发数据和自定义开发模板；
85.步骤402，基于预设的ejs引擎，根据当前页面的开发数据和自定义开发模板，生成自定义组件对应的开发源码；
86.步骤403，将自定义组件对应的开发源码添加到当前页面的开发源码。
87.具体地，非开发者可以在可视化搭建平台已有的业务组件都不满足其业务需求时，对可视化搭建平台中的自定义组件进行拖拉拽，进而通过对自定义组件进行自主设定，使当前的自定义组件可以满足其业务需求。
88.其中，自定义组件的自定义开发模板与上述开发模板实质意义相同，同样是服务
层存储的各种业务场景下的页面开发模板。
89.具体地，当存在自定义组件时，为了可以将自定义组件对应的开发源码添加到当前页面的开发源码，可以创建自定义组件文件目录并引用在视图主文件views上，进而利用ejs引擎生成对应的开发源码。
90.进一步地，在一实施例中，在得到当前页面的开发源码之后，可以对当前页面的开发源码进行build压缩，以得到对应的压缩文件；将压缩文件部署到服务器。
91.具体地，可以利用预设的脚手架，对当前页面的开发源码进行build压缩，最后发送到服务上进行部署。
92.其中，如图3所示，为本技术实施例提供的示例性的基于可视化搭建平台的代码自动生成方法的整体流程示意图。非开发者搭建平台发布测试，同时搭建平台发布生产，在发布测试后创建项目仓库(gitlab仓库)，并分别创建dev(开发)/test(测试)/staging(准生产)/production(生产)各个环境分支，开发者可以基于dev分支进行代码的自动生成操作。其中，在进行模板解析之前，首先需要按照对应的项目依赖，以保证项目开发可以正常进行。如图3所示的方法具体为如图2所示的方法的一种示例性的实现方式，二者实现原理相同，在此不再赘述。
93.示例性的，如图4所示，为本技术实施例提供的模板解析流程图。具体地，可以根据当前项目(当前页面)的唯一标识(sceneid)，在mongodb服务获取项目数据(getpagedate)，根据得到的项目数据，在oss服务(oss文件服务)获取非开发者所采用的业务组件(download组件)。然后基于ejs引擎，针对视图主文件，解析index.vue主文件入口，在解析主文件入口时，可以在解析标签、分享、请求、样式的同时，动态引入页面所需业务组件和自定义组件，无需开发迭代人员手动介入开发；针对业务组件，通过可视化搭建平台自定义组件来动态生成和引入可执行组件列表；针对项目数据集合(pagedate数据集合)，format数据源用来动态渲染组件；针对readme(开发流程说明、需求详情信息等)，可以得到项目的基本信息、开发流程、维护流程和部署流程等。
94.为了便于本领域技术人员更好地了解本技术实施例提供的方法，如图5所示，为本技术实施例提供的非开发者和开发者协同流程图。对于非开发者进行nocode进入搭建平台罗列组件发布过程，或先创建gitlab仓库并创建开发、测试、准生产、生产分支，通过dev合并测试分支gitlabci进行打包部署流程，此时生成后的代码是在测试环境中(发布生产同理测试环境，流程上差异只在部署服务器前部署生产代码有一层企微审核，保证生产可行性)，对于开发者进行lowcode，首先进入dev(开发分支)执行预设脚本编译模板，此时dev本地同测试分支代码相同，可直接进行lowcode，开发完成需要merge对应环境分支进行发布。对于已经lowcode的项目来说，非开发者再次进入编辑时，由于模板项目在编译时都是做增量的形式处理，所以不会出现覆盖代码的问题，从而可支持nocode和lowcode协同作业，实现了nocode和lowcode的双向流程打通。
95.针对nodecode形式，对比原本页面模块基于的数据模板驱动，在nodecode阶段可以直接得到页面开发源码的物理文件，这样做的好处在于无需引入冗余业务代码、减少数据请求等，降低资源请求并减少包体，这样在性能方面也会有所提升。
96.本技术实施例提供的基于可视化搭建平台的代码自动生成方法，通过获取非开发者基于可视化搭建平台构建的页面的项目数据；其中，项目数据用于表征非开发者对可视
化搭建平台的操作情况；根据项目数据，下载预设的开发模板和非开发者所采用的业务组件；根据开发模板和非开发者所采用的业务组件，生成当前页面的开发源码。上述方案提供的方法，通过利用当前业务场景的开发模板，根据非开发者所采用的业务组件，生成当前页面的开发源码，得到的开发源码可供开发者修改，以避免最终部署的开发源码不满足当前业务场景，解决了当前业务组件直接生成的开发源码并不适用当前业务场景的技术问题，达到了可视化搭建平台中组件可以覆盖各种业务场景的效果。并且，实现了nocode和lowcode的双向流程打通，为提高页面开发效率奠定了基础。
97.本技术实施例提供了一种基于可视化搭建平台的代码自动生成装置，用于执行上述实施例提供的基于可视化搭建平台的代码自动生成方法。
98.如图6所示，为本技术实施例提供的基于可视化搭建平台的代码自动生成装置的结构示意图。该基于可视化搭建平台的代码自动生成装置60包括获取模块601、下载模块602和生成模块603。
99.其中，获取模块，用于获取非开发者基于可视化搭建平台构建的页面的项目数据；其中，项目数据用于表征非开发者对可视化搭建平台的操作情况；下载模块，用于根据项目数据，下载当前预设的开发模板和非开发者所采用的业务组件；生成模块，用于根据开发模板和非开发者所采用的业务组件，生成当前页面的开发源码。
100.具体地，在一实施例中，生成模块，具体用于：
101.根据非开发者所采用的业务组件，确定当前页面的开发数据；
102.基于预设的ejs引擎，根据当前页面的开发数据和当前业务场景的开发模板，生成当前页面对应的开发源码。
103.具体地，在一实施例中，开发模板为ejs类型文件。
104.具体地，在一实施例中，当前页面的开发数据至少包括视图主文件。
105.具体地，在一实施例中，若在生成当前页面的开发源码的过程中，非开发者基于可视化搭建平台对页面进行编辑，生成模块，还用于：
106.根据非开发者当前编辑的数据，生成对应的逻辑增量；
107.将逻辑增量添加到当前页面的视图主文件，以供重新生成当前页面对应的开发源码。
108.具体地，在一实施例中，当非开发者所采用的业务组件包括自定义组件时，生成模块，还用于：
109.获取自定义组件的组件信息；其中，组件信息至少包括当前页面的开发数据和自定义开发模板；
110.基于预设的ejs引擎，根据当前页面的开发数据和自定义开发模板，生成自定义组件对应的开发源码；
111.将自定义组件对应的开发源码添加到当前页面的开发源码。
112.具体地，在一实施例中，该装置还包括：
113.部署模块，用于对当前页面的开发源码进行build压缩，以得到对应的压缩文件；将压缩文件部署到服务器。
114.关于本实施例中的基于可视化搭建平台的代码自动生成装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说
明。
115.本技术实施例提供的基于可视化搭建平台的代码自动生成装置，用于执行上述实施例提供的基于可视化搭建平台的代码自动生成方法，其实现方式与原理相同，不再赘述。
116.本技术实施例提供了一种电子设备，用于执行上述实施例提供的基于可视化搭建平台的代码自动生成方法。
117.如图7所示，为本技术实施例提供的电子设备的结构示意图。该电子设备70包括：至少一个处理器71和存储器72；
118.所述存储器存储计算机执行指令；所述至少一个处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行如上实施例提供的基于可视化搭建平台的代码自动生成方法。
119.本技术实施例提供的一种电子设备，用于执行上述实施例提供的基于可视化搭建平台的代码自动生成方法，其实现方式与原理相同，不再赘述。
120.本技术实施例提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上任一实施例提供的基于可视化搭建平台的代码自动生成方法。
121.本技术实施例的包含计算机可执行指令的存储介质，可用于存储前述实施例中提供的基于可视化搭建平台的代码自动生成方法的计算机执行指令，其实现方式与原理相同，不再赘述。
122.在本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
123.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
124.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。
125.上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本技术各个实施例所述方法的部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
126.本领域技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完
成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
127.最后应说明的是：以上各实施例仅用以说明本技术的技术方案，而非对其限制；尽管参照前述各实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本技术各实施例技术方案的范围。