一种基于低代码平台的软件开发方法及系统

技术领域

本发明属于综合能源领域，具体而言，涉及一种基于低代码平台的软件开发方法及系统。

背景技术

互联网时代快速发展，技术需求快速发展，项目不断增加，在业务需求不断扩展下，项目开发中暴露出大量问题。

随着业务需求的壮大，DRY(Don't Repeat Yourself)原则随之出现，DRY原则是软件开发中的一个重要原则，意味着尽量避免出现重复的代码和逻辑。在前端项目中，重复工作违反了这一原则，重复的代码会导致代码库的膨胀，增加了代码的复杂性和维护成本。代码膨胀还可能导致加载和执行时间的增加。

软件开发通常需要雇佣专业的开发人员和团队，进行复杂的编码和测试，这会导致高昂的开发成本，还需要经历繁琐的需求分析、设计、编码和测试等环节，可能会导致较长的开发周期，延迟了产品的上线时间，以及需要开发人员具备深入的编程知识和技能，这使得非技术人员难以参与到应用开发中，限制了开发人员的范围。

发明内容

本申请提供了一种基于低代码平台的软件开发方法及系统，有效降低了项目开发门槛，同时也避免了重复性工作，很大程度上提高了工作效率。

第一方面，本申请提供了一种基于低代码平台的软件开发方法，包括：

S101，拖拽图元组件生成页面；

S103，动态修改拖拽元素的属性、样式，所述元素包括图元组件和画布区域；

S105，向服务端发起数据请求，获取到数据，将获取的数据塞到DOM节点和图表本身，展示真实数据；

S107，画布内容导出成为html页面。

其中，S101，拖拽图元组件生成页面，包括：

图元组件在拖动被放置到画布容器上时会触发dragover事件，实现拖动元素的预览或反馈效果；

鼠标长按点击元素时会让鼠标附着在元素图片中心的位置，在移动到画布容器适合的区域抬起鼠标，目标元素放在画布容器的时候会触发一次对应的drop事件，在drop事件中可以获取拖动元素的数据并进行相应的操作，记录元素在容器中的区域位置，生成对应的x，y坐标，将配置的元素通过定位的方式定位在画布具体的位置。

其中，S103，动态修改拖拽元素的属性、样式，包括：

图元列表中的每一个图元都配置好其修改项；数据模型Model为应用程序中的数据源，视图View负责展示数据，并且视图可以直接修改数据,为了实现视图和数据的双向同步，ViewModel在中间充当了连接器的角色，ViewModel从模型中获取数据，并传递给视图进行显示，同时ViewModel还监听视图的输入操作，将变化的数据更新回模型，以动态绑定去控制和改变图元组件的属性、样式。

其中，步骤S105中，向服务端发起数据请求，请求数据方式包括：静态数据展示、sql请求、api接口请求、websocket请求。

其中，S107，画布内容导出成为html页面，包括：

将画布的内容导出成为真实的DOM树结构，变成页面，存往服务端。

其中，步骤S107中，将画布中的所有元素通过JSON格式存往服务端。

第二方面，本申请提供了一种基于低代码平台的软件开发系统，包括：

拖拽单元，用于拖拽图元组件生成页面；

修改单元，用于动态修改拖拽元素的属性、样式，所述元素包括图元组件和画布区域；

请求单元，用于向服务端发起数据请求，获取到数据，将获取的数据塞到DOM节点和图表本身，展示真实数据；

导出单元，画布内容导出成为html页面。

其中，拖拽单元用于：

图元组件在拖动被放置到画布容器上时会触发dragover事件，实现拖动元素的预览或反馈效果；

鼠标长按点击元素时会让鼠标附着在元素图片中心的位置，在移动到画布容器适合的区域抬起鼠标，目标元素放在画布容器的时候会触发一次对应的drop事件，在drop事件中可以获取拖动元素的数据并进行相应的操作，记录元素在容器中的区域位置，生成对应的x，y坐标，将配置的元素通过定位的方式定位在画布具体的位置。

第三方面，本申请提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一项所述方法的步骤。

第四方面，本申请提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一项所述方法的步骤。

本申请基于低代码平台的软件开发方法及系统具有如下有益效果：

本申请有效降低了项目开发门槛，不仅仅是只有开发人员才能开发页面，同时也避免了重复性工作，很大程度上提高了工作效率。

附图说明

图1为本申请基于低代码平台的软件开发方法流程示意图；

图2为本申请基于低代码平台的软件开发方法另一种流程示意图；

图3为本申请的应用实例一；

图4为本申请的应用实例二；

图5为本申请基于低代码平台的软件开发系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请进行进一步的介绍。

下述介绍提供了本发明的多个实施例，不同实施例之间可以替换或者合并组合，因此本申请也可认为包含所记载的相同和/或不同实施例的所有可能组合。因而，如果一个实施例包含特征A、B、C，另一个实施例包含特征B、D，那么本申请也应视为包括含有特征A、B、C、D的一个或多个所有其他可能的组合的实施例，尽管该实施例可能并未在以下内容中有明确的文字记载。

传统的前端开发通常需要开发人员具备深厚的编程知识和技能，包括HTML、CSS、JavaScript等，而低代码平台提供了可视化的开发工具和拖放式的界面，使非技术人员也能够参与应用开发，降低了技术门槛。

传统的前端开发过程中，开发人员需要从零开始编写代码，包括设计界面、实现业务逻辑、处理数据交互等，而低代码平台提供了预构建的组件和模板，开发人员只需通过配置和定制来快速构建应用，大大提高了开发效率。

传统的前端开发过程中，开发人员需要花费大量时间来编写和调试代码，从而延长了交付周期,而低代码平台提供了可视化的开发工具和自动化的构建工具，使开发人员能够更快地构建和部署应用，缩短了交付周期。

如图1所示，本申请基于低代码平台的软件开发方法包括：S101，拖拽图元组件生成页面；S103，动态修改拖拽元素的属性、样式，元素包括图元组件和画布区域；S105，向服务端发起数据请求，获取到数据，将获取的数据塞到DOM节点和图表本身，展示真实数据；S107，画布内容导出成为html页面。下面进行详细介绍。

本申请使用了当前比较流行的前端框架，在此框架的基础上开发，做到了拖拽生成web页面，每一个需要绑定数据的DOM(Document Object Model，文档对象模型)节点动态选择数据接口，调取数据，绑定点击事件操作，组合生成一个系统的项目。

1.拖拽图元组件生成页面

如图1-2所示，在pc后台系统新建配置图元的页面，通过插件市场下载monaco-editor组件，这个组件是可以将自己的代码以json属性的方式完整保存下来，将这个图元所需要修改配置的信息，如样式，属性，通过变量的形式保存下来，提交到后台服务器，在左侧图元列表的容器区域请求后端接口拿到配置的图元组件呈现出来，

左侧所有图元组件和中间的画布区域都可以被称为元素，中间画布区域相当于一个大元素，一个承载图元组件的载体，借助HTML5的拖放API，dragover事件和drop事件，图元组件在拖动被放置到画布容器上时会触发dragover事件，以便实现拖动元素的预览或反馈效果。它可以使用event.preventDefault()方法来阻止浏览器对拖放操作的默认行为，鼠标长按点击元素的时候会让鼠标附着在元素图片中心的位置，在移动到画布容器适合的区域抬起鼠标，目标元素放在画布容器的时候会触发一次对应的drop事件，在drop事件中可以获取拖动元素的数据并进行相应的操作，记录元素在容器中的区域位置，生成对应的x，y坐标，将配置的元素通过定位的方式定位在画布具体的位置。在拖拽元素的时候第一个元素是可以正常渲染到画布中对应的位置，如果在拖拽第二个元素的时候拖拽到了第一个元素的上方产生重叠的时候这就产生了一个问题，第二个图元的位置是不准确的，他相对的是第一个图元的位置来进行定位的，这里需要做的是在第一个图元的本身距离画布的定位位置和自身位置来进行定位。

2.动态修改拖拽元素的属性样式

如图1-2所示，图元列表中的每一个图元都配置好它的修改项,通过现有VUE框架的MVVM原理,数据模型(Model)是应用程序中的数据源，视图(View)负责展示这些数据，并且视图可以直接修改数据,为了实现视图和数据的双向同步，ViewModel在中间充当了一个连接器的角色，它将数据从模型中获取，并传递给视图进行显示，同时还监听视图的输入操作，将变化的数据更新回模型这一原理动态绑定去控制和改变他本身在后台系统配置图元组件时候的属性、样式，使得操作人员即使不懂代码也能动态修改他的样式，节省了开发人员去修改他的属性，以及CSS(Cascading Style Sheets，层叠样式表)样式，方法更灵活快捷。

3.服务端请求数据展示前端界面

如图1-2所示，提供了几种不同的请求数据方式，方便操作用户按照自己适合的方式去操作，分别是静态数据展示，sql请求，api接口请求，websocket请求，本质是拿到数据塞到dom节点和图表本身，展示真实的数据。

4.画布内容导出成为html页面

如图1-2所示，在操作人员拖拽，修改图元组件属性、样式、节点、位置，向服务端发起数据请求以后，就形成真实可用的页面，所有的操作都是在调整图元组件之前通过monaco-editor插件配置的默认属性，将画布中的所有元素通过JSON格式存往服务端。也就是说，通过现有的插件将画布的内容导出成为真实的dom树结构，变成页面，存往服务端。

本申请采用拖拽搭建页面，直观式修改属性，动态向服务端发起数据请求，有效降低了项目开发门槛，不仅仅是只有开发人员才能开发页面，同时也避免了重复性工作，很大程度上提高了工作效率。

如图3-4所示，某综合能源系统接入包括光伏、风电、储能等多种能源构成。系统中需要实时显示各种能源类型下的设备连接关系、设备实时数据采集情况。比如光伏发电，需要在系统中显示光伏发电系统各关键节点设备的连接关系。比如从光伏组件到逆变器、汇流箱、箱变等。各设备节点需要实时显示采集的有功功率、无功功率、功率因数等。

通过拖拽SVG图元组件显示设备组件的位置，与设备之间的连接关系。如下图所示，图中可以灵活定义图元组件设备的采集点实时数据。

如图5所示，本申请还提供了一种基于低代码平台的软件开发系统，包括：拖拽单元201，用于拖拽图元组件生成页面；修改单元202，用于动态修改拖拽元素的属性、样式，元素包括图元组件和画布区域；请求单元203，用于向服务端发起数据请求，获取到数据，将获取的数据塞到DOM节点和图表本身，展示真实数据；导出单元204，画布内容导出成为html页面。

其中，拖拽单元用于：图元组件在拖动被放置到画布容器上时会触发dragover事件，实现拖动元素的预览或反馈效果；鼠标长按点击元素时会让鼠标附着在元素图片中心的位置，在移动到画布容器适合的区域抬起鼠标，目标元素放在画布容器的时候会触发一次对应的drop事件，在drop事件中可以获取拖动元素的数据并进行相应的操作，记录元素在容器中的区域位置，生成对应的x，y坐标，将配置的元素通过定位的方式定位在画布具体的位置。

本申请中，基于低代码平台的软件开发系统实施例与基于低代码平台的软件开发方法实施例基本相似，相关之处请参考基于低代码平台的软件开发方法实施例的介绍。

本申请还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行所述程序时实现上述任一项所述方法的步骤。

本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述基于低代码平台的软件开发方法步骤。其中，计算机可读存储介质可以包括但不限于任何类型的盘，包括软盘、光盘、DVD、CD-ROM、微型驱动器以及磁光盘、ROM、RAM、EPROM、EEPROM、DRAM、VRAM、闪速存储器设备、磁卡或光卡、纳米系统(包括分子存储器IC)，或适合于存储指令和/或数据的任何类型的媒介或设备。

以上介绍仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。