一种前端项目组件化拖拽管理方法、装置及存储介质与流程

本发明涉及前端技术插件领域，应用于实现前端项目组件化拖拽管理。

背景技术：

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

技术实现思路

1、本发明要解决的技术问题在于，针对现有技术中存在的缺陷，提供了一种前端项目组件化拖拽管理方法、装置及存储介质。通过简化页面操作，达到了降低上手难度，提高工作效率的效果，其中在对组件进行修改的情况下，无需对代码进行修改，只需要在第一配置页面中进行修改即可，实现了动态修改页面的效果。

2、本发明解决其技术问题所采用的技术方案是：

3、根据本公开实施例的一方面，提供了一种前端项目组件化拖拽管理方法，包括：

4、搭建后端接口，获取组件数据表和应用页面数据表；

5、获取第一配置页面，根据组件数据表将组件导入到第一配置页面；

6、获取拖拽指令，根据拖拽指令将组件在第一配置页面上进行拖拽，同时记录拖拽信息，并将拖拽信息上传至数据库；

7、根据应用页面数据表编辑第一配置页面，得到第二配置页面；

8、获取第二配置页面组件信息，根据第二配置页面组件信息对第二配置页面重新布局，得到第三配置页面。

9、根据本公开实施例的另一方面，其中搭建后端接口，包括：

10、组件数据表和应用页面数据表中的数据存储在后端接口中，后端接口应用于增添删除数据。

11、根据本公开实施例的另一方面，其中获取组件数据表和应用页面数据表，包括：

12、组件数据表中数据包括第一主键、组件名称、快照、创建时间和创建人；

13、应用页面数据表中数据包括第二主键、页面名称和应用组件数组格式；

14、其中应用组件数组格式包括存放对应组件表关联的序列号、组件位置、组件对应可拉升后的长度和高度和请求接口地址。

15、根据本公开实施例的另一方面，其中获取拖拽指令，将组件在第一配置页面上进行拖拽，同时记录拖拽信息，并将拖拽信息上传至数据库，包括：

16、点击组件的边缘获取当前位置信息；

17、当组件在点击状态中时拉升鼠标，获取点击位与拉升位置之前的距离，根据距离计算需要拉升的长度和宽度，在拖动过程中，记录组件的x坐标，y坐标数据，并存入数据库。

18、根据本公开实施例的一方面，提供了一种前端项目组件化拖拽管理装置，包括：

19、数据表获取模块：搭建后端接口，获取组件数据表和应用页面数据表；

20、组件导入模块：获取第一配置页面，根据组件数据表将组件导入到第一配置页面；

21、组件拖拽模块：组件获取拖拽指令，根据拖拽指令将组件在第一配置页面上进行拖拽，同时记录拖拽信息，并将拖拽信息上传至数据库；

22、第二配置页面获取模块：根据应用页面数据表编辑第一配置页面，得到第二配置页面；

23、第三配置页面获取模块：获取第二配置页面组件信息，根据第二配置页面组件信息对第二配置页面重新布局，得到第三配置页面。

24、根据本公开实施例的一方面，提供了一种前端项目组件化拖拽管理系统，前端项目组件化拖拽管理配置同步系统应用于上述的前端项目组件化拖拽管理装置。

25、根据本公开实施例的一方面，提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，处理器执行计算机程序，实现上述任一项的前端项目组件化拖拽管理方法。

26、本发明采用以上技术方案，至少具备以下有益效果：

27、本发明通过构建组件库，并根据组件库建立拖拽型的第一配置页面自助生成功能，只需要在第一配置页面上拖拽进现有组件便可生成第二配置页面，并根据第二配置页面数据构建第三配置页面，从而做到快速搭建页面的效果。达到了前端和后端相互协同，实现了降低了人工成本，提高了工作效率。并且本公开实施例无需进行代码修改就可直接对组件进行拖拽改动，简化了操作，降低了上手难度。

28、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开实施例。

技术特征：

1.一种前端项目组件化拖拽管理方法，其特征在于，包括：

2.根据权利要求1所述的方法，其中所述搭建后端接口，其特征在于，包括：

3.根据权利要求1所述的方法，其中获取组件数据表和应用页面数据表，其特征在于，包括：

4.根据权利要求1所述的方法，其中获取拖拽指令，将所述组件在所述第一配置页面上进行拖拽，同时记录拖拽信息，并将所述拖拽信息上传至数据库，其特征在于，包括：

5.一种前端项目组件化拖拽管理装置，其特征在于，包括：

6.一种前端项目组件化拖拽管理系统，其特征在于，所述前端项目组件化拖拽管理配置同步系统应用于上述的前端项目组件化拖拽管理装置。

7.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，处理器执行所述计算机程序，实现如权利要求1-4中任一项所述的前端项目组件化拖拽管理方法。

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

技术研发人员：代媛媛
受保护的技术使用者：上海中通吉网络技术有限公司
技术研发日：
技术公布日：2024/1/12