Interactive interface generation method and system, computer equipment and storage medium

Abstract

The invention provides an interactive interface generation method and system, computer equipment and a storage medium, and relates to the technical field of computers, and the interactive interface generation method comprises the following steps: creating and generating a database table at a back end based on a business demand, receiving entity data by the back end, and sending the database table and the entity data to a server; receiving a form data request sent from the front end, and sending the database table and the entity data to the front end for rendering by using an application programming interface of the server to generate a front-end form; the front-end form is displayed on the user side, function configuration is carried out based on the front-end form, and an interactive interface is generated; and finally, transmitting a query field input through the interactive interface to a rear end, sending target entity data corresponding to the query field by utilizing the rear end, and updating the interactive interface. According to the method, after the form is generated at the front end according to the entity, when a user needs to adjust, the form at the front end can be adaptively adjusted only by adjusting the entity at the rear end, and secondary development adjustment is not needed.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to an interactive interface generation method, system, computer device and storage medium. Background Art

[0002] With the rapid development of information technology, the demand for software system development is growing. Among many software applications, the design and development of interactive interfaces is a crucial link. Common interactive interface development is now mainly divided into code development and low-code platform generation. Traditional interactive interface development usually requires professional developers to do a lot of manual coding work, which is not only time-consuming and labor-intensive, but also prone to errors. In addition, when the entity definition changes, the interactive interface needs to be modified accordingly, which also increases the difficulty and cost of maintenance; traditional low-code technical solutions will pre-define some interactive interface templates, allowing users to manually drag and drop to generate forms, but the flexibility of the template is limited and it is difficult to adapt to complex entity definition changes. And when the entity definition does not match the template, a lot of manual adjustments are required.

[0003] In addition, the method of generating an interactive interface through interface definition requires manual synchronization of the new interface after the interface is updated to generate a new interactive interface, and is not universal with interface binding. Summary of the invention

[0004] In view of the shortcomings of the prior art described above, the purpose of the present application is to provide an interactive interface generation method, system, computer device and storage medium, which are used to solve the technical problems in the prior art of repeatedly developing forms with similar functions when generating interactive interfaces and failing to quickly respond to changes in business requirements.

[0005] To achieve the above purpose and other related purposes, the present application provides a method for generating an interactive interface, comprising the following steps:

[0006] Based on pre- or real-time generated business requirements, corresponding database tables are created on the backend;

[0007] issuing a request to retrieve entity data, receiving entity data corresponding to the entity data request, and sending the database table and the entity data to a server;

[0008] Receiving a form data request sent from the front end, and using the application programming interface of the server to send the database table and the entity data to the front end for rendering to generate a front end form; and displaying the front end form on the user end, and performing function configuration based on the front end form to generate an interactive interface for human-computer interaction;

[0009] The query fields input through the interactive interface are transmitted to the backend, and the target entity data corresponding to the query fields are sent by the backend, and the interactive interface is updated based on the target entity data.

[0010] In one embodiment of the present application, the process of transmitting the query field input through the interactive interface to the backend, using the backend to send the target entity data corresponding to the query field, and updating the interactive interface based on the target entity data includes:

[0011] The query field is used as a filter condition inputted in the interactive interface, and form data is obtained according to the table name displayed in the interactive interface, and an entity adjustment request is sent to the database, and entity data returned by the database is received, which is recorded as query entity data;

[0012] Convert the filtering condition into a query statement in a structured query language, and identify the query type corresponding to the query field based on the query statement; wherein the query type includes: filtering, checking and counting;

[0013] Generate a complete structured query language statement according to the query type, and use the structured query language statement to query the query entity data, and extract entity data that meets the filtering conditions as target entity data;

[0014] The interactive interface is updated based on the target entity data, and the query results corresponding to the query fields are displayed in the updated interactive interface.

[0015] In one embodiment of the present application, if the query type includes a non-paged query, the process of generating a complete structured query language statement according to the query type and querying the query entity data using the structured query language statement includes:

[0016] splicing the query field list into a search column statement in the structured query language according to the filtering in the query type; and splicing the state transformation function of the search column statement according to the query type; and splicing the counting function of the search column statement according to the counting in the query type;

[0017] splicing the search column statement, the state transformation function of the search column statement, the counting function of the search column statement, the query entity data and the query statement in the structured query language to generate a complete structured query language statement;

[0018] The query entity data is queried without pages using the structured query language statement, and the results are assembled according to the filter field list, the query list return results and the count results, and the entity data that meets the filter conditions is extracted as the target entity data.

[0019] In one embodiment of the present application, if the query type includes a paging query, the process of generating a complete structured query language statement according to the query type and querying the query entity data using the structured query language statement further includes:

[0020] splicing the counting function of the search column statement according to the count in the query type, and splicing the search column statement, the counting function of the search column statement, the query entity data and the query statement in the structured query language to generate a complete structured query language statement;

[0021] Using the structured query language statement to perform paging query on the query entity data, and determining whether the count result is greater than a preset value;

[0022] If it is greater than a preset value, then the state transformation function of the search column statement is spliced ​​according to the query type, and the search column statement, the state transformation function of the search column statement, the counting function of the search column statement, the query entity data and the query statement in the structured query language are spliced ​​to generate a new complete structured query language statement; and, the query entity data is queried by page using the new structured query language statement, and the paging results are assembled;

[0023] If it is equal to the preset value, a blank paging result is obtained.

[0024] In one embodiment of the present application, the process of using the backend to send target entity data corresponding to the query field, and updating the interactive interface based on the target entity data includes:

[0025] Using the backend to generate an entity adjustment request according to the query field, and sending the entity adjustment request to the database; and receiving entity data corresponding to the entity adjustment request returned by the database, recorded as target entity data;

[0026] The target entity data is sent to the server through the back end, and the target entity data is sent to the front end through the application programming interface of the server for adaptive adjustment, so as to update the interactive interface displayed on the user end.

[0027] In one embodiment of the present application, the database table and the entity data are sent to the front end for rendering using the application programming interface of the server, and the process of generating the front end form includes:

[0028] Convert the field type in the database table sent by the application programming interface into a data display type for the front-end component; wherein the data display type includes: a digital type, a time type, and a text type;

[0029] According to the data structure of the database table, the database table is rendered on a page using the front-end component, and data is extracted from the entity data sent by the application programming interface for display according to the data display type to generate the front-end form; wherein the functional configuration of the front-end form includes a new form configuration and an edit form configuration.

[0030] In one embodiment of the present application, before the user terminal generates and displays an interactive interface for interacting with the front-end form, the method further includes:

[0031] Acquire the field data of the individually customized rendering component that is determined in advance or in real time, and record it as the individually rendered field data; and add a numerical type information field to the individually rendered field data for adjustment, and display it according to the data display type of the front-end component, so that the user can make a data display selection after the interactive interface is generated;

[0032] And / or, obtaining a pre-determined or real-time determined field filtering configuration, and extracting the filtered fields to be displayed from the entity data according to the data structure of the database table; wherein the fields to be displayed are used to be displayed after the interactive interface is generated.

[0033] The present application also provides an interactive interface generation system, the system comprising:

[0034] The back end is used to create a corresponding database table according to the business requirements generated in advance or in real time, and to issue a request to retrieve entity data and receive entity data corresponding to the entity data request; and to send the database table and the entity data to the server and send the target entity data corresponding to the query field;

[0035] A database, used to respond to the request to retrieve entity data and transmit entity data corresponding to the entity data request to the back end;

[0036] The server is configured to receive the database table and the entity data sent by the back end and provide an application programming interface to the front end; and receive a form data request sent from the front end and send the database table and the entity data to the front end using the application programming interface;

[0037] The front end is used to generate a form data request, and render the database table and entity data transmitted by the application programming interface to generate a front end form;

[0038] The user end is used to display the front-end form, perform functional configuration based on the front-end form, and generate an interactive interface for human-computer interaction; and transmit the query field input through the interactive interface to the back end, receive the target entity data corresponding to the query field, and update the interactive interface based on the target entity data.

[0039] The present application also provides a computer device, including a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of any one of the above-mentioned methods for generating an interactive interface.

[0040] The present application also provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the steps of any one of the above-mentioned methods for generating an interactive interface are implemented.

[0041] As described above, the present application provides an interactive interface generation method, system, computer device and storage medium, which have the following beneficial effects:

[0042] This application first creates a corresponding database table on the back end based on the business needs generated in advance or in real time; then issues a request to retrieve entity data, receives the entity data corresponding to the entity data request, and sends the database table and entity data to the server; then receives a form data request issued from the front end, and uses the server's application programming interface to send the database table and entity data to the front end for rendering to generate a front-end form; and displays the front-end form on the user end, and performs functional configuration based on the front-end form to generate an interactive interface for human-computer interaction; finally, the query field entered through the interactive interface is transmitted to the back end, and the back end is used to send the target entity data corresponding to the query field, and the interactive interface is updated based on the target entity data. It can be seen from this that after the front end generates a form based on the entity, when the user needs to adjust it, only the back end needs to adjust the entity, and the front-end form can be adaptively adjusted without the need for secondary development and adjustment. Therefore, this application automatically adapts display and form editing according to the backend data type, and additionally supports the adjustment of the front-end display form of custom fields, including but not limited to dozens of field types such as text, single choice, multiple choice, drop-down box, etc., and can also be flexibly configured according to different business scenarios, and flexibly configure field display when displaying data, while supporting search form customization; and supporting complex column header filtering and sorting by field data type. Therefore, this application supports the rapid generation of forms based on backend data, has rich customization functions, supports complex filtering, and can quickly respond to needs online. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 A schematic diagram of an exemplary system architecture for applying the technical solutions in one or more embodiments of the present application;

[0044] Figure 2 A schematic diagram of a flow chart of a method for generating an interactive interface provided in an embodiment of the present application;

[0045] Figure 3 A timing diagram of generating an interactive interface provided by an embodiment of the present application;

[0046] Figure 4 A schematic diagram of a backend data processing flow provided in an embodiment of the present application;

[0047] Figure 5 A schematic diagram of an interactive interface provided in an embodiment of the present application;

[0048] Figure 6 A process path table provided for an embodiment of the present application;

[0049] Figure 7 A schematic diagram of converting field types provided in an embodiment of the present application;

[0050] Figure 8 A schematic diagram of a basic form provided in an embodiment of the present application;

[0051] Fig. 9 A schematic diagram of editing a basic form provided in an embodiment of the present application;

[0052] Fig.10 A schematic diagram of time field selection provided in an embodiment of the present application;

[0053] Fig.11 A schematic diagram of a form configuration provided in an embodiment of the present application;

[0054] Fig.12 A schematic diagram of screening conditions provided in an embodiment of the present application;

[0055] Fig.13 A schematic diagram of character types provided in an embodiment of the present application;

[0056] Fig.14 A schematic diagram of time types provided in an embodiment of the present application;

[0057] Fig.15 A schematic diagram of time types provided in an embodiment of the present application;

[0058] Fig.16The figure is a schematic diagram of the hardware structure of a computer device suitable for implementing one or more embodiments of the present application. DETAILED DESCRIPTION

[0059] The following is an explanation of the embodiments of the present application by specific specific examples, and those skilled in the art can easily understand other advantages and effects of the present application from the content disclosed in this specification. The present application can also be implemented or applied by other different specific embodiments, and the details in this specification can also be based on different viewpoints and applications, without departing from the spirit of the present application. Various modifications or changes are made. It is understood that, in the absence of conflict, the following embodiments and the features in the embodiments can be combined with each other. In addition, it is understood that the illustrations provided in the following embodiments only illustrate the basic concept of the present application in a schematic manner, and only the components related to the present application are shown in the drawings rather than the number, shape and size of the components during the actual implementation. The type, quantity and ratio of each component during its actual implementation can be a random change, and its component layout type may also be more complicated.

[0060] Figure 1 A schematic diagram of an exemplary system architecture to which the technical solution in one or more embodiments of the present application can be applied is shown. Figure 1 As shown, the system architecture 100 may include a terminal device 110, a network 120, and a server 130. The terminal device 110 may include various electronic devices such as a smart phone, a tablet computer, a laptop computer, and a desktop computer. The server 130 may be an independent physical server, or a server cluster or a distributed system composed of multiple physical servers, or a cloud server providing cloud computing services. The network 120 may be a communication medium of various connection types that can provide a communication link between the terminal device 110 and the server 130, such as a wired communication link or a wireless communication link.

[0061] According to the implementation requirements, the system architecture in the embodiment of the present application can have any number of terminal devices, networks and servers. For example, the server 130 can be a server group composed of multiple server devices. In addition, the technical solution provided in the embodiment of the present application can be applied to the terminal device 110, can also be applied to the server 130, or can be implemented by the terminal device 110 and the server 130 together, and the present application does not make any special restrictions on this.

[0062] In one embodiment of the present application, the terminal device 110 or server 130 of the present application can create a corresponding database table in the back end based on the business needs generated in advance or in real time; then issue a request to retrieve entity data, receive entity data corresponding to the entity data request, and send the database table and entity data to the server; then receive a form data request issued from the front end, and use the server's application programming interface to send the database table and entity data to the front end for rendering to generate a front end form; and display the front end form on the user end, and perform function configuration based on the front end form to generate an interactive interface for human-computer interaction; finally, transmit the query field input through the interactive interface to the back end, and use the back end to send the target entity data corresponding to the query field, and update the interactive interface based on the target entity data. The interactive interface generation method is executed by using the terminal device 110 or the server 130. After the front end generates the form based on the entity, when the user needs to adjust it, only the back end needs to adjust the entity, and the front end form can be adjusted adaptively without the need for secondary development and adjustment. Therefore, this application automatically adapts the display and form editing according to the back-end data type, and additionally supports adjustment of the front-end display format of custom fields, including but not limited to dozens of field types such as text, single choice, multiple choice, drop-down boxes, etc., and can also be flexibly configured according to different business scenarios, and flexibly configure field display when displaying data, while supporting search form customization; and supporting complex column header filtering and sorting according to field data type.

[0063] The above section introduces the contents of an exemplary system architecture that applies the technical solution of the present application. Next, the interactive interface generation method of the present application will be introduced.

[0064] Figure 2 A schematic diagram of a flow chart of a method for generating an interactive interface is shown. Figure 3 A schematic diagram of a timing sequence for generating an interactive interface is shown. Specifically, in an exemplary embodiment, Figure 2 and Figure 3 As shown, this embodiment provides a method for generating an interactive interface, comprising the following steps:

[0065] S210, based on the business requirements generated in advance or in real time, creating a corresponding database table in the backend (also called Backend);

[0066] S220, issuing a request to retrieve entity data, receiving entity data corresponding to the entity data request, and sending the database table and entity data to a server (also referred to as Server);

[0067] S230, receiving a form data request from a front end (also called Frontend), and using the server's application programming interface (also called ServerAPI) to send the database table and entity data to the front end for rendering, generating a front end form; and displaying the front end form on the user end (also called User), and performing function configuration based on the front end form, generating an interactive interface for human-computer interaction. Specifically, in this embodiment or other embodiments, the front end can distinguish and parse the fields according to the storage type of the fields in the database, enumerate and classify most commonly used database variable types, convert them into component types displayed by the front end components, and perform basic rendering based on this type.

[0068] S240, transmitting the query fields input through the interactive interface to the backend, and using the backend to send the target entity data corresponding to the query fields, and updating the interactive interface based on the target entity data. The query fields include but are not limited to: adjusting fields and adding fields.

[0069] According to the above records, in this embodiment or other embodiments, the backend data processing flow is as follows: Figure 4 As shown. Among them, Figure 4 The process shown can efficiently extract data from the data source that meets the requirements of a specific page. And by converting the various information provided by the page into standard SQL (Structured Query Language, SQL for short) syntax, accurate data query and counting can be performed, and the results can be carefully processed and accurately returned. Specifically, in order to support the above query conditions, the backend performs special processing on the filter conditions (filters) and converts the data structure of the conditional filtering into the SQL language. The specific steps are as follows:

[0070] ① Single data acquisition. According to the specific requirements of the page, try to obtain a single data from the data source. This process is not a random extraction, but a screening based on specific key information. In this embodiment, a specific value of the character code list pageCode is designed to point to a single database table.

[0071] ② Concatenate WHERE conditions. WHERE refers to a keyword in SQL, which is used to specify the filter conditions for the query. Specifically, the filter conditions (filters) input on the page are cleverly converted into the WHERE clause in the SQL syntax to achieve more accurate queries. For example, assuming that the condition input on the page is "status=1AND value LIKE'%Specific keyword%'", parse and convert it. First, identify the condition "status=1" to determine that the status of the data must be 1. Next, for the condition "value LIKE'%Specific keyword%'", convert it into a statement in SQL that performs fuzzy matching on values ​​to ensure that only data corresponding to values ​​containing specific keywords are selected.

[0072] ③ Splice SELECT statements. SELECT is a keyword in SQL that specifies which columns to retrieve from a database table. Specifically, according to different query types, carefully splice the filter field list (filterProperty) into a SELECT statement in SQL. If you are querying for counts, you also need to splice the count function COUNT(1) to accurately count the number of data that meet the conditions. For example, when performing a query list operation, if the filter field list contains fields such as "id", "name", and "date", you can splice these fields one by one after the SELECT statement, in the form of "SELECT id, name, date FROM...". When querying for counts, it will be spliced ​​into the form of "SELECT COUNT(1)FROM...WHERE...", where the WHERE clause is spliced ​​by the previous steps. At the same time, the SELECT statement is perfectly spliced ​​with the FROM and WHERE clauses to form a complete and accurate SQL statement, making full preparations for subsequent data queries.

[0073] ④ Data source query. Use the spliced ​​SQL statements to conduct in-depth queries on the data source. If the query is for count, the COUNT(1) query will be executed to quickly determine the number of data items that meet the conditions. During the query execution process, efficient data interaction will be carried out with the data source to accurately extract data that meets the conditions. For example, if the query condition is sales orders within a specific time period, all order records within the time period will be searched in the data source, and further filtered according to other conditions. Judging the result is one of the key links in this step. If the query is for count, it will be judged whether the result is greater than 0 to determine whether there is data that meets the conditions. If it is a query list, the query result, that is, the specific data items that meet the conditions, will be returned directly.

[0074] ⑤ Result processing. Perform corresponding processing according to different situations of the query results. If the query count result is 0, it means that there is no data that meets the conditions. At this time, an empty paging result will be obtained for proper display on the page. If the query count result is greater than 0, statements such as SELECT status as status will be further spliced ​​to obtain more detailed status information. Next, obtain the specific data in the query list and assemble the paging results for this data. For example, if the query is a user list, when there is user data that meets the conditions, the user's status information can be sorted and the user data can be paginated according to certain paging rules so that users can easily browse and view it on the page.

[0075] ⑥ Return results. Finally, the processed results are accurately returned to the page for users to view and use. The returned result may be a list containing specific data items, a number indicating the number of data items, or an empty paging result, depending on the query type and result.

[0076] According to the above records, in an exemplary embodiment, the query field input through the interactive interface is transmitted to the back end, and the target entity data corresponding to the query field is sent by the back end, and the process of updating the interactive interface based on the target entity data includes: using the query field as the filter condition input through the interactive interface, and obtaining the form data according to the table name displayed on the interactive interface, and issuing an entity adjustment request to the database, and receiving the entity data returned by the database, which is recorded as the query entity data; converting the filter condition into a query statement in the structured query language, and identifying the query type corresponding to the query field based on the query statement; wherein the query type includes: filtering, searching and counting; generating a complete structured query language statement according to the query type, and using the structured query language statement to query the query entity data, and extracting the entity data that meets the filter condition as the target entity data; updating the interactive interface based on the target entity data, and displaying the query result corresponding to the query field in the updated interactive interface.

[0077] Specifically, as an example, if the query type includes a non-paged query, a complete structured query language statement is generated according to the query type, and the process of using the structured query language statement to query the query entity data includes: splicing the query field list into a retrieval column statement in the structured query language according to the filter in the query type; and, splicing the state transformation function of the retrieval column statement according to the lookup in the query type; and, splicing the counting function of the retrieval column statement according to the counting in the query type; splicing the retrieval column statement, the state transformation function of the retrieval column statement, the counting function of the retrieval column statement, the query entity data and the query statement in the structured query language to generate a complete structured query language statement; using the structured query language statement to perform a non-paged query on the query entity data, and assembling the results according to the filter field list, the query list return results and the counting results, and extracting the entity data that meets the filtering conditions as the target entity data.

[0078] As another example, if the query type includes a paginated query, the process of generating a complete structured query language statement according to the query type and querying the query entity data using the structured query language statement also includes: splicing the counting function of the retrieval column statement according to the count in the query type, and splicing the retrieval column statement, the counting function of the retrieval column statement, the query entity data and the query statement in the structured query language to generate a complete structured query language statement; performing a paginated query on the query entity data using the structured query language statement, and determining whether the counting result is greater than a preset value; if it is greater than the preset value, splicing the state transformation function of the retrieval column statement according to the query type, and splicing the retrieval column statement, the state transformation function of the retrieval column statement, the counting function of the retrieval column statement, the query entity data and the query statement in the structured query language to generate a new complete structured query language statement; and performing a paginated query on the query entity data using the new structured query language statement, and assembling the paginated results; if it is equal to the preset value, obtaining a blank paginated result.

[0079] According to the above records, in an exemplary embodiment, the process of using the backend to send target entity data corresponding to the query field and updating the interactive interface based on the target entity data includes: using the backend to generate an entity adjustment request based on the query field, and sending the entity adjustment request to the database; and, receiving the entity data corresponding to the entity adjustment request returned by the database, recorded as target entity data; sending the target entity data to the server through the backend, and sending the target entity data to the front end through the server's application programming interface for adaptive adjustment, and updating the interactive interface displayed on the user end.

[0080] According to the above records, in an exemplary embodiment, the server's application programming interface is used to send database tables and entity data to the front end for rendering, and the process of generating a front-end form includes: converting the field type in the database table sent by the application programming interface into a data display type for the front-end component; wherein the data display type includes: numeric type, time type, text type; according to the data structure of the database table, using the front-end component to render the database table page, and extracting data from the entity data sent by the application programming interface for display according to the data display type, and generating a front-end form; wherein the functional configuration of the front-end form includes creating a new form configuration and editing a form configuration. As an example, the interactive interface corresponding to the front-end form in this embodiment is as follows: Figure 5 shown.

[0081] According to the above records, in an exemplary embodiment, before the user side generates and displays an interactive interface for interacting with the front-end form, the present embodiment may also include: obtaining field data of a pre-determined or real-time determined field to be individually customized for rendering components, recorded as individually rendered field data; and, adding a numerical type information field to the individually rendered field data for adjustment, and displaying it according to the data display type of the front-end component, so that the user can make data display selections after the interactive interface is generated; and / or, obtaining a pre-determined or real-time determined field filtering configuration, and extracting the filtered fields to be displayed from the entity data according to the data structure of the database table; wherein the fields to be displayed are used for display after the interactive interface is generated.

[0082] According to the above records, in a specific example, if Figure 6 As shown, the backend in this example provides a process path table, where the information stored in the process path table includes necessary information such as column name, data type, and description.

[0083] After the backend completes table creation, the relevant basic information is returned to the frontend through the general interface. The basic format is as follows: type SchemaFieldDT0 = { / **Field code* / dataIndex?: string; / **Field name* / columnName?: string; / **Display name* / title?: string; / **Field type* / dbType?: string; / **Is it a primary key* / primaryKey?: boolean; / **Is it required* / notNull?: boolean; / **Is it unique* / unique?: boolean;}.

[0084] As an example, there are: {dataIndex:'materialCode', columnName:"material_code', title:'Material Code', dbType:'varChar(64)', primaryKey:false, notNull:false, unique:false,}.

[0085] Convert the field types of the table into a data display format that can be understood by the front-end components, such as Figure 7 As shown. Figure 7 In the , TINYINT represents an unsigned integer type in the range of -128 to 127 or 0 to 255. INT: represents a 32-bit integer type in the range of -2147483648 to 2147483647. BIGINT: represents a 64-bit integer type in the range of -9223372036854775808 to 9223372036854775807. number: represents a general numeric type that can store integers or decimals. DECIMAL: used to store precise fixed-point numbers, such as currency values. FLOAT: used to store floating-point numbers, that is, values ​​that can have decimal parts. DATETIME: used to store date and time values, usually in the format of YYYY-MM-DD HH:MM:SS. TIMESTAMP: usually records the timestamp of an event, used to record the time when data is modified. date: used to store date values ​​only, in the format of YYYY-MM-DD. CHAR: a fixed-length character data type. If the stored string is shorter than the declared length, the database will fill it with spaces. VARCHAR: A variable-length character data type. Unlike CHAR, VARCHAR only takes up the necessary space to store the string and its length information. For example, VARCHAR(10) can store a string with a length of 1 to 10. text: Used to store text data.

[0086] After processing, the front-end component will render the page according to the generated structure, and take the value corresponding to dataIndex from the data interface provided by the back-end for data display, and finally generate a basic form display as shown below: Figure 8 As shown in the figure, dataIndex is used to identify the uniqueness of data.

[0087] The form supports creation and editing by default. Input and submission are constrained according to the database field information returned by the backend. For example, the non-empty constraint is changed to required, and the numeric type is changed to decimal / integer distinction. The effect is as follows Fig. 9 shown.

[0088] At the same time, for some field data that need to be customized separately, such as the time type storage result is a string, but it needs to be selected and displayed as a time type, it is necessary to add an additional valueType information field in the returned data. The adjusted format is as follows: {type SchemaFieldDT0 = { / **Field code* / dataIndex?: string; / **Field name* / columnName?: string; / **Display name* / title?: string; / **Field type* / dbType?: string; / **Is it a primary key* / primaryKey?: boolean; / **Is it required* / notNull?: boolean; / **Is it unique* / unique?: boolean: / **Display control* / valueType?: string;}, {datalndex:'time', title:'Latest output time', valueType:'date', dbType:'varChar(64)',}.

[0089] After adjusting according to this format, the front end can display it as a time type component, allowing users to select a time for the field, such as Fig.10 As shown. The valueType supported types default to the basic types supported by proComponents. Thanks to its extensibility, developers can add new valueTypes according to project requirements to meet different business scenarios.

[0090] In actual business needs, not all fields need to be displayed to users, and there may be associated display behaviors. For example, the storage field in the table is only the associated id in another database table. When displaying, it is necessary to obtain the display name associated with the id. For this reason, this embodiment adds additional fields to support the display adjustment of fields, and can adjust the display of fields in tables and forms. After receiving the following fields, the front end will process the data structure, filter out the fields that are not displayed, and obtain the fields that should be displayed correctly from the data according to mapProperty. Among them, mapProperty refers to the attributes related to the Map data structure. Specifically, { / **Is it hidden in the table* / hideInTable? : boolean; / **refers to the attribute field that needs to be displayed, such as factoryName* / mapProperty? : string; / **Is it hidden in the form* / hideInForm? : boolean; / **Is it displayed when creating a new one* / showIncreate? : boolean;'**Is it displayed when editing* / showInEdit? : boolean;}.

[0091] In actual business needs, data forms usually need to support field searches. You can configure the search form by configuring the searchable field. The form input component parses and renders based on the above content, and returns the search content in the standard json (key-value) format. The backend can filter based on this return. The configuration result example is as follows: Fig.11 shown.

[0092] For some complex form data filtering business needs, the present invention provides a column header filtering function. Column header filtering is divided into two aspects: option filtering and condition filtering. If you need to enable this function, you need to return an additional filterable field in the above data structure for the front-end component to parse. After enabling, a funnel icon will be used on the corresponding field column header to indicate that the column has enabled filtering, and you can open the filter tab by clicking it, such as Fig.12As shown. The filter conditions will be spliced ​​and returned according to the format of the figure below. Field is the field key; opType will be matched according to the type. They are all keywords supported by SQL statements, which is convenient for backend parsing; value is the filter value. When there are multiple values, "," is used to splice and return; children are used for nested queries. Among them, opType is the abbreviation of Operation Type, that is, the operation type. Specifically, {type FieldFilterDT0 = {field? : string; opType? : 'EQ"NE"LIKE"NOT_LIKE"START WITH"IN"NOT_IN"BETWEEN''NOT_BETWEEN"GT"GTE"LT"LTE"IS_NULL"NOT_NULL"OR"AND''NOT'; / **If opType is contain, then it is comma-separated* / value? : string; children? : FieldFilterDT0[];};}

[0093] Option filtering will remove duplicate data from the form and display it to the user. The user can confirm the filter items by checking them. Multiple selections are supported. After clicking OK, the front-end component will spell it out in the above standard format and return it as shown in the following code. field: "orderCode" opType: "IN" value: "order1, ZCOD0001, ZCOD0001-01'.

[0094] Conditional filtering provides conditions based on the field data type. For example, string type only provides conditions such as equal, not equal, contain, not contain, is empty, and is not empty. Fig.13 As shown, the time type is Fig.14 As shown, the digital type is Fig.15 As shown. The component has built-in support for the above three, which is sufficient to cope with most scenarios. If there are other requirements, developers can expand them by themselves.

[0095] In summary, the present application provides a method for generating an interactive interface. First, based on the business needs generated in advance or in real time, a corresponding database table is created in the back end; then a request to retrieve entity data is issued, and the entity data corresponding to the entity data request is received, and the database table and the entity data are sent to the server; then a form data request issued from the front end is received, and the database table and the entity data are sent to the front end for rendering using the server's application programming interface to generate a front end form; and the front end form is displayed on the user end, and functional configuration is performed based on the front end form to generate an interactive interface for human-computer interaction; finally, the query field input through the interactive interface is transmitted to the back end, and the target entity data corresponding to the query field is sent using the back end, and the interactive interface is updated based on the target entity data. It can be seen from this that after the front end generates a form based on the entity, when the user needs to adjust it, only the back end needs to adjust the entity, and the front end form can be adaptively adjusted without the need for secondary development and adjustment. Therefore, this method automatically adapts display and form editing according to the backend data type, and additionally supports the adjustment of the front-end display form of custom fields, including but not limited to dozens of field types such as text, single choice, multiple choice, drop-down box, etc., and can also be flexibly configured according to different business scenarios, and flexibly configure field display when displaying data, while supporting search form customization; and supporting complex column header filtering and sorting according to field data type. Therefore, this method supports the rapid generation of forms based on backend data, has rich customization functions, supports complex filtering, and can quickly respond to needs online.

[0096] In another exemplary embodiment of the present application, the embodiment provides an interactive interface generation system, comprising:

[0097] The back end is used to create and generate corresponding database tables according to business requirements generated in advance or in real time, and to issue a request to retrieve entity data and receive entity data corresponding to the entity data request; and to send the database table and entity data to the server and send target entity data corresponding to the query field;

[0098] The database is used to respond to the request to retrieve entity data and transmit the entity data corresponding to the entity data request to the back end;

[0099] The server is used to receive the database table and entity data sent by the back end and provide an application programming interface to the front end; and receive the form data request sent from the front end and send the database table and entity data to the front end using the application programming interface;

[0100] The front end is used to generate form data requests and render the database tables and entity data transmitted by the application programming interface to generate front-end forms;

[0101] The user end is used to display the front-end form, configure functions based on the front-end form, and generate an interactive interface for human-computer interaction; and transmit the query fields entered through the interactive interface to the back end, receive the target entity data corresponding to the query fields, and update the interactive interface based on the target entity data.

[0102] It can be understood that the interactive interface generation system provided in this embodiment and the interactive interface generation method provided in the above embodiment belong to the same concept, wherein the specific manner in which the interactive interface generation method performs operations has been described in detail in the above method embodiment, and will not be repeated here. In actual applications, the interactive interface generation system provided in this embodiment can allocate the above functions to different functional modules as needed, that is, divide the internal structure of the interactive interface generation system into different functional modules, and then implement all or part of the functions of the corresponding functional modules through the interactive interface generation method described in the above embodiment, and no specific restrictions are made here. For example, the execution process of the back-end, database, server, front-end and user end refers to the interactive interface generation method provided in the above embodiment, and this embodiment will not be repeated here.

[0103] The present application also provides a computer device, which may include a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program so that the computer device executes Figure 2 The steps of the interactive interface generation method. Fig.16 FIG. 1 is a schematic diagram showing a structure of a computer device 1000. Fig.16 As shown, the computer device 1000 includes: a processor 1010 , a memory 1020 , a power supply 1030 , a display unit 1040 , and an input unit 1060 .

[0104] The processor 1010 is the control center of the computer device 1000. It uses various interfaces and lines to connect various components, and executes various functions of the computer device 1000 by running or executing computer programs / instructions stored in the memory 1020, thereby monitoring the computer device 1000 as a whole. In the embodiment of the present application, when the processor 1010 calls the computer program stored in the memory 1020, the following is executed: Figure 2 The steps of the interactive interface generation method. Optionally, the processor 1010 may include one or more processing units; preferably, the processor 1010 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface and application, etc., and the modem processor mainly processes wireless communication. In some embodiments, the processor and the memory may be implemented on a single chip, and in some embodiments, they may also be implemented separately on separate chips.

[0105] The memory 1020 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, various applications, etc.; the data storage area may store instruction data, etc. created according to the use of the computer device 1000. In addition, the memory 1020 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage devices, etc.

[0106] The computer device 1000 also includes a power source 1030 (such as a battery) for supplying power to various components. The power source can be logically connected to the processor 1010 through a power management system, so that the power management system can manage functions such as charging, discharging, and power consumption.

[0107] The display unit 1040 may be used to display information input by the user or information provided to the user and various menus of the computer device 1000, and in the embodiment of the present application, is mainly used to display the display interface of each application in the computer device 1000 and objects such as text and pictures displayed in the display interface. The display unit 1040 may include a display panel 1050. The display panel 1050 may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like.

[0108] The input unit 1060 may be used to receive information such as numbers or characters input by the user. The input unit 1060 may include a touch panel 1070 and other input devices 1080. The touch panel 1070, also known as a touch screen, may collect touch operations of the user on or near it (such as operations of the user using a finger, a stylus, or any other suitable object or accessory on or near the touch panel 1070).

[0109] Specifically, the touch panel 1070 can detect the user's touch operation, detect the signal brought by the touch operation, convert these signals into touch point coordinates, send them to the processor 1010, and receive and execute the command sent by the processor 1010. In addition, the touch panel 1070 can be implemented in various types such as resistive, capacitive, infrared and surface acoustic wave. Other input devices 1080 can include but are not limited to one or more of a physical keyboard, function keys (such as volume control keys, power on / off keys, etc.), a trackball, a mouse, a joystick, etc.

[0110] Of course, the touch panel 1070 can cover the display panel 1050. When the touch panel 1070 detects a touch operation on or near it, it is transmitted to the processor 1010 to determine the type of touch event, and then the processor 1010 provides a corresponding visual output on the display panel 1050 according to the type of touch event. Fig.16 In the embodiment, the touch panel 1070 and the display panel 1050 are two independent components to implement the input and output functions of the computer device 1000, but in some embodiments, the touch panel 1070 and the display panel 1050 can be integrated to implement the input and output functions of the computer device 1000.

[0111] The computer device 1000 may further include one or more sensors, such as a pressure sensor, a gravity acceleration sensor, a proximity light sensor, etc. Of course, according to the needs of specific applications, the computer device 1000 may also include other components such as a camera.

[0112] The embodiment of the present application also provides a computer-readable storage medium, in which a computer program / instruction is stored. When the computer program / instruction is executed by a processor, the above-mentioned device can perform the above-mentioned Figure 2 The steps of the interactive interface generation method.

[0113] It can be understood by those skilled in the art that Fig.16 This is only an example of a computer device and does not constitute a limitation on the device. The device may include more or fewer components than shown in the figure, or combine certain components, or different components. For the convenience of description, the above parts are divided into modules (or units) according to their functions and described separately. Of course, when implementing this application, the functions of each module (or unit) can be implemented in the same or multiple software or hardware.

[0114] Those skilled in the art should understand that the present application may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code. The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be applied to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the functions in the process. Figure 1 A process or multiple processes and / or boxes Figure 1 These computer program instructions can also be stored in a computer-readable memory that can guide a computer or other programmable data processing device to work in a specific way, so that the instructions stored in the computer-readable memory produce a product including an instruction device, which implements the functions specified in the process. Figure 1 A process or multiple processes and / or boxes Figure 1 These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to produce a computer-implemented process, so that the instructions executed on the computer or other programmable device provide for implementing the process in the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0115] The above embodiments are merely illustrative of the principles and effects of the present application and are not intended to limit the present application. Anyone familiar with the technology may modify or change the above embodiments without violating the spirit and scope of the present application. Therefore, all equivalent modifications or changes made by a person of ordinary skill in the art without departing from the spirit and technical ideas disclosed in the present application shall still be covered by the claims of the present application.

Claims

1. A method for generating an interactive interface, characterized in that: The method comprises the following steps: Based on pre- or real-time generated business requirements, corresponding database tables are created on the backend; issuing a request to retrieve entity data, receiving entity data corresponding to the entity data request, and sending the database table and the entity data to a server; Receiving a form data request sent from the front end, and using the application programming interface of the server to send the database table and the entity data to the front end for rendering to generate a front end form; and displaying the front end form on the user end, and performing function configuration based on the front end form to generate an interactive interface for human-computer interaction; The query fields input through the interactive interface are transmitted to the backend, and the target entity data corresponding to the query fields are sent by the backend, and the interactive interface is updated based on the target entity data.

2. The method for generating an interactive interface according to claim 1, characterized in that: The process of transmitting the query field input through the interactive interface to the backend, sending target entity data corresponding to the query field by using the backend, and updating the interactive interface based on the target entity data includes: The query field is used as a filter condition inputted in the interactive interface, and form data is obtained according to the table name displayed in the interactive interface, and an entity adjustment request is sent to the database, and entity data returned by the database is received, which is recorded as query entity data; Convert the filtering condition into a query statement in a structured query language, and identify the query type corresponding to the query field based on the query statement; wherein the query type includes: filtering, checking and counting; Generate a complete structured query language statement according to the query type, and use the structured query language statement to query the query entity data, and extract entity data that meets the filtering conditions as target entity data; The interactive interface is updated based on the target entity data, and the query results corresponding to the query fields are displayed in the updated interactive interface.

3. The method for generating an interactive interface according to claim 2, characterized in that: If the query type includes non-paged query, the process of generating a complete structured query language statement according to the query type and querying the query entity data using the structured query language statement includes: splicing the query field list into a search column statement in the structured query language according to the filtering in the query type; and splicing the state transformation function of the search column statement according to the query type; and splicing the counting function of the search column statement according to the counting in the query type; splicing the search column statement, the state transformation function of the search column statement, the counting function of the search column statement, the query entity data and the query statement in the structured query language to generate a complete structured query language statement; The query entity data is queried without pages using the structured query language statement, and the results are assembled according to the filter field list, the query list return results and the count results, and the entity data that meets the filter conditions is extracted as the target entity data.

4. The method for generating an interactive interface according to claim 2, characterized in that: If the query type includes a paging query, the process of generating a complete structured query language statement according to the query type and querying the query entity data using the structured query language statement further includes: splicing the counting function of the search column statement according to the count in the query type, and splicing the search column statement, the counting function of the search column statement, the query entity data and the query statement in the structured query language to generate a complete structured query language statement; Using the structured query language statement to perform paging query on the query entity data, and determining whether the count result is greater than a preset value; If it is greater than a preset value, then the state transformation function of the search column statement is spliced ​​according to the query type, and the search column statement, the state transformation function of the search column statement, the counting function of the search column statement, the query entity data and the query statement in the structured query language are spliced ​​to generate a new complete structured query language statement; and, the query entity data is queried by page using the new structured query language statement, and the paging results are assembled; If it is equal to the preset value, a blank paging result is obtained.

5. The interactive interface generation method according to any one of claims 1 to 4, characterized in that: The process of using the backend to send target entity data corresponding to the query field and updating the interactive interface based on the target entity data includes: Using the backend to generate an entity adjustment request according to the query field, and sending the entity adjustment request to the database; and receiving entity data corresponding to the entity adjustment request returned by the database, recorded as target entity data; The target entity data is sent to the server through the back end, and the target entity data is sent to the front end through the application programming interface of the server for adaptive adjustment, so as to update the interactive interface displayed on the user end.

6. The interactive interface generation method according to any one of claims 1 to 4, characterized in that: The process of sending the database table and the entity data to the front end for rendering by using the application programming interface of the server to generate a front end form includes: Convert the field type in the database table sent by the application programming interface into a data display type for the front-end component; wherein the data display type includes: a digital type, a time type, and a text type; According to the data structure of the database table, the database table is rendered on a page using the front-end component, and data is extracted from the entity data sent by the application programming interface for display according to the data display type to generate the front-end form; wherein the functional configuration of the front-end form includes a new form configuration and an edit form configuration.

7. The interactive interface generation method according to any one of claims 1 to 4, characterized in that: Before the user terminal generates and displays an interactive interface for interacting with the front-end form, the method further includes: Acquire the field data of the individually customized rendering component that is determined in advance or in real time, and record it as the individually rendered field data; and add a numerical type information field to the individually rendered field data for adjustment, and display it according to the data display type of the front-end component, so that the user can make a data display selection after the interactive interface is generated; And / or, obtaining a pre-determined or real-time determined field filtering configuration, and extracting the filtered fields to be displayed from the entity data according to the data structure of the database table; wherein the fields to be displayed are used to be displayed after the interactive interface is generated.

8. An interactive interface generation system, characterized in that: The system comprises: The back end is used to create a corresponding database table according to the business requirements generated in advance or in real time, and to issue a request to retrieve entity data and receive entity data corresponding to the entity data request; and to send the database table and the entity data to the server and send the target entity data corresponding to the query field; A database, used to respond to the request to retrieve entity data and transmit entity data corresponding to the entity data request to the back end; A server, configured to receive the database table and the entity data sent by the back end, and provide an application programming interface to the front end; and, receiving a form data request sent from a front end, and sending the database table and the entity data to the front end using the application programming interface; The front end is used to generate a form data request, and render the database table and entity data transmitted by the application programming interface to generate a front end form; The user end is used to display the front-end form, and perform function configuration based on the front-end form to generate an interactive interface for human-computer interaction; The query fields input through the interactive interface are transmitted to the backend, target entity data corresponding to the query fields are received, and the interactive interface is updated based on the target entity data.

9. A computer device, characterized in that: It comprises a memory, a processor and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of the interactive interface generation method described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a processor, the steps of the interactive interface generation method described in any one of claims 1 to 7 are implemented.

Images