CN113342328A - Method for generalizing foreground and background interactive assemblies - Google Patents

Abstract

The invention designs a method for generalizing front-end and back-end interaction components when a plurality of protocols are mutually converted under an interconnected gateway management system with a plurality of protocol packets in parallel in a development mode with separated foreground and background. The method comprises the steps that configuration data required by rendering of a framework to an interface are defined by a foreground and sent to a background, and the background returns corresponding configuration data according to a data format; the foreground sends a request to the background to return configuration data for encapsulation, and renders a form and a form of equipment or a variable in a browser according to the encapsulated form array; when a user edits the form, a method for verifying the encapsulated form is executed, and is used for verifying the form when the form is added, deleted, modified, checked and submitted; the foreground integrates the form data, transmits the data value edited by the user to the background, and circularly updates the database by the background to return to the foreground for displaying to the user. The method has the advantages that data in the form which is added, deleted, modified and checked in the form and in the form verification condition are all controlled by the background, the front-end codes are greatly simplified, the modification flexibility is high, the universality is strong, and the maintenance cost of the front end and the back end is low.

Description

Method for generalizing foreground and background interactive assemblies

Technical Field

The invention relates to a method for generalizing a foreground and background interaction assembly, and belongs to the field of intelligent manufacturing control.

Background

In recent years, the development demand of the global manufacturing industry and the like on industrial software is greatly increased, and the basic demand is approximately in form information increase, deletion, modification, data real-time display, authority management, visual configuration diagram and the like, wherein the form information increase, deletion, modification and modification are an indispensable part of the development demand of the industrial software.

The project develops an intelligent Internet of things gateway management system aiming at the problems of more industrial field communication equipment, more acquisition variables, slow solution, large data storage capacity, complex and various requirements and the like. The gateway mainly manages a plurality of protocol packets, and manages functions of data acquisition, data display, data storage, export and the like under the protocol through switching among the protocol packets. The main content of the drive configuration part in the system is to manage the equipment under each protocol and the variable under each equipment. The page structure is that the left side is an equipment management table, and the equipment table can be subjected to addition, deletion, modification and check by adding three buttons of equipment, editing equipment and deleting equipment and popping a form; the middle part is an equipment tree, and when the equipment in the equipment management table is changed, the data in the equipment tree is also changed; and the right side is a variable management table, equipment in the equipment tree is clicked, and the variable table shows variable data under the equipment. The configuration page structure of each protocol is quite different, but the information shown in the device and variable table under each protocol is different. For example, in the device management table, several items of information, such as prop, device name, device IP, and port number, need to be shown in the device table under each protocol, but the reconnection times, timeout time, description, local port, and server name are shown as needed according to the features of different protocols, as is the case with the variable management table.

In the past, a 1 plus n mode is adopted in the foreground development process, namely, a plurality of sub-components are introduced into a main file, one protocol is a component, a drop-down frame for switching the protocol is in the main file, and the rest contents are switched at any time in each sub-component through condition judgment and data binding. The disadvantages of this mode are: when a background developer changes according to requirements, the foreground needs to modify each protocol, namely each subassembly system, and especially when form verification conditions are modified, the workload is high, the development progress of each protocol is not synchronous, codes are redundant, more manpower is needed for later maintenance, time and manpower resources are wasted to a great extent, and the purposes of code simplification and convenient maintenance are not achieved.

Therefore, in order to simplify the code and facilitate maintenance, the sub-components are integrated and encapsulated, so that the forms and the forms of each protocol are generalized, and the progress can be conveniently mastered and the later maintenance is a problem to be solved urgently.

Disclosure of Invention

The invention mainly aims at the problems of code redundancy, large modification workload and time-consuming maintenance caused by introducing a plurality of sub-assemblies during protocol configuration, and provides a foreground and background interactive assembly generalization method, namely, a background modifies a database foreground according to the characteristics of each protocol, namely, the foreground can be changed in real time according to an interface method, so that the aim of simplifying work is fulfilled.

The adopted technical scheme is as follows: a method for generalizing a foreground and background interactive assembly comprises the following steps:

the foreground defines the configuration data required by the framework to be rendered to the interface and sends the configuration data to the background, and the background returns the corresponding configuration data according to the data format;

the foreground sends a request to the background to return configuration data for encapsulation, and renders a form and a form of equipment or a variable in a browser according to the encapsulated form array;

when a user edits the form, a method for verifying the encapsulated form is executed, and is used for verifying the form when the form is added, deleted, modified, checked and submitted;

the foreground integrates the form data, transmits the data value edited by the user to the background, and circularly updates the database by the background to return to the foreground for displaying to the user.

The configuration data includes the following table entry fields of the device management form and the variable management form: table item name, prop value, form type, form binding data, form prompt information and form verification condition; the form type comprises an input box and a drop-down box, and the drop-down box comprises drop-down options;

the name of the form item is the attribute of the data acquisition equipment, the value of the prop is the identifier of the attribute of the data acquisition equipment, the binding data of the form is the data value of the actually acquired attribute of the data acquisition equipment, the prompt information of the form is used for prompting a user to edit the content, and the verification condition of the form is used for judging whether the input information of the user is accepted.

The tables and forms of the devices or variables include:

static forms need foreground to render table entry fields to the interface in advance, and do not need background to return the fields;

the dynamic form needs a foreground to pre-establish an input frame and a pull-down selection frame, and is rendered to an interface by combining data configuration returned by a background;

contents shown when the table loads data: header data source, table height, click line method, total number of pages, current number of lines, and number of display lines per page.

And the packaging is to sequentially store the received background data in a predefined empty array to obtain a packaged form array.

The package form verification method comprises the following steps:

and circularly traversing the data in the packaged form array, if the current form edited by the user is consistent with the prop of any data in the form array, traversing the form verification condition of the data, if the current form edited by the user is consistent with the prop of any data in the form array, receiving the content edited by the user in a foreground, and otherwise, outputting a prompt to remind the user of the editing format of the content.

The form verification condition is judged by combining an if statement and a regular expression, and whether the form verification condition comprises the following steps: "letter or letter + number combination", "IP format", "integer", "chinese inclusive".

The integrated form data includes:

for variable or device management forms: traversing the table item names of the dynamic form, and then transmitting the table item names and the data edited by the corresponding user to a background in a key value pair mode; the "key-value pair" is of the form { prop value: user-edited data };

for the frequency table entries in the static form, transmitting values to a background in a key value pair mode; the "key-value pair" is of the form { frequency: user edited data }.

The invention has the advantages that:

1. the invention adopts the method that the foreground builds the framework and the background returns the data filling, and has strong applicability to the common forms.

2. The invention encapsulates the background return data, has extremely high flexibility, more convenient modification and lower maintenance cost, and is once and for all.

Drawings

FIG. 1 is a flow chart of foreground and background interaction for the method of the present invention.

Fig. 2 is a diagram of a foreground encapsulation framework and a background return data structure according to the present invention.

FIG. 3 is a flow chart of a method for verifying a packaged form according to the present invention.

Detailed Description

In order to make the technical means, advantages and the like of the present invention clearer, further explanation is made herein with reference to the accompanying drawings.

A foreground and background interactive component generalization method comprises the following steps:

firstly, a foreground and background form interaction process needs to be combed: the foreground encapsulates a part of code frames needing to be rendered in the page, a background inquiry form interface is called during mounting, and the background returns data configuration needed by the foreground to the foreground through one interface. And then, the foreground encapsulates the background return data and renders the background return data into a corresponding form, so that the form can be subjected to increasing, deleting, modifying and checking. And checking whether the form passes the verification method of foreground encapsulation, transmitting the form data to the background to complete the process when the form is submitted, adding or modifying to generate new form data, calling the form again by the foreground, and circularly generating the dynamic form.

Referring to FIG. 1, a flow diagram of foreground and background interaction is shown.

Step S1: opening a browser, calling a background inquiry form interface during mounting, and encapsulating a part of code frames needing to be rendered in a page by a foreground in advance;

step S2: the background returns the data configuration required by the foreground to the foreground in a JSON format through an interface;

step S3: the foreground encapsulates the background return data into an array, wherein the array comprises a form prop, a label name, a form type (an input box or a pull-down selection box), and if the form type is the pull-down selection box, the contents of the pull-down menu, an occupied text, the value of the form and a form verification condition need to be returned;

step S4: the frame built by the foreground can render a corresponding form in a browser by traversing the packaged data;

step S5: a verification method is packaged in a foreground when the forms are submitted, the verification method comprises verification conditions of all the forms, a plurality of if sentences are parallel and do not interfere with each other, the verification conditions of each form are matched through the if sentences and are verified by combining a regular expression, if the verification conditions are 'false', a '1' is returned, and a prompt is given; if the value is "true", returning to pass "0";

step S6: finally, when a 'submit' button of the pop-up box is clicked, if all the forms are not verified, the form modifying method cannot be entered, and if the forms are verified, the prop and the value of the forms are packaged into a 'key value pair' object form by the foreground, and the form is added or edited by the background;

step S7: and adding or modifying the table data to generate new table data in the background, calling the table data again in the foreground, and circularly generating the dynamic table.

The advantage of dynamically generating forms:

(1) the framework is built on the foreground, so that foreground codes are simplified and optimized to a great extent;

(2) the interactive data of the foreground and the background are clear through multiple times of encapsulation;

(3) the later maintenance is convenient, and if the form needs to be changed, the background can modify the data;

(4) the method has strong universality and is suitable for a system with Vue foreground frames in all development modes with front ends and back ends separated.

Fig. 2 is a diagram showing a foreground encapsulation frame and a background return data structure according to the present invention.

The specific framework built by the foreground and the background return data format are shown in the figure. The page structure is that the left side is an equipment table, the middle is an equipment tree, the right side is a variable table, and an equipment adding/editing button is clicked or a variable adding/editing button is popped up to be an equipment or variable table. The frame used by the foreground is Vue, and an iView component library is used, data can be bound through a 'v-bind' instruction, and the data bound by all devices and variable tables are header columns and data in the tables. The data bound in the device form and the variable form is as follows: and (3) label, model, bidirectional binding and placeholder of form data, rendering the form data into form occupying characters in the browser, and if the form is a drop-down selection frame, binding options and rendering the form occupying characters into a drop-down selection item in the browser.

When the browser is opened or refreshed, the foreground calls a background query form and a form interface, and the background return data format is a JSON array which comprises a device form, a variable form and a variable form. The returned values of the device table and the variable table are also 'JSON' arrays, the head field and the data field of the table are indicated in the background, and the front stage directly assigns the head field and the data field to the table. Device forms and variable forms: the format of the background return data is still a 'JSON' array, each form is an object, and the object comprises a plurality of 'key value pairs' required by the foreground: the prop, label, type and form verification array valprompt, the background writes each verification condition into an object, for example: the verification condition is "not allowed to be empty and must be in IP format", then the object in the verification array is { message: "not allowed to be empty", required: "true" }, { message: "must be in IP format", pattern? (. The foreground encapsulates the background return data, prepares a null array, traverses the background return array, places values of prop, type, label, valid and options into the null array after naming, and places form binding data into the null array, so that the data can be integrally taken out when the values are transferred to the background. After packaging, the framework built by the foreground can render the device form and the variable form in the browser by traversing the array.

Referring to FIG. 3, a flowchart of a method for package form verification is shown.

Step S1: submitting the form and triggering an on-blu event of the form;

step S2: defining a variable errorNum equal to 0;

step S3: judging whether the form is empty, if so, adding 1 to the error Num value; if not, the value of errorNum is unchanged;

step S4: judging whether the form is a letter or a combination of a letter and a number by combining the regular expression, and if the result is false, adding 1 to the error Num value; if the result is true, the value of the errorNum is not changed;

step S5: judging whether the form is in an IP format or not by combining the regular expression, and if the result is false, adding 1 to the error Num value; if the result is true, the value of the errorNum is not changed;

step S6: judging whether the form is an integer or not by combining the regular expression, and if the result is false, adding 1 to the error Num value; if the result is true, the value of the errorNum is not changed;

step S7: judging whether the form is an integer between 0 and 65535 by combining the regular expression, and if the result is false, adding 1 to the error Num value; if the result is true, the value of the errorNum is not changed;

step S8: returning the errorNum, and if the errorNum is larger than 0, giving an error prompt; if the errorNum is 0, the verification is passed, and a value can be transmitted to the background.

When equipment/variables are added, the background can automatically generate id for later recognition, so that no id form exists in a modal box popped up when the 'add' button is clicked, but only the id information of the id form is displayed in the modal box popped up when the 'edit' button is clicked, and editing is forbidden. Therefore, a null object is prepared first, and when a value is transmitted, if the values of the prop and the value of all the forms are assigned to the null object in the form of a 'key value pair' under the condition of increasing data; when editing data, not only the above operation is performed, but also a device id/variable id, which is a static form, is added to an empty object and a value is transferred to a background interface. The back stage processes the data, and the front stage calls the query form and the form interface.

In summary, the method of the present invention is mainly directed to a method for dynamically generating a form and a form when a plurality of sub-components are introduced, and a method for generalizing the form addition, deletion, modification, and check. The method starts from the foreground, packages the foreground framework and the background return data, and automatically generates the dynamic form after traversing. The method changes the original mode of '1 + n' into the mode of '1', greatly simplifies foreground codes, has high frame flexibility of foreground encapsulation, is convenient for later maintenance, and is suitable for popularization and use.

Claims (7)

1. A method for generalizing a foreground and background interactive component is characterized by comprising the following steps:

the foreground defines the configuration data required by the framework to be rendered to the interface and sends the configuration data to the background, and the background returns the corresponding configuration data according to the data format;

the foreground sends a request to the background to return configuration data for encapsulation, and renders a form and a form of equipment or a variable in a browser according to the encapsulated form array;

when a user edits the form, a method for verifying the encapsulated form is executed, and is used for verifying the form when the form is added, deleted, modified, checked and submitted;

the foreground integrates the form data, transmits the data value edited by the user to the background, and circularly updates the database by the background to return to the foreground for displaying to the user.

2. The method of claim 1, wherein the configuration data comprises the following table entry fields of the device management form and the variable management form: table item name, prop value, form type, form binding data, form prompt information and form verification condition; the form type comprises an input box and a drop-down box, and the drop-down box comprises drop-down options;

the name of the form item is the attribute of the data acquisition equipment, the value of the prop is the identifier of the attribute of the data acquisition equipment, the binding data of the form is the data value of the actually acquired attribute of the data acquisition equipment, the prompt information of the form is used for prompting a user to edit the content, and the verification condition of the form is used for judging whether the input information of the user is accepted.

3. The method of claim 1, wherein the tables and forms of devices or variables comprise:

static forms need foreground to render table entry fields to the interface in advance, and do not need background to return the fields;

the dynamic form needs a foreground to pre-establish an input frame and a pull-down selection frame, and is rendered to an interface by combining data configuration returned by a background;

contents shown when the table loads data: header data source, table height, click line method, total number of pages, current number of lines, and number of display lines per page.

4. The method for generalizing a foreground-background interaction component according to claim 1, wherein the encapsulating step is to sequentially store the received background data in a predefined empty array to obtain an encapsulated form array.

5. The method of claim 1, wherein the encapsulated form validation method comprises:

and circularly traversing the data in the packaged form array, if the current form edited by the user is consistent with the prop of any data in the form array, traversing the form verification condition of the data, if the current form edited by the user is consistent with the prop of any data in the form array, receiving the content edited by the user in a foreground, and otherwise, outputting a prompt to remind the user of the editing format of the content.

6. The method for generalizing foreground and background interaction components according to claim 1, wherein the form verification condition is determined by combining an if statement and a regular expression, and whether the form verification condition includes: "letter or letter + number combination", "IP format", "integer", "chinese inclusive".

7. The method of claim 1, wherein the integrated form data comprises:

for variable or device management forms: traversing the table item names of the dynamic form, and then transmitting the table item names and the data edited by the corresponding user to a background in a key value pair mode; the "key-value pair" is of the form { prop value: user-edited data };

for the frequency table entries in the static form, transmitting values to a background in a key value pair mode; the "key-value pair" is of the form { frequency: user edited data }.

Images