Form rendering method and device, medium and computer equipment
By pre-storing the binding relationship between the technology stack and the connection template on the backend, and generating and storing form item objects, the problem of high code deployment cost in traditional form rendering methods is solved, and efficient and flexible form rendering is achieved.
Patent Information
- Application Number
- CN202311262685.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-09-26
- Publication Date
- 2025-03-28
AI Technical Summary
Traditional form rendering requires the deployment of a large amount of code on the page, resulting in high code deployment costs.
By determining the target technology stack, sending its information to the backend, obtaining the binding relationship between the target technology stack pre-stored by the backend and the target connection template, generating objects one by one with the form items, and storing the objects into the target array, so as to render the form based on the array.
It effectively reduces the amount of code that needs to be deployed to web pages, reduces the cost of code deployment, and realizes dynamic rendering of forms, improving rendering flexibility.
Smart Images

Figure CN119718307A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the technical field of form rendering, and in particular to a form rendering method and apparatus, medium and computer equipment. Background Art
[0002] In related technologies, it is necessary to render the form on the page according to the technology stack. The traditional rendering method is to deploy the code of the connection templates corresponding to each technology stack on the page, and select and execute the code of one of the connection templates according to the currently used technology stack, so as to render the form corresponding to the connection template. However, this method requires deploying a large amount of code on the page, resulting in a high code deployment cost. Summary of the invention
[0003] In a first aspect, an embodiment of the present disclosure provides a form rendering method, the method comprising: determining a target technology stack; sending information of the target technology stack to a backend, and obtaining a target connection template returned by the backend based on a binding relationship between the target technology stack and a target connection template, the binding relationship being pre-stored in the backend; the target connection template comprising connection information of at least one form item to be rendered; generating at least one object corresponding one-to-one to the at least one form item, the object being used to store the connection information of the corresponding form item; storing the at least one object in a first target array; and rendering a form including the at least one form item based on the first target array.
[0004] In some embodiments, the number of the target connection templates is greater than or equal to 1, and each target connection template corresponds to a first target array; rendering the form including the at least one form item based on the first target array includes: rendering at least one form based on the first target array corresponding to each target connection template, each form including a form item corresponding to a target connection template.
[0005] In some embodiments, rendering at least one form based on the first target arrays corresponding to each target connection template includes: adding the first target arrays corresponding to each target connection template to a second target array corresponding to the target technology stack, the second target array being used to store a list of first target arrays corresponding to at least one target connection template of the target technology stack; and rendering at least one form based on each first target array in the second target array.
[0006] In some embodiments, the method further includes: deleting at least one first target array from the second target array.
[0007] In some embodiments, generating at least one object corresponding one-to-one to the at least one form item includes: storing connection information of each form item in at least one connection information array, where different connection information arrays are used to store different connection information; for each form item, searching for the connection information of the form item from the at least one connection information array, and generating the object corresponding to the form item based on the searched connection information.
[0008] In some embodiments, the at least one connection information array includes at least one of the following: a label array, used to store label information of each form item, and the label information is used to uniquely identify the form item; an encryption array, used to store label information of form items that need to be encrypted; a prompt array, used to determine the prompt information corresponding to the input data of each form item; a check array, used to determine the check information of the input data of each form item; a form item type array, used to determine the type information of each form item; a data type array, used to determine the type information of the input data of each form item; and a length array, used to determine the data length information of the input data of each form item.
[0009] In some embodiments, the at least one connection information array includes a label array; for each form item, searching the connection information of the form item from the at least one connection information array, and generating an object corresponding to the form item according to the found connection information, including: looping through the label information in the label array; generating a corresponding empty object for the form item corresponding to the label information currently traversed; searching the connection information of the form item currently traversed from the at least one connection information array, and writing the found connection information into the empty object corresponding to the form item currently traversed.
[0010] In some embodiments, writing the found connection information into the empty object corresponding to the currently traversed form item includes: defining a label field in the empty object corresponding to the currently traversed form item, and setting the field value of the label field to the label information of the currently traversed form item.
[0011] In some embodiments, the at least one connection information array includes an encryption array; the step of writing the found connection information into the empty object corresponding to the currently traversed form item includes: if the label information of the currently traversed form item is found in the encryption array, defining an encrypted field in the empty object corresponding to the currently traversed form item, and setting the field value corresponding to the encrypted field to a first field value, wherein the first field value is used to indicate that the currently traversed form item needs to be encrypted.
[0012] In some embodiments, the at least one connection information array includes a verification array; the writing of the found connection information into the empty object corresponding to the currently traversed form item includes: if the verification information of the currently traversed form item is found in the verification array, defining a verification field in the empty object corresponding to the currently traversed form item, and setting the field value corresponding to the verification field to the verification information of the currently traversed form item found.
[0013] In some embodiments, the at least one connection information array includes a prompt array; the step of writing the found connection information into the empty object corresponding to the currently traversed form item includes: if the prompt information corresponding to the currently traversed form item is found in the prompt array, defining a prompt field in the empty object corresponding to the currently traversed form item, and setting the field value corresponding to the prompt field to the found prompt information corresponding to the currently traversed form item.
[0014] In some embodiments, rendering the form including the at least one form item based on the first target array includes: traversing the first target array to obtain the object corresponding to each form item; assigning the connection information in each object obtained by the traversal to the corresponding attributes of the corresponding form item, to obtain a rendered form.
[0015] In a second aspect, an embodiment of the present disclosure provides a form rendering device, the device comprising: a determination module, used to determine a target technology stack; the target technology stack is pre-bound to a target connection template; an acquisition module, used to send information of the target technology stack to a backend, and obtain a target connection template returned by the backend based on a binding relationship between the target technology stack and the target connection template, the binding relationship being pre-stored in the backend; the target connection template comprising connection information of at least one form item to be rendered; a generation module, used to generate at least one object corresponding one-to-one to the at least one form item, the object being used to store the connection information of the corresponding form item; a storage module, used to store the at least one object in a first target array; and a rendering module, used to render a form including the at least one form item based on the first target array.
[0016] In some embodiments, the number of the target connection templates is greater than or equal to 1, and each target connection template corresponds to a first target array; the rendering module is specifically used to render at least one form based on the first target array corresponding to each target connection template, and each form includes a form item corresponding to a target connection template.
[0017] A rendering module, wherein the rendering module is specifically used to: add a first target array corresponding to each target connection template to a second target array corresponding to the target technology stack, wherein the second target array is used to store a list of first target arrays corresponding to at least one target connection template of the target technology stack; and render at least one form based on each first target array in the second target array.
[0018] In some embodiments, the apparatus further comprises: a deletion module configured to delete at least one first target array from the second target array.
[0019] In some embodiments, the generation module is specifically used to: store the connection information of each form item in at least one connection information array, where different connection information arrays are used to store different connection information; for each form item, search for the connection information of the form item from the at least one connection information array, and generate an object corresponding to the form item based on the searched connection information.
[0020] In some embodiments, the at least one connection information array includes at least one of the following: a label array, used to store label information of each form item, and the label information is used to uniquely identify the form item; an encryption array, used to store label information of form items that need to be encrypted; a prompt array, used to determine the prompt information corresponding to the input data of each form item; a check array, used to determine the check information of the input data of each form item; a form item type array, used to determine the type information of each form item; a data type array, used to determine the type information of the input data of each form item; and a length array, used to determine the data length information of the input data of each form item.
[0021] In some embodiments, the at least one connection information array includes a label array; the generation module is specifically used to: loop through the label information in the label array; generate a corresponding empty object for the form item corresponding to the label information currently traversed; search for the connection information of the form item currently traversed from the at least one connection information array, and write the searched connection information into the empty object corresponding to the form item currently traversed.
[0022] In some embodiments, the generating module is specifically used to: define a label field in an empty object corresponding to the currently traversed form item, and set the field value of the label field to the label information of the currently traversed form item.
[0023] In some embodiments, the at least one connection information array includes an encryption array; the generation module is specifically used to: if the label information of the currently traversed form item is found in the encryption array, define an encrypted field in the empty object corresponding to the currently traversed form item, and set the field value corresponding to the encrypted field to a first field value, wherein the first field value is used to indicate that the currently traversed form item needs to be encrypted.
[0024] In some embodiments, the at least one connection information array includes a verification array; the generation module is specifically used to: if the verification information of the currently traversed form item is found in the verification array, define a verification field in the empty object corresponding to the currently traversed form item, and set the field value corresponding to the verification field to the verification information of the currently traversed form item found.
[0025] In some embodiments, the at least one connection information array includes a prompt array; the generation module is specifically used to: if the prompt information corresponding to the currently traversed form item is found in the prompt array, define a prompt field in the empty object corresponding to the currently traversed form item, and set the field value corresponding to the prompt field to the prompt information corresponding to the currently traversed form item found.
[0026] In some embodiments, the rendering module is specifically used to: traverse the first target array to obtain the object corresponding to each form item; assign the connection information in each object obtained through the traversal to the corresponding attribute of the corresponding form item to obtain a rendered form.
[0027] In a third aspect, an embodiment of the present disclosure provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in any embodiment of the present disclosure.
[0028] In a fourth aspect, an embodiment of the present disclosure provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in any embodiment of the present disclosure when executing the program.
[0029] In the embodiment of the present disclosure, the target technology stack is pre-bound to the target connection template. After determining the target technology stack, the information of the target technology stack can be sent to the back end. Since the back end stores the binding relationship between the target technology stack and the target connection template, the back end can return the target connection template corresponding to the target technology stack. Based on the target connection template, the connection information of the form item to be rendered can be determined, thereby generating at least one object corresponding to the at least one form item, and storing the at least one object in the first target array. In this way, when rendering, the form including the at least one form item can be rendered directly based on the first target array. It is only necessary to deploy the general code of obtaining the target technology stack, sending the information of the target technology stack to the back end, generating objects, storing the objects in the first target array, and form rendering in the front end, without deploying the code of the connection template corresponding to each technology stack to the web page. Since the amount of code of the above-mentioned general code is much smaller than the total amount of code corresponding to the code of the connection template corresponding to each technology stack, the embodiment of the present disclosure can effectively reduce the amount of code deployed on the web page, thereby reducing the cost of code deployment.
[0030] In addition, in the related art, only a fixed form can be rendered on the same web page, but the method of the embodiment of the present disclosure can render different forms for the same web page by acquiring different target technology stacks, thereby realizing dynamic rendering of the form. Moreover, after adding a new technology stack, the solution of the embodiment of the present disclosure only needs to add a connection template corresponding to the new technology stack in the back end, and select the new technology stack as the target technology stack in the front end, and then the form corresponding to the new technology stack can be rendered, which has high scalability.
[0031] It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS
[0032] The drawings herein are incorporated into the specification and constitute a part of the present disclosure. These drawings illustrate embodiments consistent with the present disclosure and are used to illustrate the technical solutions of the present disclosure together with the specification.
[0033] Figure 1 It is a flowchart of the form rendering method of an embodiment of the present disclosure.
[0034] Figure 2A and Figure 2B They are respectively schematic diagrams of forms according to embodiments of the present disclosure.
[0035] Figure 3 Schematic diagram of a candidate technology stack for an embodiment of the present disclosure.
[0036] Figure 4 It is a schematic diagram of the form items corresponding to the connection template of the embodiment of the present disclosure.
[0037] Figure 5 It is a block diagram of a form rendering device according to an embodiment of the present disclosure.
[0038] Figure 6 is a schematic diagram of a computer device according to an embodiment of the present disclosure. DETAILED DESCRIPTION
[0039] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.
[0040] The terms used in this disclosure are only for the purpose of describing specific embodiments and are not intended to limit the disclosure. The singular forms of "a", "said" and "the" used in this disclosure and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used herein refers to and includes any or all possible combinations of one or more associated listed items. In addition, the term "at least one" herein means any combination of at least two of any one or more of a plurality of.
[0041] It should be understood that although the terms first, second, third, etc. may be used in the present disclosure to describe various information, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of the present disclosure, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".
[0042] In order to enable those skilled in the art to better understand the technical solutions in the embodiments of the present disclosure and to make the above-mentioned purposes, features and advantages of the embodiments of the present disclosure more obvious and understandable, the technical solutions in the embodiments of the present disclosure are further described in detail below in conjunction with the accompanying drawings.
[0043] In the related art, it is necessary to deploy the codes of connection templates corresponding to multiple technology stacks on the page, and select and execute the code of one of the connection templates according to the currently used technology stack. Taking the number of technology stacks equal to 2 as an example, assuming that the technology stack includes Stack1 and Stack2, wherein the connection template 1 used by technology stack Stack1 includes connection information info1 and connection information info2, and the connection template 2 used by technology stack Stack2 includes connection information info3, then the code deployed on the page includes: code 1 corresponding to connection information info1 and info2 included in connection template 1, and code corresponding to connection information info3 included in connection template 2. When it is necessary to render the form corresponding to technology stack Stack1 on the page, select technology stack Stack1, and select code 1 from the code deployed on the page; similarly, when it is necessary to render the form corresponding to technology stack Stack2 on the page, select technology stack Stack2, and select code 2 from the code deployed on the page. In actual applications, the number of technology stacks is often relatively large, resulting in a large amount of code that needs to be deployed on the page, which leads to high code deployment and maintenance costs.
[0044] Based on this, the present disclosure provides a form rendering method, such as Figure 1 As shown, the method includes:
[0045] Step S1: Determine the target technology stack;
[0046] Step S2: sending the information of the target technology stack to the backend, and obtaining the target connection template returned by the backend based on the binding relationship between the target technology stack and the target connection template, wherein the binding relationship is pre-stored in the backend; the target technology stack is pre-bound to the target connection template; the target connection template includes connection information of at least one form item to be rendered;
[0047] Step S3: generating at least one object corresponding to at least one form item, wherein the object is used to store connection information of the corresponding form item;
[0048] Step S4: storing at least one object into a first target array;
[0049] Step S5: Rendering a form including at least one form item based on the first target array.
[0050] In an embodiment of the present disclosure, a form may be a form to be rendered on a web page (hereinafter referred to as the page), the form including at least one form item, each form item may be an information acquisition component such as an input box or a drop-down selection box. The form to be rendered on the page is related to the currently adopted technology stack, which includes but is not limited to the Redis technology stack, the TIDB technology stack, the Java technology stack, etc. Different technology stacks correspond to different connection templates, and each connection template includes at least one connection information. Each connection information corresponds to a form item, and each connection information may include at least one information item for describing the form item corresponding to the connection information. The information items include but are not limited to label information, encryption information, prompt information, verification information, form item type information, data type information and / or data length information.
[0051] Among them, the tag information is used to uniquely identify the form item corresponding to the connection information. The encryption information is used to determine whether the form item needs to be encrypted. The prompt information is used to prompt the input data of the form item. The prompt information may include sample information of the input data and error prompt information, wherein the sample information of the input data is used to exemplarily illustrate the form of the input data. For example, assuming that the input data is time information, the sample information of the input data may be "2023-7-4", which is used to prompt the user to enter the information indicating "year", "month" and "day" into the form item, and use the separator "-" to connect the data corresponding to "year", "month" and "day". The error prompt information is used to prompt the user when the input data in the form item does not meet the preset conditions. For example, assuming that a form item is a required item, when the input data of the form item is empty, the following error prompt information can be output: "XX form item is required, please enter information". The verification information is used to verify the input data of the form item. For example, the length and / or character type of the input data of the form item can be verified. The form item type information is used to determine the type of the form item, which includes mandatory type and optional type. The data type information is used to determine the type of input data of the form item, such as numeric type, letter type and / or Chinese character type, etc. The data length information is used to determine the length value or length range of the input data of the form item, where the length range may include a maximum length and / or a minimum length.
[0052] By acquiring the connection template, each form item corresponding to each piece of connection information can be rendered according to each piece of connection information in the connection template. Figure 2A and Figure 2B Schematic diagrams of two different forms are shown respectively. Figure 2A The form shown corresponds to the technology stack Stack1, including five form items, namely, ID, node, mode, password and main node, which are rendered by obtaining the connection template corresponding to the technology stack Stack1. Figure 2BThe form shown corresponds to technology stack Stack2, including three form items: URL, username and password, which are rendered by obtaining the connection template corresponding to technology stack Stack2. Each form item may include at least one attribute information, and the attribute information of the form item can be rendered according to the information item in the corresponding connection template, which is not shown in the figure.
[0053] The number of connection templates corresponding to each technology stack may be greater than or equal to 1. In different connection templates included in the same technology stack, the types of connection information may be at least partially different, and the number of connection information may be the same or different. For example, technology stack Stack1 may include connection template 1, connection template 2, connection template 3, and connection template 4, wherein connection template 1 may include connection information info1 and connection information info2, connection template 2 may include connection information info1 and connection information info3, connection template 3 may include only connection information info1, and connection template 4 may include connection information info4, connection information info5, and connection information info6.
[0054] In step S1, the target technology stack may be determined. For example, a target instruction input by a user may be obtained, the target instruction carrying identification information of the target technology stack, and the target technology stack is determined based on the identification information carried in the target instruction. In some embodiments, the target technology stack may be selected from a plurality of candidate technology stacks, and accordingly, the target instruction is a selection instruction. Figure 3 As shown, the candidate technology stacks may include technology stack 1, technology stack 2, and technology stack 3, and the user may select technology stack 1, thereby determining technology stack 1 as the target technology stack.
[0055] In step S2, the binding relationship between the connection template and the technology stack can be stored in the back end. For example, the Redis technology stack, the TIDB technology stack and the Java technology stack are bound to the Redis connection template, the TIDB connection template and the Java connection template respectively, then the binding relationship between the Redis technology stack and the Redis connection template, the binding relationship between the TIDB technology stack and the TIDB connection template, and the binding relationship between the Java technology stack and the Java connection template can be stored in the back end. After the information of the target technology stack is sent to the back end, the back end can determine each connection template pre-bound to the target technology stack as the target connection template based on the above binding relationship. Among them, the information of the target technology stack can be the name or number of the target technology stack and other information that can uniquely identify the target technology stack.
[0056] In addition, after determining the target technology stack, at least one connection template can be added to the target technology stack, and the newly added connection template can be bound to the target technology stack, so that the connection template added to the target technology stack and the connection template bound to the target technology stack are both determined as the target connection template corresponding to the target technology stack. In addition, at least one target connection template can be deleted from the target connection template bound to the target technology stack. Each target connection template can include connection information of at least one form item to be rendered, and different target connection templates can include different connection information, thereby rendering a form including different form items. In the above manner, the form rendered on the front end can be modified by modifying the binding relationship on the back end without modifying the front end web page. Therefore, the target connection template bound to the target technology stack can be dynamically added or deleted, so that one or more forms can be dynamically rendered on the web page, thereby improving the rendering flexibility.
[0057] The following is an explanation using a specific example. In this example, the target technology stack is the TIDB technology stack, and the following target connection template can be stored in the back end, and the binding relationship between the target connection template and the TIDB technology stack can be stored. The target connection template includes connection information corresponding to the three form items of "URL", "username" and "password". Among them, the connection information of the form item "URL" includes information items such as data type information, verification information and data length information; the connection information of the form item "username" includes information items such as data type information (type), data length information and encryption information; the connection information of the form item "password" includes information items such as data type information, data length information and encryption information. Among them, the data type information is all character type (string), and the data length information is the minimum length. In the above example, the minimum length is 1. It can be understood that the above examples are only exemplary and are not intended to limit the present disclosure.
[0058] In some embodiments, the target connection template may include identification information of the target technology stack, for example, the name of the target technology stack. That is, the binding relationship between the connection template and the technology stack is reflected by the connection template where the identification information of the technology stack is located. The front end may send a target connection template acquisition request carrying the identification information of the target technology stack to the back end. The back end may compare the identification information carried in the target connection template acquisition request with the identification information included in each connection template. If the identification information included in a connection template is the same as the identification information carried in the target connection template acquisition request, the connection template is determined to be the target connection template. For example, in the above-mentioned target connection template, a Stack field may also be added. Assuming that the target technology stack is a Redis technology stack, the field value of the Stack field is Redis, which can be recorded as "Stack": Redis.
[0059] In other embodiments, the backend may also generate identification information for each connection template, and store the binding relationship between the identification information of the connection template and the identification information of the technology stack. In this way, after the frontend sends a target connection template acquisition request carrying the identification information of the target technology stack to the backend, the backend may search for the identification information of the connection template associated with the identification information carried in the target connection template acquisition request based on the above binding relationship, and determine the connection template to which the found identification information belongs as the target connection template. In other examples, other methods may also be used to generate and obtain the binding relationship between the target connection template and the target technology stack, thereby determining the target connection template, which will not be listed one by one here.
[0060] In step S3, at least one object corresponding to at least one form item can be generated. Assuming that the target connection template includes N (N is a positive integer) pieces of connection information, the corresponding form items are N, so that N objects can be generated, and the connection information, form items and objects correspond to each other. Assuming that the i-th (1≤i≤N, i is a positive integer) piece of connection information, the i-th form item and the i-th object correspond, the i-th object is used to store the connection information of the i-th form item, that is, the connection information i. Each piece of connection information can include at least one information item, and the i-th object can store each information item of the connection information i. Continuing with the previous example, since the form items include "URL", "user name" and "password", an object corresponding to the form item "URL", an object corresponding to the form item "user name" and an object corresponding to the form item "password" can be generated. Among them, the object corresponding to the form item "URL" is used to store the connection information of the form item "URL", the object corresponding to the form item "user name" is used to store the connection information of the form item "user name", and the object corresponding to the form item "password" is used to store the connection information of the form item "password".
[0061] In step S4, at least one object may be stored in the first target array array1. In the case of N objects, all N objects may be stored in the first target array array1. Continuing with the previous example, the object corresponding to the form item "URL", the object corresponding to the form item "user name", and the object corresponding to the form item "password" may all be stored in the first target array array1.
[0062] The number of first target arrays array1 can match the number of target connection templates. Assuming that the number of target connection templates is M (M is a positive integer), the number of first target arrays array1 is also M. Among them, the jth (1≤j≤M) first target array array1 corresponds to the jth target connection template, and is used to store objects corresponding to each connection information in the jth target connection template. Assuming that the target connection template corresponding to the target technology stack Stack1 includes connection template 1 and connection template 2, wherein connection template 1 includes connection information corresponding to form items "ID", "node", "mode", "password" and "main node", respectively, and connection template 2 includes connection information corresponding to form item "ID", then objects corresponding to form items "ID", "node", "mode", "password" and "main node" can be generated for connection template 1, respectively, for storing connection information of form items "ID", "node", "mode", "password" and "main node", respectively, and these objects are stored in a first target array array1; objects corresponding to form item "ID" can also be generated for connection template 2, for storing connection information of form item "ID", and the object is stored in another first target array array1.
[0063] In some embodiments, the connection information of each form item can be stored in at least one connection information array, and different connection information arrays are used to store different connection information. For each form item, the connection information of the form item can be found from the at least one connection information array, and the object corresponding to the form item is generated according to the connection information found. Among them, at least one connection information array may include but is not limited to at least one of the following: a label array array_tab, which is used to store the label information of each form item, and the label information is used to uniquely identify the form item; an encryption array array_en, which is used to store the label information of the form item that needs to be encrypted; a prompt array array_o, which is used to determine the prompt information corresponding to the input data of each form item; a check array, which is used to determine the check information of the input data of each form item; a form item type array, which is used to determine the type information of each form item; a data type array, which is used to determine the type information of the input data of each form item; a length array, which is used to determine the data length information of the input data of each form item. In some embodiments, the check array, the type array and the length array can be combined into the same array, which is called an Array array. In other embodiments, the check array, the type array and the length array can also be different arrays.
[0064] Continuing with the previous example, when the target technology stack is the TIDB technology stack and the target connection template is as shown in the preceding code, the label array array_tab is {"URL", "username", "password"}, indicating that the form items to be rendered include "URL", "username" and "password"; the encryption array array_en is {"username", "password"}, indicating that the form items to be encrypted are "username" and "password"; the prompt array array_o is empty, indicating that there is no prompt information for the form items to be rendered.
[0065] Indicates regular check; the form item type array is empty, which may indicate the use of the default form item type, for example, the default form item type may be a required type; the data type array is {"string", "string", "string"}, indicating that the data type of the input data in each form item "URL", "username" and "password" is a character type; the length array is {"minLength=1", "minLength=1", "minLength=1"}, indicating that the minimum length of the input data in each form item "URL", "username" and "password" is 1.
[0066] The following is an example of a specific method of generating objects corresponding to form items based on each connection information array.
[0067] In the case where the at least one connection information array includes a tag array array_tab, for each form item, the connection information of the form item is searched from the at least one connection information array, and an object corresponding to the form item is generated according to the searched connection information, specifically including: looping through the tag information in the tag array array_tab; generating a corresponding empty object Obj_0 for the form item corresponding to the tag information currently traversed; searching for the connection information of the form item currently traversed from the at least one connection information array, and writing the searched connection information into the empty object Obj_0 corresponding to the form item currently traversed.
[0068] Continuing with the previous example, you can loop through each tag information in the tag array array_tab: URL, username, and password. Assuming that the tag information currently traversed is URL, you can further generate an empty object Obj_0 for the form item corresponding to the URL, and search for the connection information of the form item corresponding to the tag information URL from other connection information arrays. Specifically, in the above example, you can find the verification information from the verification array, the type information of the input data from the data type array, and the minimum length of the input data from the length array. The above information found can be written into the empty object Obj_0 corresponding to the URL to obtain the object corresponding to the URL. The specific method of generating the object corresponding to the username and the object corresponding to the password can be found in the above process, which will not be repeated here.
[0069] In the case where at least one of the connection information arrays includes a label array array_tab, the connection information found is written into the empty object corresponding to the currently traversed form item, specifically including: defining a label field X1 in the empty object corresponding to the currently traversed form item, and setting the field value of the label field X1 to the label information of the currently traversed form item. For example, in the case where the label information of the currently traversed form item is URL, the label field X1 can be defined in the object corresponding to the URL, and the field value of the label field X1 can be set to "URL". Similarly, in the case where the label information of the currently traversed form item is username, the label field X1 and its field value "username" can be defined in the object corresponding to username.
[0070] In the case where the at least one connection information array includes an encryption array array_en, the found connection information is written into an empty object corresponding to the currently traversed form item, specifically including: if the label information of the currently traversed form item is found in the encryption array array_en, an encrypted field X2 is defined in the empty object corresponding to the currently traversed form item, and the field value corresponding to the encrypted field X2 is set to a first field value, and the first field value is used to indicate that the currently traversed form item needs to be encrypted.
[0071] Continuing with the previous example, the encrypted array array_en is ["username", "password"], so the form items to be encrypted are "username" and "password". The encrypted field X2 can be defined in the empty object corresponding to the form item "username" and the empty object corresponding to the form item "password", and its field value is set to the first field value. Among them, the first field value can be "true", or a binary number "1", etc., to indicate that the form items "username" and "password" need to be encrypted. When the form items are encrypted, the input data entered into the form items will be replaced by the encrypted data (for example, "*"), so that the original input data will not be displayed.
[0072] Furthermore, if the label information of the currently traversed form item is not found in the encrypted array array_en, an encrypted field X2 can be defined in the empty object corresponding to the currently traversed form item, and the field value corresponding to the encrypted field X2 is set to the second field value, which is used to indicate that the currently traversed form item does not need to be encrypted. The second field value can be "false", or a binary number "0", etc. Continuing with the previous example, since the encrypted array array_en does not include the form item "URL", the encrypted field X2 can be defined in the empty object corresponding to the form item "URL", and its field value can be set to the second field value.
[0073] In the case where the at least one connection information array includes a verification array, the found connection information is written into an empty object corresponding to the currently traversed form item, specifically including: if the verification information of the currently traversed form item is found in the verification array, a verification field X3 is defined in the empty object corresponding to the currently traversed form item, and the field value corresponding to the verification field X3 is set to the verification information of the currently traversed form item found.
[0074] In the case where at least one of the above connection information arrays includes a prompt array array_o, the found connection information is written into the empty object corresponding to the currently traversed form item, specifically including: if the prompt information corresponding to the currently traversed form item is found in the prompt array array_o, a prompt field is defined in the empty object corresponding to the currently traversed form item, and the field value corresponding to the prompt field is set to the prompt information corresponding to the currently traversed form item found. Specifically, the prompt field may include an example field example and an error prompt field X4, which are respectively used to indicate the example information and error prompt information in the aforementioned embodiments. Assuming that the example information is "2023-7-4" and the error prompt information is "404", the example field example and its field value are "example=2023-7-4", and the error prompt field X4 and its field value are "X4=404".
[0075] In addition, the object may also include a data type field X4, a data length field, such as a minimum data length and / or a maximum data length, etc. Furthermore, the object may also include a content field X5, the field value of which is the input data in the form item.
[0076] In some embodiments, an object including various fields may be generated, for example, an object corresponding to the form item "URL", an object corresponding to the form item "username", and an object corresponding to the form item "password".
[0077] Furthermore, a second target array array2 may be generated for each candidate technology stack, and the second target array array2 corresponding to the candidate technology stack is used to store a list of first target arrays array1 corresponding to each target connection template corresponding to the candidate technology stack. When the number of target connection templates corresponding to the same target technology stack is M, the number of first target arrays array1 corresponding to the target technology stack is also M, and these M first target arrays array1 may be stored in the second target array array2 corresponding to the target technology stack.
[0078] In step S5, a form including at least one form item can be rendered based on the first target array. Specifically, the first target array can be traversed to obtain an object corresponding to each form item; the connection information in each object obtained by the traversal is assigned to the corresponding attribute of the corresponding form item to obtain a rendered form. Assuming that the first target array includes N objects, a form including N form items can be rendered.
[0079] Furthermore, in an embodiment where the number of target connection templates is greater than or equal to 1, and each target connection template corresponds to a first target array, at least one form may be rendered based on the first target array corresponding to each target connection template, and each form includes a form item corresponding to a target connection template. For example, assuming that the number of first target arrays is M (M is a positive integer), M forms may be rendered, and each form includes a form item corresponding to a target connection template. Continuing with the previous example, and referring to Figure 4 , assuming that connection template 1 includes connection information corresponding to form items "ID", "node", "mode", "password" and "main node", and connection template 2 includes connection information corresponding to form item "ID", then two forms can be rendered, namely: a form including form items "ID", "node", "mode", "password" and "main node" (as shown in the form above the dotted line in the figure); and a form including form item "ID" (as shown in the form below the dotted line in the figure). In this way, different numbers of forms can be rendered dynamically, which improves the flexibility of form rendering.
[0080] In an embodiment where the first target arrays corresponding to the target connection templates are added to the second target array corresponding to the target technology stack, at least one form may be rendered based on the first target arrays in the second target array array2. Figure 4 In the example shown, when connection template 1 and connection template 2 are both target connection templates corresponding to the target technology stack, the first target array corresponding to connection template 1 and the first target array corresponding to connection template 2 can be stored in the second target array array2. In this way, two forms can be rendered based on the first target arrays in the second target array array2, namely: a form including form items "ID", "node", "mode", "password" and "main node" corresponding to connection template 1, and a form including form item "ID" corresponding to connection template 2. By adding the first target array corresponding to each target connection template to the second target array corresponding to the target technology stack, unified management of the first target arrays corresponding to each target connection template can be facilitated. Among them, management includes deleting and / or adding the first target array. This is explained separately below.
[0081] In some embodiments, at least one first target array array1 may be deleted from the second target array array2. Figure 4 , a delete control (as shown in the figure "Delete") can be set for each first target array array1 in the second target array array2. If an operation instruction for a delete control is received from the user, the first target array array1 corresponding to the delete control is deleted from the second target array array2.
[0082] In other embodiments, a new control may be set (as shown in the "new connection information" in the figure). After determining the target technology stack, each target connection template corresponding to the target technology stack may be displayed, and the new control may be displayed. If an operation instruction of the user for the new control is received, a new target connection template may be added to the target technology stack, and the first target array array1 corresponding to the new target connection template may be added to the second target array array2 corresponding to the target technology stack.
[0083] In other embodiments, the number of first target arrays array1 in the second target array array2 can also be managed, for example, the total number of first target arrays array1 added to the second target array array2 is obtained, or an upper limit on the number of first target arrays array1 that can be added to the second target array array2 is set. The update records of the first target array 1 in the second target array array2 can also be managed, for example, the historical information of deletion and addition of the first target array 1 in the second target array array2 is maintained and queried. According to actual needs, other methods can also be used to manage the first target array 1 in the second target array array2, which will not be listed here one by one.
[0084] A confirmation control (as shown in the figure "Confirm") may also be set. If a user operation instruction for the confirmation control is received, each first target array array1 added to the second target array array2 may be obtained, and at least one form may be rendered based on each first target array array1 obtained.
[0085] The disclosed embodiment pre-binds the target technology stack with the target connection template. After determining the target technology stack, at least one object corresponding to the at least one form item can be generated, and the at least one object can be stored in the first target array. In this way, when rendering, the form including the at least one form item can be rendered directly based on the first target array, without deploying the code of the connection template corresponding to each technology stack to the web page. Therefore, the disclosed embodiment can effectively reduce the amount of code deployed to the web page, thereby reducing the cost of code deployment. At the same time, the disclosed embodiment can bind one or more target connection templates to each target technology stack, and can dynamically add or delete the target connection template bound to the target technology stack, so as to dynamically render one or more forms on the web page, thereby improving rendering flexibility.
[0086] See also Figure 5 The present disclosure also provides a form rendering device, the device comprising:
[0087] A determination module 11 is used to determine a target technology stack; the target technology stack is pre-bound with a target connection template;
[0088] The acquisition module 12 is used to send the information of the target technology stack to the backend, and obtain the target connection template returned by the backend based on the binding relationship between the target technology stack and the target connection template, wherein the binding relationship is pre-stored in the backend; the target connection template includes the connection information of at least one form item to be rendered;
[0089] A generating module 13, configured to generate at least one object corresponding to the at least one form item, each object being configured to store connection information of a corresponding form item;
[0090] A storage module 14, configured to store the at least one object into a first target array;
[0091] The rendering module 15 is configured to render the form including the at least one form item based on the first target array.
[0092] In some embodiments, the functions or modules included in the device provided by the embodiments of the present disclosure can be used to execute the method described in the above method embodiments. The specific implementation can refer to the description of the above method embodiments, and for the sake of brevity, it will not be repeated here.
[0093] An embodiment of the present disclosure further provides a computer device, which at least includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in any of the above embodiments is implemented.
[0094] Figure 6 A more specific hardware structure diagram of a computing device provided by an embodiment of the present disclosure is shown, and the device may include: a processor 21, a memory 22, an input / output interface 23, a communication interface 24, and a bus 25. The processor 21, the memory 22, the input / output interface 23, and the communication interface 24 are connected to each other in communication within the device through the bus 25.
[0095] The processor 21 can be implemented by a general central processing unit (CPU), a microprocessor, an application specific integrated circuit (ASIC), or one or more integrated circuits, etc., for executing relevant programs to implement the technical solutions provided by the embodiments of the present disclosure. The processor 21 can also include a graphics card, which can be a Nvidia titan X graphics card or a 10120Ti graphics card, etc.
[0096] The memory 22 can be implemented in the form of a read-only memory (ROM), a random access memory (RAM), a static storage device, a dynamic storage device, etc. The memory 22 can store an operating system and other application programs. When the technical solution provided by the embodiment of the present disclosure is implemented by software or firmware, the relevant program code is stored in the memory 22 and called and executed by the processor 21.
[0097] The input / output interface 23 is used to connect the input / output module to realize information input and output. The input / output module can be configured as a component in the device (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.
[0098] The communication interface 24 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).
[0099] The bus 25 includes a path that transmits information between the various components of the device (eg, the processor 21, the memory 22, the input / output interface 23, and the communication interface 24).
[0100] It should be noted that, although the above device only shows the processor 21, the memory 22, the input / output interface 23, the communication interface 24 and the bus 25, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present disclosure, and does not necessarily include all the components shown in the figure.
[0101] The present disclosure also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the method described in any of the above embodiments is implemented.
[0102] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.
[0103] It can be known from the description of the above implementation methods that those skilled in the art can clearly understand that the embodiments of the present disclosure can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the embodiments of the present disclosure is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which can be stored in a storage medium such as ROM / RAM, a disk, an optical disk, etc., including several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present disclosure or some parts of the embodiments.
[0104] The systems, devices, modules or units described in the above embodiments may be implemented by computer devices or entities, or by products with certain functions. A typical implementation device is a computer, which may be in the form of a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email transceiver, a game console, a tablet computer, a wearable device or a combination of any of these devices.
[0105] Each embodiment in the present disclosure is described in a progressive manner, and the same and similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described above is merely schematic, wherein the modules described as separate components may or may not be physically separated, and the functions of each module can be implemented in the same one or more software and / or hardware when implementing the embodiment of the present disclosure. It is also possible to select some or all of the modules according to actual needs to achieve the purpose of the embodiment. A person of ordinary skill in the art can understand and implement it without paying creative labor.
[0106] The above is only a specific implementation of the embodiment of the present disclosure. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the embodiment of the present disclosure. These improvements and modifications should also be regarded as the protection scope of the embodiment of the present disclosure.
Claims
1. A form rendering method, the method comprising: Determine the target technology stack; Sending information of the target technology stack to a backend, and obtaining a target connection template returned by the backend based on a binding relationship between the target technology stack and a target connection template, wherein the binding relationship is pre-stored in the backend; the target connection template includes connection information of at least one form item to be rendered; generating at least one object corresponding to the at least one form item in a one-to-one manner, wherein the object is used to store connection information of the corresponding form item; storing the at least one object into a first target array; The form including the at least one form item is rendered based on the first target array.
2. The method according to claim 1, wherein the number of the target connection templates is greater than or equal to 1, and each target connection template corresponds to a first target array; and rendering the form including the at least one form item based on the first target array comprises: At least one form is rendered based on the first target array corresponding to each target connection template, and each form includes a form item corresponding to a target connection template.
3. According to the method of claim 2, the step of rendering at least one form based on the first target array corresponding to each target connection template comprises: Adding the first target array corresponding to each target connection template to the second target array corresponding to the target technology stack, the second target array being used to store a list of the first target arrays respectively corresponding to at least one target connection template of the target technology stack; At least one form is rendered based on each of the first target arrays in the second target array.
4. The method according to claim 3, further comprising: At least one first target array is deleted from the second target array.
5. The method according to claim 1, wherein generating at least one object corresponding to the at least one form item comprises: storing the connection information of each form item in at least one connection information array, where different connection information arrays are used to store different connection information; For each form item, the connection information of the form item is searched from the at least one connection information array, and an object corresponding to the form item is generated according to the searched connection information.
6. The method according to claim 5, wherein the at least one connection information array comprises at least one of the following: A label array, used to store label information of each form item, wherein the label information is used to uniquely identify the form item; Encryption array, used to store label information of form items that need to be encrypted; Prompt array, used to determine the prompt information corresponding to the input data of each form item; The validation array is used to determine the validation information of the input data of each form item; Form item type array, used to determine the type information of each form item; Data type array, used to determine the type information of the input data of each form item; Length array, used to determine the data length information of the input data of each form item.
7. The method according to claim 6, wherein the at least one connection information array comprises a label array; and for each form item, searching the at least one connection information array for the connection information of the form item, and generating an object corresponding to the form item according to the searched connection information, comprising: Loop through the tag information in the tag array; Generate a corresponding empty object for the form item corresponding to the currently traversed tag information; The connection information of the currently traversed form item is searched from the at least one connection information array, and the searched connection information is written into the empty object corresponding to the currently traversed form item.
8. The method according to claim 7, wherein the step of writing the found connection information into the empty object corresponding to the currently traversed form item comprises: A label field is defined in an empty object corresponding to the currently traversed form item, and a field value of the label field is set to label information of the currently traversed form item.
9. The method according to claim 8, wherein the at least one connection information array comprises an encrypted array; and the step of writing the found connection information into the empty object corresponding to the currently traversed form item comprises: If the label information of the currently traversed form item is found in the encrypted array, an encrypted field is defined in the empty object corresponding to the currently traversed form item, and the field value corresponding to the encrypted field is set to a first field value, wherein the first field value is used to indicate that the currently traversed form item needs to be encrypted.
10. The method according to claim 7, wherein the at least one connection information array comprises a check array; and the step of writing the found connection information into the empty object corresponding to the currently traversed form item comprises: If the verification information of the currently traversed form item is found in the verification array, a verification field is defined in an empty object corresponding to the currently traversed form item, and a field value corresponding to the verification field is set to the verification information of the currently traversed form item found.
11. The method according to claim 7, wherein the at least one connection information array comprises a prompt array; and the step of writing the found connection information into the empty object corresponding to the currently traversed form item comprises: If the prompt information corresponding to the currently traversed form item is found in the prompt array, a prompt field is defined in an empty object corresponding to the currently traversed form item, and a field value corresponding to the prompt field is set to the prompt information corresponding to the currently traversed form item found.
12. The method according to claim 1, wherein rendering the form including the at least one form item based on the first target array comprises: Traverse the first target array to obtain the object corresponding to each form item; Assign the connection information in each object obtained by traversal to the corresponding attributes of the corresponding form item to obtain the rendered form.
13. A form rendering device, the device comprising: Determine the module, which is used to determine the target technology stack; An acquisition module is used to send the information of the target technology stack to the backend, and acquire the target connection template returned by the backend based on the binding relationship between the target technology stack and the target connection template, wherein the binding relationship is pre-stored in the backend; the target connection template includes the connection information of at least one form item to be rendered; A generating module, used to generate at least one object corresponding to the at least one form item, wherein the object is used to store connection information of the corresponding form item; A storage module, configured to store the at least one object into a first target array; A rendering module is used to render the form including the at least one form item based on the first target array.
14. A computer-readable storage medium having a computer program stored thereon, wherein when the program is executed by a processor, the method according to any one of claims 1 to 12 is implemented.
15. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 12 when executing the program.