Dynamic display method for function form interface

Abstract

The invention discloses a function form interface dynamic display method, which comprises the following steps: definition: pre-defining components and forms in a background; creating a new form, and performing JSON configuration generation on the form made by the user by a background; route generation: analyzing JSON configuration by a background, dynamically generating a route with a corresponding name by using a Vue framework, and pointing the generated route to the same index page; the JSON configuration is loaded, and when the routing pages with different names are opened, the index page searches and loads the corresponding JSON configuration; and JSON configuration analysis: an index page analyzes the JSON configuration and obtains a pre-definition, then the pre-definition points to a corresponding component through a Vue framework so as to realize dynamic display of the component, and the index page analyzes the pre-definition so as to realize list display of the form. Non-professional developers can conveniently use the visual configuration platform to build a function form interface, and the requirement for the programming skill of a user is lowered.

Description

Technical Field

[0001] The present invention relates to the technical field of software interface design, and in particular to a method for dynamically displaying a function form interface. Background Art

[0002] Usually, the design of the software interface is fixed directly through code. Any changes to the interface by users generally require professional developers to adjust the code and repackage and deploy it, which makes the software unable to respond quickly to market changes, iterations and deployments.

[0003] The design of some software interfaces supports users to adjust the size and position of function forms, but the adjustment freedom is relatively low and the flexibility is poor, and it still cannot fully meet the user's needs for changes.

[0004] Therefore, there is an urgent need for a method for dynamically displaying a functional form interface that can solve one or more of the above problems. Summary of the invention

[0005] In order to solve one or more problems existing in the prior art, the present invention provides a method for dynamically displaying a functional form interface. The technical solution adopted by the present invention to solve the above problems is: the method comprises: defining, pre-defining components and forms in the background;

[0006] Create a new form, and the backend will generate JSON configuration for the form created by the user;

[0007] Route generation: the background parses the JSON configuration and uses the Vue framework to dynamically generate routes with corresponding names, pointing the generated routes to the same index page;

[0008] JSON configuration loading: when opening a routing page with a different name, the index page searches for and loads the corresponding JSON configuration;

[0009] JSON configuration parsing, the index page parses the JSON configuration and obtains the pre-definition, and then points the pre-definition to the corresponding component through the Vue framework to realize dynamic display of the component, and the index page parses the pre-definition to realize the list display of the form.

[0010] In some embodiments, in the route generation: the background parses the label in the JSON configuration, and uses the addRoutes method of the Vue framework to dynamically generate routes with corresponding names.

[0011] In some embodiments, the pre-definition includes: component tag type, component style attributes, form style and form display mode; the JSON configuration includes: columnData, formData, listData, id.

[0012] Furthermore, in the JSON configuration loading: the index page searches for the corresponding id through the label label, and loads the corresponding JSON configuration through the id.

[0013] Furthermore, in the JSON configuration parsing: the index page parses the JSON configuration and loops the columnData array to obtain the component tag type and the component style attributes in the pre-definition, the component tag type and the component style attributes point to the corresponding component through the is attribute of the component component of the Vue framework, the index page parses the formData to control the form style and the form display mode in the pre-definition, and the index page parses the searchList array and keyList array of the listData to obtain the fields to be displayed.

[0014] In some embodiments, the backend provides a form design bar, a component selection bar, a form property bar, and a component property bar. The form design bar is used to create and adjust forms, the component selection bar provides component selection, the form property bar is used to edit the content of the form, and the component property bar is used to edit the content of the component.

[0015] The backend makes a form through the form design bar and the component selection bar, and the backend performs the pre-definition through the form property bar and the component property bar;

[0016] The user selects a component in the component selection bar by using a mouse pointer or a touch function, and moves the selected component to the form design bar to create the component in the form.

[0017] The technical effects achieved by the present invention are: making it convenient for non-professional developers to use a visual configuration platform to build a functional form interface, reducing the requirements for user programming skills, thereby reducing labor costs and time costs; by building a unified building framework and standards, subsequent maintenance and upgrades of the functional form interface also become easier. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 is a schematic block diagram of the method of the present invention;

[0019] Figure 2A flowchart for loading JSON configuration for the present invention;

[0020] Figure 3 A flowchart of parsing JSON configuration for the present invention;

[0021] Figure 4 An embodiment diagram of building a form in the background of the present invention;

[0022] Figure 5 This is a diagram showing an embodiment of the form design bar in the background of the present invention;

[0023] Figure 6 This is a diagram showing an embodiment of a component selection bar in the background of the present invention;

[0024] Figure 7 It is an embodiment diagram of the form property bar and component property bar in the background of the present invention;

[0025] Figure 8 A list of implementation examples of the functional form interface generated for the present invention.

[0026] [Reference Signs]

[0027] Figure 4 Middle: 1. Form design bar 2. Component selection bar 3. Form property bar and component property bar; Figure 5 Chinese: 20, component 4, display field 5, query field. DETAILED DESCRIPTION

[0028] In order to make the above-mentioned objects, features and advantages of the present invention more understandable, the specific embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from this description, and those skilled in the art can make similar improvements without violating the connotation of the present invention, so the present invention is not limited by the specific embodiments disclosed below.

[0029] like Figure 1-Figure 3 As shown, the present invention discloses a method for dynamically displaying a functional form interface, the method comprising: defining, pre-defining components and forms in the background;

[0030] Create a new form. Users can design and edit the form and configure the components in the form through the backend. The backend will generate JSON configuration for the form created by the user.

[0031] Route generation: the background parses the JSON configuration and uses the Vue framework to dynamically generate routes with corresponding names, pointing the generated routes to the same index page;

[0032] JSON configuration loading: when opening a routing page with a different name, the index page searches for and loads the corresponding JSON configuration;

[0033] JSON configuration parsing, the index page parses the JSON configuration and obtains the pre-definition, and then points the pre-definition to the corresponding component through the Vue framework to realize dynamic display of the component, and the index page parses the pre-definition to realize the list display of the form.

[0034] It should be noted that the background is a visual configuration platform, and the Vue framework is a JavaScript framework for building user interfaces.

[0035] Specifically, the route generation: the background parses the label label in the JSON configuration, and uses the addRoutes method of the Vue framework to dynamically generate routes with corresponding names.

[0036] It should be noted that the pre-definition is used to pre-set specific parameters of components and specific parameters of forms, and users can modify them when creating forms.

[0037] In some embodiments, the pre-definition includes: component tag type, component style attributes, form style and form display mode; the JSON configuration includes: columnData (component list), formData (form display mode, style), listData (form list display fields and methods), id (module id).

[0038] Specifically, the JSON configuration is loaded: the index page searches for the corresponding id through the label label, and loads the corresponding JSON configuration through the id.

[0039] Specifically, combined Figure 3 As shown, the JSON configuration parsing: the index page parses the JSON configuration and loops the columnData array to obtain the component tag type and the component style attribute in the pre-defined, and the component tag type and the component style attribute point to the corresponding component through the is attribute of the component component of the Vue framework to realize dynamic display of the component;

[0040] The index page parses the formData to control the predefined form style and the form display mode to realize the list display of the form;

[0041] The index page parses the searchList array and keyList array of the listData to obtain the fields to be displayed, and the fields are the display fields and query fields in the list of the function form interface to realize the field display in the form list.

[0042] In the pre-definition, the form style and the form display mode preset the style and display of the fields, and the user can also modify or set them when creating the form, and the same applies to the fields of the components.

[0043] Furthermore, the background provides a form design bar, a component selection bar, a form property bar and a component property bar. The form design bar is used to create and adjust forms, the component selection bar provides component selection, the form property bar is used to edit the content of the form, and the component property bar is used to edit the content of the component; the background makes the form through the form design bar and the component selection bar, and the background performs the pre-definition through the form property bar and the component property bar; the user selects the component in the component selection bar through the mouse pointer or touch function, and moves the selected component to the form design bar to realize the creation of the component in the form.

[0044] In Example 1, Figure 4 As shown, Figure 4 An interface for creating a form for the background (visual configuration platform) includes a form design bar 1, a component selection bar 2, a form property bar and a component property bar 3. The user creates a function in the form design bar 1, and the user drags the component in the component selection bar 2 to the function created in the form design bar 1. The user modifies the parameters of the created function and the parameters of the component through the form property bar and the component property bar 3. After the function is edited and created, it becomes a list in the form, wherein the parameters of the component are the component tag type and the component style attributes, and the parameters of the function are the form style and the form display method.

[0045] Combination Figure 5 As shown, the functions created in the form design bar include corresponding components 20, corresponding display fields 4 and query fields 5, and multiple functions are displayed in a list in the form.

[0046] like Figure 6 As shown, the component selection bar classifies different components, including basic components, advanced components and system components. The user drags the component to the position of the function in the form design bar with the mouse pointer to meet the effect required by the function.

[0047] like Figure 7As shown, taking the component property bar in the form property bar and the component property bar as an example, it includes multiple preset parameters such as component type, page tab, field name, etc., which are pre-configured through the preset definition to meet the user's needs for modification or direct use when creating a form.

[0048] The functional form interface generated by the method of this application is as follows Figure 8 As shown, this interface list displays multiple functions, each function contains corresponding display fields and query fields, and each function has a corresponding function component box, and users input and select through the function component box.

[0049] In summary, this application facilitates non-professional developers to use a visual configuration platform to build a functional form interface, reduces the requirements for user programming skills, and thus reduces labor costs and time costs; by building a unified construction framework and standards, the subsequent maintenance and upgrade of the functional form interface also becomes easier.

[0050] The above-described embodiments only express one or more implementation modes of the present invention, and the description thereof is relatively specific and detailed, but it cannot be understood as limiting the patent of the present invention. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present invention, and these all belong to the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the attached claims.

Claims

1. A method for dynamically displaying a function form interface, characterized in that: The method comprises: defining, pre-defining components and forms in the background; Create a new form, and the backend will generate JSON configuration for the form created by the user; Route generation: the background parses the JSON configuration and uses the Vue framework to dynamically generate routes with corresponding names, pointing the generated routes to the same index page; JSON configuration loading: when opening a routing page with a different name, the index page searches for and loads the corresponding JSON configuration; JSON configuration parsing, the index page parses the JSON configuration and obtains the pre-definition, and then points the pre-definition to the corresponding component through the Vue framework to realize dynamic display of the component, and the index page parses the pre-definition to realize the list display of the form.

2. The method for dynamically displaying a function form interface according to claim 1, characterized in that: In the route generation: the background parses the label label in the JSON configuration, and uses the addRoutes method of the Vue framework to dynamically generate routes with corresponding names.

3. The method for dynamically displaying a function form interface according to claim 1 or 2, characterized in that: The pre-definition includes: component tag type, component style attribute, form style and form display mode; the JSON configuration includes: columnData, formData, listData, id.

4. The method for dynamically displaying a function form interface according to claim 3, characterized in that: In the JSON configuration loading: the index page searches for the corresponding id through the label label, and loads the corresponding JSON configuration through the id.

5. The method for dynamically displaying a function form interface according to claim 3, characterized in that: In the JSON configuration parsing: the index page parses the JSON configuration and loops the columnData array to obtain the component tag type and the component style attributes in the pre-definition, the component tag type and the component style attributes point to the corresponding component through the is attribute of the component component of the Vue framework, the index page parses the formData to control the form style and the form display mode in the pre-definition, and the index page parses the searchList array and keyList array of the listData to obtain the fields to be displayed.

6. The method for dynamically displaying a function form interface according to claim 1, characterized in that: The backend provides a form design bar, a component selection bar, a form property bar and a component property bar. The form design bar is used to create and adjust forms, the component selection bar provides component selection, the form property bar is used to edit the content of the form, and the component property bar is used to edit the content of the component; The backend makes a form through the form design bar and the component selection bar, and the backend performs the pre-definition through the form property bar and the component property bar; The user selects a component in the component selection bar by using a mouse pointer or a touch function, and moves the selected component to the form design bar to create the component in the form.

Images