本发明涉及计算机应用，更具体的说是涉及一种web表单处理方法及表单引擎系统。
背景技术：
1、在金融教育系统中，因为业务需求，管理员需要在管理端自定义一系列的表单页面，比如说开户流程、风险问卷或者其它数据采集流程等情况，这时候对程序进行硬编码肯定无法实现上述需求，更不可能让使用者编写代码来实现上述表单页面。所以需要一个表单引擎，让非专业人员能够简单、快捷地完成所需要的表单网页设计与制作，然后再通过后台系统将设计好的网页数据存储与流转，最后再通过表单引擎将设计好的页面展示出来。
2、目前的表单引擎主要是通过封装一些常用的表单供使用者选择，比如输入框、下拉框、时间选择器等，通过拖拽接口实现表单项的拖拽与布局，选中相应的表单项将其可配置的属性绑定到表单上让用户可自行设置，将设计的表单数据转为json数据，然后通过数据库保存与流转，在需要展示的页面再由系统内置的表单解析器解析并展示填写的内容。
3、但上述方式存在如下缺点：
4、1)因为表单项只能根据程序中已经写好的配置项进行设置，所以大部分设计出来的表单页面样式都比较单一。
5、2)一个表单引擎设计好以后其表单项已经固定，市面上已有的表单引擎大部分无法满足金融教育类业务的需求。
技术实现思路
1、有鉴于此，本发明的目的是提供一种web表单处理方法及表单引擎系统，根据金融教育领域业务需求封装的表单组件，满足此领域大部分表单业务的需求，采用组件化编程方式，系统模块化高，方便维护与扩展。
2、为实现上述目的，本发明提供如下技术方案：
3、一种web表单处理方法，包括以下步骤：
4、s1.将表单编辑组件分为三个模块，分别是组件区、布局区、属性编辑区；
5、s2.将每个可选择的表单项定义为一个对象，并将若干个对象放入一个数组中；使用draggable组件作为容器，将定义好的数组数据绑定到此组件的list属性上，在此组件的插槽中将组件名称、图标渲染在页面上，将group属性的name值需要和s3中布局区的draggable组件一致，并将group属性的pull值设置为clone；
6、s3.使用draggable组件作为容器，定义一个数组listarr，将此数组绑定到list属性上，并监听add事件，在初次添加后将该组件置为选中状态，并将listarr中组件数据双向绑定到s3中的属性编辑区；点击布局区组件将该组件置为选中状态，并将listarr中对应的组件数据双向绑定到s4中的属性编辑区；结合element-ui对表单组件进行二次封装，根据组件数据中的组件名称找到对应的二次封装组件作为draggable组件的插槽数据；
7、s4.结合element-ui对属性编辑表单项进行二次封装，并定义一个属性名与属性编辑区中表单组件的对应关系的对象，其中属性名为编辑区选中组件需要进行编辑的属性名，根据属性名与属性编辑表单项组件的对应关系将选中组件需要编辑的属性渲染到属性编辑区，通过v-model实现组件与s3中的listarr数据双向绑定，即修改表单值更改s3中的listarr数据；
8、s5.将s2-s4中的三个组件合并即可得到表单编辑组件，在表单编辑组件内部定义getjson方法，此方法返回s2中listarr数据；
9、s6.构建表单解析组件，在组件内部接收json数据，遍历此数据，并根据每一项组件名的属性值渲染相应的s3中二次封装组件到页面上。
10、进一步地，在s2中，每个可选择的表单项定义为对象，对象属性包括类型、对应组件名称、图标及可配置项。
11、进一步地，在s2中，可选择的表单项包括单行文本、多行文本、数字组件、单选框组件、多选框组件、下拉选择框、时间选择器、日期选择器、评分、开关、滑块、文字、分割线、图片、资料库、栅格布局。
12、进一步地，在s3中，二次封装组件是使用element-ui的表单组件，v-bind指令值赋为$attrs,定义一个参数用于接收组件样式配置参数，修改组件样式。
13、一种web表单引擎系统，包括:
14、组件模块，组件模块包括组件区单元、布局区单元以及属性编辑区单元；所述组件区单元提供所有可选择的表单组件的展示，供用户选择并添加到布局区；所述布局区单元用于实现表单项的拖拽和布局调整，允许用户自由设置表单项的位置和嵌套关系；所述属性编辑区单元用于展示当前选中表单项的属性，允许用户编辑这些属性；
15、表单项定义与数据管理模块，将每个可选择的表单项定义为一个对象，包含组件名称、图标、属性等信息；将多个表单项对象放入一个数组中，用于在组件区和布局区中进行数据绑定和渲染；在布局区使用draggable组件，将数组数据绑定到组件的list属性上，实现表单项的拖拽和布局；
16、表单组件二次封装模块，结合element-ui等前端框架，对表单组件进行二次封装，创建通用的表单组件库；封装后的组件应包含组件名称、图标、属性等信息，并暴露必要的api接口供外部调用；
17、表单解析与渲染模块，构建表单解析组件，用于接收json格式的表单数据，并根据数据渲染相应的表单项；遍历json数据，根据组件名属性值匹配到二次封装组件库中的对应组件，并渲染到页面上。
18、进一步地，还包括数据交互与存储模块，使用vuex或类似的状态管理库进行全局状态管理，确保组件间数据的共享和同步；提供数据保存和加载功能，将当前表单数据保存为json格式，并允许用户加载已保存的表单数据。
19、进一步地，还包括辅助数据库，使用draggable组件实现拖拽布局功能；利用element-ui等前端框架提供的组件和样式，提升系统的用户体验和美观度；使用javascript和vue.js等前端技术进行开发和实现。
20、根据本发明提供的具体实施例，本发明能够解决表单页面样式都比较单一等问题，使用组件式开发，分别将布局区的表单项和属性编辑区的表单项抽离为组件，通过这些基础组件构成构成表单编辑组件和表单解析组件；然后将数据和组件进行双向绑定,最终实现数据层与视图层双向绑定，即试图层更改会改变数据层，数据层更改会更新视图层；让用户能够通过操作视图层修改数据层，然后数据层渲染视图层，从而实现动态表单。
1.一种web表单处理方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的web表单处理方法，其特征在于，在s2中，每个可选择的表单项定义为对象，对象属性包括类型、对应组件名称、图标及可配置项。
3.根据权利要求1所述的web表单处理方法，其特征在于，在s2中，可选择的表单项包括单行文本、多行文本、数字组件、单选框组件、多选框组件、下拉选择框、时间选择器、日期选择器、评分、开关、滑块、文字、分割线、图片、资料库、栅格布局。
4.根据权利要求1所述的web表单处理方法，其特征在于，在s3中，二次封装组件是使用element-ui的表单组件，v-bind指令值赋为$attrs,定义一个参数用于接收组件样式配置参数，修改组件样式。
5.一种web表单引擎系统，用于实现权利要求1-5中任一项所述的方法，其特征在于，包括:
6.根据权利要求5所述的web表单引擎系统，其特征在于，还包括数据交互与存储模块，使用vuex或类似的状态管理库进行全局状态管理，确保组件间数据的共享和同步；提供数据保存和加载功能，将当前表单数据保存为json格式，并允许用户加载已保存的表单数据。
7.根据权利要求5所述的web表单引擎系统，其特征在于，还包括辅助数据库，使用draggable组件实现拖拽布局功能；利用element-ui等前端框架提供的组件和样式，提升系统的用户体验和美观度；使用javascript和vue.js等前端技术进行开发和实现。
