A method and system for generating a web page

Abstract

The embodiment of the application discloses a webpage page generation method and system, which can be applied to the field of cloud computing, the field of mobile internet or the field of finance. Based on encapsulating DOM elements into a background server component library, the DOM elements can be loaded according to business scenarios, and a script file generation mode for rendering the DOM elements to generate a page and realizing field control of the DOM elements is generated directly based on configuration parameters obtained by configuring DOM element attributes in a visual development page, field inspection information, event response inspection information and format processing standards of target DOM elements generated by configuring target DOM element attributes. Therefore, developers do not need to write script file codes to realize field control of the page according to each target business scenario, and the efficiency of generating a browser page is improved.

Description

Technical Field

[0001] This application relates to the field of Web technology, and more specifically, to a method and system for generating web pages. Background Technology

[0002] Currently, web browsers are typically based on a B / S architecture (Browser / Server architecture). However, in browsers using this architecture, the B-side relies entirely on the browser's own rendering, assignment, and browsing functions. For each business scenario, front-end developers need to write corresponding scripts to generate web pages and implement field controls. This requires front-end developers to not only have CSS and JS development skills, but also, because field controls are linked to business scenarios, to be familiar with the corresponding business scenarios. Then, they need to redesign the scripts to implement the browser pages corresponding to those business scenarios. In existing browser page generation methods, all field controls depend on front-end script operations, requiring repeated script design for different scenarios, resulting in low efficiency in generating browser pages. Summary of the Invention

[0003] The purpose of this application is to provide a method and system for generating web pages, which eliminates the need for developers to write corresponding script files to control the page layout for each target business scenario, thereby improving the efficiency of generating browser pages.

[0004] To achieve the above objectives, in a first aspect, this application provides a method for generating a webpage, the method comprising:

[0005] Obtain a page generation request for generating a page corresponding to the target business scenario; wherein, the page generation request includes: a target business scenario identifier;

[0006] Based on the target business scenario, target document object model (DOM) elements are retrieved from a preset component library to form a visual development page; the target DOM elements include attributes, function methods, and response events; wherein, the target DOM elements are configured with corresponding element identifiers;

[0007] Add the mapping relationship between the target business scenario identifier and the element identifier to the pre-stored business scenario and element mapping table in the server;

[0008] Configure the parameters of each attribute of the target DOM element in the visualization development page to obtain the value of the target attribute and the data type of the target attribute value;

[0009] Based on the attributes of the target DOM element, the function methods of the target DOM element, and the value of the target attribute, generate field validation information; based on the response events of the target DOM element, the value of the target attribute, the data type of the target attribute value, and the preset data type format, generate event response validation information.

[0010] Obtain the server's display format, and generate the format processing standard for the target DOM element based on the value of the target attribute, the data type of the target attribute value, and the server's display format;

[0011] Based on the attributes of the target DOM element, the functions and methods of the target DOM element, the response events of the target DOM element, the values ​​of each attribute of the target DOM element, the validation information, and the format processing standard of the target DOM element, a script file corresponding to the target business scenario is generated.

[0012] Based on the mapping table between the business scenario and the element, the target DOM element is parsed and loaded from the preset component library, and the script file corresponding to the target business scenario is retrieved to generate the page corresponding to the target business scenario.

[0013] Optionally, if the target DOM element's attributes include: field type attributes, then the step of generating event response validation information based on the target DOM element's response event, the value of the target attribute, the data type of the target attribute value, and a preset data type format includes:

[0014] Event response verification information is generated based on the response event of the target DOM element, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format.

[0015] Optionally, the response events of the target DOM element include: KeyPress event, KeyUp event, focus loss event, and copy-paste event. Correspondingly, the event response verification information includes: KeyPress event response verification information, KeyUp event response verification information, focus loss event response verification information, and copy-paste event response verification information. Then, generating the event response verification information based on the response events of the target DOM element, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format includes:

[0016] If the response event of the target DOM element is the KeyPress event, then the KeyPress event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the ASCII code corresponding to the data type of the field type attribute value. The KeyPress event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyPress event is detected.

[0017] If the response event of the target DOM element is the KeyUp event, then the KeyUp event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the KeyUp event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyUp event is detected;

[0018] If the response event of the target DOM element is a focus loss event, then focus loss event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the focus loss event response verification information is used to perform data type format verification through the key-value pairs included in the target DOM element when the focus loss event is detected;

[0019] If the response event of the target DOM element is a copy and paste event, then the copy and paste event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the copy and paste event response verification information is used to verify the data type format of the content value in the clipboard when the copy and paste event is detected.

[0020] Optionally, the attributes of the target DOM element include: field type attributes, and the preset data type format includes:

[0021] When the value of the field type attribute is a date, the date includes the year, month, and day. The year value is an integer between 1900 and 2100, the month value is an integer between 1 and 12, and the day value is 30 when the month is 4, 6, 9, or 11, 31 when the month is 1, 3, 5, 7, 8, 10, or 12, and 28 or 29 when the month is 2, depending on the year.

[0022] When the value of the field type attribute is time, which includes hours, minutes and seconds, the value of the hour is an integer between 1 and 23, and the values ​​of the minutes and seconds are integers between 1 and 59.

[0023] Optionally, the target DOM element's attributes include: field type attributes, and the formatting standard includes: de-formatting standard and target formatting standard. Then, generating the formatting standard for the target DOM element based on the value of the target attribute, the data type of the target attribute value, and the server's display format includes:

[0024] Get the value of the field type attribute and the data type of the field type attribute value;

[0025] Based on the value of the field type attribute and the data type of the field type attribute value, the format removal processing standard is generated; the format removal processing standard includes: if the value of the field type attribute is a date, then the format corresponding to the value of the field type attribute is updated to the format of "day / month / year"; if the value of the field type attribute is a time, then the format corresponding to the value of the field type attribute is updated to the format of "hour:minute:second"; if the value of the field type attribute is a preset value and the data type of the value of the field type attribute is a number, then the commas in the format corresponding to the value of the field type attribute are removed, wherein the preset value refers to any value other than date and time configured in the field type attribute;

[0026] The target format processing standard is generated based on the display format of the server and the format corresponding to the value of the field type attribute.

[0027] Optionally, before retrieving the target DOM element from the preset component library according to the target business scenario to construct the visual development page, the method further includes:

[0028] The Document Object Model (DOM) elements in Hypertext Markup Language (HTML) are encapsulated, and the encapsulated DOM elements are added to the preset component library.

[0029] Optionally, after generating the script file corresponding to the target business scenario, the method further includes:

[0030] Configure a target script file identifier for the script file corresponding to the aforementioned target business scenario;

[0031] Add the mapping relationship between the target business scenario identifier and the target file identifier to the mapping table of business scenarios and script files pre-stored on the server.

[0032] Optionally, the step of parsing and loading the target DOM element from the preset component library according to the mapping table between the business scenario and the element, and retrieving the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario includes:

[0033] Based on the target business scenario identifier, determine the element identifier of the target DOM element corresponding to the target business scenario identifier from the mapping table between the business scenario and the element, and parse and load the target DOM element from the preset component library based on the element identifier;

[0034] Based on the target business scenario identifier and the mapping table between the business scenario and the script file, obtain the target script file identifier corresponding to the target business scenario identifier;

[0035] Retrieve the script file corresponding to the target business scenario based on the target script file identifier;

[0036] The target DOM element is rendered based on the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

[0037] Secondly, this application provides a webpage generation system, the system comprising:

[0038] The request acquisition module is used to acquire a page generation request for generating a page corresponding to the target business scenario; wherein, the page generation request includes: a target business scenario identifier;

[0039] The visualization page configuration module is used to retrieve target Document Object Model (DOM) elements from a preset component library according to the target business scenario to form a visualization development page; the target DOM elements include attributes, functions, and response events; the module configures the parameters of each attribute of the target DOM elements in the visualization development page to obtain the value of the target attribute and the data type of the target attribute value; wherein, the target DOM elements are configured with corresponding element identifiers;

[0040] The storage module is used to add the mapping relationship between the target business scenario identifier and the element identifier to a pre-stored mapping table of business scenarios and elements in the server;

[0041] The field validation processing module is used to generate field validation information based on the attributes of the target DOM element, the function methods of the target DOM element, and the value of the target attribute.

[0042] The event response processing module is used to generate event response verification information based on the response event of the target DOM element, the value of the target attribute, the data type of the target attribute value, and a preset data type format; obtain the server's display format, and generate a format processing standard for the target DOM element based on the value of the target attribute, the data type of the target attribute value, and the server's display format;

[0043] The script file generation module is used to generate a script file corresponding to the target business scenario based on the attributes of the target DOM element, the function methods of the target DOM element, the response events of the target DOM element, the value of each attribute of the target DOM element, the validation information, and the format processing standard of the target DOM element.

[0044] The page parsing module is used to parse and load the target DOM element from the preset component library according to the mapping table between the business scenario and the element, and to retrieve the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

[0045] Optionally, if the target DOM element's attributes include: field type attributes, then the event response handling module is specifically used for:

[0046] Event response verification information is generated based on the response event of the target DOM element, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format.

[0047] This application provides a method for generating web pages. This method encapsulates all DOM elements into a preset component library. Then, when configuring page parameters, it retrieves the target DOM elements from the preset component library based on the target business scenario, generating a visual development page. This allows for the configuration of target DOM element attributes on the visual development page, enabling rapid configuration of field verification information, event response verification information, and target DOM element formatting standards based on the configured target DOM element attributes. Finally, it generates a script file corresponding to the target business scenario based on the configured target DOM elements, field verification information, event response verification information, and target DOM element formatting standards. When generating a page corresponding to the target business scenario, it can directly obtain the target DOM elements and script file based on the target business scenario, and use the script file to render the target DOM elements to obtain the web page. In this embodiment, the script file generation method, which encapsulates DOM elements into a backend server component library and loads them according to business scenarios, is used to render DOM elements, generate pages, and control the field positions of DOM elements. It is based on the configuration parameters obtained from configuring DOM element attributes on the provided visual development page, and the field verification information, event response verification information, and target DOM element format processing standards generated by the configured target DOM element attributes. This eliminates the need for developers to write script file code to implement page field control for each target business scenario, thus improving the efficiency of generating browser pages. Attached Figure Description

[0048] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of this application. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0049] Figure 1 A flowchart illustrating a method for generating a webpage according to an embodiment of this application;

[0050] Figure 2 This is a schematic diagram of the architecture for encapsulating DOM elements provided in the embodiments of this application;

[0051] Figure 3 This is a schematic diagram of a visual development page provided in an embodiment of this application;

[0052] Figure 4 This is a flowchart illustrating the verification process after a DOM element loses focus, as provided in an embodiment of this application.

[0053] Figure 5This is a flowchart illustrating the validation process after triggering a copy-paste event on a DOM element, as provided in an embodiment of this application.

[0054] Figure 6 A flowchart for deformatting the key-value pairs of DOM elements provided in this application embodiment;

[0055] Figure 7 A schematic diagram of the framework for rendering page fields provided in an embodiment of this application;

[0056] Figure 8 This is a schematic diagram of a webpage generation system provided in an embodiment of this application. Detailed Implementation

[0057] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0058] In existing technical solutions, front-end developers need to write corresponding scripts to generate web pages and implement field control for each business scenario. Field control involves checking the length, type, and events of fields on the HTML page. Existing solutions for generating web pages and implementing field control require front-end developers to not only have CSS and JS development skills, but also, because field control is linked to business scenarios, to be familiar with the corresponding business scenarios. Then, they need to redesign the scripts to implement the browser pages corresponding to the business scenarios. In existing browser page generation methods, all field control relies on front-end script operations, and scripts need to be redesigned for different scenarios, resulting in low efficiency in generating browser pages.

[0059] This invention provides a method and system for generating web pages. It utilizes a script file generation method that encapsulates DOM elements into a backend server component library, allowing for loading based on business scenarios. This script file is used to render DOM elements, generate pages, and control the field layout of DOM elements. The method directly generates field verification information, event response verification information, and target DOM element formatting standards based on configuration parameters obtained from configuring DOM element attributes on a provided visual development page, along with the configured target DOM element attributes. This eliminates the need for developers to write script files for each target business scenario to control page layout, thus improving the efficiency of generating browser pages.

[0060] It should be noted that the webpage generation method and system provided in this application embodiment can be applied to the fields of cloud computing, mobile internet, or finance. The above is only an example and does not limit the application fields of the webpage generation method and system provided in this application.

[0061] The following is a detailed description of a method for generating a webpage according to this application:

[0062] Figure 1 This is a flowchart illustrating a method for generating a webpage according to an embodiment of this application. Figure 1 As shown, the method for generating web pages in this embodiment includes:

[0063] S100: Obtain a page generation request for generating the page corresponding to the target business scenario; wherein, the page generation request includes: the target business scenario identifier;

[0064] It should be noted that when a user triggers the page corresponding to the target business scenario in the browser, a page generation request for the page corresponding to the target business scenario will be generated. The user can trigger the page corresponding to the target business scenario by clicking the corresponding control in the browser or by entering relevant information about the target business scenario in the input field. The triggering method of the page corresponding to the target business scenario is not specifically limited here, and can be determined according to the actual situation, all of which are within the scope of protection of this application.

[0065] S101: Based on the target business scenario, retrieve the target document object model (DOM) elements from the preset component library to construct a visual development page; the target DOM elements include attributes, function methods, and response events; wherein, the target DOM elements are configured with corresponding element identifiers;

[0066] Specifically, the attributes of the target DOM element may include the FieldType attribute, the Name attribute, the maximum string length attribute, and the minimum string length attribute; the function methods may include the CheckLength method for getting the string length, the FormatNumber method for formatting the element's display format, and the GetPatternsByFieldType regular expression for specifying the field type attribute; the response events may include press events, double-click events, single-click events, focus loss events, release events, copy and paste events, etc. The attributes, function methods, and response events of the DOM element in this application embodiment are not specifically limited here, and can be determined according to the actual situation, all of which are within the protection scope of this application.

[0067] It should be noted that the preset component library is used to store encapsulated DOM elements. Before retrieving the target DOM elements from the preset component library according to the target business scenario to form a visual development page, the method further includes: encapsulating the Document Object Model (DOM) elements in Hypertext Markup Language (HTML) and adding the encapsulated DOM elements to the preset component library.

[0068] Specifically, in this application embodiment, the interface provided by the graphical interface-based layout engine MSHTML is used to encapsulate and extend the capabilities of all DOM elements on HTML, implementing and extending the attributes, function methods, and event responses of DOM elements; where MSHTML is the name of the layout engine of Internet Explorer, the web browser installed on Microsoft Windows.

[0069] In this application, the extension of DOM element capabilities can be achieved by creating a new custom DOM element and configuring its attributes, functions, and event responses. Alternatively, it can be an extension of the event responses of any DOM element encapsulated in the component library, enabling the extension of the function methods and attributes of that DOM element. For example, if the event response of the first DOM element encapsulated in the component library is a keyup event, the event response of this first DOM element can be extended to include keyup events and double-click events. The specific content of the extension is not limited here and can be set according to actual needs, all of which are within the scope of protection of this application.

[0070] It should be noted that, in the visualization scenario, the encapsulated DOM elements in this application embodiment correspond to each field element in the webpage. By configuring the attributes, methods, and events of the DOM elements, as well as the validation rules (i.e., field control rules) for those DOM elements, field control is achieved for the fields corresponding to the DOM elements in the webpage. This field control utilizes the configured attributes, methods, and events of the DOM elements, along with the validation rules for the DOM elements, to check the length, type, and events of the fields in the HTML page.

[0071] DOM elements can include the following object elements, and can also include custom object elements:

[0072] DocumentElement: HTML Document object model, a page interface provided by Microsoft for accessing actual web pages;

[0073] The FormElement element is primarily used for page loading, initial checks of page elements, distinguishing elements related to the exchange rate topic from other elements, subscribing to simple events, initializing various object elements based on page element tags, and, in column control, primarily involving the InputElement element.

[0074] InputElement: Primarily controls the input on the page, subscribes to field events, triggers different field validations, and returns the input value to the page or stores it in memory.

[0075] SelectElement: A dropdown selection box, currently available in static and dynamic versions. It is primarily used to implement keyboard control, cascading, and data echoing within the dropdown menu.

[0076] SelectWindow: A pop-up window for selecting elements, existing alongside SelectElement. Primarily used to display dropdown pop-ups and search dropdown options.

[0077] TableElement: The table element is mainly used for displaying multiple data entries and modifying list data. Other elements, such as InputElement and SelectElement, are usually nested inside the table element.

[0078] ButtonElement: Used to trigger the text, image, or other multimedia content contained within a button element.

[0079] ImageElement: Displays platform images, etc.

[0080] It should be noted that, in this embodiment, the interfaces provided by MSHTML are used to encapsulate and extend the capabilities of all DOM elements in HTML, implementing and extending the attributes, functions, methods, and events of DOM elements, based on the appendix. Figure 2 The architecture in the document uses the interfaces provided by MSHTML to encapsulate DOM elements and extend their capabilities.

[0081] Appendix Figure 2The outermost WebBrowser window (WebBrowserWindow) is responsible for displaying the HTML page within the Windows Forms application. When the page finishes loading, it sequentially creates platform-defined object elements based on the page's text object model, such as document, form, input, select, and button elements. This includes defining element attributes and managing events. WebBrowser is a .NET control class; this architecture extends the WebBrowser control through WebBrowserEx, which is responsible for extending the WebBrowser control, subscribing to page zoom and page load completion events, and delegating control events, such as the keyDown event delegation.

[0082] WebBrowserWindow includes: DocumentElement: an HTML Document object model, a page interface provided by Microsoft for accessing the actual webpage. This DocumentElement manipulates the content of the webpage through the Document property, which contains an HtmlDocument object.

[0083] The DocumentElement (HtmlElement) includes: the FormElement, which is primarily used for page loading, initial checks of elements on the page, distinguishing elements related to the exchange rate topic from other elements, subscribing to simple events, and initializing various object elements based on page element tags. The InputElement is the most frequently used element in column control.

[0084] FormElement can include multiple object field elements, such as InputElement, SelectElement, SelectWindow (a pop-up window of SelectElement), TableElement, ButtonElement, and ImageElement.

[0085] When encapsulating DOM elements into the component library, custom field object elements can also be encapsulated according to different scenario requirements. Specifically, the element name of the custom DOM element is set, and the attributes, function methods, and response events of the custom DOM element are configured to generate custom field object elements.

[0086] In this embodiment of the application, based on the interface provided by MSHTML, according to the target business scenario and the attributes and capabilities of each corresponding field, the corresponding information of the DOM elements on the HTML is encapsulated into the interface of HTMLElement. After obtaining the interface of the corresponding element, the methods inside it can be used to obtain various information inside it.

[0087] S102: Add the mapping relationship between the target business scenario identifier and the element identifier to the pre-stored business scenario and element mapping table in the server;

[0088] It's important to note that by adding the mapping relationship between the target business scenario identifier and the element identifier of the target DOM element retrieved by the target business scenario to a pre-stored business scenario-element mapping table on the server, when loading a webpage, the server can use this mapping table to obtain the corresponding DOM element identifier based on the target business scenario identifier. Then, the corresponding target DOM element can be retrieved from the component library and loaded based on the DOM element identifier. Deploying DOM elements to the backend and retrieving them via a mapping table improves page generation efficiency and reduces the coupling between technology and business logic. Generating pages no longer requires developers to write corresponding script files for each business scenario, overcoming the inefficiency of manually writing scripts for each scenario and adding the corresponding DOM elements, configuring DOM element parameters, and setting validation rules in script files.

[0089] S103: Configure the parameters of each attribute of the target DOM element in the visualization development page to obtain the value of the target attribute and the data type of the target attribute value;

[0090] As attached Figure 3The diagram illustrates the configuration of the visualization page. In the visualization scenario, each DOM element corresponds to a field. When a developer selects a DOM element (field) on the left side of the visualization page, a configuration box for the corresponding DOM element's attributes will appear on the right side of the visualization page. Developers can configure different attributes of the DOM element in the configuration box on the right side of the visualization page to obtain the value of each attribute. When the attribute is a field type attribute, the value of the field type attribute can be Time, Yes / No, Date, exchange rate, amount, etc. Correspondingly, the value of the field type attribute has its corresponding data type, which is the character type of the field type attribute value; for example, the data type corresponding to Time is a number (0 to 9), Yes / No is a no, Date is a date (including numbers and the symbols "-", ".", and " / "), and the data type for exchange rate and amount is amount (including numbers 0, "-", ".", and "X"). 3 / 4 ", $, ,

[0091] S104: Generate field validation information based on the attributes of the target DOM element, the function methods of the target DOM element, and the value of the target attribute; generate event response validation information based on the response event of the target DOM element, the value of the target attribute, the data type of the value of the target attribute, and the preset data type format;

[0092] Specifically, based on the attributes of the target DOM element, the function methods of the target DOM element, and the values ​​of the target attributes, the generated field validation information is shown in Table 1 below:

[0093] Table 1

[0094]

[0095]

[0096] It should be noted that this field validation information is used to validate the length, data format type, validity of key-value pairs (i.e., key-value pairs in page fields) contained in DOM elements, as well as their display format and whether they are required fields.

[0097] In this embodiment of the application, the attributes of the target DOM element include: field type attributes. Then, based on the response event of the target DOM element, the value of the target attribute, the data type of the value of the target attribute, and the preset data type format, event response verification information is generated, including: generating event response verification information based on the response event of the target DOM element, the value of the field type attribute, the data type of the value of the field type attribute, and the preset data type format.

[0098] Specifically, the attributes of the target DOM element include: field type attributes, and the preset data type format, including: when the value of the field type attribute is a date, the date includes year, month, and day, wherein the year value is an integer between 1900 and 2100, the month value is an integer between 1 and 12, and the day value is 30 when the month is 4, 6, 9, or 11, 31 when the month is 1, 3, 5, 7, 8, 10, or 12, and 28 or 29 when the month is 2; when the value of the field type attribute is a time, the time includes hour, minute, and second, then the hour value is an integer between 1 and 23, and the minute and second values ​​are integers between 1 and 59.

[0099] Specifically, the response events of the target DOM element include: KeyPress event, KeyUp event, focus loss event, and copy and paste event. Correspondingly, the event response verification information includes: KeyPress event response verification information, KeyUp event response verification information, focus loss event response verification information, and copy and paste event response verification information.

[0100] Based on the response event of the target DOM element, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format, event response validation information is generated, including:

[0101] If the response event of the target DOM element is the KeyPress event, then the KeyPress event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the ASCII code corresponding to the data type of the field type attribute value. The KeyPress event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyPress event is detected.

[0102] If the response event of the target DOM element is the KeyUp event, then the KeyUp event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the KeyUp event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyUp event is detected;

[0103] If the response event of the target DOM element is a focus loss event, then focus loss event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the focus loss event response verification information is used to perform data type format verification through the key-value pairs included in the target DOM element when the focus loss event is detected;

[0104] If the response event of the target DOM element is a copy and paste event, then the copy and paste event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the copy and paste event response verification information is used to verify the data type format of the content value in the clipboard when the copy and paste event is detected.

[0105] Taking the KeyPress event as the response event of the target DOM element as an example, the generated KeyPress event response verification information is shown in Table 2 below:

[0106] Table 2 shows the generated KeyPress event response validation information. The keypress event is triggered when a key is pressed, which can be understood as pressing and releasing the same key. Based on this KeyPress event response validation information, when the user triggers the KeyPress event, the page parser detects the KeyPress event and checks the key value KeyCode included in the target DOM element. This key value is the key value KeyCode entered by the user in the target DOM element (i.e., the field). The data type and format of the key value are validated through ASCII code validation. If it does not conform, an execution failure message is returned.

[0107] It should be noted that the "execution failure" message specifically refers to displaying a message box indicating that the execution failed on the browser's webpage.

[0108] Table 2

[0109]

[0110]

[0111] Taking the KeyUp event as the response event of the target DOM element as an example, the generated KeyUp event response verification information is shown in Table 3 below:

[0112] Table 3 shows the generated KeyUp event response validation information. The KeyUp event is triggered when a key is released, that is, after the key is pressed and released. Based on this KeyUp event response validation information, when the user triggers the KeyUp event, the KeyUp event does not block numbers, decimal points, or Ctrl+V. After the page parser detects the KeyUp event, it performs regular expression validation on the key value KeyCode included in the target DOM element. This key value is the key value KeyCode entered by the user in the target DOM element (i.e., the field). If it does not meet the requirements, it returns an execution failure message.

[0113] It should be noted that the "execution failure" message specifically refers to displaying a message box indicating that the execution failed on the browser's webpage.

[0114] Table 3

[0115]

[0116]

[0117] Taking the focus loss event as the response event of the target DOM element as an example, the generated focus loss event response verification information is the same as in Table 3 above, which verifies the field type attributes. The focus loss event is triggered when the element loses focus, which can be either a mouse action or a leave action by pressing the tab key. Based on this focus loss event response verification information, when the user triggers the focus loss event, after the page parser detects the focus loss event, it performs regular expression validation on the key value KeyCode included in the target DOM element. This key value is the key value KeyCode entered by the user in the target DOM element (i.e., the field). If it does not conform, it returns an execution failure message.

[0118] It should be noted that the "execution failure" message specifically refers to displaying a message box indicating that the execution failed on the browser's webpage.

[0119] It's important to note that if a DOM element contains an `onblur` attribute, it determines whether that element has a focus loss event response. When the page parser detects the focus loss event, it retrieves the value of the `onblur` attribute and performs a check. First, if the DOM element contains the `onblur` attribute, it searches for its value. If the value is empty, it means the DOM element does not have a focus loss event and is not triggered by it. If the value is not empty, the element name and the value of the `onblur` attribute are logged. Then, a regular expression validation is performed based on the `FieldType` attribute. If the validation does not match, a message indicating that the event was not executed is returned. Specifically, the regular expression validation based on the `FieldType` attribute is shown in Table 3 above.

[0120] Preferred options are listed below. Figure 4 As shown, the entire process of verifying the key value of the target DOM element (i.e., the field) after the page parser detects the loss of focus event in this embodiment of the application is described in detail:

[0121] When the page parser detects the focus loss event and the onblur property of the DOM element is not empty, the DOM element contains the focus loss event and can respond to it. Therefore, the validity of the key value of the field is validated, specifically:

[0122] Regular expressions are used for validity checks; the OnChangeValidate function is executed to validate changes in field values, replacing illegal characters with regular expressions; then, the actual length of the input key value is obtained through a function method, and the length of the input value (i.e., the key value) is controlled. Specifically, the text length of the input value is controlled using field validation rules, truncating any portion of the input value that exceeds the maximum text length of the control (i.e., the DOM element); then, validation is performed according to the data type corresponding to the value of the field's type attribute; preferably, it can be as shown in the appendix. Figure 4 The validation is performed sequentially based on the data types of the three field types: date, time, number, and amount. Validation can also be performed in other orders. This embodiment uses the sequential validation based on the data types of the three field types as an example:

[0123] First, date format validation is performed. If the data type of the field's type attribute is date, then date format validation is performed. This validates the key length and the range of year, day, and month values ​​based on the date format. Specifically, the CheckDate function is executed. If validation fails, a pop-up message will appear, which can be a JavaScript message. The rules specify that the year must be between 1900 and 2100, the month must be 1 to 12, and the date must be in April, June, September, or November (30 days). February has 28 or 29 days depending on whether it's a leap year, and all other months have 31 days. Regular expression validation is also performed to ensure that the date is numeric.

[0124] Next, time format validation is performed. If the data type of the field's type attribute is time, then time format validation is performed, validating the range of hour, minute, and second values ​​according to the time format. Specifically, the CheckTime function is executed, and a pop-up message box (which can be a JavaScript message box) will appear if the validation fails. Hour values ​​are between 1 and 23, and minutes and seconds are between 1 and 59. Regular expression validation is also performed to ensure that the time is a number.

[0125] Next, perform format validation for number and amount types. If the data type corresponding to the field type attribute value of this field is number or amount, then perform format validation for the amount and number type. For some number and amount type data, based on the number type, the positive and negative signs and decimal places are formatted according to the data format. If incorrect, a prompt box will pop up. It can be a prompt box with JS statement. The validation method for number and amount types can be to add decimal places to integer amounts according to the data format.

[0126] In this embodiment of the application, taking the field represented by the target DOM element containing a focus loss event as an example, it is possible to respond to the focus loss event, perform a verification process, and realize field control. Based on the configured attributes, function methods, and response events of the target DOM element, verification information can be generated quickly. Page generation does not require developers to write scripts every time, improving page generation efficiency. Furthermore, the generated page field control enables personalized settings.

[0127] Taking the copy-paste event as an example, the generated copy-paste event response validation information is the same as in Table 3 above, which validates the field type attribute. Based on this validation information, when the user triggers the copy-paste event, the page parser detects the event and performs regular expression validation on the content in the clipboard according to the FieldType attribute. This validates the data type format of the clipboard content. After validation, the input data is stored back in the system clipboard. If the FieldType attribute is not among the specified types, the system clipboard is cleared, meaning that incorrect data is replaced with spaces.

[0128] As attached Figure 5 As shown, when the target DOM element is configured with a copy-paste event, the process of validating the key value of the field after the page parser detects the copy-paste event in this embodiment of the application is described in detail:

[0129] Read the contents of the clipboard and then validate them. Specifically, perform regular expression validation based on the data type of the field type attribute value. If the validation passes, save the contents back to the clipboard. If the data type of the clipboard content does not match the data type of the configured field type attribute value, then clear the clipboard.

[0130] S105: Obtain the server's display format, and generate the format processing standard for the target DOM element based on the value of the target attribute, the data type of the target attribute value, and the server's display format;

[0131] Specifically, the target DOM element's attributes include: field type attributes; the formatting processing standards include: de-formatting processing standards and target formatting processing standards; then, generating the target DOM element's formatting processing standards based on the value of the target attribute, the data type of the target attribute value, and the server's display format includes: obtaining the value of the field type attribute and the data type of the field type attribute value; generating the de-formatting processing standards based on the value of the field type attribute and the data type of the field type attribute value; the de-formatting processing standards include: if the value of the field type attribute is a date, then the field... The format corresponding to the value of the type attribute is updated to "day / month / year"; if the value of the field type attribute is time, the format corresponding to the value of the field type attribute is updated to "hour:minute:second"; if the value of the field type attribute is a preset value and the data type of the field type attribute value is number, the commas in the format corresponding to the value of the field type attribute are removed, wherein the preset value refers to any value other than date and time configured in the field type attribute; the target format processing standard is generated according to the display format of the server and the format corresponding to the value of the field type attribute.

[0132] It should be noted that the display format of the server is different on different servers, depending on the actual server used. The display format of each server is set when the server is developed.

[0133] It should be noted that after the script file is generated, both the de-formatting standard and the target formatting standard are saved in the form of function methods. In response to user operations, the corresponding verification and formatting processes are implemented by calling and executing the corresponding function methods.

[0134] As attached Figure 6 As shown, the process of processing key values ​​entered by the user in the fields using the formatting removal standard in this embodiment of the application is described:

[0135] The get() function is executed to retrieve the value from the target DOM element;

[0136] The GetData() function is executed to retrieve the data type corresponding to the value of the field type attribute of the target DOM element.

[0137] The `ConvertToFNSData()` function converts the data type of the key-value pair to a format that the server can recognize, essentially removing the original key-value pair's format. Specifically, if the data type of the `FieldType` property is date, the `Convert2SysFormat()` function converts the data type of the key-value pair to a format that the server can recognize, updating the format of the field type property to "day / month / year". If the data type of the `FieldType` property is number, the `GetFNSNumber()` function converts the data type of the key-value pair to a format that the server can recognize, removing commas from the number. If the data type of the `FieldType` property is time, the `Convert2SysFormatTime()` function converts the data type of the key-value pair to a format that the server can recognize, updating the format of the field type property to "hour:minute:second".

[0138] S106: Generate a script file corresponding to the target business scenario based on the attributes of the target DOM element, the function methods of the target DOM element, the response events of the target DOM element, the value of each attribute of the target DOM element, the validation information, and the format processing standard of the target DOM element;

[0139] Preferably, after generating the script file corresponding to the target business scenario, the method further includes: configuring a target script file identifier for the script file corresponding to the target business scenario; and adding a mapping relationship between the target business scenario identifier and the target file identifier to a pre-stored mapping table of business scenarios and script files on the server.

[0140] It should be noted that this script file is used to retrieve the corresponding target DOM element from the preset component library according to the target business scenario, render the target DOM element to generate a web page and corresponding validation rules, and then respond to user operations to control the field.

[0141] S107: Based on the mapping table between the business scenario and the element, parse and load the target DOM element from the preset component library, and retrieve the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

[0142] The step of parsing and loading the target DOM element from the preset component library according to the mapping table between the business scenario and the element, and retrieving the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario includes: determining the element identifier of the target DOM element corresponding to the target business scenario identifier from the mapping table between the business scenario and the element based on the target business scenario identifier; parsing and loading the target DOM element from the preset component library according to the element identifier; obtaining the target script file identifier corresponding to the target business scenario identifier according to the target business scenario identifier and the mapping table between the business scenario and the script file; retrieving the script file corresponding to the target business scenario according to the target script file identifier; and rendering the target DOM element according to the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

[0143] It should be noted that the page corresponding to the target business scenario is generated by the page parser. Based on the interface provided by MSHTML, all DOM elements in the HTML are encapsulated and stored in the background. In this embodiment, the page parser utilizes the interface of the Microsoft IE browser orchestration engine MSHTML, combined with the Webbrowser control in the GUI, to implement a customized page parser. This parser intercepts and instantiates all DOM elements in the HTML within the Webbrowser control, decoupling the development of technology and business. After the technical development does the common processing inside the browser, the business front-end development does not need to pay attention to the common processing logic, which improves the efficiency of page generation and the ability to personalize the page.

[0144] As attached Figure 7 As shown, the specific method for generating the page corresponding to the target business scenario in this embodiment of the application will be described in detail below:

[0145] In this embodiment, after generating the corresponding script for each business scenario, the script file is stored on the server. When the business scenario is determined, the corresponding script file is called to render the DOM elements of the retrieved HTML page. Preferably, in this embodiment, there is also a corresponding JS script file. Since some execution content is completed using JS language, a corresponding JS script file is also set. For example, if some prompt boxes are generated as JS statements, they will be generated as JS scripts and stored.

[0146] After obtaining the page generation request corresponding to the target business scenario, the page parser will retrieve the corresponding HTML page target DOM element and the script file corresponding to the target business scenario. Using the HTML element utility HtmlUtility, it will obtain the attribute values ​​of the target DOM element from the script file, such as the attribute values ​​of page controls (SelectElement). It will then call the custom field control function for functional control and use the FormElement's page loading function to load the target DOM element and generate the corresponding page.

[0147] After the attribute values ​​of the target DOM element `SelectElement` are rendered onto `SelectElement` using `HtmlUtility`, `SelectElement` takes over all the properties, events, and methods of the original `Select` control, implementing the various functions of the original dropdown selection box control. A dropdown list window pops up through the `SelectElement` element, combining with `SelectElement` to present the dropdown menu, thus completing the rendering of the target DOM element. The above steps are repeated to render all DOM elements corresponding to the target business scenario. After all DOM elements are rendered, the webpage corresponding to the target business scenario is successfully generated. Users can perform operations such as clicking, double-clicking, swiping, and moving the focus on the generated page. The page parser captures the user's mouse actions in real time, triggering user-defined field control checks, and combining application-defined events to perform length and threshold checks, editability controls, and field linkage, etc.

[0148] It should be noted that when a user opens a web page, the page parser runs synchronously, loading the field control module; before the web page is rendered, custom event functions are loaded.

[0149] This invention provides a method for generating web pages. It utilizes script files to encapsulate DOM elements into a backend server component library, allowing for loading based on business scenarios. These scripts render DOM elements, generate pages, and control DOM element fields. The method directly generates field verification information, event response verification information, and target DOM element formatting standards based on configuration parameters obtained from configuring DOM element attributes on a provided visual development page, and the configured target DOM element attributes. This eliminates the need for developers to write script files for each target business scenario to control page fields, thus improving the efficiency of generating browser pages.

[0150] The following describes a webpage generation system according to an embodiment of this application. Please refer to [link / reference]. Figure 8Based on the webpage generation method in the above embodiments, this application embodiment implements the webpage generation method through a webpage generation system. The webpage generation system in this application embodiment includes:

[0151] The request acquisition module 100 is used to acquire a page generation request for generating a page corresponding to the target business scenario; wherein, the page generation request includes: a target business scenario identifier;

[0152] The visualization page configuration module 200 is used to retrieve target document object model (DOM) elements from a preset component library according to the target business scenario to form a visualization development page; the target DOM elements include attributes, function methods, and response events; the parameters of each attribute of the target DOM element in the visualization development page are configured to obtain the value of the target attribute and the data type of the value of the target attribute; wherein, the target DOM element is configured with a corresponding element identifier;

[0153] Storage module 300 is used to add the mapping relationship between the target business scenario identifier and the element identifier to a pre-stored mapping table of business scenarios and elements in the server;

[0154] The field validation processing module 400 is used to generate field validation information based on the attributes of the target DOM element, the function methods of the target DOM element, and the value of the target attribute.

[0155] The event response processing module 500 is used to generate event response verification information based on the response event of the target DOM element, the value of the target attribute, the data type of the target attribute value, and a preset data type format; obtain the display format of the server, and generate a format processing standard for the target DOM element based on the value of the target attribute, the data type of the target attribute value, and the display format of the server.

[0156] The script file generation module 600 is used to generate a script file corresponding to the target business scenario based on the attributes of the target DOM element, the function methods of the target DOM element, the response events of the target DOM element, the value of each attribute of the target DOM element, the validation information, and the format processing standard of the target DOM element.

[0157] The page parsing module 700 is used to parse and load the target DOM element from the preset component library according to the mapping table between the business scenario and the element, and to retrieve the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

[0158] Specifically, the target DOM element's attributes include: field type attributes. The event response processing module 500 is specifically used to: generate event response verification information based on the target DOM element's response event, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format.

[0159] Specifically, the response events of the target DOM element include: KeyPress event, KeyUp event, focus loss event, and copy / paste event. Correspondingly, the event response verification information includes: KeyPress event response verification information, KeyUp event response verification information, focus loss event response verification information, and copy / paste event response verification information. The event response processing module 500 is specifically used for:

[0160] If the response event of the target DOM element is the KeyPress event, then the KeyPress event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the ASCII code corresponding to the data type of the field type attribute value. The KeyPress event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyPress event is detected.

[0161] If the response event of the target DOM element is the KeyUp event, then the KeyUp event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the KeyUp event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyUp event is detected;

[0162] If the response event of the target DOM element is a focus loss event, then focus loss event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the focus loss event response verification information is used to perform data type format verification through the key-value pairs included in the target DOM element when the focus loss event is detected;

[0163] If the response event of the target DOM element is a copy and paste event, then the copy and paste event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the copy and paste event response verification information is used to verify the data type format of the content value in the clipboard when the copy and paste event is detected.

[0164] Specifically, the attributes of the target DOM element include: field type attributes, and the preset data type format, including: when the value of the field type attribute is a date, the date includes year, month, and day, wherein the year value is an integer between 1900 and 2100, the month value is an integer between 1 and 12, and the day value is 30 when the month is 4, 6, 9, or 11, 31 when the month is 1, 3, 5, 7, 8, 10, or 12, and 28 or 29 when the month is 2; when the value of the field type attribute is a time, the time includes hour, minute, and second, then the hour value is an integer between 1 and 23, and the minute and second values ​​are integers between 1 and 59.

[0165] Specifically, the target DOM element's attributes include: field type attributes; the formatting standards include: deformatting standards and target formatting standards; and the event response processing module 500 is specifically used for:

[0166] Obtain the value of the field type attribute and the data type of the field type attribute value; generate the format removal processing standard based on the value of the field type attribute and the data type of the field type attribute value; the format removal processing standard includes: if the value of the field type attribute is a date, then update the format corresponding to the value of the field type attribute to the format of "day / month / year"; if the value of the field type attribute is a time, then update the format corresponding to the value of the field type attribute to the format of "hour:minute:second"; if the value of the field type attribute is a preset value and the data type of the value of the field type attribute is a number, then remove the commas in the format corresponding to the value of the field type attribute, wherein the preset value refers to any value other than date and time configured in the field type attribute; generate the target format processing standard based on the display format of the server and the format corresponding to the value of the field type attribute.

[0167] The webpage generation system also includes a DOM element encapsulation module, used for:

[0168] The Document Object Model (DOM) elements in Hypertext Markup Language (HTML) are encapsulated, and the encapsulated DOM elements are added to the preset component library.

[0169] Storage module 300 is also used for:

[0170] Configure a target script file identifier for the script file corresponding to the target business scenario; add the mapping relationship between the target business scenario identifier and the target file identifier to the pre-stored mapping table of business scenarios and script files on the server.

[0171] Page parsing module 700 is specifically used for:

[0172] Based on the target business scenario identifier, determine the element identifier of the target DOM element corresponding to the target business scenario identifier from the mapping table between business scenarios and elements; parse and load the target DOM element from the preset component library based on the element identifier; obtain the target script file identifier corresponding to the target business scenario identifier based on the target business scenario identifier and the mapping table between business scenarios and script files; retrieve the script file corresponding to the target business scenario based on the target script file identifier; render the target DOM element based on the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

[0173] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for generating a webpage, characterized in that, The method includes: Obtain a page generation request for generating a page corresponding to the target business scenario; wherein, the page generation request includes: a target business scenario identifier; Based on the target business scenario, target DOM elements are retrieved from a preset component library to form a visual development page; the target DOM elements include attributes, function methods, and response events; wherein, the target DOM elements are configured with corresponding element identifiers; Add the mapping relationship between the target business scenario identifier and the element identifier to the pre-stored business scenario and element mapping table in the server; Configure the parameters of each attribute of the target DOM element in the visualization development page to obtain the value of the target attribute and the data type of the target attribute value; Based on the attributes of the target DOM element, the function methods of the target DOM element, and the value of the target attribute, generate field validation information; based on the response events of the target DOM element, the value of the target attribute, the data type of the target attribute value, and the preset data type format, generate event response validation information. Obtain the server's display format, and generate the format processing standard for the target DOM element based on the value of the target attribute, the data type of the target attribute value, and the server's display format; Based on the attributes of the target DOM element, the functions and methods of the target DOM element, the response events of the target DOM element, the values ​​of each attribute of the target DOM element, the validation information, and the format processing standard of the target DOM element, a script file corresponding to the target business scenario is generated. Based on the mapping table between the business scenario and the element, the target DOM element is parsed and loaded from the preset component library, and the script file corresponding to the target business scenario is retrieved to generate the page corresponding to the target business scenario.

2. The method according to claim 1, characterized in that, The target DOM element's attributes include: field type attributes. Then, based on the target DOM element's response event, the value of the target attribute, the data type of the target attribute value, and a preset data type format, event response verification information is generated, including: Event response verification information is generated based on the response event of the target DOM element, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format.

3. The method according to claim 2, characterized in that, The response events of the target DOM element include: KeyPress event, KeyUp event, focus loss event, and copy-paste event. Correspondingly, the event response verification information includes: KeyPress event response verification information, KeyUp event response verification information, focus loss event response verification information, and copy-paste event response verification information. The step of generating event response verification information based on the response events of the target DOM element, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format includes: If the response event of the target DOM element is the KeyPress event, then the KeyPress event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the ASCII code corresponding to the data type of the field type attribute value. The KeyPress event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyPress event is detected. If the response event of the target DOM element is the KeyUp event, then the KeyUp event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the KeyUp event response verification information is used to perform data type format verification through the key values ​​included in the target DOM element when the KeyUp event is detected. If the response event of the target DOM element is a focus loss event, then focus loss event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the focus loss event response verification information is used to perform data type format verification through the key-value pairs included in the target DOM element when the focus loss event is detected; If the response event of the target DOM element is a copy and paste event, then the copy and paste event response verification information is generated based on the value of the field type attribute, the data type of the field type attribute value, the preset data type format, and the regular expression corresponding to the data type of the field type attribute value; the copy and paste event response verification information is used to verify the data type format of the content value in the clipboard when the copy and paste event is detected.

4. The method according to claim 1, characterized in that, The target DOM element's attributes include: field type attributes, and the preset data type format includes: When the value of the field type attribute is a date, the date includes the year, month, and day. The year value is an integer between 1900 and 2100, the month value is an integer between 1 and 12, and the day value is 30 when the month is 4, 6, 9, or 11, 31 when the month is 1, 3, 5, 7, 8, 10, or 12, and 28 or 29 when the month is 2, depending on the year. When the value of the field type attribute is time, which includes hours, minutes and seconds, the value of the hour is an integer between 1 and 23, and the values ​​of the minutes and seconds are integers between 1 and 59.

5. The method according to claim 1, characterized in that, The target DOM element's attributes include: field type attributes; the formatting standards include: de-formatting standards and target formatting standards; then, generating the target DOM element's formatting standards based on the value of the target attribute, the data type of the target attribute value, and the server's display format includes: Get the value of the field type attribute and the data type of the field type attribute value; Based on the value of the field type attribute and the data type of the field type attribute value, the format removal processing standard is generated; the format removal processing standard includes: if the value of the field type attribute is a date, then the format corresponding to the value of the field type attribute is updated to "day / month / year" format; if the value of the field type attribute is a time, then the format corresponding to the value of the field type attribute is updated to "hour:minute:second" format; if the value of the field type attribute is a preset value and the data type of the value of the field type attribute is a number, then the commas in the format corresponding to the value of the field type attribute are removed, wherein the preset value refers to any value other than date and time configured in the field type attribute; The target format processing standard is generated based on the display format of the server and the format corresponding to the value of the field type attribute.

6. The method according to claim 1, characterized in that, Before retrieving the target DOM element from the preset component library according to the target business scenario to construct the visual development page, the method further includes: The Document Object Model (DOM) elements in Hypertext Markup Language (HTML) are encapsulated, and the encapsulated DOM elements are added to the preset component library.

7. The method according to claim 1, characterized in that, After generating the script file corresponding to the target business scenario, the method further includes: Configure a target script file identifier for the script file corresponding to the target business scenario; Add the mapping relationship between the target business scenario identifier and the target script file identifier to the mapping table of business scenarios and script files pre-stored on the server.

8. The method according to claim 7, characterized in that, The step of parsing and loading the target DOM element from the preset component library according to the mapping table between the business scenario and the element, and retrieving the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario includes: Based on the target business scenario identifier, determine the element identifier of the target DOM element corresponding to the target business scenario identifier from the mapping table between the business scenario and the element, and parse and load the target DOM element from the preset component library based on the element identifier; Based on the target business scenario identifier and the mapping table between the business scenario and the script file, obtain the target script file identifier corresponding to the target business scenario identifier; Retrieve the script file corresponding to the target business scenario based on the target script file identifier; The target DOM element is rendered based on the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

9. A webpage generation system, characterized in that, The system includes: The request acquisition module is used to acquire a page generation request for generating a page corresponding to the target business scenario; wherein, the page generation request includes: a target business scenario identifier; The visualization page configuration module is used to retrieve target DOM elements from a preset component library according to the target business scenario to form a visualization development page; the target DOM element includes attributes, function methods, and response events; the module configures the parameters of each attribute of the target DOM element in the visualization development page to obtain the value of the target attribute and the data type of the value of the target attribute; wherein, the target DOM element is configured with a corresponding element identifier; The storage module is used to add the mapping relationship between the target business scenario identifier and the element identifier to a pre-stored mapping table of business scenarios and elements in the server; The field validation processing module is used to generate field validation information based on the attributes of the target DOM element, the function methods of the target DOM element, and the value of the target attribute. The event response processing module is used to generate event response verification information based on the response event of the target DOM element, the value of the target attribute, the data type of the target attribute value, and a preset data type format; obtain the server's display format, and generate a format processing standard for the target DOM element based on the value of the target attribute, the data type of the target attribute value, and the server's display format; The script file generation module is used to generate a script file corresponding to the target business scenario based on the attributes of the target DOM element, the function methods of the target DOM element, the response events of the target DOM element, the value of each attribute of the target DOM element, the validation information, and the format processing standard of the target DOM element. The page parsing module is used to parse and load the target DOM element from the preset component library according to the mapping table between the business scenario and the element, and to retrieve the script file corresponding to the target business scenario to generate the page corresponding to the target business scenario.

10. The system according to claim 9, characterized in that, The target DOM element's attributes include: field type attributes. The event response handling module is specifically used for: Event response verification information is generated based on the response event of the target DOM element, the value of the field type attribute, the data type of the field type attribute value, and the preset data type format.

Images