基于React实现 动态表单 (一)

       这里实现动态表单功能,是为了应对大量表单提交的业务。跟问卷调查比较像,每次都有各种问题要收集,按道理,每次来不同的问卷都要重新开发一次前后端代码,虽然这个不是很麻烦,但这种需求业务逻辑并不复杂,是可以做成公共功能的,所以想实现这个动态表单功能,来了新需求,直接在界面设计好,然后分享生成的二维码或者链接给填报对象,所以这个主要是开发给业务人员用的,不需要会代码也可以完成要求。

假如我现在有个需求:

        初中毕业十周年了,需要组织一次同学聚会,需要先收集同学们的资料,需要收集的信息有(姓名、性别、联系电话、工作地点、工作单位、从事行业、微信号、生活照)

我现在有一个动态表单设计系统:

通过新建表单界面,根据收集信息的字段,要用什么组件去展示,直接从左边开发好的组件中选择,然后组件名字改成对应收集字段的名字。最右边设置好表单信息,用于表单展示及最后作为表名。表单创建好后,可以分享链接给需要填报的同学。

手机端填报界面:

设置了必填的字段前面会有一个红*,在提交的时候也会根据不同类型组件去校验:

比如这联系方式,设计的时候选择了手机号类型,提交的时候就会按手机号的格式去校验(基本每个组件都有自己的校验规则):

填报成功后,可以对所有同学填报的信息进行管理:

最后可以导出所有同学填报的数据:

所以,这个动态表单功能,只要是表单提交的业务需求,灵活性是很高的。不管什么业务,只要是表单提交,你也不需要会写代码,会用这么个系统就好了。

开发此动态表单的技术点:

前端: React + umi2 + antd + antd-mobile + Dva + ES6

后端: Springboot + Maven + MySQL + Linux + Redis

发布了5 篇原创文章 · 获赞 1 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/star_zone/article/details/105031699
今日推荐