Method, device and storage medium for customizing configuration page

Abstract

This application proposes a method, apparatus, device, and storage medium for customizing configuration pages. The method includes: parsing a page configuration file of a page to be generated; obtaining a page code template that conforms to the parsed page type information and page code technology stack information; obtaining the first code of each container block contained in the page to be generated based on the parsed page block structure information, and filling the first code into the page code template; obtaining the second code of the component contained in each container block based on the parsed component information, and filling the second code into the page code template; and generating a page code file of the page to be generated based on the completed page code template. This application can dynamically generate pages, realizing effective customization and modification of pages.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, device, and storage medium for customizing configuration pages. Background Technology

[0002] Dynamically generating front-end pages is a crucial topic in the front-end development field. Current technologies typically involve generating simple pages through low-code or no-code platforms or automatically generating pages based on UI image slices. However, these solutions can only automatically generate simple content pages, resulting in low code quality and high maintenance costs. Furthermore, customizing the generated pages is either prohibitively expensive or impossible. Summary of the Invention

[0003] To address the technical problem of existing dynamically generated front-end pages having monotonous content that cannot be modified, this application provides a method, apparatus, device, and storage medium for customizing configuration pages. Its main purpose is to enable dynamic page generation, allowing for effective customization and modification of pages.

[0004] To achieve the above objectives, this application provides a method for customizing a configuration page, the method comprising:

[0005] The obtained page configuration file for the page to be generated is parsed;

[0006] Obtain the page code template that matches the parsed page type information and page code technology stack information;

[0007] Based on the parsed page block structure information, obtain the first code of each container block contained in the page to be generated, and fill the first code into the page code template;

[0008] Based on the parsed component information, obtain the second code of the component contained in each container block, and fill the second code into the page code template;

[0009] Generate the page code file for the page to be generated based on the completed page code template.

[0010] Optionally, the obtained page configuration file for the page to be generated is parsed, including:

[0011] Read the first field in the page configuration file of the page to be generated, and determine the page type information of the page to be generated based on the value of the first field;

[0012] Read the second field in the page configuration file and determine the page code technology stack information of the page to be generated based on the value of the second field;

[0013] Read the third field in the page configuration file and determine the page block structure information of the page to be generated based on the value of the third field. The page block structure information is used to indicate the container blocks contained in the page to be generated and the first layout information of the container blocks.

[0014] Read the page configuration file to obtain the component information for each component. The component information includes the container block in which the corresponding component is located and the component attribute information.

[0015] Optionally, read the page configuration file to obtain component information for each component, including:

[0016] Read the rendering function in the page configuration file, and obtain the components contained in the page to be generated and the container block where each component is located from the rendering function;

[0017] Read the fourth field in the page configuration file and determine the component attribute information of the corresponding component based on the value of the fourth field.

[0018] Optionally, the page code template is generated based on an initial code template obtained from a pre-developed material library;

[0019] Both the first and second codes are generated based on the corresponding initial codes obtained from the material library;

[0020] The method also includes:

[0021] Receive user calls to the first custom function entry point of the material library, and receive user-added function code through the first custom function entry point. The function code is at least one of the initial code corresponding to the component and the initial code template corresponding to the page.

[0022] Optionally, obtain the second code of the components contained in each container block, and fill the second code into the page code template, including:

[0023] Retrieve the initial code for each component from the material library;

[0024] Extract the values ​​of the attribute fields from the component information and fill them into the corresponding initial code to obtain the second code of the corresponding component;

[0025] The second code is mounted under the first code of the corresponding container block.

[0026] Optionally, after generating the page code file, the method further includes:

[0027] The page code file is checked for compliance using a pre-configured code inspection tool;

[0028] If any code that does not conform to the configuration specifications is found, an error message will be displayed.

[0029] Optionally, after generating the page code file, the method further includes:

[0030] Use a pre-configured code formatting tool to unify the code style of the page code files.

[0031] Furthermore, to achieve the above objectives, this application also provides an apparatus for customizing a configuration page, the apparatus comprising:

[0032] The parsing module is used to parse the page configuration file of the page to be generated;

[0033] The first code generation module is used to obtain page code templates that match the parsed page type information and page code technology stack information;

[0034] The second code generation and filling module is used to obtain the first code of each container block contained in the page to be generated based on the parsed page block structure information, and fill the first code into the page code template;

[0035] The third code generation and filling module is used to obtain the second code of the components contained in each container block based on the parsed component information, and fill the second code into the page code template;

[0036] The code file generation module is used to generate the page code file for the page to be generated based on the completed page code template.

[0037] To achieve the above objectives, this application also provides a computer device, including a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, wherein the processor executes the computer-readable instructions to perform the steps of a method for a custom configuration page as described in any of the preceding items.

[0038] To achieve the above objectives, this application also provides a computer-readable storage medium storing computer-readable instructions that, when executed by a processor, cause the processor to perform the steps of a method for a custom configuration page as described in any of the preceding items.

[0039] This application proposes a method, apparatus, device, and storage medium for customizing configuration pages. It uses a page configuration file to customize the page to be generated, thereby modifying its functionality. Based on page type information, page code technology stack information, page block structure information, and component information obtained from the page configuration file, it automatically and dynamically generates page code files, which can then be used as the underlying code for page rendering and display. This application can directly generate complete page code files with minimal configuration code, eliminating the need for developers to manually write page code. Through dynamic configuration, it achieves automated configuration generation and modification of arbitrarily complex front-end pages, offering high flexibility and enabling rapid and effective page customization and dynamic generation. It eliminates the need to write separate page code for each page, effectively improving development efficiency and reducing the cost of page customization. Attached Figure Description

[0040] Figure 1 This is a flowchart illustrating a method for customizing a configuration page in one embodiment of this application;

[0041] Figure 2 This is a structural block diagram of a device for a custom configuration page according to an embodiment of this application;

[0042] Figure 3 This is a block diagram of the internal structure of a computer device according to an embodiment of this application.

[0043] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0044] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, 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, 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. It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to limit this application.

[0045] Figure 1 This is a flowchart illustrating a method for customizing a configuration page according to one embodiment of this application. (Reference) Figure 1 The method for customizing the configuration page includes the following steps S100-S500.

[0046] S100: Parse the page configuration file of the obtained page to be generated.

[0047] Specifically, in order to achieve code generalization, existing technologies often sacrifice some refinement and code quality, resulting in very simple and uniform pages. To address this issue, this embodiment generates page code files capable of producing complex pages based on a small number of page configuration files.

[0048] Page configuration files are pre-configured by developers based on business requirements and configuration rules. They are used to declare various elements in the generated page and configure element attributes to achieve the preset display effects. For example, for a simple login page, the page configuration file declares that the generated login page contains several buttons and text boxes, as well as the attributes of each text box and button. Page configuration files can be JavaScript object files, i.e., JS object files. For example, they can be used to configure form submission.

[0049] S200: Obtain the page code template that matches the parsed page type information and page code technology stack information.

[0050] Specifically, based on the parsed page type information and page code technology stack information of the page to be generated, a page frame conforming to the page code technology stack information and a page code template conforming to the page type information is generated. The page code template is the underlying code framework of the page to be generated, and more specifically, it is the HTML code framework of the page to be generated.

[0051] The page type can be one of the following: mini-program page, H5 page, or PC page.

[0052] The page code technology stack, or page framework, is one of the frameworks such as Vue and React.

[0053] S300: Based on the parsed page block structure information, obtain the first code of each container block contained in the page to be generated, and fill the first code into the page code template.

[0054] Specifically, page block structure information is used to indicate the page structure of the page to be generated. Page structures can include, but are not limited to, top-bottom, left-right, left-center-right, and top-center-bottom structures. Furthermore, each type of large block can be further subdivided into smaller blocks according to top-bottom, left-right, or other structural principles. For example, the top or bottom block in a top-bottom structure can be further subdivided into multiple smaller blocks according to a left-right structure.

[0055] Each page corresponds to a container, and a container can contain multiple container blocks. These container blocks, or page blocks, are determined by the page structure. Based on the page block structure information, we can not only determine which container blocks the page to be generated contains, but also obtain the block attributes of each container block. Block attributes include layout information or parameters such as the container block's position on the page.

[0056] The first code of a container block is generated based on the initial code of the container block, according to the block attributes of the container block.

[0057] S400: Based on the parsed component information, obtain the second code of the component contained in each container block, and fill the second code into the page code template.

[0058] Specifically, the page configuration file defines all the components contained in the page to be generated, as well as the component information for each component. Based on the component information, the container block to which each component belongs and other component attributes can be determined. For example, the component's layout parameters and the container block's layout parameters can determine which container block the component is located in. Each container block can include multiple components. Components can be common components or highly customized components.

[0059] The second code of a component is generated based on the component's initial code and its component information. For example, if parsing reveals that the page to be generated needs to display a password input box, then the initial code of that password input box is obtained, and information is populated into the initial code according to the component information of that password input box to obtain the second code of that password input box.

[0060] S500: Generate the page code file for the page to be generated based on the completed page code template.

[0061] Specifically, the page code template is considered complete once the page configuration file is parsed and the code for each component is generated and filled in. The code in the completed page code template can be checked; if it is correct, a page code file is generated. This page code file contains the page's functional code and is the basis for rendering and displaying the page.

[0062] After the page code file is generated, it can be saved to the server for the front-end to use. The front-end accesses the page code file based on the page address of the target page corresponding to the page code file. By executing the page code file, the page framework and custom functional components are loaded, and the components are rendered to the specified positions, thus displaying the target page of the corresponding page type.

[0063] For example, when a browser loads the address of a page, the browser obtains the corresponding page code file, renders and displays the corresponding page on the front end.

[0064] This embodiment uses configuration to automatically generate complex pages such as PC pages, H5 pages, and mini-program pages.

[0065] In addition, parsing the page configuration file and generating code and filling the code into the page code template can be performed in parallel; or the parsing can be completed first to obtain the parsing result, and then the code can be generated based on the parsing result and filled into the page code template.

[0066] This embodiment uses a page configuration file to customize the page to be generated, thereby achieving functional modifications. Based on page type information, page code technology stack information, page block structure information, and component information obtained from the page configuration file, it automatically and dynamically generates page code files, which can then serve as the underlying code for page rendering and display. This embodiment can directly generate the complete page code file with minimal configuration code, eliminating the need for developers to manually write page code. This embodiment effectively solves the problem of existing technologies being unable to automatically generate complex pages. Through dynamic configuration, it achieves automated configuration, generation, and modification of arbitrarily complex front-end pages, offering high versatility and flexibility. It enables rapid and effective customization and dynamic generation of pages, eliminating the need to write separate page code for each page, effectively improving development efficiency and reducing the cost of page customization.

[0067] In one embodiment, step S100 specifically includes:

[0068] Read the first field in the page configuration file of the page to be generated, and determine the page type information of the page to be generated based on the value of the first field;

[0069] Read the second field in the page configuration file and determine the page code technology stack information of the page to be generated based on the value of the second field;

[0070] Read the third field in the page configuration file and determine the page block structure information of the page to be generated based on the value of the third field. The page block structure information is used to indicate the container blocks contained in the page to be generated and the first layout information of the container blocks.

[0071] Read the page configuration file to obtain the component information for each component. The component information includes the container block in which the corresponding component is located and the component attribute information.

[0072] Specifically, the first field, the page type field, defines the page type of the page to be generated. The value of the first field determines whether the page to be generated is a PC page, an H5 page, a mini-program page, or another type of page.

[0073] The second field, the frame field, defines the page frame of the page to be generated. The value of the frame field determines whether the page to be generated uses the Vue framework, the React framework, or another framework.

[0074] The third field, the page structure field, defines the number of container blocks contained in the container corresponding to the page to be generated, as well as the layout of these container blocks. The value of the page structure field determines how many container blocks the page to be generated contains and the layout parameters of each container block within the entire page.

[0075] Each component is configured with its own component information in the page configuration file. From this component information, you can determine which container block the component belongs to. For example, a navigation component is configured in the header block.

[0076] The component's attribute information includes at least one of the following: component color, size, click event, layout parameters, and field values ​​corresponding to the displayed data.

[0077] In one embodiment, the page configuration file is read to obtain component information for each component, including:

[0078] Read the rendering function in the page configuration file, and obtain the components contained in the page to be generated and the container block where each component is located from the rendering function;

[0079] Read the fourth field in the page configuration file and determine the component attribute information of the corresponding component based on the value of the fourth field.

[0080] Specifically, a container block can correspond to multiple rendering functions, which can be `render` functions. By reading the rendering functions of a container block, the components defined within them can be retrieved. The page configuration file contains the relationships between related components and container blocks. Components defined in the page configuration file are mounted under the defined container blocks through rendering functions. Therefore, the container block where a component resides can be determined based on the container block to which the rendering function is mounted, and all components contained in the page to be generated can be obtained based on the components defined in the rendering function.

[0081] You can define the component's property information under the component defined in the rendering function, and determine the corresponding component's property information from the value of the fourth field of the rendering function.

[0082] Alternatively, component attribute information can be defined through attribute fields outside the rendering function of the page configuration file. For example, the attr field can be used as an attribute field, and the attr field is an object containing the component's size (dimensions), color, name, and other fields and values ​​corresponding to display data.

[0083] Additionally, a second custom function entry point is provided within the container block of the page configuration file. This entry point allows users to define custom rendering functions within the container block, and then customize functional components within those functions, thus modifying the functionality of the container block. Of course, existing rendering functions can also be removed to remove components from the container block. Support for custom function integration into the page configuration file increases the flexibility and applicability of page configuration file generation.

[0084] For example, developers can create rendering functions through a second custom function entry point, and write the corresponding custom functional components within the rendering function. This allows for the creation of highly customized, non-standard business components. For instance, a standard submit button might simply display a "Confirm Submission?" message with "Confirm / Cancel." However, a more complex requirement might necessitate a custom pop-up to confirm various information such as address, order number, and name, along with the "Confirm / Cancel" option. In this case, the second custom function entry point allows developers to manually implement the content displayed in the pop-up using the `render` function, enabling the creation of more complex functionalities.

[0085] In one embodiment, the page code template is generated based on an initial code template obtained from a pre-developed material library;

[0086] Both the first and second codes are generated based on the corresponding initial codes obtained from the material library;

[0087] The method also includes:

[0088] Receive user calls to the first custom function entry point of the material library, and receive user-added function code through the first custom function entry point. The function code is at least one of the initial code corresponding to the component and the initial code template corresponding to the page.

[0089] Specifically, the material library is a pre-defined codebase by developers. It includes the source code for various components, page code templates for various page types and page frames, and the source code for container blocks. Components in the material library can be categorized by size into atomic components, sub-components, module components, and business components. For example, button labels are atomic components, navigation bars are sub-components, and order components are business components.

[0090] Based on the page type information and page code technology stack information of the page to be generated, an initial code template that simultaneously matches the page type and page code technology stack (page frame) of the page to be generated is matched from the material library. Values ​​are then assigned to the corresponding fields in the initial code template according to the values ​​of the relevant fields in the page type information and page code technology stack information to obtain the page code template.

[0091] Based on the page block structure information of the page to be generated, the first initial code of each container block contained in the page to be generated is matched from the material library. The corresponding fields of the first initial code of each container block are assigned values ​​according to the values ​​of the relevant fields in the page block structure information to obtain the first code corresponding to each container block.

[0092] Each component in the page to be generated has corresponding component information. Based on the component information, the second initial code of the corresponding component is matched from the material library. The corresponding field in the second initial code is assigned a value according to the value of the relevant field in the corresponding component information to obtain the second code corresponding to the component.

[0093] To facilitate the expansion of the initial code corresponding to components in the material library to meet the needs of various components on the page, and to facilitate the expansion of the initial code template to meet different page types and page frames, this embodiment provides a first custom function entry point for the material library. Developers can add new initial code corresponding to new components or new initial code templates to the material library by calling this first custom function entry point. The first custom function entry point enables customization, increases the applicability of the material library, and makes the application of custom configuration pages more widespread.

[0094] In one embodiment, step S400 involves obtaining the second code of the components contained in each container block and filling the second code into the page code template, including:

[0095] Retrieve the initial code for each component from the material library;

[0096] Extract the values ​​of the attribute fields from the component information and fill them into the corresponding initial code to obtain the second code of the corresponding component;

[0097] The second code is mounted under the first code of the corresponding container block.

[0098] Specifically, each component has corresponding initial code in the material library. The fields in the initial code have empty or default values. The values ​​of the component's attribute fields from the page configuration file need to be filled into the corresponding fields in the initial code to assign values ​​to those fields. The initial code after the field values ​​are filled in becomes the component's secondary code.

[0099] Since components belong to their respective container blocks, the second part of the component's code needs to be mounted under the first part of the container block's code in the page code file. This way, when the page code file is executed and the page is rendered, each component of the container block will be rendered and displayed in its corresponding position on the page.

[0100] In one embodiment, after generating the page code file, the method further includes:

[0101] The page code file is checked for compliance using a pre-configured code inspection tool;

[0102] If any code that does not conform to the configuration specifications is found, an error message will be displayed.

[0103] Specifically, code inspection tools are used for code style checks and constraints, that is, to impose rules on the generated code, such as requiring `v-for` to be accompanied by `v-bind:key`, and prohibiting unnecessary semicolons. The specifications of the code inspection tool are pre-configured, specifically based on business needs or relevant enterprise code standards, thus achieving enterprise-wide code consistency. By scanning page code files with the code inspection tool, if any code in the page code files does not conform to the preset specifications, an error will be displayed to remind developers to modify the page code files according to the error instructions.

[0104] Code analysis tools can be ESLint, Stylelint, or others, but are not limited to these. ESLint provides a pluggable JavaScript code analysis tool to check whether code conforms to specified standards. The advantage of using ESLint is that it ensures consistent code style during collaborative work. Stylelint is a CSS code style guide that can detect subtle coding errors and supports plug-ins.

[0105] This embodiment uses a code inspection tool to perform a code standardization check on the generated page code file, solving the problems of low code quality and non-standard code in existing technologies. The page code file obtained through this embodiment conforms to a unified code standard, has high code quality, achieves unified code standardization within an enterprise or project, reduces code maintenance costs and secondary development costs, improves development efficiency, and reduces enterprise costs.

[0106] In one embodiment, after generating the page code file, the method further includes:

[0107] Use a pre-configured code formatting tool to unify the code style of the page code files.

[0108] Specifically, code formatting tools such as Prettier can be used. Prettier is an Opinionated code formatter that removes all style tags from code, ensuring consistent output. Prettier supports code formatting for HTML, CSS, JS, Java, PHP, Ruby, Python, and other code formats.

[0109] Code formatting specifically refers to the standardized code format of generated components, container blocks, and page code templates. Specific formatting processes, such as uniformly using two spaces for indentation and uniformly using semicolons at the end of code, are not limited to these and follow the pre-configured rules of the code formatting tool.

[0110] Code formatting can unify the code style in a project, reduce code maintenance and secondary development costs, improve development efficiency, and reduce enterprise costs.

[0111] The custom configuration page solution proposed in this application enables the dynamic generation of complex front-end pages, not limited to simple pages with fixed formats or styles such as images, text, or height. This solves the problem of existing technologies being unable to customize page functionality, supporting the integration of custom functions into page configuration files, increasing the flexibility and applicability of page configuration file generation. Page code files can be automatically generated with minimal configuration code, eliminating the need for developers to manually write page code, and enabling the automatic and dynamic generation of page code files for any complex page. It also addresses the issue of high maintenance costs due to low-quality code in the generated page files. By standardizing and constraining the page code files, and ensuring that both the material library and the generated page code files conform to unified coding standards, code quality is improved. Guaranteed code quality facilitates secondary development, effectively improving development efficiency and reducing enterprise operating costs. Furthermore, improved code quality enhances system stability, improves service quality, and increases customer satisfaction.

[0112] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0113] Figure 2 This is a structural block diagram of a device for customizing a configuration page according to an embodiment of this application. (Reference) Figure 2 The device includes:

[0114] The parsing module 100 is used to parse the page configuration file of the page to be generated.

[0115] The first code generation module 200 is used to obtain page code templates that match the parsed page type information and page code technology stack information;

[0116] The second code generation and filling module 300 is used to obtain the first code of each container block contained in the page to be generated based on the parsed page block structure information, and fill the first code into the page code template;

[0117] The third code generation and filling module 400 is used to obtain the second code of the component contained in each container block based on the parsed component information, and fill the second code into the page code template;

[0118] The code file generation module 500 is used to generate the page code file of the page to be generated based on the completed page code template.

[0119] In one embodiment, the parsing module 100 specifically includes:

[0120] The first reading and parsing module is used to read the first field in the page configuration file of the page to be generated, and determine the page type information of the page to be generated based on the value of the first field;

[0121] The second reading and parsing module is used to read the second field in the page configuration file and determine the page code technology stack information of the page to be generated based on the value of the second field.

[0122] The third reading and parsing module is used to read the third field in the page configuration file and determine the page block structure information of the page to be generated based on the value of the third field. The page block structure information is used to indicate the container blocks contained in the page to be generated and the first layout information of the container blocks.

[0123] The fourth reading and parsing module is used to read the page configuration file and obtain the component information of each component. The component information includes the container block in which the corresponding component is located and the component attribute information.

[0124] In one embodiment, the fourth read parsing module specifically includes:

[0125] The function reading and parsing module is used to read the rendering functions in the page configuration file and obtain the components contained in the page to be generated and the container block where each component is located from the rendering functions;

[0126] The field reading and parsing module is used to read the fourth field in the page configuration file and determine the component attribute information of the corresponding component based on the value of the fourth field.

[0127] In one embodiment, the page code template is generated based on an initial code template obtained from a pre-developed material library;

[0128] Both the first and second codes are generated based on the corresponding initial codes obtained from the material library;

[0129] The device also includes:

[0130] The first custom module is used to receive the user's call operation to the first custom function entry of the material library, and to receive the function code added by the user through the first custom function entry. The function code is at least one of the initial code corresponding to the component and the initial code template corresponding to the page.

[0131] In one embodiment, the third code generation and filling module 400 specifically includes:

[0132] The first matching module is used to retrieve the initial code corresponding to each component from the material library;

[0133] The first extraction and filling module is used to extract the values ​​of the attribute fields from the component information and fill them into the corresponding initial code to obtain the second code of the corresponding component;

[0134] The first mounting module is used to mount the second code to the first code of the corresponding container block.

[0135] In one embodiment, the device further includes:

[0136] The code inspection module is used to check the page code files for compliance based on pre-configured code inspection tools;

[0137] The error reporting module is used to display error messages if code that does not conform to the configuration specifications is found.

[0138] In one embodiment, the device further includes:

[0139] The code formatting module is used to call a pre-configured code formatting tool to unify the code style of page code files.

[0140] The terms "first" and "second" in the above-mentioned modules / units are only used to distinguish different modules / units and are not intended to specify which module / unit has a higher priority or any other limiting meaning. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or modules is not necessarily limited to those steps or modules explicitly listed, but may include other steps or modules not explicitly listed or inherent to these processes, methods, products, or devices. The module divisions appearing in this application are merely logical divisions; in actual applications, different division methods may be used.

[0141] Specific limitations regarding the device for customizing configuration pages can be found in the limitations of the method for customizing configuration pages described above, and will not be repeated here. Each module in the aforementioned device for customizing configuration pages can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0142] Figure 3 This is a block diagram of the internal structure of a computer device according to an embodiment of this application. Figure 3 As shown, the computer device includes a processor, memory, network interface, input device, and display screen connected via a system bus. The processor provides computing and control capabilities. The memory includes storage media and internal memory. The storage media can be non-volatile or volatile. The storage media stores an operating system and may also store computer-readable instructions, which, when executed by the processor, enable the processor to implement a method for customizing configuration pages. The internal memory provides an environment for the operation of the operating system and computer-readable instructions in the storage media. The internal memory may also store computer-readable instructions, which, when executed by the processor, enable the processor to implement a method for customizing configuration pages. The network interface of the computer device is used for communication with an external server via a network connection. The display screen of the computer device can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, buttons, a trackball, or a touchpad located on the computer device casing, or an external keyboard, touchpad, or mouse, etc.

[0143] In one embodiment, a computer device is provided, including a memory, a processor, and computer-readable instructions (e.g., a computer program) stored in the memory and executable on the processor. When the processor executes the computer-readable instructions, it implements the steps of the method for customizing a configuration page described in the above embodiments, for example... Figure 1 The steps S100 to S500 shown, as well as other extensions and related steps of the method, are examples. Alternatively, when the processor executes computer-readable instructions, it implements the functions of each module / unit of the device for customizing the configuration page in the above embodiments, for example... Figure 2 The functions of modules 100 to 500 are shown. To avoid repetition, they will not be described again here.

[0144] A processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor. The processor is the control center of a computer device, connecting all parts of the computer device through various interfaces and lines.

[0145] Memory can be used to store computer-readable instructions and / or modules. The processor implements various functions of the computer device by running or executing the computer-readable instructions and / or modules stored in memory, and by accessing data stored in memory. Memory can mainly include a program storage area and a data storage area. The program storage area can store the operating system, application programs required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area can store data created based on the use of the mobile phone (such as audio data, video data, etc.).

[0146] The memory can be integrated into the processor or set up separately from the processor.

[0147] Those skilled in the art will understand that Figure 3 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0148] In one embodiment, a computer-readable storage medium is provided, on which computer-readable instructions are stored. When executed by a processor, these computer-readable instructions implement the steps of the method for customizing a configuration page as described in the above embodiments, for example... Figure 1 The steps S100 to S500 shown, as well as other extensions and related steps of the method, are examples. Alternatively, when computer-readable instructions are executed by a processor, they implement the functions of each module / unit of the apparatus for customizing the configuration page in the above embodiments, for example... Figure 2 The functions of modules 100 to 500 are shown. To avoid repetition, they will not be described again here.

[0149] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium, and when executed, they can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double-rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0150] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, apparatus, article, or method that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, apparatus, article, or method. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, apparatus, article, or method that includes that element.

[0151] The sequence numbers of the embodiments in this application are merely for description and do not represent the superiority or inferiority of the embodiments. Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases, the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) as described above, and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0152] The above are merely preferred embodiments of this application and do not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.

Claims

1. A method for customizing a configuration page, characterized in that, The method includes: The obtained page configuration file for the page to be generated is parsed; Obtain the page code template that matches the parsed page type information and page code technology stack information; Based on the parsed page block structure information, obtain the first code of each container block contained in the page to be generated, and fill the first code into the page code template; The page code template is generated based on an initial code template obtained from a pre-developed material library; Both the first code and the second code are generated based on the corresponding initial codes obtained from the material library; Based on the parsed component information, obtain the second code of the component contained in each container block, and fill the second code into the page code template; The step of obtaining the second code of the components contained in each container block and filling the second code into the page code template includes: Retrieve the initial code for each component from the material library; The values ​​of the attribute fields are extracted from the component information and filled into the corresponding initial code to obtain the second code of the corresponding component; Mount the second code under the first code of the corresponding container block; Generate the page code file for the page to be generated based on the completed page code template.

2. The method of claim 1, wherein, The step of parsing the obtained page configuration file of the page to be generated includes: Read the first field in the page configuration file of the page to be generated, and determine the page type information of the page to be generated based on the value of the first field; Read the second field in the page configuration file, and determine the page code technology stack information of the page to be generated based on the value of the second field; The third field in the page configuration file is read, and the page block structure information of the page to be generated is determined according to the value of the third field. The page block structure information is used to indicate the container block contained in the page to be generated and the first layout information of the container block. The page configuration file is read to obtain the component information of each component, wherein the component information includes the container block in which the corresponding component is located and the component attribute information.

3. The method of claim 2, wherein, The step of reading the page configuration file and obtaining component information for each component includes: Read the rendering function in the page configuration file, and obtain the components contained in the page to be generated and the container block where each component is located from the rendering function; Read the fourth field in the page configuration file and determine the component attribute information of the corresponding component based on the value of the fourth field.

4. The method according to claim 1, characterized in that, The method further includes: The system receives a user's call to the first custom function entry point of the material library, and receives the function code added by the user through the first custom function entry point. The function code is at least one of the initial code corresponding to the component and the initial code template corresponding to the page.

5. The method of claim 1, wherein, After generating the page code file, the method further includes: The page code file is checked for compliance using a pre-configured code inspection tool; If any code that does not conform to the configuration specifications is found, an error message will be displayed.

6. The method according to claim 1, characterized in that, After generating the page code file, the method further includes: The pre-configured code formatting tool is invoked to unify the code style of the page code file.

7. An apparatus for customizing a configuration page, characterized in that, The apparatus is used to perform the steps of the method for customizing a configuration page as described in any one of claims 1-6, the apparatus comprising: The parsing module is used to parse the page configuration file of the page to be generated; The first code generation module is used to obtain page code templates that match the parsed page type information and page code technology stack information; The second code generation and filling module is used to obtain the first code of each container block contained in the page to be generated based on the parsed page block structure information, and fill the first code into the page code template; The third code generation and filling module is used to obtain the second code of the component contained in each container block according to the parsed component information, and fill the second code into the page code template; The code file generation module is used to generate the page code file of the page to be generated based on the completed page code template.

8. A computer device comprising a memory, a processor, and computer readable instructions stored on the memory and executable on the processor, the computer readable instructions comprising: The processor executes the steps of the method for creating a custom configuration page as described in any one of claims 1-6 when executing the computer-readable instructions.

9. A computer-readable storage medium having stored thereon computer-readable instructions, wherein, When the computer-readable instructions are executed by a processor, the processor performs the steps of the method for a custom configuration page as described in any one of claims 1-6.

Images