本发明属于软件开发领域，具体涉及一种可视化零代码自定义表单生成系统与方法。
背景技术：
1、随着移动互联网和ai人工智能技术的发展，企事业单位智能化办公、无纸化办公成为大数据、人工智能时代的首选，将纸质数据信息化已经成为必然趋势；然而传统的人工数据录入方式却存在效率低、易出错、成本高等弊端，这就需要借助动态表单生成系统。
2、在大型企业web开发中，不同业务场景下需要开发多种不同的表单应用，在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，多个表单应用与系统应用之间就会演变成多个不易维护的巨石应用；这时就要借助微前端技术将本发明的动态表单生成系统内嵌到企业web应用中，使其能独立开发、独立部署，减少耦合度。
3、当前，在该领域也有一些动态表单生成构建的方案；它们的主要步骤如下：
4、添加字段：通过下拉选择字段类型；
5、配置自段名称、自段描述等属性；
6、添加表单模版：配置模版名称、模版描述等属性；
7、表单模版配置步骤1中的字段；
8、多次重复步骤4来创建一个完整的表单模版；
9、表单填写者访问页面；
10、读取数据库数据，对表单进行动态渲染；
11、填表人填写表单；
12、保存表单数据进行提交。
13、以上方法和系统，已经能满足一些简单的业务场景，但是在表单配置上面，由于是通过手动去选择字段反复操作，无法实现用户对表单的高度自定义，例如，用户无法自由的去拖动表单字段去改变位置、设置字段在表单页面的百分比大小、校验规则和提示信息等；表单开发人员自由度较低，难以满足复杂的业务场景；同时在大型企业web开发中也难以做到复用，不易开发人员协同维护；因此，现提供一种可视化零代码自定义表单生成系统与方法。
技术实现思路
1、为了解决以上技术问题，本发明提供了一种可视化零代码自定义表单生成系统与方法，本发明可以针对复杂场景简单有效的动态生成对应表单。
2、为了达到上述目的，本发明采用如下技术方案：
3、一种可视化零代码自定义表单系统，包括服务前端和服务后端，所述服务前端使用mvvm模式，用于将应用程序的业务和表示逻辑与用户界面清晰分离；所述服务前端包括前端管理系统和客户端；
4、前端管理系统：用于为管理员提供与服务后端交互的可视化页面，管理员通过前端管理系统完成表单的设计与创建；
5、客户端：用于为表单填写者提供与服务后端的表单填写页面，填写者通过客户端完成表单的填写与提交；
6、服务后端：用于为整个系统提供数据的持久化能力，负责将表单设计者创建的表单配置数据和表单填写者填写的表单数据存入数据库，并在客户端渲染页面时提供json配置数据和表单数据。
7、进一步的，一种可视化零代码自定义表单生成方法，包括以下步骤：
8、步骤s1：管理员登录前端管理系统进入到表单设计页；
9、步骤s2：管理员根据需求及业务场景设计表单；
10、步骤s3：管理员从组件库中获取相应的组件进行拖拽到画布区；
11、步骤s4：管理员在画布区对所获取的组件进行上下左右排序；
12、步骤s5：管理员在表单设计页内的组件属性编辑区对组件进行自定义配置，获取表单配置数据；
13、步骤s6：表单配置完成管理员通过点击预览按钮对设计的表单进行预览，前端管理系统将表单配置数据输入至浏览器本地存储，在预览页面读取浏览器本地存储的配置数据，渲染出可视化表单；预览页面用于模拟提交及重置表单操作；
14、步骤s7：管理员获取表单预览效果，若效果达到预期，则根据需要通过点击发布按钮创建表单，至此表单设计结束；若效果不理想，则返回继续编辑；
15、步骤s8：管理员根据步骤s3至步骤s4对应的页面修改表单配置数据，并循环步骤s5至步骤s6，直至表单预览效果达到预期；
16、步骤s9：当设计的表单达到业务及需求所需的效果时，管理员点击发布按钮进行表单持久化存储；
17、步骤s10：表单填写者通过客户端从服务后端拿到配置json数据渲染出可视化表单，填写完整数据进行上报提交。
18、进一步的，步骤s1中，当管理员使用对应的角色账号登录后，前端管理系统为管理员提供与服务后端交互的可视化页面。
19、进一步的，步骤s3中，所述表单组件包括以下分类：分组标题、单文本行、多行文本、多选、下拉列表、级联下拉列表、日期、时间、日期时间、数值、整数、图片附件、文档附件、开关、评分、签名和富文本。
20、进一步的，所述签名组件基于html5新标准canvas进行封装，由html代码配合高度和宽度属性定义出可绘制区域。
21、进一步的，步骤s4中，画布区域使用html5新特性drag拖拽进行上下左右进行排序。
22、进一步的，步骤s5中，所述表单属性包括标识名、提示文字、自段描述、是否必填、客户可见和组件占比。
23、进一步的，步骤s6中，所述的浏览器本地存储使用html5新标准持久化的本地存储localstorage。
24、进一步的，步骤s6中，预览页面用于模拟表单使用者进行表单填写和选择操作，填写完成进行模拟提交。
25、进一步的，所述的模拟提交操作包含两个自段，分别为用户名和联系方式。
26、进一步的，步骤s9中，发布表单提交包含两个自段，分别为表单名称和表单描述；所述表单名称是对相应自定义表单的简短定义，所述表单描述是对该自定义表单的详细描述。
27、进一步的，步骤s9中对表单的持久化存储通过调用服务后端的api接口存储至数据库。
28、相比现有技术，本发明具有如下有益效果：
29、本发明通过drag拖拽标准可以自由的配置组件位置，通过统一的表单配置数据规范和统一的可视化前端配置页面，使管理员可以零代码就得以创建具有多种展示形式和复杂数据交互特性的表单，满足多种复杂业务场景需求。
30、本发明基于vue2框架，使用drag拖拽标准，以json格式配置表单组件展示形态和校验规则实现；本发明中核心模块以element-ui组件库和vue2自定义组件的方式实现，配置流程及逻辑简单明了，代码实现稳定可靠，更新升级方便快捷，非常适合敏捷开发。
31、本发明还支持使用微前端qiankun技术将该表单系统内嵌至企业web项目中，使其企业中多个团队通过独立发布功能的方式来共同构建现代化 web 应用，来面对各种复杂的业务场景。
1.一种可视化零代码自定义表单系统，包括服务前端和服务后端，其特征在于，所述服务前端使用mvvm模式，用于将应用程序的业务和表示逻辑与用户界面清晰分离；所述服务前端包括前端管理系统和客户端；
2.一种可视化零代码自定义表单生成方法，基于权利要求1所述的一种可视化零代码自定义表单系统，其特征在于，包括以下步骤：
3.根据权利要求2所述的一种可视化零代码自定义表单生成方法，其特征在于，步骤s1中，当管理员使用对应的角色账号登录后，前端管理系统为管理员提供与服务后端交互的可视化页面。
4.根据权利要求2所述的一种可视化零代码自定义表单生成方法，其特征在于，步骤s3中，所述表单组件包括以下分类：分组标题、单文本行、多行文本、多选、下拉列表、级联下拉列表、日期、时间、日期时间、数值、整数、图片附件、文档附件、开关、评分、签名和富文本。
5.根据权利要求4所述的一种可视化零代码自定义表单生成方法，其特征在于，所述签名组件基于html5新标准canvas进行封装，由html代码配合高度和宽度属性定义出可绘制区域。
6.根据权利要求2所述的一种可视化零代码自定义表单生成方法，其特征在于，步骤s4中，画布区域使用html5新特性drag拖拽进行上下左右进行排序。
7.根据权利要求2所述的一种可视化零代码自定义表单生成方法，其特征在于，步骤s5中，所述表单属性包括标识名、提示文字、自段描述、是否必填、客户可见和组件占比。
8.根据权利要求2所述的一种可视化零代码自定义表单生成方法，其特征在于，步骤s6中，所述的浏览器本地存储使用html5新标准持久化的本地存储localstorage。
9.根据权利要求2所述的一种可视化零代码自定义表单生成方法，其特征在于，步骤s6中，预览页面用于模拟表单使用者进行表单填写和选择操作，填写完成进行模拟提交，步骤s9中，发布表单提交包含两个自段，分别为表单名称和表单描述；所述表单名称是对相应自定义表单的简短定义，所述表单描述是对该自定义表单的详细描述，步骤s9中对表单的持久化存储通过调用服务后端的api接口存储至数据库。
10.根据权利要求9所述的一种可视化零代码自定义表单生成方法，其特征在于，所述的模拟提交操作包含两个自段，分别为用户名和联系方式。
