一种前端项目组件化拖拽管理方法、装置及存储介质制造方法及图纸

本发明专利技术提供了一种前端项目组件化拖拽管理方法、装置及存储介质，涉及前端技术插件领域。其中具体包括：搭建后端接口，获取组件数据表和应用页面数据表；获取第一配置页面，根据组件数据表将组件导入到第一配置页面；获取拖拽指令，将组件在第一配置页面上进行拖拽同时记录拖拽信息，并将拖拽信息上传至数据库；根据应用页面数据表，编辑第一配置页面，得到第二配置页面；获取第二配置页面组件信息，根据第二配置页面组件信息对第二配置页面重新布局，得到第三配置页面。本发明专利技术中前端实现了动态拖拽添加页面元素，可以直接生成前端界面；后端配合创建新表，保存前端组件数据、组件位置信息。达到了简化了操作，降低上手难度，降低人工人本的效果。人工人本的效果。人工人本的效果。

【技术实现步骤摘要】
一种前端项目组件化拖拽管理方法、装置及存储介质


[0001]本专利技术涉及前端技术插件领域，应用于实现前端项目组件化拖拽管理。

技术介绍

[0002]现阶段技术利用前端框架作为组件框架假如请求接口，同时将所有组件框架加入拖拽功能，并记录与保存拖拽的x坐标和y坐标从而实现动态生成页面的功能。其中每个模块独立开发，合并成为页面元素，同类型页面重复工作，操作较为麻烦。

技术实现思路

[0003]本专利技术要解决的技术问题在于，针对现有技术中存在的缺陷，提供了一种前端项目组件化拖拽管理方法、装置及存储介质。通过简化页面操作，达到了降低上手难度，提高工作效率的效果，其中在对组件进行修改的情况下，无需对代码进行修改，只需要在第一配置页面中进行修改即可，实现了动态修改页面的效果。
[0004]本专利技术解决其技术问题所采用的技术方案是：
[0005]根据本公开实施例的一方面，提供了一种前端项目组件化拖拽管理方法，包括：
[0006]搭建后端接口，获取组件数据表和应用页面数据表；
[0007]获取第一配置页面，根据组件数据表将组件导入到第一配置页面；
[0008]获取拖拽指令，根据拖拽指令将组件在第一配置页面上进行拖拽，同时记录拖拽信息，并将拖拽信息上传至数据库；
[0009]根据应用页面数据表编辑第一配置页面，得到第二配置页面；
[0010]获取第二配置页面组件信息，根据第二配置页面组件信息对第二配置页面重新布局，得到第三配置页面。
[0011]根据本公开实施例的另一方面，其中搭建后端接口，包括：
[0012]组件数据表和应用页面数据表中的数据存储在后端接口中，后端接口应用于增添删除数据。
[0013]根据本公开实施例的另一方面，其中获取组件数据表和应用页面数据表，包括：
[0014]组件数据表中数据包括第一主键、组件名称、快照、创建时间和创建人；
[0015]应用页面数据表中数据包括第二主键、页面名称和应用组件数组格式；
[0016]其中应用组件数组格式包括存放对应组件表关联的序列号、组件位置、组件对应可拉升后的长度和高度和请求接口地址。
[0017]根据本公开实施例的另一方面，其中获取拖拽指令，将组件在第一配置页面上进行拖拽，同时记录拖拽信息，并将拖拽信息上传至数据库，包括：
[0018]点击组件的边缘获取当前位置信息；
[0019]当组件在点击状态中时拉升鼠标，获取点击位与拉升位置之前的距离，根据距离计算需要拉升的长度和宽度，在拖动过程中，记录组件的x坐标，y坐标数据，并存入数据库。
[0020]根据本公开实施例的一方面，提供了一种前端项目组件化拖拽管理装置，包括：
[0021]数据表获取模块：搭建后端接口，获取组件数据表和应用页面数据表；
[0022]组件导入模块：获取第一配置页面，根据组件数据表将组件导入到第一配置页面；
[0023]组件拖拽模块：组件获取拖拽指令，根据拖拽指令将组件在第一配置页面上进行拖拽，同时记录拖拽信息，并将拖拽信息上传至数据库；
[0024]第二配置页面获取模块：根据应用页面数据表编辑第一配置页面，得到第二配置页面；
[0025]第三配置页面获取模块：获取第二配置页面组件信息，根据第二配置页面组件信息对第二配置页面重新布局，得到第三配置页面。
[0026]根据本公开实施例的一方面，提供了一种前端项目组件化拖拽管理系统，前端项目组件化拖拽管理配置同步系统应用于上述的前端项目组件化拖拽管理装置。
[0027]根据本公开实施例的一方面，提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，处理器执行计算机程序，实现上述任一项的前端项目组件化拖拽管理方法。
[0028]本专利技术采用以上技术方案，至少具备以下有益效果：
[0029]本专利技术通过构建组件库，并根据组件库建立拖拽型的第一配置页面自助生成功能，只需要在第一配置页面上拖拽进现有组件便可生成第二配置页面，并根据第二配置页面数据构建第三配置页面，从而做到快速搭建页面的效果。达到了前端和后端相互协同，实现了降低了人工成本，提高了工作效率。并且本公开实施例无需进行代码修改就可直接对组件进行拖拽改动，简化了操作，降低了上手难度。
[0030]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开实施例。
附图说明
[0031]为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0032]图1是本公开实施例中一种前端项目组件化拖拽管理方法的方法流程图；
[0033]图2是本公开实施例中前端项目组件化拖拽管理的效果呈现图；
[0034]图3是本公开实施例中前端项目组件化拖拽管理的组件编辑拖动方法图；
[0035]图4是本公开实施例中前端项目组件化拖拽管理的拖拽指令代码图；
[0036]图5是本公开实施例中一种前端项目组件化拖拽管理装置的装置图。
具体实施方式
[0037]为使本公开实施例的目的、技术方案和优点更加清楚，下面将对本公开实施例的技术方案进行详细的描述。显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本专利技术所保护的范围。
[0038]本公开实施例中的术语“第一”、“第二”、“第三”、“第四”等是用于区别类似的对
象，而不必用于描述特定的顺序或先后次序。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元。方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
[0039]现有技术在前端技术插件领域，每个模块独立开发，合并成为页面元素，同类型页面重复工作。以常用组件为列表组件为例，将基本样式以及元素结构使用前端框架和层叠样式表搭建好对外抛出额外的参数、例如几行几列等形式、以及请求接口地址、请求类型，请求返回数据结构等等、对应到数据列表中，做出多个常用组件放置于组件库中。过程操作较为麻烦，同时人力成本也相对较高。
[0040]对此本公开实施例通过构建组件库，并根据组件库建立拖拽型的第一配置页面自助生成功能，只需要在第一配置页面上拖拽进现有组件便可生成第二配置页面，从而做到快速搭建页面的效果。
[0041]综上，根据本公开实施例的一方面，提供了一种前端项目组件化拖拽管理方法，如图1所示，包括：
[0042]搭建后端接口，获取组件数据表和应用页面数据表；
[00本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端项目组件化拖拽管理方法，其特征在于，包括：搭建后端接口，获取组件数据表和应用页面数据表；获取第一配置页面，根据所述组件数据表将组件导入到所述第一配置页面；获取拖拽指令，根据所述拖拽指令将所述组件在所述第一配置页面上进行拖拽，同时记录拖拽信息，并将所述拖拽信息上传至数据库；根据所述应用页面数据表编辑所述第一配置页面，得到第二配置页面；获取所述第二配置页面组件信息，根据所述第二配置页面组件信息对所述第二配置页面重新布局，得到第三配置页面。2.根据权利要求1所述的方法，其中所述搭建后端接口，其特征在于，包括：所述组件数据表和所述应用页面数据表中的数据存储在所述后端接口中，后端接口应用于增添或删除所述数据。3.根据权利要求1所述的方法，其中获取组件数据表和应用页面数据表，其特征在于，包括：所述组件数据表中数据包括第一主键、组件名称、快照、创建时间和创建人；所述应用页面数据表中数据包括第二主键、页面名称和应用组件数组格式；其中所述应用组件数组格式包括存放对应组件表关联的序列号、组件位置、组件对应可拉升后的长度和高度和请求接口地址。4.根据权利要求1所述的方法，其中获取拖拽指令，将所述组件在所述第一配置页面上进行拖拽，同时记录拖拽信息，并将所述拖拽信息上传至数据库，其特征在...

【专利技术属性】
技术研发人员：代媛媛，
申请(专利权)人：上海中通吉网络技术有限公司，
类型：发明
国别省市：