React dynamic form based on (a)

       Here dynamic form capabilities, in response to a large number of business form submission. With questionnaires more like, every time you want to collect all kinds of problems, Logically, each to a different questionnaire to be redeveloped once the front and rear side code, although this is not too much trouble, but the needs of the business logic is not complicated, can be made into a public function, I would like to achieve this dynamic form capabilities to the new demands, directly in good interface design, and then share a link or two-dimensional code generated to fill an object, so this is the development of business people to use It does not require the code will be required to complete.

If I have a demand:

        The tenth anniversary of the junior high school, we need to organize a class reunion, the students need to collect data and information to be collected there (name, gender, telephone number, place of work, work units engaged in industry, micro signal, photos of life)

I now have a dynamic form design system:

Through the new forms interface, according to the fields to collect information, to show what components to use, select from left to develop good components, then the component name changed to correspond to the name of the collection field. The rightmost set form information for display and final form as the table name. After the form is created, you can share the link to fill the need of the students.

Mobile client reporting interface:

Required fields are set in front of a red * there, will go to check, depending on the type of components at the time of submission:

Contacts such as this, the design of the phone number type is selected, the time will be submitted in the format phone numbers to check (basic Each component has its own validation rules):

After completing successfully, you can manage all the students fill in the information:

Finally, you can export all data reported in the students:

So, this dynamic form function, as long as the form is submitted by business needs, flexibility is very high. No matter what the business, as long as the form is submitted, you will not need to write code that would use such a system just fine.

The development of this dynamic form of technical points:

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

Backend: Springboot + Maven + MySQL + Linux + Redis

Released five original articles · won praise 1 · views 10000 +

Guess you like

Origin blog.csdn.net/star_zone/article/details/105031699