[发明专利]一种基于vue自定义组件的零代码表单生成方法与系统

说明书

本发明公开了一种基于vue自定义组件的零代码表单生成方法与系统，表单设计者登录前端管理端，基于业务场景创建表单分类，在具体的表单分类下设计表单模板，选取表单模板完成表单实例的创建；前端管理端调用系统后端程序接口，将表单配置信息写入服务器数据库；表单设计者通过前端管理端调用表单预览功能，对表单进行预览；前端管理端调用后端程序接口，从服务器数据库读取对应表单配置数据；前端管理端调用vue自定义表单组件，通过步骤七获取的表单配置数据，渲染出可视化表单；表单设计者根据表单预览效果，如果达到预期，表单设计结束；如果效果不理想，继续下一步；表单设计者修改表单配置数据，并循环以上步骤，直至表单预览效果达到预期。

技术领域

本发明属于软件开发领域，具体涉及一种基于vue自定义组件的零代码表单生成方法与系统。

背景技术

随着互联网与移动互联网技术的发展，企事业单位智能化办公、无纸化办公成为大数据、人工智能时代的首选，将纸质数据信息化已经成了必然趋势。然而传统的人工数据录入方式却存在效率低、易出错、成本高等弊端，这就需要借助动态智能表单系统。

当前，在该领域已出现一些动态表单生成构建的方案。如申请号CN202010620054.3的中国专利公开了一种基于VUE技术的低代码开发表单方法和系统，其方法的主要步骤如下：

1、可视化创建表单，提供基于网页可拖拽技术的表单创建控件，用户通过简单的拖拽完成表单创建；

2、持久化表单配置信息；

3、设置表单数据模型，从数据库中提取出可用的数据模型信息，在表单配置页面设置表单每个控件对应的数据库表列名称；

4、设置表单访问权限；

5、填表用户访问页面；

6、读取数据库数据，对表单进行动态渲染；

7、填表人填写表单；

8、保存表单数据。

以上方法和系统，已能满足一些简单业务场景，但在表单配置方面，由于基于可拖拽表单创建控件进行表单配置，无法实现用户对表单的高度自定义，如用户无法定义表单对应数据库表中的字段类型、长度、校验规则和提示信息等。表单开发人员自由度较低，难以满足复杂的业务场景。

发明内容

为克服以上技术问题，本发明提供了一种基于vue自定义组件的零代码表单生成方法与系统，本发明可以针对复杂场景简单有效的生成对应表单。

为了达到上述目的，本发明采用如下技术方案：

一种基于vue自定义组件的零代码表单生成系统，所述系统基于前后端分离的web开发技术实现，包括系统前端和系统后端，其中系统前端所依赖的表单组件基于前端vue自定义组件实现，所述系统前端包括前端管理端和前端客户端；

前端管理端：用于为表单设计者提供与后端交互的可视化页面，设计者通过前端管理端完成表单的设计与创建；

前端客户端：用于为表单填写者提供与后端交互的可视化页面，填写者通过前端客户端完成表单的数据填写；

系统后端：用于为整个系统提供数据持久化能力，负责将表单设计者创建的表单配置数据和表单填写者填写的表单数据存入数据库，并在系统前端渲染页面时提供表格配置数据和表单数据。

一种基于vue自定义组件的零代码表单生成方法，包括以下步骤：

步骤一：表单设计者登录前端管理端；

步骤二：表单设计者基于业务场景创建表单分类；

步骤三：表单设计者在具体的表单分类下设计表单模板；