Research And Application Of A Universal Rendering Mechanism For Dynamic Forms Using Multiple Front-End Frameworks In The Chemical Industry

In the informatization construction of the chemical industry,forms are widely used for information collection and user interaction,especially in the fields of sampling and detection analysis.However,due to the different types of detection indicators for different chemical products,the form structure is complex and diverse.For example,in the detection of detergent product glass water,it is necessary to detect indicators such as freezing point,PH,cleaning power,compatibility,and corrosivity.The traditional development method of one form,one table,one page is inefficient and costly to maintain.Therefore,dynamic forms technology is widely used in the chemical industry.In web development,the research on dynamic form technology is mainly divided into two aspects: back-end dynamic form model construction and front-end dynamic form configuration file parsing and rendering.However,with the popularity of the front and rear end separation development model and the endless emergence of various front-end frameworks,the methods and mechanisms for rendering dynamic forms on each front-end framework page are also different and incompatible with each other.This paper proposes the research and application of a general rendering mechanism for dynamic forms in the chemical field with multiple front-end frameworks,aiming to implement a dynamic form rendering generator that can be used in multiple front-end frameworks.Based on a unified form configuration file,the generator implements dynamic form rendering and generation of unified configuration files under different front-end frameworks through component rendering mechanisms,and supports customized form elements and styles to meet the needs of different scenarios.The research focus of this paper is on parsing and rendering front-end dynamic form configuration files.The main work is as follows:1.Design a common unified form configuration file and corresponding rendering components and API interfaces.These components and interfaces enable the parsing and rendering of unified form configuration files under different front-end frameworks,thereby enabling the creation and presentation of dynamic forms.At the same time,it also allows users to select different rendering components and API interfaces based on their own needs to meet different scene requirements.2.With the componentization of form elements as the core,split the unified form configuration file into corresponding form elements.The original component packaging of the split form elements is performed through native JS to improve the maintainability and reusability of the form.Specifically,form elements are packaged into individual components with corresponding attributes and methods that can complete the functions and interactions of form elements.When you need to change form elements,you only need to re parse the unified form configuration file to complete the update of the form.3.Front end frame adapter.The front-end framework adapter is used to adapt and assemble encapsulated form element components with the front-end framework to achieve dynamic form presentation under different front-end frameworks.Specifically,a corresponding adapter is designed for each front-end framework,which can interface form element components with front-end framework components to achieve display and interaction of form elements within the framework.This design adopts a componentized development idea,using native JS to render the unified form configuration file into corresponding form element components,and finally achieving cross framework presentation and generation of dynamic forms through front-end framework adapters.After application testing,the design has high portability and flexibility,and can meet the needs of dynamic form rendering and generation under mainstream front-end frameworks.