[发明专利]一种前后台交互组件通用化的方法

说明书

本发明设计了前后台分离的开发模式的多协议包并行的互联网关管理系统下，多种协议之间互相转换时前后端交互组件通用化的方法。方法包括前台定义搭建框架渲染到界面所需的配置数据并发送给后台，后台根据数据格式返回相应配置数据；前台发送请求后台返回配置数据进行封装，前台根据封装后的表单数组在浏览器中渲染出设备或变量的表格及表单；当用户编辑表单时执行封装表单验证方法，用于表单增删改查提交时进行验证；前台整合表单数据，传输用户编辑的数据值给后台，后台循环更新数据库返回给前台展示给用户。此方法在表格增删改查的表单中及在表单验证条件中数据全部由后台控制，前端代码极大的简化且修改灵活度高，通用性强，前后端维护成本低。

技术领域

本发明涉及了一种前后台交互组件通用化的方法，属于智能制造控制领域。

背景技术

近年来，全球制造行业等对工业软件的开发需求大幅度提升，基本需求大致在表单信息增删改查、数据实时展示、权限管理、可视化组态图等，而表单信息增删改查为工业软件开发需求中基础而不可或缺的一部分。

本项目针对工业现场通讯设备多，采集变量多及解数慢，数据存储量大，需求复杂多样等问题，开发了一套智能物联网关管理系统。本网关主要通过管理若干个协议包，通过协议包之间的切换管理该协议下的数据采集、数据展示、数据存储及出口等功能。其中，本系统中的驱动配置部分主要内容为对各个协议下的设备及各设备下的变量进行管理。页面结构为左侧为设备管理表格，可以通过增加设备、编辑设备、删除设备三个按钮及弹出表单对设备表格进行增删改查；中间为设备树，每当设备管理表格中的设备发生变化，设备树中的数据也随之变化；右侧为变量管理表格，点击设备树中的设备，变量表格展示该设备下的变量数据。所以各个协议配置页面结构大相径庭，但是每个协议下所属的设备及变量表格中展示的信息都有不同之处。例如，设备管理表格中，prop、设备名称、设备IP、端口号这几项信息每个协议下的设备表格中都需要展示，但是重连次数、超时时间、描述、本地端口、服务器名称根据不同协议的特点按需展示，变量管理表格也是如此。

以往在前台开发过程中采用的是“1加n模式”，即在一个主文件中引入多个子组件，一个协议即为一个组件，协议切换的下拉框在主文件中，其余内容在各子组件中，通过条件判断及数据绑定来随时切换。这种模式的弊端在于：每当后台开发人员按需求进行一些改动时，前台需要每个协议即每个子组件统统进行修改，尤其是修改表单验证条件时，工作量较大，各协议开发进度没有同步，代码冗余，且后期维护需要的人力较多，很大程度上的浪费时间及人力资源，没有达到代码简化，维护方便的目的。

因此，为了简化代码便于维护，对子组件进行整合封装，使其对各协议的表格及表单通用化，以方便掌握进度与后期维护成为一个亟待解决的问题。

发明内容

本发明主要针对协议配置时引入多个子组件导致代码冗余，修改工作量大，维护耗时的问题提出了一种前后台交互组件通用化的方法，即后台根据各个协议的特点修改数据库前台即可根据接口方法实时改变达到了工作简化的目的。

所采用的技术方案是：一种前后台交互组件通用化的方法，包括以下步骤：

前台定义搭建框架渲染到界面所需的配置数据并发送给后台，后台根据数据格式返回相应配置数据；

前台发送请求后台返回配置数据进行封装，前台根据封装后的表单数组在浏览器中渲染出设备或变量的表格及表单；

当用户编辑表单时执行封装表单验证方法，用于表单增删改查提交时进行验证；

前台整合表单数据，传输用户编辑的数据值给后台，后台循环更新数据库返回给前台展示给用户。

所述配置数据包括设备管理表单及变量管理表单的如下表项字段：表项名称、prop值、表单类型、表单绑定数据，表单提示信息及表单验证条件；所述表单类型包括输入框和下拉框，下拉框包括下拉选项；