CN111273900A - 基于gitlab实时代码共享的在线拖拽编码生成方法 - Google Patents

Abstract

本申请实施例提出了基于gitlab实时代码共享的在线拖拽编码生成方法，包括根据代码编译需求判断是否需要同步gitlab项目信息；如果不需要同步，则实时采集用户的拖拽行为，选取拖拽行为选取当前组件对应的目标组件，对目标组件是否为可嵌套组件进行判断；如果目标组件为可嵌套组件，则判断组件的嵌套层级并根据嵌套层级进行组件嵌套操作；如果目标组件为非可嵌套组件，则按预设规则将当前组件从目标组件中划出；完成一次组件拖拽排序之后，更新组件信息树，更新组件代码。通过可视化操作组件的方式减少前端开发人员重复繁琐的编码工作，将更多的时间和精力用在组件之外的逻辑和数据处理上，从而达到提高开发效率和减少因组件编码产生错误的可能。

Description

基于gitlab实时代码共享的在线拖拽编码生成方法

技术领域

本实施例属于数据库管理领域，尤其涉及基于gitlab实时代码共享的在线拖拽编码生成方法。

背景技术

目前，软件公司和和联网公司在进行软件开发时都采用前后端分离的方式分别进行开发。

对于开发而言，后端开发负责对数据的提供和存储，前端开发负责数据暂时和用户交互。现在越来越多的软件系统本质上就是各种数据和组件的结合，系统的组件类型有限，不同系统的区别就是组件和数据不同组合。而对于前端开发人员而言，每次都需要进行大量的重复编码工作，这些重复的工作需要花费开发人员大量的时间。对于产品经理和市场专员等其他职能人员而言，他们懂市场、懂用户同时也懂软件。但是经常在和开发人员进行沟通的时候往往会出现信息传递偏差，导致最终前端开发人员做出来的产品不是产品经理他们所需要的。从而需要返工，并且这样多次返工会大大浪费开发资源。

发明内容

为了解决现有技术中存在的缺点和不足，本实施例提出了基于gitlab实时代码共享的在线拖拽编码生成方法，通过可视化操作组件的方式减少前端开发人员重复繁琐的编码工作，节省开发资源。

具体的，本实施例提出的基于gitlab实时代码共享的在线拖拽编码生成方法，所述在线拖拽编码生成方法包括：

步骤一，根据代码编译需求判断是否需要同步gitlab项目信息；

步骤二，如果不需要同步，则实时采集用户的拖拽行为，选取拖拽行为选取当前组件对应的目标组件，对目标组件是否为可嵌套组件进行判断；

步骤三，如果目标组件为可嵌套组件，则判断组件的嵌套层级并根据嵌套层级进行组件嵌套操作；

步骤四，如果目标组件为非可嵌套组件，则按预设规则将当前组件从目标组件中划出；

步骤五，完成一次组件拖拽排序之后，更新组件信息树，更新组件代码。

可选的，所述在线拖拽编码生成方法，包括：

如果需要同步gitlab项目信息，则对待同步的gitlab项目信息进行配置；

基于配置结果判断是否需要作为子组件使用，如果判断需要，则执行步骤二所示的内容，如果判断不需要，则调用操作组件API，进行组件导出操作。

可选的，所述则判断组件的嵌套层级并根据嵌套层级进行组件嵌套操作，包括：

获取每个组件的嵌套层级标记；

按嵌套层级标记由大到小的顺序进行组件嵌套操作。

可选的，所述则按预设规则将当前组件从目标组件中划出，包括：

判断松开鼠标时候当前组件相对于目标组件的初始位置；

基于初始位置确定当前组件相对于目标组件的划出位置，将当前组件以初始位置向划出位置的连线作为路径划出。

可选的，所述判断松开鼠标时候当前组件相对于目标组件的初始位置，包括：

将目标组件划分为4个部分，对于这4个部分组件将分别会排序到目标组件的上、下、左、右方。

可选的，所述在线拖拽编码生成方法，还包括：

借助设计器实现步骤三中的组件嵌套操作。

可选的，所述设计器为承载用户对于组件及模板的交互操作、组件展示布局操作的容器。

可选的，所述设计器包括外部设计器以及内部设计器；

其中，外层设计器提供设计器本身的右键操作功能，同时提供响应功能模板的展示行为，所述展示行为包括：组件列表面板的显示和隐藏，属性设置面板的显示和隐藏，捕获有效操作元素，识别组件类型，提供拖拽占位符；

内层设计器提供设计器内部组件的操作功能，所述操作功能包含组件渲染，组件拖拽，组件嵌套，组件重新排序，组件位置识别。

可选的，所述在线拖拽编码生成方法，还包括：

借助组件信息树对设计器组件样式行为的具体代码描述方式进行限定。

可选的，所述组件信息树具体包括：

组件的名称和ID信息；基于elementUI组件库所提供的组件所有组件属性和方法及单个组件实例具体操作后的值信息；组件相对于设计器的具体位置信息；组件的模板信息；组件的样式信息；组件的所有嵌套子组件的信息，子组件同时包含以上5条信息。

本实施例提供的技术方案带来的有益效果是：

通过可视化操作组件的方式减少前端开发人员重复繁琐的编码工作，将更多的时间和精力用在组件之外的逻辑和数据处理上，从而达到提高开发效率和减少因组件编码产生错误的可能。简洁清晰的可视化操作逻辑，能让产品经理和市场专员等其他非开发人员也参与到软件的设计中去。实际上在产品经理和市场专员等角色进入软件开发流程中去的时候已经解决掉了一部分组件编码的工作，这样不仅能为开发人员节省时间，也能减少因为沟通反馈产生的时间浪费。

附图说明

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

图1为本申请实施例提出的基于gitlab实时代码共享的在线拖拽编码生成方法的流程示意图。

具体实施方式

为使本实施例的结构和优点更加清楚，下面将结合附图对本实施例的结构作进一步地描述。

实施例一

本实施例提出的基于gitlab实时代码共享的在线拖拽编码生成方法，如图1所示，所述在线拖拽编码生成方法包括：

步骤一，根据代码编译需求判断是否需要同步gitlab项目信息；

步骤二，如果不需要同步，则实时采集用户的拖拽行为，选取拖拽行为选取当前组件对应的目标组件，对目标组件是否为可嵌套组件进行判断；

步骤三，如果目标组件为可嵌套组件，则判断组件的嵌套层级并根据嵌套层级进行组件嵌套操作；

步骤四，如果目标组件为非可嵌套组件，则按预设规则将当前组件从目标组件中划出；

步骤五，完成一次组件拖拽排序之后，更新组件信息树，更新组件代码。

在实施中，通过可视化操作组件的方式减少前端开发人员重复繁琐的编码工作，将更多的时间和精力用在组件之外的逻辑和数据处理上，从而达到提高开发效率和减少因组件编码产生错误的可能。简洁清晰的可视化操作逻辑，能让产品经理和市场专员等其他非开发人员也参与到软件的设计中去。实际上在产品经理和市场专员等角色进入软件开发流程中去的时候已经解决掉了一部分组件编码的工作，这样不仅能为开发人员节省时间，也能减少因为沟通反馈产生的时间浪费。

本实施例根据提出的拖拽能力、嵌套排序、属性设置、组件代码编辑、gitlab项目地址配置、api接口管理和项目代码片段操作等一系列解决方案，可达到优化现有项目开发效率的目的。同时本实施例又能优化现有项目开发流程，让产品经理、市场专员等非开发角色参与到项目开发中来，从而达到节约沟通成本、减少沟通时间的目的。

可选的，所述在线拖拽编码生成方法，包括：

如果需要同步gitlab项目信息，则对待同步的gitlab项目信息进行配置；

基于配置结果判断是否需要作为子组件使用，如果判断需要，则执行步骤二所示的内容，如果判断不需要，则调用操作组件API，进行组件导出操作。

在实施中，通过打通gitlab等第三方代码托管平台来达到方便多人协作开发的目的。操作人员在进行可视化操作之后，不仅可以一键将代码导出保存在计算机本地，还能一键将代码同步到提前配置好的代码托管平台上去。这样不仅方便自己下次继续进行开发，还能方便项目组其他成员在原有代码基础上继续开发。统一的配置和部署，不仅解放了传统开发中分布式代码版本管理的繁琐操作，同时集中式代码托管开发也能让项目更加高效稳定的进行协作开发迭代。

可选的，所述则判断组件的嵌套层级并根据嵌套层级进行组件嵌套操作，包括：

获取每个组件的嵌套层级标记；

按嵌套层级标记由大到小的顺序进行组件嵌套操作。

可选的，所述则按预设规则将当前组件从目标组件中划出，包括：

判断松开鼠标时候当前组件相对于目标组件的初始位置；

基于初始位置确定当前组件相对于目标组件的划出位置，将当前组件以初始位置向划出位置的连线作为路径划出。

在实施中，如果目标组件不是可嵌套组件，判断松开鼠标时候当前组件相对于目标组件的位置。将目标组件划分为4个部分，对于这4个部分组件将分别会排序到目标组件的上、下、左、右方。判断当前组件是从目标组件的哪个方向划出并排序。完成一次组件拖拽排序之后，更新组件信息树，更新组件代码。同时进行位置移动和嵌套拖拽操作，通过组件列表、设计器、属性设置等可视化部分的操作，达到绝大部分的系统布局排版目的。

可选的，所述在线拖拽编码生成方法，还包括：

借助设计器实现步骤三中的组件嵌套操作。

在实施中，设计器为承载用户对于组件及模板的交互操作、组件展示布局操作的容器。设计器包括外部设计器以及内部设计器。

其中，外层设计器提供设计器本身的右键操作功能，同时提供响应功能模板的展示行为，所述展示行为包括：组件列表面板的显示和隐藏，属性设置面板的显示和隐藏，捕获有效操作元素，识别组件类型，提供拖拽占位符；

内层设计器提供设计器内部组件的操作功能，所述操作功能包含组件渲染，组件拖拽，组件嵌套，组件重新排序，组件位置识别。

可选的，所述在线拖拽编码生成方法，还包括：

借助组件信息树对设计器组件样式行为的具体代码描述方式进行限定。

在实施中，组件信息树具体包括：组件的名称和ID信息；基于elementUI组件库所提供的组件所有组件属性和方法及单个组件实例具体操作后的值信息；组件相对于设计器的具体位置信息；组件的模板信息；组件的样式信息；组件的所有嵌套子组件的信息，子组件同时包含以上5条信息。

同时，本实施例还提供了代码编辑功能以配合完成剩下的个性化操作部分。相对于现代前端开发中的组件开发思维，我们将组件拆分为模板、样式和脚本三个部分分别进行代码编辑。从代码编辑面板中来看，操作人员能更加直观的看到可视化操作之后产出的代码内容。操作人员同时可以通过代码编辑面板对当前操作的组件进行个性化细节调整。这样大块组件可视化拖拽加细节部分代码编辑的组合方式，达到形成最终产出的目的。

除上述内容以外，本实施例还提供一种gitlab项目绑定方式，预设好事先配置好的gitlab项目信息之后可以将项目整体同步下来。本地项目文件结构和远程项目的文件结构保持一致，所有文件均以组件形式显示在本地，且可以作为子组件拖拽引入到本地创建生成的组件中去。

同时，本实施例还提供一种接口管理方案。从预设好的gitlab项目地址中同步所有接口地址在本地，并提供接口管理功能以及本地新增接口功能。同时每个接口均提供完整的接口需要用到的HTTP请求方式，请求参数等配置项。

上述实施例中的各个序号仅仅为了描述，不代表各部件的组装或使用过程中的先后顺序。

以上所述仅为本实施例的实施例，并不用以限制本实施例，凡在本实施例的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本实施例的保护范围之内。

Claims (10)

1.基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述在线拖拽编码生成方法包括：

步骤一，根据代码编译需求判断是否需要同步gitlab项目信息；

步骤二，如果不需要同步，则实时采集用户的拖拽行为，选取拖拽行为选取当前组件对应的目标组件，对目标组件是否为可嵌套组件进行判断；

步骤三，如果目标组件为可嵌套组件，则判断组件的嵌套层级并根据嵌套层级进行组件嵌套操作；

步骤四，如果目标组件为非可嵌套组件，则按预设规则将当前组件从目标组件中划出；

步骤五，完成一次组件拖拽排序之后，更新组件信息树，更新组件代码。

2.根据权利要求1所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述在线拖拽编码生成方法，包括：

如果需要同步gitlab项目信息，则对待同步的gitlab项目信息进行配置；

基于配置结果判断是否需要作为子组件使用，如果判断需要，则执行步骤二所示的内容，如果判断不需要，则调用操作组件API，进行组件导出操作。

3.根据权利要求1所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述则判断组件的嵌套层级并根据嵌套层级进行组件嵌套操作，包括：

获取每个组件的嵌套层级标记；

按嵌套层级标记由大到小的顺序进行组件嵌套操作。

4.根据权利要求1所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述则按预设规则将当前组件从目标组件中划出，包括：

判断松开鼠标时候当前组件相对于目标组件的初始位置；

基于初始位置确定当前组件相对于目标组件的划出位置，将当前组件以初始位置向划出位置的连线作为路径划出。

5.根据权利要求1所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述判断松开鼠标时候当前组件相对于目标组件的初始位置，包括：

将目标组件划分为4个部分，对于这4个部分组件将分别会排序到目标组件的上、下、左、右方。

6.根据权利要求1所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述在线拖拽编码生成方法，还包括：

借助设计器实现步骤三中的组件嵌套操作。

7.根据权利要求6所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述设计器为承载用户对于组件及模板的交互操作、组件展示布局操作的容器。

8.根据权利要求7所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述设计器包括外部设计器以及内部设计器；

其中，外层设计器提供设计器本身的右键操作功能，同时提供响应功能模板的展示行为，所述展示行为包括：组件列表面板的显示和隐藏，属性设置面板的显示和隐藏，捕获有效操作元素，识别组件类型，提供拖拽占位符；

内层设计器提供设计器内部组件的操作功能，所述操作功能包含组件渲染，组件拖拽，组件嵌套，组件重新排序，组件位置识别。

9.根据权利要求1所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述在线拖拽编码生成方法，还包括：

借助组件信息树对设计器组件样式行为的具体代码描述方式进行限定。

10.根据权利要求9所述的基于gitlab实时代码共享的在线拖拽编码生成方法，其特征在于，所述组件信息树具体包括：

组件的名称和ID信息；基于elementUI组件库所提供的组件所有组件属性和方法及单个组件实例具体操作后的值信息；组件相对于设计器的具体位置信息；组件的模板信息；组件的样式信息；组件的所有嵌套子组件的信息，子组件同时包含以上5条信息。

Images