web前端低代码平台构建方法、装置及计算机设备制造方法及图纸

本发明专利技术公开了一种web前端低代码平台构建方法、装置及计算机设备，该方法包括：基于可视化与本地存储构建web前端低代码平台的架构；根据架构添加业务模板，并将业务模板转化为JSON格式文件；获取与业务模板业务对应的预设源码模板；将JSON格式文件与预设源码模板进行组合；将JSON格式文件与预设源码模板组合的数据同步至服务器。其中，基于可视化与本地存储构建web前端低代码平台的架构包括：采用canvas创建画布区，根据画布的拖动动态绘制画布的x轴与y轴坐标；对画布区的可编辑基础组件进行canvas定位。本发明专利技术的web前端低代码平台具有画布可无限延伸、可视化拖拽时组件定位精准且维护难度小的特点。准且维护难度小的特点。准且维护难度小的特点。

【技术实现步骤摘要】
web前端低代码平台构建方法、装置及计算机设备


[0001]本专利技术涉及前端开发
，特别是涉及一种web前端低代码平台构建方法、装置及计算机设备。

技术介绍

[0002]低代码开发是一种用于快速设计和开发软件系统，且手写代码量最少的方法，低代码开发时通过在可视化设计器中，以拖拽的方式快速构建应用程序，可以跳过基础架构以及可能会面临的技术细节，直接进入与业务需求紧密相关的工作，实现更快、更可靠地提供价值。
[0003]现有的web前端低代码平台通过少量代码或者是零代码就可以生成web应用的开发平台，对应用开发进行可视化的处理，通过拖拽，配置等图像化方案就能完成软件的快速开发。
[0004]但是，现有的web前端低代码平台在进行可视化拖拽时画布上组件定位不精准，画布大小受屏幕限制无法延伸，且打包后的应用未提供源码模板，导致开发出的软件版本迭代困难，维护难度大。

技术实现思路

[0005]基于此，有必要针对上述技术问题，提供一种画布可无限延伸、可视化拖拽时组件定位精准且维护难度小的web前端低代码平台构建方法、装置及计算机设备。
[0006]第一方面，本专利技术提供了一种web前端低代码平台构建方法，其特征在于，方法包括：
[0007]基于可视化与本地存储构建web前端低代码平台的架构；
[0008]根据架构添加业务模板，并将业务模板转化为JSON格式文件；
[0009]获取与业务模板业务对应的预设源码模板；
[0010]将JSON格式文件与预设源码模板进行组合；
[0011]将JSON格式文件与预设源码模板组合的数据同步至服务器；
[0012]基于可视化与本地存储构建web前端低代码平台的架构包括：
[0013]采用canvas创建画布区，根据画布的拖动动态绘制画布的x轴与y轴坐标；
[0014]对画布区的可编辑基础组件进行canvas定位。
[0015]在其中一个实施例中，基于可视化与本地存储构建web前端低代码平台的架构还包括：
[0016]根据indexDB实现项目的本地化创建与项目关系的本地存储；
[0017]构建项目与子项的关联关系；
[0018]将基础组件的相关基础属性与基础组件相关联；
[0019]在架构的配置区根据基础组件的属性设置基础组件在画布的表现形式；
[0020]根据项目与子项的关联关系、基础组件的canvas定位以及基础组件在画布的表现
形式构建web前端低代码平台的架构。
[0021]在其中一个实施例中，根据架构添加业务模板包括：
[0022]基于web前端低代码平台的架构整理添加基础组件；
[0023]根据基础组件添加业务模板。
[0024]在其中一个实施例中，获取与业务模板业务对应的预设源码模板包括：获取与业务模板业务对应的预设VUE版本源码模板和React版本源码模板。
[0025]在其中一个实施例中，将JSON格式文件与预设源码模板进行组合包括：将属于同一业务的JSON格式文件和预设VUE版本源码模板以及React版本源码模板进行结合。
[0026]在其中一个实施例中，方法还包括：将业务模板转化为JSON格式文件后，将JSON格式文件同步至服务器。
[0027]在其中一个实施例中，基础组件在画布的表现形式包括基础组件的宽高、颜色、背景色和布局样式属性。
[0028]在其中一个实施例中，VUE版本源码模板封装有业务逻辑、构建路由、页面、数据管理以及接口封装功能；
[0029]React版本源码模板封装有业务逻辑、hook组件、构建路由、页面、数据管理以及接口封装功能。
[0030]第二方面，本专利技术还提供了一种web前端低代码平台构建装置，装置包括：
[0031]构建模块，构建模块用于基于可视化与本地存储构建web前端低代码平台的架构；
[0032]转化模块，转化模块用于根据架构添加业务模板，并将业务模板转化为JSON格式文件；
[0033]获取模块，获取模块用于获取与业务模板业务对应的预设源码模板；
[0034]组合模块，组合模块用于将JSON格式文件与预设源码模板进行组合；
[0035]同步模块，同步模块用于将JSON格式文件与预设源码模板组合的数据同步至服务器。
[0036]第三方面，本申请还提供了一种计算机设备。计算机设备包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现以下步骤：
[0037]基于可视化与本地存储构建web前端低代码平台的架构；
[0038]根据架构添加业务模板，并将业务模板转化为JSON格式文件；
[0039]获取与业务模板业务对应的预设源码模板；
[0040]将JSON格式文件与预设源码模板进行组合；
[0041]将JSON格式文件与预设源码模板组合的数据同步至服务器。
[0042]上述的web前端低代码平台构建方法、装置及计算机设备，web前端低代码平台构建方法包括：基于可视化与本地存储构建web前端低代码平台的架构；根据架构添加业务模板，并将业务模板转化为JSON格式文件；获取与业务模板业务对应的预设源码模板；将JSON格式文件与预设源码模板进行组合；将JSON格式文件与预设源码模板组合的数据同步至服务器。其中，基于可视化与本地存储构建web前端低代码平台的架构包括：采用canvas创建画布区，根据画布的拖动动态绘制画布的x轴与y轴坐标；对画布区的可编辑基础组件进行canvas定位。canvas创建画布区能够实现在有限的可视屏幕内进行无限滚动，使画布可无限延伸，对画布区的可编辑基础组件进行canvas定位能够提高可视化拖拽时组件定位的精
准度，将JSON格式文件与预设源码模板进行组合，在调取业务模板时可以同时调取对应的预设源码模板，使得打包后的应用能够提供源代码，从而降低应用的版本迭代难度，降低维护难度。
附图说明
[0043]图1为本专利技术实施例提供的web前端低代码平台构建方法的流程示意图之一；
[0044]图2是本申请实施例提供的另一种web前端低代码平台构建方法的流程示意图；
[0045]图3是本申请实施例提供的另一种web前端低代码平台构建方法的流程示意图；
[0046]图4是本申请实施例提供的web前端低代码平台构建装置的结构框图；
[0047]图5是本申请一个实施例中计算机设备内部结构图。
具体实施方式
[0048]为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。
[0049]本申请实施例提供的web前端低代码平台构建方法、装置及计算机设备，旨在实现画布可无限延伸、可视化拖拽时组件定位精准且维护难度小的web前端低代码平台的构建。本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种web前端低代码平台构建方法，其特征在于，所述方法包括：基于可视化与本地存储构建所述web前端低代码平台的架构；根据所述架构添加业务模板，并将所述业务模板转化为JSON格式文件；获取与所述业务模板业务对应的预设源码模板；将所述JSON格式文件与所述预设源码模板进行组合；将所述JSON格式文件与所述预设源码模板组合的数据同步至服务器；所述基于可视化与本地存储构建所述web前端低代码平台的架构包括：采用canvas创建画布区，根据画布的拖动动态绘制画布的x轴与y轴坐标；对画布区的可编辑基础组件进行canvas定位。2.根据权利要求1所述的web前端低代码平台构建方法，其特征在于，所述基于可视化与本地存储构建所述web前端低代码平台的架构还包括：根据indexDB实现项目的本地化创建与项目关系的本地存储；构建所述项目与子项的关联关系；将所述基础组件的相关基础属性与所述基础组件相关联；在所述架构的配置区根据基础组件的属性设置基础组件在画布的表现形式；根据所述项目与子项的关联关系、基础组件的canvas定位以及基础组件在画布的表现形式构建所述web前端低代码平台的架构。3.根据权利要求2所述的web前端低代码平台构建方法，其特征在于，根据所述架构添加业务模板包括：基于所述web前端低代码平台的架构整理添加基础组件；根据所述基础组件添加业务模板。4.根据权利要求3所述的web前端低代码平台构建方法，其特征在于，获取与所述业务模板业务对应的预设源码模板包括：获取与所述业务模板业务对应的预设VUE版本源码模板和React版本源码模板。5.根据权利要求4所述的web前端低代...

【专利技术属性】
技术研发人员：赵健，赵晓亮，梁爽，
申请(专利权)人：西安奥卡云数据科技有限公司，
类型：发明
国别省市：