一种前后台交互组件通用化的方法技术

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

【技术实现步骤摘要】
一种前后台交互组件通用化的方法


[0001]本专利技术涉及了一种前后台交互组件通用化的方法，属于智能制造控制领域。

技术介绍

[0002]近年来，全球制造行业等对工业软件的开发需求大幅度提升，基本需求大致在表单信息增删改查、数据实时展示、权限管理、可视化组态图等，而表单信息增删改查为工业软件开发需求中基础而不可或缺的一部分。
[0003]本项目针对工业现场通讯设备多，采集变量多及解数慢，数据存储量大，需求复杂多样等问题，开发了一套智能物联网关管理系统。本网关主要通过管理若干个协议包，通过协议包之间的切换管理该协议下的数据采集、数据展示、数据存储及出口等功能。其中，本系统中的驱动配置部分主要内容为对各个协议下的设备及各设备下的变量进行管理。页面结构为左侧为设备管理表格，可以通过增加设备、编辑设备、删除设备三个按钮及弹出表单对设备表格进行增删改查；中间为设备树，每当设备管理表格中的设备发生变化，设备树中的数据也随之变化；右侧为变量管理表格，点击设备树中的设备，变量表格展示该设备下的变量数据。所以各个协议配置页面结构大相径庭，但是每个协议下所属的设备及变量表格中展示的信息都有不同之处。例如，设备管理表格中，prop、设备名称、设备IP、端口号这几项信息每个协议下的设备表格中都需要展示，但是重连次数、超时时间、描述、本地端口、服务器名称根据不同协议的特点按需展示，变量管理表格也是如此。
[0004]以往在前台开发过程中采用的是“1加n模式”，即在一个主文件中引入多个子组件，一个协议即为一个组件，协议切换的下拉框在主文件中，其余内容在各子组件中，通过条件判断及数据绑定来随时切换。这种模式的弊端在于：每当后台开发人员按需求进行一些改动时，前台需要每个协议即每个子组件统统进行修改，尤其是修改表单验证条件时，工作量较大，各协议开发进度没有同步，代码冗余，且后期维护需要的人力较多，很大程度上的浪费时间及人力资源，没有达到代码简化，维护方便的目的。
[0005]因此，为了简化代码便于维护，对子组件进行整合封装，使其对各协议的表格及表单通用化，以方便掌握进度与后期维护成为一个亟待解决的问题。

技术实现思路

[0006]本专利技术主要针对协议配置时引入多个子组件导致代码冗余，修改工作量大，维护耗时的问题提出了一种前后台交互组件通用化的方法，即后台根据各个协议的特点修改数据库前台即可根据接口方法实时改变达到了工作简化的目的。
[0007]所采用的技术方案是：一种前后台交互组件通用化的方法，包括以下步骤：
[0008]前台定义搭建框架渲染到界面所需的配置数据并发送给后台，后台根据数据格式返回相应配置数据；
[0009]前台发送请求后台返回配置数据进行封装，前台根据封装后的表单数组在浏览器中渲染出设备或变量的表格及表单；
[0010]当用户编辑表单时执行封装表单验证方法，用于表单增删改查提交时进行验证；
[0011]前台整合表单数据，传输用户编辑的数据值给后台，后台循环更新数据库返回给前台展示给用户。
[0012]所述配置数据包括设备管理表单及变量管理表单的如下表项字段：表项名称、prop值、表单类型、表单绑定数据，表单提示信息及表单验证条件；所述表单类型包括输入框和下拉框，下拉框包括下拉选项；
[0013]表项名称为数采设备属性，prop值为数采设备属性的标识，表单绑定数据为实际采集的数采设备属性的数据值，表单提示信息用于提示用户编辑内容，表单验证条件用于判断是否接受用户输入信息。
[0014]所述设备或变量的表格及表单包括：
[0015]静态表单需要前台预先渲染表项字段至界面，无需后台返回该字段；
[0016]动态表单需要前台预先搭建输入框框架、下拉选框框架，结合后台返回的数据配置渲染至界面；
[0017]表格加载数据时展示的内容：表头数据源、表格数据源、表格高度、点击行方法、分页总条数、当前条数及每页展示条数。
[0018]所述封装为将接收的后台数据依次存储在预先定义的空数组中，得到封装后的表单数组。
[0019]所述封装表单验证方法包括：
[0020]循环遍历封装好的表单数组中的数据，如果用户编辑的当前表单与表单数组中的任一数据的prop一致，再遍历该项数据的表单验证条件，若符合条件则前台接受用户编辑的内容，否则输出提示提醒用户该条内容的编辑格式。
[0021]所述表单验证条件采用if语句与正则表达式相结合的方式进行判断，是否包含：“字母或字母+数字组合”、“IP格式”、“整数”、“包含中文”。
[0022]所述整合的表单数据包括：
[0023]对于变量或设备管理表单：将动态表单的表项名称遍历出来，再将表项名称及对应用户编辑的数据以“键值对”的形式传值给后台；所述“键值对”的形式为{prop值：用户编辑的数据}；
[0024]对于静态表单中的频率表项，以“键值对”的形式传值给后台；所述“键值对”的形式为{frequency：用户编辑的数据}。
[0025]本专利技术的有益效果及优点：
[0026]1.本专利技术采用前台搭建框架，后台返回数据填充的方法，对普遍的表单适用性强。
[0027]2.本专利技术对后台返回数据进行封装，灵活度极高，修改更方便，维护成本更低，一劳永逸。
附图说明
[0028]图1是本专利技术方法的前后台交互流程图。
[0029]图2是本专利技术中前台封装框架及后台返回数据结构图。
[0030]图3是本专利技术中封装表单验证方法流程图。
具体实施方式
[0031]为了使本专利技术的技术方法以及优点等更加清楚明确，在这里参考附图进行进一步的阐述。
[0032]一种前后台交互组件通用化方法，包括以下步骤：
[0033]首先，需要梳理一下前后台表单交互流程：前台将页面中需要渲染的部分代码框架进行封装，挂载时调用后台查询表单接口，后台通过一个接口将前台需要的数据配置返回给前台。之后，前台对后台返回数据进行封装并渲染出相应的表单可进行表单的增删改查。通过前台封装的验证方法校验是否通过，提交表单时将表单数据传给后台完成，增加或修改生成新的表格数据，前台再次调用，如此循环生成动态表单。
[0034]参见图1，这是前后台交互的流程图。
[0035]步骤S1：打开浏览器，挂载时调用后台查询表单接口，前台事先将页面中需要渲染的部分代码框架进行封装；
[0036]步骤S2：后台通过一个接口将前台需要的数据配置以“JSON”的格式返回给前台；
[0037]步骤S3：前台对后台返回数据进行封装成数组，包括表单prop，标签名称，表单类型(输入框或是下拉选框)，如果是下拉选框，需要返回下拉菜单内容，占位文本，表单的值及表单验证条件；
[0038]步骤S4：前台搭建的框架通过遍历封装的数据可以在浏览器中渲染出相应的表单；
[0039]步骤S5：在提交表单时前台封装了验证方法，该验证方法中包含所有表单的验本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前后台交互组件通用化的方法，其特征在于，包括以下步骤：前台定义搭建框架渲染到界面所需的配置数据并发送给后台，后台根据数据格式返回相应配置数据；前台发送请求后台返回配置数据进行封装，前台根据封装后的表单数组在浏览器中渲染出设备或变量的表格及表单；当用户编辑表单时执行封装表单验证方法，用于表单增删改查提交时进行验证；前台整合表单数据，传输用户编辑的数据值给后台，后台循环更新数据库返回给前台展示给用户。2.根据权利要求1所述的一种前后台交互组件通用化的方法，其特征在于，所述配置数据包括设备管理表单及变量管理表单的如下表项字段：表项名称、prop值、表单类型、表单绑定数据，表单提示信息及表单验证条件；所述表单类型包括输入框和下拉框，下拉框包括下拉选项；表项名称为数采设备属性，prop值为数采设备属性的标识，表单绑定数据为实际采集的数采设备属性的数据值，表单提示信息用于提示用户编辑内容，表单验证条件用于判断是否接受用户输入信息。3.根据权利要求1所述的一种前后台交互组件通用化的方法，其特征在于，所述设备或变量的表格及表单包括：静态表单需要前台预先渲染表项字段至界面，无需后台返回该字段；动态表单需要前台预先搭建输入框框架、下拉选框框架，结合后台返回的数据配置渲染至界面；表格加载数据时展示的内容：表头数...

【专利技术属性】
技术研发人员：王挺，张悦，曾鹏，于海斌，
申请(专利权)人：中国科学院沈阳自动化研究所，
类型：发明
国别省市：