A page generation method, system and storage medium

By providing full-stack support for both the client and server sides, the problems of low page generation efficiency and inconsistent style have been solved, enabling the rapid generation of high-quality code and a unified page style.

CN114518881BActive Publication Date: 2025-12-05AGRICULTURAL BANK OF CHINA
View PDF 4 Cites 0 Cited by

Patent Information

Application Number
CN202210139973.8
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-02-16
Publication Date
2025-12-05
Estimated Expiration
2042-02-16

AI Technical Summary

Technical Problem

Existing page generation technologies are inefficient, waste human resources, have difficulty guaranteeing code quality, lack consistency in page style, and result in a poor user experience.

Method used

It adopts a full-stack support approach that combines client and server, and achieves the generation of target pages with high-quality code and a unified page style through field selection, template selection and code generation.

Benefits of technology

It enables the rapid generation of high-quality code and consistent page style, reducing the waste of human resources and improving development efficiency and customer experience.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114518881B_ABST
    Figure CN114518881B_ABST
Patent Text Reader

Abstract

Embodiments of the present application disclose a page generation method and system and a storage medium. The method comprises: a client sending field information of selected fields to a server in response to a field selection operation; the server determining the selected fields corresponding to the received field information, generating server code and server messages according to the field names, field types of the selected fields and constraint relationships for the selected fields, and sending the generated results to the client; the client parsing the received server messages to obtain client components, obtaining a selected template in response to a template selection operation, and generating an initial page based on the selected template and the client components; and the client generating client code according to the initial page and the received server code, wherein the client code generates a target page when executed. The technical solution of the embodiments of the present application can quickly generate a target page corresponding to high-quality code and having a unified page style.
Need to check novelty before this filing date? Find Prior Art

Description

TECHNICAL FIELD

[0001] Embodiments of the present application relate to the technical field of computer application, and particularly to a page generation method and system and a storage medium. BACKGROUND

[0002] Page development is an important link in the development of information technology (IT) projects. In recent years, in the process of page development (i.e., page generation), a manual hard coding method is mainly used.

[0003] The above page generation scheme has the following problems: first, the efficiency is low, the human resources are wasted seriously, and it is difficult to complete the system reconstruction in a short time; second, the code quality is difficult to guarantee, which has risks in the aspects of later maintenance and operation, etc.; third, the page style is difficult to unify, and the customer experience is poor. SUMMARY

[0004] Embodiments of the present application provide a page generation method and system and a storage medium to realize the effect of quickly generating a target page with high-quality code and unified page style.

[0005] According to an aspect of the present application, a page generation method can include:

[0006] The client sends field information of the selected field to the server in response to the field selection operation;

[0007] The server determines the selected field corresponding to the received field information, and generates server code and server messages according to the field name, field type of the selected field and the constraint relationship for the selected field, and sends the generation result to the client;

[0008] The client parses the received server message to obtain a client component, and in response to a template selection operation, obtains a selected template, and generates an initial page based on the selected template and the client component;

[0009] The client generates client code according to the initial page and the received server code, wherein the client code is run to generate a target page.

[0010] According to another aspect of the present application, a page generation system can include: a client and a server; wherein,

[0011] The client is configured to send field information of the selected field to the server in response to the field selection operation;

[0012] The server is configured to determine the selected field corresponding to the received field information, generate the server code and the server message according to the field name and the field type of the selected field and the constraint relationship for the selected field, and send the generated result to the client.

[0013] The client is further configured to parse the received server message to obtain the client component, acquire the selected template in response to the template selection operation, and generate the initial page based on the selected template and the client component.

[0014] The client is further configured to generate the client code according to the initial page and the received server code, wherein the client code is run to generate the target page.

[0015] According to another aspect of the present application, a computer readable storage medium is provided, which stores computer instructions for causing a processor to implement the page generation method provided by any of the embodiments of the present application.

[0016] The technical solution of the embodiments of the present application is that the client sends the field information of the selected field acquired in response to the field selection operation to the server; the server determines the selected field corresponding to the received field information, generates the server code and the server message according to the field name and the field type of the selected field and the constraint relationship for the selected field, and sends the generated server code and server message to the client; the client parses the received server message to obtain the client component, acquires the selected template in response to the template selection operation, and generates the initial page based on the selected template and the client component. Since the initial page is a page for determining what kind of client component and the presentation form of each client component are set on the target page, and the initial page is directly determined according to the business requirement and the pre-set template, manual hard coding is not involved, thereby ensuring the uniformity of the page style of the target page generated subsequently. Further, the client generates the client code for generating the target page after being run according to the initial page and the received server code. Since the client code is automatically generated according to the target page and the server code, manual hard coding is not involved, thereby ensuring the high quality of the client code corresponding to the target page. The above technical solution achieves the effect of quickly generating the target page with high-quality code and uniform page style through the cooperation of the client and the server (i.e., full-stack support of the front and back ends).

[0017] It should be understood that the content described in this section is not intended to identify key or important features of the embodiments of the present application, nor is it used to limit the scope of the present application. Other features of the present application will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings needed in the embodiments description. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative effort based on these drawings.

[0019] Figure 1 is a flow chart of a page generation method according to an embodiment of the present application;

[0020] Figure 2 is a flow chart of a page generation method according to an embodiment of the present application;

[0021] Figure 3 is a flow chart of a page generation method according to an embodiment of the present application;

[0022] Figure 4 is a timing chart of a page generation method according to an embodiment of the present application;

[0023] Figure 5 is a schematic diagram of an optional example in a page generation method according to an embodiment of the present application

[0024] Figure 6 is a structural block diagram of a page generation system according to an embodiment of the present application. DETAILED DESCRIPTION

[0025] In order to make the personnel in the technical field better understand the present application scheme, the following will combine the drawings in the embodiments of the present application, and clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only some embodiments of the present application, not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative effort should belong to the scope of protection of the present application.

[0026] It is to be understood that the terms "first", "second", and the like, used in the description and the claims of the application and the above description of the drawings, are used to differentiate between similar objects, and are not necessarily used to describe a particular sequential or chronological order. It is to be understood that the data thus used can be interchanged, where appropriate, so that the embodiments of the application described herein can be carried out in sequences other than those illustrated or described herein. The same applies to the cases of "target", "original", etc., which are not repeated here. In addition, the terms "comprise" and "have" and any variations thereof, are intended to cover non-exclusive inclusion, for example, a process, method, system, product, or apparatus that includes a list of steps or units is not necessarily limited to those steps or units that are clearly listed, but can include other steps or units that are not clearly listed or inherent to such processes, methods, products, or apparatuses.

[0027] Embodiment One

[0028] Figure 1 is a flowchart of a page generation method provided in Embodiment One of the application. The present embodiment can be applied to the case of quickly generating a target page corresponding to high-quality code and uniform page style. The method can be executed by a page generation system provided in the present embodiment, which can be implemented in software and / or hardware, and can include a client and a server.

[0029] Referring to Figure 1 , the method of the present embodiment specifically includes the following steps:

[0030] S110, the client sends the field information of the selected field to the server in response to the field selection operation.

[0031] The field selection operation can be an operation of selecting a field displayed on the client, such as an operation of clicking or pressing a field displayed on the client to select the field. The field can be a field in a data table under a data source. The selected field can be referred to as a selected field. For example, when developing a page (i.e., a target page), a page developer can determine a data source associated with the target page, a data table under the data source, and a field (i.e., a selected field) under the data table according to a business requirement (i.e., a page function to be implemented by the target page), and click the selected field in the fields displayed on the client to select the selected field. Thus, the client can receive a corresponding field selection operation. In actual applications, the client can display the fields by displaying field names of the fields. In response to the field selection operation, the client obtains field information of the selected field, which can include attribute information of the selected field, such as a field name, a field identifier, and / or a field position (e.g., a data table under a data source where the selected field is located). The client sends the field information to the server, so that the server determines what field the selected field is according to the received field information.

[0032] In S120, the server determines the selected field corresponding to the received field information, and generates a server code and a server message according to a field name, a field type, and a constraint relationship of the selected field. The server sends the generated results to the client.

[0033] The server determines the selected field corresponding to the received field information, and obtains a field name, a field type, and a constraint relationship of the selected field. The field name can be a name of the selected field, such as name, time, or money. The field type can be a type of the selected field, such as a numerical type, a string type, or a time type. The constraint relationship can be a relationship (i.e., a condition) that the selected field or a field under the selected field needs to satisfy, such as non-empty, positive, or 5 digits after the decimal point. On this basis, the server generates a server code and a server message according to the obtained field name, field type, and constraint relationship. The server code can be a code matched with the selected field and executable by the server. In actual applications, the server code can be a code capable of adding, deleting, modifying, or querying field data. The server message can be understood as an input / output message for the server, which can at least reflect information such as the field type, the field name, and the constraint relationship. Then, the server sends the generated results (i.e., the generated server code and server message) to the client, so that the client generates and / or obtains related content required for generating the target page according to the received server code and server message, such as a client component and a client code.

[0034] S130, the client parses the received server message to obtain a client component, and in response to a template selection operation, acquires a selected template, and generates an initial page based on the selected template and the client component.

[0035] Wherein, since the server message can embody information related to the selected field, such as field type, field name and / or constraint relationship, etc., the client can obtain a visualized client component matching the selected field after parsing the received server message.

[0036] The template selection operation can be an operation of selecting a certain template displayed on the client, such as an operation of clicking or pressing a certain template displayed on the client to select the template, and the selected template can be referred to as the selected template. For example, the page developer can determine the presentation form of the target page according to the business requirements described above, such as forms, tables, queries or comprehensive queries, etc. Since the templates displayed on the client can be templates corresponding to a certain presentation form, such as form templates (templates that can be used to implement new or modified templates), table templates, query templates (templates that can be used to query a certain form, read-only) or comprehensive query templates (templates that can contain forms, tables, organization trees, elevator navigation, etc. Multiple content templates, etc.), the page developer can click the selected template (i.e. the template corresponding to the presentation form of the target page) in the templates displayed on the client to select the selected template, so that the client can receive the corresponding template selection operation, and acquire the selected template in response to the template selection operation.

[0037] Further, since the client component is a component on the target page, and the selected template is a template corresponding to the presentation form of the target page, the client can generate an initial page based on both the selected template and the client component, such as the client assembling the client components based on the presentation form corresponding to the selected template to generate the initial page. It should be emphasized that the target page can be a page generated by running the following steps of generating client code, and the initial page can be a page used to determine what kind of client components are set on the target page and the presentation form of each client component. From the presentation form, the two can be the same or different, which is not limited here.

[0038] S140, the client generates client code according to the initial page and the received server code, wherein the client code is run to generate the target page.

[0039] Wherein, since the initial page can represent what kind of client components are set on the target page and the presentation form of each client component, the server code can be the code that can be run on the server and matches the selected field (i.e. matches the client component), so the client code that matches the target page can be generated according to both, such as by running the server code to obtain the field data under the selected field from the server, and then generating the client code according to the field data and the target page, so as to generate the target page by running the client code subsequently. It is emphasized that the client running the above-mentioned client code can be the client in the embodiment of the application, or can be the remaining client, that is, the above-mentioned target page can be generated on the client in the embodiment of the application, or can be generated on the remaining client, which is not limited here.

[0040] The technical scheme of the embodiment of the application, the client sends the field information of the selected field obtained by responding to the field selection operation to the server; the server determines the selected field corresponding to the received field information, and generates the server code and the server message according to the field name, the field type of the selected field and the constraint relationship for the selected field, and sends the generated server code and the server message to the client; the client obtains the selected template by analyzing the received server message to obtain the client component, and responds to the template selection operation, and generates the initial page based on the selected template and the client component, since the initial page is a page for determining what kind of client components are set on the target page and the presentation form of each client component, it is a page directly determined according to the business requirement and the pre-set template, which does not involve manual hard coding here, thereby ensuring the uniformity of the page style of the target page generated subsequently; further, the client generates the client code for generating the target page after being run according to the initial page and the received server code, since the client code is automatically generated according to the target page and the server code, which also does not involve manual hard coding here, thereby ensuring the high quality of the client code corresponding to the target page. The above-mentioned technical scheme, by the way of cooperation between the client and the server (i.e. full-stack support of the front and back ends), achieves the effect of rapid generation of the target page with high-quality code and uniform page style.

[0041] An optional technical solution, the client parses the received server message to obtain the client component, which can include: the client responds to the technology stack selection operation, obtains the selected technology stack, parses the received server message according to the selected technology stack, obtains the client message matched with the selected technology stack, and obtains the client component according to the client message. Wherein, since the technology stack applied on the client and the technology stack applied on the server may be different, which means that the server message adapted to the server may not be adapted to the client; moreover, there can be one or more technology stacks applied on the client. Therefore, the client can respond to the technology stack selection operation, which can be an operation for selecting a certain technology stack (i.e. the selected technology stack) for the client, which can be understood as a technology stack matched with the client code to be generated. The client parses the received server message according to the selected technology stack, thereby obtaining the client message matched with the selected technology stack, and then visualizes the client message as a client component. For example, assuming that the currency is a dictionary in the server message, it can be represented in the form of a drop-down box (i.e. a certain client component) in the client; for example, assuming that the amount is a numerical value in the server message, it can be represented in the form of Chinese characters (i.e. a certain client component) in the client. The above technical solution can support the development of target pages under multiple technology stacks, thereby reducing the cost of page developers in technology stack switching and improving the development efficiency of target pages.

[0042] Another optional technical solution, after obtaining the client component, the above page generation method can further include: in response to a type changing operation for the client component, obtaining the changed type, and updating the client component based on the changed type. Wherein, the type changing operation can be an operation for changing the component type of the client component, since the component types defined on the server are limited, such as normal input type, numerical value input type and time input type, when these component types cannot meet the business requirements, the page developer can change the component type of the client component defined (i.e. parsed by the client) on the server. Therefore, when the client receives the type changing operation for the client component, it can respond to the type changing operation, obtain the changed type, and then update the client component based on the changed type, thereby achieving the effect of effective generation of the client component that meets the business requirements. For example, the component type of a certain client component can be changed from normal input type to one of multi-line text, integer input type, floating point input type and financial input type.

[0043] In another optional technical solution, after the client generates the client code according to the initial page and the received server code, the page generation method can further include: performing code verification on the client code, if it is determined according to the code verification result that there is error code in the client code, performing code repair on the error code, updating the client code according to the code repair result; and / or, in response to a code editing operation acting on the client code, performing code editing on the client code, and updating the client code according to the code editing result; and / or, in response to a code export instruction, outputting the server code and the client code. That is, after generating the client code, the generated client code can be automatically verified and repaired to ensure the high quality of the client code. The code editing operation can be an operation for editing the client code, and in response to this operation, the client code is edited to obtain a client code that is more consistent with the business requirements, thereby achieving online editing and previewing of the client code and real-time presentation of the effect of the target page after editing. The code export instruction can be an instruction for exporting the client code and the server code, and the page developer can run, debug, package and publish the exported client code and server code, so that the remaining clients and servers can quickly generate the target page based on the client code and the server code.

[0044] Embodiment Two

[0045] Figure 2 is a flowchart of a page generation method provided in Embodiment Two of the present application. This embodiment is optimized based on the above technical solutions. In this embodiment, optionally, after the server determines the selected field corresponding to the received field information, the page generation method can further include: determining the field data of the selected field in the selected data source where the selected field is located, and performing data verification on the field data; if the data verification fails, performing information prompting according to the data verification result; otherwise, obtaining the field name, the field type and the constraint relationship. Wherein, the same or corresponding explanations of the terms in the above embodiments are not repeated here.

[0046] Referring to Figure 2 The method of this embodiment can specifically include the following steps:

[0047] S210, in response to the field selection operation, the client sends the field information of the selected field to the server.

[0048] S220, the server determines the selected field corresponding to the received field information, determines the field data of the selected field in the selected data source where the selected field is located, and performs data verification on the field data, if the data verification fails, information prompting is performed according to the data verification result, otherwise the field name, field type and constraint relationship are obtained.

[0049] In order to ensure the high quality of the generated server code and client code, for the selected data source where the selected field is located, the server can obtain the field data of the selected field in the selected data source, and then perform data verification on the field data, such as verifying whether the key field is missing, whether the data type is standard, whether the number of digits after the decimal point of the interest rate data is 5 digits, etc. If the data verification fails, it means that the field data itself and / or the structure design of the selected data table where the selected field is located has a problem, so the relevant personnel can be prompted according to the data verification result, so that the relevant personnel can solve the problem according to the prompt information, so as to prevent the generated server code from being non-standard due to these problems. Otherwise, it means that the field data itself and the structure design of the selected data table are correct, and the server code can be generated by executing the subsequent steps, thereby ensuring the quality of the server code.

[0050] S230, the server generates the server code and the server message according to the field name, the field type of the selected field and the constraint relationship of the selected field, and sends the generated result to the client.

[0051] S240, the client parses the received server message to obtain the client component, and in response to the template selection operation, obtains the selected template, and generates an initial page based on the selected template and the client component.

[0052] S250, the client generates the client code according to the initial page and the received server code, wherein the client code is run to generate a target page.

[0053] The technical scheme of the embodiment of the application performs data verification on the field data of the selected field in the selected data source where the selected field is located, and when the data verification fails, information prompting is performed according to the data verification result, otherwise the server code is generated by executing the step of obtaining the field name, the field type and the constraint relationship, thereby ensuring the high quality of the generated server code.

[0054] On this basis, an optional technical solution, after determining the field data of the selected field in the selected data source where the selected field is located, the page generation method can further include: converting the field data into standard data matching the pre-set data verification rule according to the data source type of the selected data source; the data verification on the field data can include: data verification on the standard data based on the data verification rule. Among them, the above data verification process can be realized based on the pre-set data verification rule, on this basis, the selected data source can be a data source selected from each data source, and since the data source types of these data sources can be different, in order to make the data verification rule applicable to the field data under any data source, the field data can be converted according to the data source type of the selected data source to obtain standard data matching the data verification rule, and subsequent data verification on the standard data based on the data verification rule, thereby realizing the effect of supporting data verification of multiple data sources.

[0055] Embodiment three

[0056] Figure 3 is a flowchart of a page generation method provided in embodiment three of the application. The present embodiment is optimized on the basis of the above technical solutions. In the present embodiment, optionally, after generating an initial page based on the selected template and the client component, the page generation method can further include: displaying the initial page, wherein the initial page is provided with the client component; in response to a component dragging operation acting on the initial page, obtaining a dragged component and a component dragging end point on the initial page, wherein the dragged component includes the client component already provided on the initial page and / or the component stored in the component repository; setting the dragged component on the component dragging end point, updating the initial page according to the component setting result, and displaying the initial page; the client generates the client code according to the initial page and the received server code, which can include: the client generates the client code according to the initial page and the received server code in response to the code generation instruction. Further optionally, after generating an initial page based on the selected template and the client component, the page generation method can further include: displaying the initial page, wherein the initial page is provided with the client component; in response to a property change operation on the client component, changing the properties of the client component, and updating the client component according to the property change result; updating the initial page according to the client component, and displaying the initial page; the client generates the client code according to the initial page and the received server code, which can include: the client generates the client code according to the initial page and the received server code in response to the code generation instruction. Wherein the explanation of the same or corresponding terms as in the above embodiments is not repeated here.

[0057] Reference Figure 3The method of the embodiment can specifically include the following steps.

[0058] S310, the client sends field information of the selected field to the server in response to the field selection operation.

[0059] S320, the server determines the selected field corresponding to the received field information, and generates the server code and the server message according to the field name, the field type of the selected field and the constraint relationship for the selected field, and sends the generation result to the client.

[0060] S330, the client parses the received server message to obtain a client component, and in response to a template selection operation, acquires a selected template, and generates an initial page based on the selected template and the client component.

[0061] S340, the client displays the initial page, wherein the initial page is provided with the client component.

[0062] The initial page is displayed to enable the page developer to determine whether the current initial page meets the business requirement, and if not, the initial page can be indirectly updated through the component dragging and attribute changing operations until the initial page meeting the business requirement is obtained.

[0063] S350, the client acquires a dragged component and a component dragging end point on the initial page in response to a component dragging operation acting on the initial page, sets the dragged component on the component dragging end point, and updates the initial page according to the component setting result and displays the initial page, wherein the dragged component includes the client component already set on the initial page and / or the component stored in the component repository.

[0064] The component dragging operation can be an operation of dragging the dragged component on the initial page, such as an operation of dragging the client component already set on the initial page to change the placement position of the client component on the initial page, or an operation of dragging the dragged component stored in the component repository to the initial page, etc. The component dragging end point can be the final position of the dragged component on the initial page after the dragged component is dragged. Therefore, the client sets the dragged component on the component dragging end point in response to the component dragging operation, updates the displayed initial page according to the component setting result, that is, displays the initial page after updating the initial page, so that the page layout can be improved through the "dragging" manner, and the page developer who does not understand coding can also quickly complete the page development.

[0065] S360, the client responds to the attribute change operation for the client component, changes the attribute of the client component, updates the client component according to the attribute change result, and updates the initial page according to the client component, and displays the initial page.

[0066] Wherein, the attribute change operation can be an operation for changing the component attribute of the client component, the component attribute can be component type, component layout (such as setting several client components per row), read-only mode, component name, component default value (such as whether there is a default value) and the like. The client responds to the attribute change operation to change the attribute of the client component, and then updates the client component and the initial page in turn, and displays the updated initial page, thereby achieving the effect of real-time rendering of the page.

[0067] S370, the client responds to the code generation instruction, and generates the client code according to the initial page and the received server code, wherein the client code is generated after being run to generate the target page.

[0068] Wherein, when the page developer confirms that the initial page can meet the business requirements, the code generation instruction can be triggered by one key to make the client respond to the instruction to generate the client code, thereby achieving the effect of one-key generation of high-quality (i.e. conforming to the specification) client code.

[0069] The technical scheme of the embodiment of the application, the client displays the initial page to make the page developer confirm whether the initial page at this time meets the business requirements, and adjusts the client component by dragging the component and / or changing the attribute when it does not meet the requirements; the client adjusts the client component by responding to the component dragging operation and / or the attribute change operation, and displays the updated initial page to make the page developer confirm again whether the initial page at this time meets the business requirements; when the client receives the code generation instruction, it means that the page developer confirms that the initial page at this time meets the business requirements, and the client code can be generated by responding to the code generation instruction to make the subsequent running of the client code generate the target page that meets the business requirements.

[0070] Embodiment four

[0071] Figure 4 is a timing diagram of a page generation method provided in the fourth embodiment of the application, and Figure 5 is a schematic diagram of an optional example in the page generation method in the fourth embodiment of the application, and the two diagrams can be understood in cooperation. The present embodiment is optimized on the basis of the various optional schemes in the above embodiments. Wherein, the same or corresponding terms as in the above embodiments are not repeated here.

[0072] Correspondingly, as Figure 4As shown, the method of the embodiment involves the client 410 and the server 420, and can include the following steps:

[0073] S1, the client 410 acquires field information of the selected field in response to a field selection operation on the field selection interface, and sends the field information to the server 420, wherein the field information includes the field name of the selected field, the data table name of the selected data table where the selected field is located, and the data source name of the selected data source where the selected data table is located.

[0074] S2, the server 420 determines the selected field corresponding to the received field information, determines the field data of the selected field in the selected data source, and converts the field data into standard data matching the pre-set data verification rule according to the data source type of the selected data source, wherein the data source type at least includes oracle and / or mysql.

[0075] S3, the server 420 performs data verification on the standard data based on the data verification rule, and when the data verification fails, performs information prompting according to the data verification result; otherwise, acquires the field name, field type and constraint relationship of the selected field.

[0076] S4, the server 420 generates the server code and the server message according to the field name, the field type and the constraint relationship, and sends the generated server code and the server message to the client 410.

[0077] S5, the client 410 acquires the selected technology stack in response to a technology stack selection operation, analyzes the received server message according to the selected technology stack to obtain a client message, and obtains visual client components according to the client message, wherein the selected technology stack includes jquery or vue.

[0078] S6, the client 410 acquires the changed type in response to a type changing operation on the client components, and updates the client components based on the changed type to realize field type mapping.

[0079] S7, the client 410 displays each template, acquires the selected template from each template in response to a template selection operation, and assembles each client component based on the selected template to generate an initial page.

[0080] S8, the client 410 displays the initial page, wherein the initial page is provided with the client components.

[0081] S9, the client 410 acquires the dragged component and the component drag end point on the initial page in response to the component drag operation acting on the initial page, sets the dragged component on the component drag end point, and updates the initial page according to the component setting result, and displays the initial page, wherein the dragged component includes the client component already set on the initial page and / or the component stored in the component repository.

[0082] In actual application, the dragged component stored in the component repository can include a business component and a basic component, and optionally, the business component can include at least one of an organization tree, a personnel tree, elevator navigation, and operation prompt, and the basic component can include at least one of a table, a drop-down box, an amount, and a cascade.

[0083] S10, the client 410 sets the client component and the dragged component on the initial page as a page component, responds to the attribute change operation on the page component, and performs attribute change on the page component, and updates the page component and the initial page in turn according to the attribute change result, and displays the initial page.

[0084] S11, the client 410 generates client code according to the initial page and the received server code in response to the code generation instruction, performs code verification on the client code, if it is determined according to the code verification result that there is error code in the client code, performs code repair on the error code, updates the client code according to the code repair result, otherwise, runs the client code to generate a target page, and displays the target page.

[0085] In actual application, the above code verification process can be to verify whether the client code is standard and / or the file type is standard, etc.

[0086] S12, the client 410 displays the client code, responds to the code editing operation on the client code, performs code editing on the client code, updates the client code according to the code editing result, runs the client code to generate a target page, and previews the target page.

[0087] S13, the client 410 outputs the server code and the client code in response to the code export instruction, wherein the client code includes page style, code verification rule and internationalization configuration file, and the internationalization configuration file includes dictionary maintenance, cache synchronization and multi-scene fusion.

[0088] The technical scheme of the embodiment of the present application, through mutual cooperation of the above technical steps, strengthens the standardization of the client code, automatically generates the internationalization configuration file, saves a large amount of code development time, can edit the client code online, and presents the edited target page in real time, can provide a plurality of templates meeting business requirements, the page guide is friendly and thoughtful in design, and the page layout can be improved through dragging, so that a page developer who does not understand code development can also develop a page.

[0089] Embodiment five

[0090] Figure 6 A structural block diagram of a page generation system provided by the embodiment five of the present application is provided, and the system is used for executing the page generation method provided by any of the above embodiments. The system and the page generation method in the above embodiments belong to the same inventive concept, and the details not described in the embodiment of the page generation system can be referred to the embodiment of the page generation method. Referring to Figure 6 , the system can specifically include a client 510 and a server 520.

[0091] The client 510 is configured to send field information of a selected field to the server 520 in response to a field selection operation.

[0092] The server 520 is configured to determine the selected field corresponding to the received field information, generate server code and server messages according to the field name, the field type of the selected field and the constraint relationship for the selected field, and send the generation result to the client 510.

[0093] The client 510 is further configured to parse the received server messages to obtain a client component, obtain a selected template in response to a template selection operation, and generate an initial page based on the selected template and the client component.

[0094] The client 510 is further configured to generate client code according to the initial page and the received server code, wherein the target page is generated after the client code is executed.

[0095] Optionally, the server 520 is further configured to determine field data of the selected field in the selected data source where the selected field is located after determining the selected field corresponding to the received field information, perform data verification on the field data, if the data verification fails, perform information prompting according to the data verification result, otherwise, obtain the field name, the field type and the constraint relationship.

[0096] Based on this, the server 520 is specifically configured to determine the selected field in the selected data source after determining the selected field corresponding to the received field information, convert the field data in the selected data source into standard data matching the pre-set data verification rule according to the data source type of the selected data source, perform data verification on the standard data based on the data verification rule, perform information prompting according to the data verification result if the data verification fails, or otherwise, obtain the field name, field type and constraint relationship.

[0097] Optionally, the client 510 is specifically configured to obtain the selected technology stack in response to the technology stack selection operation, analyze the received server message according to the selected technology stack to obtain a client message matching the selected technology stack, and obtain a client component according to the client message, and obtain the selected template in response to the template selection operation, and generate an initial page based on the selected template and the client component.

[0098] Optionally, the client 510 is further configured to obtain the changed type in response to the type changing operation for the client component after obtaining the client component, and update the client component based on the changed type.

[0099] Optionally, the client 510 is further configured to display the initial page after generating the initial page based on the selected template and the client component, wherein the initial page is provided with the client component; obtain the dragged component and the component dragging terminal on the initial page in response to the component dragging operation acting on the initial page, wherein the dragged component includes the client component already provided on the initial page and / or the component stored in the component repository; set the dragged component on the component dragging terminal, and update the initial page according to the component setting result, and display the initial page.

[0100] Correspondingly, the client 510 is specifically configured to generate the client code according to the initial page and the received server code in response to the code generation instruction, wherein the target page is generated after the client code is run.

[0101] Optionally, the client 510 is further configured to display the initial page after generating the initial page based on the selected template and the client component, wherein the initial page is provided with the client component; perform attribute changing on the client component in response to the attribute changing operation for the client component, and update the client component according to the attribute changing result; update the initial page according to the client component, and display the initial page.

[0102] Correspondingly, the client 510 is specifically configured to generate the client code according to the initial page and the received server code in response to the code generation instruction, wherein the target page is generated after the client code is run.

[0103] Optionally, the client 510 is further configured to perform code verification on the client code after generating the client code according to the initial page and the received server code, perform code repair on error code in the client code if it is determined according to a code verification result that the error code exists in the client code, and update the client code according to a code repair result.

[0104] and / or,

[0105] perform code editing on the client code in response to a code editing operation acting on the client code, and update the client code according to a code editing result.

[0106] and / or,

[0107] output the server code and the client code in response to a code export instruction.

[0108] The page generation system provided in the fifth embodiment of the present application is configured such that the client sends field information of a selected field obtained in response to a field selection operation to the server; the server determines the selected field corresponding to the received field information, generates server code and a server message according to a field name, a field type of the selected field, and a constraint relationship for the selected field, and sends the generated server code and the server message to the client; the client obtains a selected template in response to a template selection operation, and generates an initial page based on the selected template and a client component obtained by parsing the received server message, wherein the initial page is a page for determining what client components and presentation forms of the client components are set on a target page, and is directly determined according to a business requirement and a pre-set template, and thus manual hard coding is not involved, thereby ensuring uniformity of page styles of the target page generated subsequently; further, the client generates client code for generating the target page after being run according to the initial page and the received server code, wherein the client code is automatically generated according to the target page and the server code, and thus manual hard coding is not involved, thereby ensuring high quality of the client code corresponding to the target page. The above system achieves the effect of quickly generating the target page with high-quality code and uniform page styles through cooperation between the client and the server (i.e., full-stack support).

[0109] The page generation system provided in the embodiments of the present application can perform the page generation method provided in any of the embodiments of the present application, and has the corresponding functional modules and beneficial effects of the execution method.

[0110] It is worth noting that the embodiments of the page generation system described above include various units and modules only according to functional logic, but are not limited to the above division, as long as the corresponding functions can be implemented; in addition, the specific names of each functional unit are only for easy mutual differentiation, and do not limit the protection scope of the present application.

[0111] Embodiment six

[0112] Embodiment six of the present application provides a storage medium containing computer executable instructions, which when executed by a computer processor, are used to execute a page generation method, the method comprising:

[0113] The client sends the field information of the selected field to the server in response to the field selection operation;

[0114] The server determines the selected field corresponding to the received field information, and generates the server code and the server message according to the field name, the field type of the selected field and the constraint relationship for the selected field, and sends the generation result to the client;

[0115] The client parses the received server message to obtain the client component, and in response to the template selection operation, acquires the selected template, and generates an initial page based on the selected template and the client component;

[0116] The client generates the client code according to the initial page and the received server code, wherein the client code is executed to generate the target page.

[0117] It should be understood that various forms of flow shown above can be used to reorder, add or delete steps. For example, each step described in the present application can be executed in parallel, sequentially or in a different order, as long as the desired results of the technical solutions of the present application can be achieved, which is not limited herein.

[0118] The above specific embodiments do not constitute a limitation on the protection scope of the present application. Those skilled in the art should understand that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modifications, equivalent replacements and improvements made within the spirit and principles of the present application should be included in the protection scope of the present application.

Claims

1. A page generation method characterized by, The method comprises the following steps: The client sends field information of the selected field to the server in response to a field selection operation; The server determines the selected field corresponding to the received field information, generates server code and server message according to the field name, field type of the selected field and the constraint relationship of the selected field, and sends the generated result to the client, wherein the server code is a code that can query the field data of the data table corresponding to the selected field and located below the selected field; The client parses the received server message to obtain a client component, and in response to a template selection operation, obtains a selected template, and generates an initial page based on the selected template and the client component; The client queries and obtains the field data from the server by running the received server code, and generates a client code according to the field data and the initial page, wherein the target page is generated after the client code is run.

2. The method of claim 1, wherein, After the server determines the selected field corresponding to the received field information, the method further comprises the following steps: Determine the field data of the selected field in the selected data source where the selected field is located, and perform data verification on the field data; If the data verification fails, information is prompted according to the data verification result; Otherwise, the field name, the field type and the constraint relationship are obtained.

3. The method of claim 2, wherein, After determining the field data of the selected field in the selected data source where the selected field is located, the method further comprises the following steps: According to the data source type of the selected data source, the field data is converted into standard data matching a pre-set data verification rule; The data verification on the field data comprises the following steps: Based on the data verification rule, the standard data is verified.

4. The method of claim 1, wherein, The client parses the received server message to obtain a client component, which comprises the following steps: The client obtains a selected technology stack in response to a technology stack selection operation, parses the received server message according to the selected technology stack to obtain a client message matching the selected technology stack, and obtains a client component according to the client message.

5. The method of claim 1, wherein, After obtaining the client component, the method further comprises the following steps: In response to a type changing operation on the client component, a changed type is obtained, and the client component is updated based on the changed type.

6. The method of claim 1, wherein, After generating the initial page based on the selected template and the client component, the method further comprises the following steps: The initial page is displayed, wherein the client component is set on the initial page; In response to a component dragging operation on the initial page, a dragged component and a component dragging end point on the initial page are obtained, wherein the dragged component comprises the client component that has been set on the initial page and / or a component stored in a component repository; The dragged component is arranged on the component dragging end point, and the initial page is updated according to the component arrangement result, and the initial page is displayed; The client generates the client code according to the initial page and the received server code, including: The client generates the client code according to the initial page and the received server code in response to a code generation instruction.

7. The method of claim 1, wherein, After the initial page is generated based on the selected template and the client component, further comprising: The initial page is displayed, wherein the client component is arranged on the initial page; In response to an attribute change operation on the client component, the attribute of the client component is changed, and the client component is updated according to the attribute change result; The initial page is updated according to the client component, and the initial page is displayed; The client generates the client code according to the initial page and the received server code, including: The client generates the client code according to the initial page and the received server code in response to a code generation instruction.

8. The method of claim 1, wherein, After the client generates the client code according to the initial page and the received server code, further comprising: If it is determined that there is an error code in the client code according to the code verification result, the error code is repaired, and the client code is updated according to the code repair result; And / or, In response to a code editing operation on the client code, the client code is edited, and the client code is updated according to the code editing result; And / or, In response to a code export instruction, the server code and the client code are output.

9. A page generation system, characterized by, Including: A client and a server; wherein The client is configured to send field information of a selected field to the server in response to a field selection operation; The server is configured to determine the selected field corresponding to the received field information, generate server code and server message according to the field name, field type and constraint relationship of the selected field, and send the generation result to the client, wherein for the data table corresponding to the selected field, the server code is a code that can query the field data below the selected field in the data table; The client is further configured to parse the received server message to obtain a client component, and in response to a template selection operation, obtain a selected template, generate an initial page based on the selected template and the client component; The client is further configured to query and obtain the field data from the server by running the received server code, and generate a client code according to the field data and the initial page, wherein the client code generates a target page after being run.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer instructions for causing the processor to execute when implementing the page generation method of any one of claims 1-8. The computer readable storage medium stores computer instructions for causing the processor to execute when implementing the page generation method of any one of claims 1-8.

Citation Information

Patent Citations

  • Software development method and device

    CN108153520A

  • Application program page generation method and device, computer equipment and storage medium

    CN108446116A

  • Configuration page generation method and device, electronic device and readable storage medium

    CN110673847A

  • System for automatically achieving back-end programming by selecting front-end configuration

    CN111966738A