表单数据的双向绑定方法、装置、设备及存储介质制造方法及图纸

本发明专利技术涉及web前端和可视化的技术领域，公开了一种表单数据的双向绑定方法、装置、设备及存储介质。本方法包括：通过建立表单基础数据库，并基于表单基础数据库获取表单组件；当检测到表单组件中的初始数据发生变化时，将初始数据的变化发送至预设数据订阅程序；根据初始数据的变化发送数据更新请求至预设数据更新程序；根据数据更新请求调用数据更新函数，并将初始数据封装进数据更新函数；基于数据更新函数对表单组件对应实例进行双向绑定。本方案提交表单时只需读取父组件的state，可以实现表单的数据双向绑定，避免多表单导致的数据管理混乱，实现更优秀的渲染表现，提高开发效率。发效率。发效率。

【技术实现步骤摘要】
表单数据的双向绑定方法、装置、设备及存储介质


[0001]本专利技术涉及web前端和可视化的
，尤其涉及一种表单数据的双向绑定方法、装置、设备及存储介质。

技术介绍

[0002]随着前端技术发展，出现了React，Vue等前端技术框架，这些前端技术框架为开发者提供了更精简更高效的开发工具，让开发者无需重复造轮子，用较少的代码实现比较复杂的功能。然而随着技术的发展，有一些新的技术思想逐渐被人们所接受，比如说Vue提出的数据双向绑定特性，这种特性将数据模型和用户编写的界面结合绑定起来，当用户修改界面时数据模型可以监听到用户所做的修改，当用户通过代码直接修改数据模型时用户界面也会做出相应的数据刷新动作，减少了开发者在数据模型变化或者用户界面变化时需要做的一些工作。
[0003]然而这种技术是Vue技术框架提出来的，在较之更早出现的React框架上并没有这种特性。拿最常用的表单组件来举例，React的表单设计大部分是：通过获取到表单的实例，后通过实例方法给所述表单赋值；通过所述表单实例获取用户修改后的数据提交到后台。这样的做法在页面只有单个表单的时候并无明显缺点，但是当页面有若干个表单需要同时设置表单的值或者获取所有表单的值的时候，这种做法就很繁琐。

技术实现思路

[0004]本专利技术的主要目的是在提交表单时只需读取父组件的state，可以实现表单的数据双向绑定，避免多表单导致的数据管理混乱，实现更优秀的渲染表现，提高开发效率。
[0005]本专利技术第一方面提供了一种表单数据的双向绑定方法，包括：建立表单基础数据库，并基于所述表单基础数据库获取表单组件，其中，所述表单组件的数据为初始数据；当检测到所述表单组件中的初始数据发生变化时，将所述初始数据的变化发送至预设数据订阅程序；根据所述初始数据的变化发送数据更新请求至预设数据更新程序；根据所述数据更新请求调用数据更新函数，并将所述初始数据封装进所述数据更新函数；基于所述数据更新函数对所述表单组件对应实例进行双向绑定。
[0006]可选地，在本专利技术第一方面的第一种实现方式中，所述建立表单基础数据库包括：将表单标识、表单名称、表单分类和表单描述通过数据结构方式录入；基于所述表单标识和预设列信息的格式，将所述表单名称、所述表单分类以及所述表单描述存储至预设数据库，得到表单基础数据库。
[0007]可选地，在本专利技术第一方面的第二种实现方式中，在所述基于所述表单基础数据库，获取表单组件之前，还包括：接收携带关键维度数据的表单组件生成请求，根据所述关键维度数据，从所述表单基础数据库中获取与所述关键维度数据匹配的表单模板和所述表单模板的维度匹配数据；根据所述表单模板和与所述表单模板的维度匹配数据，分别对所述表单模板进行数据填充，得到所述表单模板对应的初始表单组件；根据用户数据对所述
初始表单组件进行渲染，得到所述初始表单组件对应的业务场景表单，并根据实际应用场景确定所述用户的表单。
[0008]可选地，在本专利技术第一方面的第三种实现方式中，所述当检测到所述表单组件中的初始数据发生变化时，将所述初始数据的变化发送至预设数据订阅程序包括：当检测到所述表单组件中的初始数据发生变化时，将所述变化发送至校验程序；所述校验程序判断预设数据订阅列表中是否存在对应数据订阅程序；若所述数据订阅列表中存在对应数据订阅程序，则将所述变化发送至所述订阅程序。
[0009]可选地，在本专利技术第一方面的第四种实现方式中，所述根据所述关键维度数据，从所述表单基础数据库中获取与所述关键维度数据匹配的表单模板和所述表单模板的维度匹配数据包括：根据所述关键维度数据，从预设表单基础数据库中查询是否存储有包含所述关键维度数据的表单模板；若是，则获取包含所述关键维度数据的表单模板和与所述表单模板对应的维度匹配数据；若否，则确定所述关键维度数据对应的维度上下级列表，并基于所述维度上下级列表中维度从下到上的顺序逐级查询所述表单基础数据库中是否存储有包含所述关键维度数据的上级维度数据的表单模板；若包含有，则获取包含所述上级维度数据的表单模板及与所述表单模板对应的维度匹配信息；若不包含，则继续查询直至查询到包含所述关键维度数据对应的顶级维度信息的表单模板及与所述表单模板对应的维度匹配数据。
[0010]可选地，在本专利技术第一方面的第五种实现方式中，所述根据所述表单模板和与所述表单模板的维度匹配数据，分别对所述表单模板进行数据填充，得到所述表单模板对应的初始表单组件包括：根据表单模板对应的维度匹配信息，确定所述表单模板对应的各个表项名称；将所述表项名称填充在所述表单模板中，得到所述表单模板对应的初始表单组件。
[0011]可选地，在本专利技术第一方面的第六种实现方式中，所述根据用户数据对所述初始表单组件进行渲染，得到所述初始表单组件对应的业务场景表单，并根据实际应用场景确定所述用户的表单包括：根据所述初始表单组件包括的各个表项名称，从所述用户数据中分别确定出每个表项名称对应的业务表项数据；将每个业务表项数据分别渲染到所述初始表单组件中对应的表项名称下，得到所述初始表单组件对应的业务场景表单，并根据实际应用场景确定所述用户的表单。
[0012]本专利技术第二方面提供了一种表单数据的双向绑定装置，包括：建立模块，用于建立表单基础数据库，并基于所述表单基础数据库获取表单组件，其中，所述表单组件的数据为初始数据；第一发送模块，用于当检测到所述表单组件中的初始数据发生变化时，将所述初始数据的变化发送至预设数据订阅程序；第二发送模块，用于根据所述初始数据的变化发送数据更新请求至预设数据更新程序；封装模块，用于根据所述数据更新请求调用数据更新函数，并将所述初始数据封装进所述数据更新函数；更新模块，用于基于所述数据更新函数对所述表单组件对应实例进行双向绑定。
[0013]可选地，在本专利技术第二方面的第一种实现方式中，所述建立模块具体用于：将表单标识、表单名称、表单分类和表单描述通过数据结构方式录入；基于所述表单标识和预设列信息的格式，将所述表单名称、所述表单分类以及所述表单描述存储至预设数据库，得到表单基础数据库。
[0014]可选地，在本专利技术第二方面的第二种实现方式中，所述表单数据的双向绑定装置还包括：接收模块，用于接收携带关键维度数据的表单组件生成请求，根据所述关键维度数据，从所述表单基础数据库中获取与所述关键维度数据匹配的表单模板和所述表单模板的维度匹配数据；填充模块，用于根据所述表单模板和与所述表单模板的维度匹配数据，分别对所述表单模板进行数据填充，得到所述表单模板对应的初始表单组件；渲染模块，用于根据用户数据对所述初始表单组件进行渲染，得到所述初始表单组件对应的业务场景表单，并根据实际应用场景确定所述用户的表单。
[0015]可选地，在本专利技术第二方面的第三种实现方式中，所述第一发送模块具体用于：当检测到所述表单组件中的初始数据发生变化时，将所述变化发送至校验程序；所述校验程序判断预设数据订阅列表中是否存在对应数据订阅程序；若所述数据订阅列表中存在对应数据订阅程序，则将所述变化发送本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种表单数据的双向绑定方法，其特征在于，所述表单数据的双向绑定方法包括：建立表单基础数据库，并基于所述表单基础数据库获取表单组件，其中，所述表单组件的数据为初始数据；当检测到所述表单组件中的初始数据发生变化时，将所述初始数据的变化发送至预设数据订阅程序；根据所述初始数据的变化发送数据更新请求至预设数据更新程序；根据所述数据更新请求调用数据更新函数，并将所述初始数据封装进所述数据更新函数；基于所述数据更新函数对所述表单组件对应实例进行双向绑定。2.根据权利要求1所述的表单数据的双向绑定方法，其特征在于，所述建立表单基础数据库包括：将表单标识、表单名称、表单分类和表单描述通过数据结构方式录入；基于所述表单标识和预设列信息的格式，将所述表单名称、所述表单分类以及所述表单描述存储至预设数据库，得到表单基础数据库。3.根据权利要求1所述的表单数据的双向绑定方法，其特征在于，在所述基于所述表单基础数据库，获取表单组件之前，还包括：接收携带关键维度数据的表单组件生成请求，根据所述关键维度数据，从所述表单基础数据库中获取与所述关键维度数据匹配的表单模板和所述表单模板的维度匹配数据；根据所述表单模板和与所述表单模板的维度匹配数据，分别对所述表单模板进行数据填充，得到所述表单模板对应的初始表单组件；根据用户数据对所述初始表单组件进行渲染，得到所述初始表单组件对应的业务场景表单，并根据实际应用场景确定所述用户的表单。4.根据权利要求1所述的表单数据的双向绑定方法，其特征在于，所述当检测到所述表单组件中的初始数据发生变化时，将所述初始数据的变化发送至预设数据订阅程序包括：当检测到所述表单组件中的初始数据发生变化时，将所述变化发送至校验程序；所述校验程序判断预设数据订阅列表中是否存在对应数据订阅程序；若所述数据订阅列表中存在对应数据订阅程序，则将所述变化发送至所述订阅程序。5.根据权利要求3所述的表单数据的双向绑定方法，其特征在于，所述根据所述关键维度数据，从所述表单基础数据库中获取与所述关键维度数据匹配的表单模板和所述表单模板的维度匹配数据包括：根据所述关键维度数据，从预设表单基础数据库中查询是否存储有包含所述关键维度数据的表单模板；若是，则获取包含所述关键维度数据的表单模板和与所述表单模板对应的维度匹配数据；若否，则确定所述关键维度数据对应的维度上下级列表，并基于所述维度上下级列表中维度从下到上的顺序逐级查询所述表单基础数据库中是否存储有包含所述关键维度数据...

【专利技术属性】
技术研发人员：周异成，
申请(专利权)人：平安国际智慧城市科技股份有限公司，
类型：发明
国别省市：