Web page generation method, device and electronic device

Through the componentized web page generation method, the problem of low universality of HTML page code in cloud computing official websites is solved, flexible component configuration and efficient page development are achieved, and development and maintenance costs are reduced.

CN112507273BActive Publication Date: 2025-09-05BEIJING KINGSOFT CLOUD NETWORK TECH CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202011482379.6
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2020-12-15
Publication Date
2025-09-05
Estimated Expiration
2040-12-15

AI Technical Summary

Technical Problem

In cloud computing official websites, the HTML page code used in the prior art cannot be shared with other pages of different formats, resulting in low versatility and flexibility of the page code and low development efficiency.

Method used

By responding to the selection instruction of the target component, the component information to be configured is displayed, and the configured target component is generated according to the configuration instruction of the component information. Finally, a web page is generated based on the configured target component, supporting a componentized web page generation method.

Benefits of technology

It implements a component-based web page generation method to meet various business needs, improve page development efficiency, reduce development and maintenance costs, and improve code flexibility and maintainability.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN112507273B_ABST
    Figure CN112507273B_ABST
Patent Text Reader

Abstract

The present invention provides a method, apparatus, and electronic device for generating a web page. The method comprises: responding to a selection instruction for a target component, displaying the target component, wherein the target component includes component information to be configured; responding to a configuration instruction for the component information, generating a configured target component; and generating a web page based on the configured target component. In this method, users can select components and configure component information based on business needs, and then generate a web page based on the configured components. This componentized web page generation method is more flexible, can meet various business needs, and also improves page development efficiency.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the technical field of page design, and in particular to a method, device and electronic device for generating a web page. Background Art

[0002] Cloud computing companies are promoting the adoption of cloud computing across various industries and enabling the smooth transformation and upgrading of traditional industries by offering services such as cloud servers, cloud databases, cloud storage, CDN (Content Delivery Network), and big data, as well as various industry solutions. To serve a wider audience, cloud computing companies showcase their various services and solutions across various industries on their official cloud computing websites.

[0003] In related technologies, among the services provided by the official website of cloud computing, all services share a set of HTML (Hypertext Markup Language) pages, and the data in the pages populate different services (also known as product lines). The code of this set of HTML pages used in this method cannot be shared with other pages of different forms, resulting in low versatility and flexibility of the page code during the project development process, resulting in low development efficiency. Summary of the Invention

[0004] The present invention aims to provide a method, device and electronic device for generating a web page, so as to improve the efficiency of page development.

[0005] In a first aspect, an embodiment of the present invention provides a method for generating a web page, the method comprising: displaying the target component in response to a selection instruction for a target component; wherein the target component includes component information to be configured; generating a configured target component in response to a configuration instruction for the component information; and generating a web page based on the configured target component.

[0006] In an optional embodiment, the component information to be configured includes: component name, component code, component classification, component status and component content; the step of generating a configured target component in response to the configuration instruction for the component information includes: if a configuration instruction for the target component is received, extracting the component name, component code, component classification, component status and component content carried in the configuration instruction of the target component; configuring the target component according to the extracted component name, component code, component classification, component status and component content to obtain the configured target component.

[0007] In an optional embodiment, the component content includes at least one content list; each content list includes a list title, a list code, and a content description; if a configuration instruction of a target component is received, before the step of extracting the component name, component code, component classification, component status, and component content carried in the configuration instruction of the target component, the method further includes: responding to the content list configuration instruction for the target component, generating multiple content lists for the target components according to a preset limit on the number of content lists.

[0008] In an optional embodiment, after the step of generating a configured target component in response to the configuration instruction for the component information, the method further includes: displaying the display style in response to a selection instruction for the display style of the configured target component; wherein the display style includes style information to be configured; and generating the configured display style in response to the configuration instruction for the style information.

[0009] In an optional embodiment, the above-mentioned style information to be configured includes: style name, clients supported by the style, computer-side style code, mobile-side style code and style status; the above-mentioned response to the configuration instruction of the style information, the step of generating the configured display style, includes: if a configuration instruction for the display style is received, extracting the style information in the configuration instruction of the display style; configuring the display style according to the extracted style information to obtain the configured display style.

[0010] In an optional embodiment, the above-mentioned step of generating a web page based on the configured target component includes: encapsulating the configured target component into a functional component; previewing the display effect of the functional component according to the display style configured by the target component; and generating a web page including the display effect of the functional component in response to a publishing instruction for the functional component.

[0011] In an optional embodiment, after the above-mentioned step of encapsulating the configured target component into a functional component, the method further includes: saving the component information corresponding to the functional component and the style information of the display style corresponding to the functional component to a preset database; the above-mentioned step of responding to the release instruction for the functional component and generating a web page containing the display effect of the functional component includes: if a release instruction for the functional component is received, calling the preset interface through node technology to obtain the component information of the functional component and the style information of the display style corresponding to the functional component from the preset database, parsing the obtained information, and generating a web page.

[0012] In an optional embodiment, there are multiple functional components mentioned above; the component information of the functional component includes a component code; the above-mentioned step of generating a web page containing the display effect of the functional component in response to the publishing instruction for the functional component includes: if a publishing instruction is received, extracting the component codes corresponding to multiple functional components from the publishing instruction; for each functional component, based on the component code corresponding to the functional component, calling the preset interface through node technology to obtain the component information of the functional component matching the component code and the style information of the display style corresponding to the functional component from the preset database, parsing the information corresponding to each functional component obtained, and generating a web page.

[0013] In a second aspect, an embodiment of the present invention provides a device for generating a web page, which includes: a component selection model, which is used to respond to a selection instruction for a target component and display a target component; wherein the target component includes component information to be configured; a component configuration module, which is used to respond to a configuration instruction for the component information and generate a configured target component; and a page generation module, which is used to generate a web page based on the configured target component.

[0014] In a third aspect, an embodiment of the present invention provides an electronic device, which includes a processor and a memory, wherein the memory stores machine-executable instructions that can be executed by the processor, and the processor executes the machine-executable instructions to implement the above-mentioned method for generating a web page.

[0015] In a fourth aspect, an embodiment of the present invention provides a machine-readable storage medium storing machine-executable instructions. When the machine-executable instructions are called and executed by a processor, the machine-executable instructions prompt the processor to implement the above-mentioned method for generating a web page.

[0016] The embodiments of the present invention bring the following beneficial effects:

[0017] The present invention provides a webpage generation method, device, and electronic device. The method first responds to a selection instruction for a target component and displays the target component, including component information to be configured. Then, in response to a configuration instruction for the component information, the configured target component is generated. Finally, a webpage is generated based on the configured target component. In this method, users can select components and configure their component information based on business needs, and then generate a webpage based on the configured components. This componentized webpage generation method is more flexible, can meet various business needs, and also improves page development efficiency.

[0018] Other features and advantages of the present invention will be set forth in the following description, or some features and advantages may be inferred or unambiguously determined from the description, or may be learned by implementing the above-mentioned technology of the present invention.

[0019] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, preferred embodiments are specifically listed below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the specific embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0021] Figure 1 A flowchart of a method for generating a web page provided by an embodiment of the present invention;

[0022] Figure 2 A flowchart of another method for generating a web page provided by an embodiment of the present invention;

[0023] Figure 3 A flowchart of another method for generating a web page provided by an embodiment of the present invention;

[0024] Figure 4 A schematic diagram illustrating the display effect of a functional component provided by an embodiment of the present invention;

[0025] Figure 5 A schematic structural diagram of a device for generating a web page provided by an embodiment of the present invention;

[0026] Figure 6 A schematic structural diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0027] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions of the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Generally, the components of the embodiments of the present invention described and shown in the drawings herein can be arranged and designed in various different configurations.

[0028] Therefore, the following detailed description of the embodiments of the present invention provided in the accompanying drawings is not intended to limit the scope of the invention as claimed, but rather merely represents selected embodiments of the present invention. All other embodiments derived by persons of ordinary skill in the art based on the embodiments of the present invention without creative effort shall fall within the scope of protection of the present invention.

[0029] With the continuous development of technology, cloud service applications are gradually penetrating from the internet industry into traditional sectors such as manufacturing, government affairs, finance, education, and healthcare, with the emergence of leading companies in each vertical sector. Cloud computing companies are promoting the implementation of cloud computing in various verticals by offering services such as cloud servers, cloud databases, cloud storage, CDN, big data, and various industry solutions, thereby facilitating the smooth transformation and upgrading of traditional industries. To serve a wider range of users, cloud computing companies showcase their various services and solutions for various industries through their official cloud computing websites.

[0030] In related technologies, cloud computing websites that provide services are usually designed in the following two ways:

[0031] Method 1 uses a one-page-per-file format. When adding a new product line to the cloud computing website, a new HTML page is added. This involves modifying the data in the original HTML page to create the new HTML page, which is then integrated into the existing HTML page and released online. As the business grows or changes, the complexity of the system increases exponentially. For a cloud computing website with hundreds of product lines, there are hundreds of HTML pages to maintain, resulting in high development and maintenance costs.

[0032] Method 2: All services share a set of HTML pages. The entire product webpage uses a set of HTML, and the data in the page is filled with different services (also called product lines). The code of the set of HTML pages used in this method cannot be shared with other pages of different forms. As a result, during the project development process, the versatility and flexibility of the page code are low, resulting in low development efficiency and high labor costs.

[0033] Based on the above problems, the embodiments of the present invention provide a method, device and electronic device for generating web pages. The technology is applied to web page design scenarios that provide services, especially in the page design scenarios of cloud computing official websites. To facilitate understanding of this embodiment, a method for generating web pages disclosed in the embodiments of the present invention is first introduced in detail. Figure 1 As shown, the method includes the following steps:

[0034] Step S102 : In response to a selection instruction for a target component, the target component is displayed; wherein the target component includes component information to be configured.

[0035] The target component is typically a component to be configured that includes component information to be configured. The selection instruction may be an operation in which a user selects the target component from a pre-set component library, such as clicking the target component in the library or clicking an edit button corresponding to the target component. The component information may be pre-set based on the R&D needs of the developer. This component information may be standardized, meaning that each component configured by each user must include this component information. Specifically, this component information may include the component name, component identifier, component category, and component content, etc., without further limitation herein.

[0036] Step S104 , generating a configured target component in response to the configuration instruction for the component information.

[0037] The configuration instruction of the above-mentioned component information can be sent by the user through the terminal device. The configuration instruction carries the component information configured by the user for the target component. The component information is usually the information input by the user for the component information to be configured in the displayed target component. For example, the input component name is "core advantage", the component identifier is "123456", the component classification is "custom component" and the component content is "****", then the component information configured by the user for the target component carried in the configuration instruction is: the component name is "core advantage", the component identifier is "123456", the component classification is "custom component" and the component content is "****", and then the target component is configured according to the information carried in the configuration instruction to obtain the configured target component.

[0038] Step S106: Generate a web page based on the configured target component.

[0039] Once the target component is configured, the user can issue a publish command for the target component to generate a webpage based on the configured target component. The webpage displays the configured target component. The webpage displays the designated services that the configured target component can provide. The business logic of these designated services is determined based on the target component's component information.

[0040] In specific implementation, the above-mentioned target component corresponds to a default display style, and the user can configure one or more display styles for the target component according to needs, so as to display the target component on the web page according to the default display style corresponding to the target component or the display style configured by the user.

[0041] In some embodiments, there may be multiple target components, each of which may be configured according to steps S102-S104 to obtain a configured target component. Once multiple target components are configured, they may be freely combined to generate a webpage containing multiple target components. In some embodiments, a target component may correspond to a specific business or a product line, thereby dividing the content displayed on a webpage into multiple components, thereby achieving componentization of the webpage.

[0042] An embodiment of the present invention provides a webpage generation method that first responds to a selection instruction for a target component and displays the target component, including component information to be configured. Then, in response to a configuration instruction for the component information, the configured target component is generated. Finally, a webpage is generated based on the configured target component. In this method, users can select components and configure their component information based on business needs, and then generate a webpage based on the configured components. This component-based webpage generation method is more flexible, can meet various business needs, and also improves page development efficiency.

[0043] The embodiment of the present invention also provides another method for generating a web page, which is implemented on the basis of the method of the above embodiment; the method focuses on describing the specific process of generating the configured target component in response to the configuration instruction for the component information (implemented by the following steps S204-S206); Figure 2 As shown, the method includes the following steps:

[0044] Step S202 , in response to the selection instruction for the target component, the target component is displayed; wherein the target component includes component information to be configured, and the component information to be configured includes: component name, component code, component category, component status and component content.

[0045] The above-mentioned component name is used to indicate the name of the target component; the component code is used to indicate the code of the target component; the component classification is used to indicate the category of the target component, for example, it can be a basic component, a marketing component, a custom component, etc.; the component status can include two states: open or closed, which is used to indicate whether the target component is currently available; the component content is used to indicate the business logic provided by the target component.

[0046] Step S204: if the configuration instruction of the target component is received, extract the component name, component code, component category, component status and component content carried in the configuration instruction of the target component.

[0047] The component information carried in the configuration instruction of the target component is the information entered by the user in the target component for the component information to be configured.

[0048] Step S206 , configuring the target component according to the extracted component name, component code, component category, component status and component content to obtain the configured target component.

[0049] When the component name, component code, component category, component status and component content carried in the configuration instruction are extracted, they will be configured into the component information of the target component to obtain the configured target component.

[0050] In some embodiments, the component content includes at least one content list, each content list includes a list title, a list code, a content description, etc.; the component content in the configuration instruction is generated in the following manner: in response to the content list configuration instruction for the target component, a content list of multiple target components is generated according to a preset limit on the number of content lists.

[0051] The limit on the number of items in the preset content list can be set in advance by R&D personnel, for example, by setting different limits based on different component categories, or it can be freely set by the user based on their needs. The limit on the number of items in the content list can be a numerical range or a specified value, for example, the limit on the number of items in the content list can be 8, or it can be a minimum of 2 and a maximum of 9. The list title included in the content list is used to indicate the name of the content list, the list code is used to identify the content list, and the content description is used to indicate the functions or effects that the content list can provide.

[0052] Step S208: Generate a web page based on the configured target component.

[0053] The above-mentioned web page generation method first responds to the selection instruction for the target component and displays the target component including the name of the component to be configured, the component code, the component classification, the component status and the component content; if the configuration instruction of the target component is received, the component name, component code, component classification, component status and component content carried in the configuration instruction of the target component are extracted; then, according to the extracted component name, component code, component classification, component status and component content, the target component is configured to obtain the configured target component; and then a web page is generated based on the configured target component. In this method, each component has its own iteration and design process. By configuring component information for the component, business personnel can freely select each component to assemble different web pages, and finally realize that business personnel can complete the page configuration according to business needs, realize the rapid launch of business pages and the standardization of component information structure display, greatly reducing deployment costs, improving development efficiency and reducing coupling.

[0054] The embodiment of the present invention also provides another method for generating a web page, which is implemented on the basis of the method of the above embodiment; the method focuses on describing the specific process of generating a web page based on the configured target component (implemented by the following steps S310-S314); Figure 3 As shown, the method includes the following steps:

[0055] Step S302 : In response to a selection instruction for a target component, the target component is displayed; wherein the target component includes component information to be configured.

[0056] Step S304: generating a configured target component in response to the configuration instruction for the component information.

[0057] Step S306 , in response to the selection instruction for the display style of the configured target component, display the display style; wherein the display style includes the style information to be configured.

[0058] The display style of the target component is typically a to-be-configured style that includes style information to be configured. The selection instruction may be an operation in which a user selects the display style of the target component from a preset component library, such as clicking the display style of the target component in the component library, or triggering an edit button for the display style of the target component. The style information may be pre-set based on the development needs of developers. This style information may be standardized, meaning that the display style of each component configured by each user must include this style information to facilitate user configuration of the component's display style.

[0059] Step S308 : generating a configured display style in response to the configuration instruction for the style information.

[0060] The configuration instruction of the above-mentioned style information can be sent by the user through the terminal device. The configuration instruction carries the style information of the display style configuration of the target component by the user. The style information is usually the information input by the user for the style information to be configured for the display style, and then the display style of the target component is configured according to the style information carried in the configuration instruction to obtain the display style of the configured target component.

[0061] The above-mentioned style information to be configured includes: style name, clients supported by the style, computer style code, mobile style code and style status, etc.; wherein, the style name is used to indicate the name of the display style; the clients supported by the style are used to indicate whether the display style supports the computer or mobile terminal; the computer style code is used to indicate the identification when the computer terminal is supported; the mobile style code is used to indicate the identification when the mobile terminal is supported; the style status can include two states, open and closed, to indicate whether the display style is currently available. In some embodiments, the above-mentioned style information may also include other information, which can be set according to the needs of the R&D personnel, such as a computer display style thumbnail, a mobile display style thumbnail, description information, etc.

[0062] In specific implementation, the above step S308 can be implemented through the following steps 10-11:

[0063] Step 10: If a configuration instruction for a display style is received, extract the style information in the configuration instruction for the display style. The style information carried in the configuration instruction for the display style is the information entered by the user for the style information to be configured in the displayed display style.

[0064] Step 11: Configure the display style according to the extracted style information to obtain the configured display style.

[0065] Step S310: encapsulate the configured target component into a functional component.

[0066] In specific implementation, the front-end Vue framework and JavaScript technology can be used to encapsulate the configured target components into functional components. The Vue framework is usually a multi-purpose and high-performance JavaScript framework that can help users create a more maintainable and testable code base. The Vue framework is usually a progressive JavaScript framework. Like other frameworks, the Vue framework allows users to split a web page into reusable components. Each component contains its own HTML, CSS (Cascading Style Sheets), and JavaScript to render the corresponding part of the web page; among them, JavaScript is a lightweight, interpreted or just-in-time compiled high-level programming language with function priority. The above-mentioned JavaScript technology is usually the abbreviation of JavaScript script code effects. It is a directly interpreted scripting language. It is a dynamically typed, weakly typed, prototype-based language with built-in support for types. Its interpreter is called a JavaScript engine. It is part of the browser and is widely used as a client-side scripting language. It is used on HTML web pages to add dynamic functions to HTML web pages.

[0067] Step S312: Preview the display effect of the functional component according to the display style configured for the target component.

[0068] The display style configured for the target component may be the display style configured in steps S306-S308 or the default display style. The display effect of the functional component on a computer or mobile terminal may be previewed according to the display style configured for the target component.

[0069] In a specific implementation, the target component can be configured with multiple display styles. The user can simultaneously preview the display effect of the functional component in each display style, or select a display style for preview, allowing the user to arbitrarily change or adjust the display style of the functional component. In some embodiments, the display effect of multiple content lists corresponding to the functional component can also be previewed, allowing the user to adjust the display style of the multiple content lists as needed, wherein the display style of the content lists corresponds to the display style of the functional component.

[0070] Step S314 , in response to the publishing instruction for the functional component, generating a web page including the display effect of the functional component.

[0071] When the display effect of the functional component meets the user's expectations, the user can trigger the publishing instruction of the functional component to generate a web page containing the functional component with the display effect that meets the user's expectations. It can also be understood as publishing the functional component with the display effect that meets the user's expectations to the web page for display.

[0072] In specific implementation, after completing the configuration of the display style of the target component and encapsulating the configured target component into a functional component, the component information corresponding to the functional component (equivalent to the component information corresponding to the above-mentioned target component) and the style information of the display style corresponding to the functional component (equivalent to the display style corresponding to the above-mentioned target component) can be saved to the preset database. Among them, the component information corresponding to the above-mentioned functional component and the style information of its corresponding display style can be saved to the preset database in the form of component instances, and the data structure of the component instance corresponding to each functional component is defined and stored by the backend, and the data structure of each component instance is the same. The instantiation data of the functional component is defined in JSON format by the frontend. The following is an example of a component instance in JSON format:

[0073]

[0074]

[0075] *Field Explanation:*

[0076] Id: The only attribute of the component instance, which is self-incrementing;

[0077] Show: whether to display pc (equivalent to whether it supports the computer terminal), whether to display h5 (equivalent to whether it supports the mobile terminal);

[0078] Name: Rename the component. By default, numbers are added to the end of the same component to distinguish them.

[0079] Sequence: sorting;

[0080] Table: List data, uniformly using a two-dimensional array. Many components may have multiple content lists;

[0081] Support: whether it supports PC, whether it supports H5;

[0082] Content: other data of the component;

[0083] component_class: component class data (component code, component status, component class label, etc.);

[0084] style_class: Style class data (style encoding, component status, style supported clients, etc.).

[0085] In specific implementation, the above step S314 can be implemented in the following way: if a publishing instruction of a functional component is received, the preset interface is called through node technology to obtain the component information of the functional component and the style information of the display style corresponding to the functional component from the preset database, the obtained information is parsed, and a web page is generated.

[0086] The aforementioned Node technology generally provides a simple development tool for creating high-performance servers and various applications that can run on the servers. By calling a preset interface through Node technology, component information of functional components and style information of corresponding display styles of the functional components can be retrieved and parsed from a preset database, and then an HTML file is generated, that is, an HTML page is generated. This HTML page is also the aforementioned web page. The aforementioned preset interface can be an HTTPS interface.

[0087] To facilitate understanding of the embodiments of the present invention, Figure 4 A schematic diagram of the display effect of a functional component is given. The preset data can store multiple component instances in JSON format. The component instance is defined as a data structure similar to {title: core advantage, list: [{name: safe and controllable, desc: user-exclusive computing resources, underlying resources...}, {}, {}]...}. Among them, the title in the component instance can represent the component name, and the list identifies the content list ( Figure 4contains 4 content lists), name can indicate the list name of the content list, desc can identify the content description, etc. Figure 4 The component name of the functional component in the core advantage is the core advantage. The functional component contains 4 content lists, and the list names of the 4 content lists are safe and controllable, efficient deployment, simple and easy, and low cost. Figure 4 The four content lists are written into four blocks and displayed according to the display style of 2 per line. Of course, these four blocks can also be displayed according to other display styles set by the target component, which can be freely selected by the user.

[0088] In specific implementation, the user may configure multiple target components according to business requirements, thereby obtaining multiple functional components, wherein the component information of each functional component includes a component code; the above step S314 may also be implemented through the following steps 20-21:

[0089] Step 20: If the release instruction is received, extract component codes corresponding to multiple functional components from the release instruction.

[0090] Step 21, for each functional component, based on the component code corresponding to the functional component, call the preset interface through node technology to obtain the component information of the functional component that matches the component code and the style information of the display style corresponding to the functional component from the preset database, parse the information corresponding to each functional component obtained, and generate a web page.

[0091] In the embodiment of the present invention, each user-configured component has its own iteration and design process. By configuring the component information of the component and complementing the business design, each design iteration is also iterating these components. The developer assembles the component information of each component into a JSON protocol and binds it to each component. Business personnel (equivalent to the above-mentioned users) can freely select each component to assemble different business pages. Ultimately, business personnel can complete page configuration according to business needs, realize the rapid launch of business pages, and standardize the content structure display, greatly reducing deployment costs, improving development efficiency, and reducing coupling. The specific advantages are as follows:

[0092] For business personnel, they can complete page configuration independently, that is, business personnel can complete page configuration according to business needs without relying on R&D personnel; business pages can be quickly launched, that is, business personnel can freely choose components, and after completing component configuration, they can immediately publish the page to the outside world; content structure display is standardized, that is, the component style is bound to the component, and different display styles can be selected.

[0093] For developers, it reduces code coupling, that is, the componentization of page content can make the code low-coupled, and there is no need to mix all the code together like traditional development, which greatly improves development efficiency; it reduces maintenance costs, that is, componentization can avoid reinventing the wheel, and components can be reused on different pages, improving code quality and reducing maintenance costs; it is easy to check errors, that is, it can speed up the developer's error troubleshooting. If a problem occurs on the page, you can find each possible related component and remove them one by one until it returns to normal, so that you can quickly locate the location of the error; it is easy to modify.

[0094] The above-mentioned web page generation method provides flexible computer and mobile display style configuration by setting component information and component display style style information, supports rapid adjustment of component display style, and free combination of different components to meet the usage scenarios of different businesses. It can realize the rapid launch of cloud products and solutions, standardize the content structure display, and make the system highly flexible and scalable, which can reduce repeated secondary development in the background, improve work efficiency, and reduce coupling.

[0095] Corresponding to the embodiment of the above method, the embodiment of the present invention provides a device for generating a web page, such as Figure 5 As shown, the device includes:

[0096] The component selection model 50 is used to respond to a selection instruction for a target component and display the target component; wherein the target component includes component information to be configured.

[0097] The component configuration module 51 is used to generate a configured target component in response to a configuration instruction for component information.

[0098] The page generation module 52 is used to generate a web page based on the configured target component.

[0099] The webpage generation device described above first responds to a selection instruction for a target component and displays the target component, including the component information to be configured. It then responds to a configuration instruction for the component information and generates the configured target component. Finally, it generates a webpage based on the configured target component. In this approach, users can select components and configure their information based on business needs, and then generate a webpage based on the configured components. This component-based webpage generation approach is more flexible, meeting various business needs, and improving page development efficiency.

[0100] Specifically, the component information to be configured includes: component name, component code, component classification, component status and component content; the component configuration module 51 is used to: if a configuration instruction of a target component is received, extract the component name, component code, component classification, component status and component content carried in the configuration instruction of the target component; configure the target component according to the extracted component name, component code, component classification, component status and component content to obtain the configured target component.

[0101] Furthermore, the component content includes at least one content list; each content list includes a list title, a list code, and a content description; the device also includes a content list configuration module, which is used to: respond to a content list configuration instruction for a target component and generate content lists for multiple target components according to a preset content list limit.

[0102] Furthermore, the above-mentioned device also includes a style configuration module, which is used to: after generating the configured target component in response to the configuration instruction for the component information, respond to the selection instruction for the display style of the configured target component to display the display style; wherein the display style includes the style information to be configured; and generate the configured display style in response to the configuration instruction for the style information.

[0103] Specifically, the above-mentioned style information to be configured includes: style name, clients supported by the style, computer style code, mobile style code and style status; the above-mentioned style configuration module is also used to: if a configuration instruction for the display style is received, extract the style information in the configuration instruction of the display style; configure the display style according to the extracted style information to obtain the configured display style.

[0104] Furthermore, the page generation module 52 is used to: encapsulate the configured target component into a functional component; preview the display effect of the functional component according to the display style configured by the target component; and generate a web page containing the display effect of the functional component in response to a publishing instruction for the functional component.

[0105] Furthermore, the above-mentioned device also includes an information saving module, which is used to: save the component information corresponding to the functional component and the style information of the display style corresponding to the functional component to a preset database; the above-mentioned page generation module 52 is also used to: if a release instruction of the functional component is received, call the preset interface through node technology to obtain the component information of the functional component and the style information of the display style corresponding to the functional component from the preset database; parse the obtained information and generate a web page.

[0106] Specifically, there are multiple functional components mentioned above; the component information of the functional component includes a component code; the above-mentioned page generation module 52 is also used to: if a publishing instruction is received, extract the component codes corresponding to multiple functional components from the publishing instruction; for each functional component, based on the component code corresponding to the functional component, call the preset interface through node technology to obtain the component information of the functional component matching the component code and the style information of the display style corresponding to the functional component from the preset database; parse the information corresponding to each functional component obtained to generate a web page.

[0107] The implementation principle and technical effects of the web page generation device provided in the embodiment of the present invention are the same as those of the aforementioned method embodiment. For the sake of brief description, for matters not mentioned in the device embodiment, reference can be made to the corresponding content in the aforementioned method embodiment.

[0108] The embodiment of the present invention further provides an electronic device, see Figure 6 As shown, the electronic device includes a processor 101 and a memory 100. The memory 100 stores machine-executable instructions that can be executed by the processor 101. The processor 101 executes the machine-executable instructions to implement the above-mentioned method for generating a web page.

[0109] Further, Figure 6 The electronic device shown further includes a bus 102 and a communication interface 103 , and the processor 101 , the communication interface 103 and the memory 100 are connected via the bus 102 .

[0110] The memory 100 may include a high-speed random access memory (RAM), and may also include a non-volatile memory, such as at least one disk storage. The communication connection between the system network element and at least one other network element is achieved through at least one communication interface 103 (which may be wired or wireless), and the Internet, wide area network, local area network, metropolitan area network, etc. may be used. The bus 102 may be an ISA bus, a PCI bus, or an EISA bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 6 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or one type of bus.

[0111] The processor 101 may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above method can be completed by hardware integrated logic circuits in the processor 101 or software instructions. The above processor 101 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the method disclosed in conjunction with the embodiments of the present invention can be directly embodied as being executed by a hardware decoding processor, or executed by a combination of hardware and software modules in the decoding processor. The software module can be located in a storage medium well-known in the art, such as a random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or register. The storage medium is located in the memory 100, and the processor 101 reads the information in the memory 100 and, in conjunction with its hardware, completes the steps of the method of the aforementioned embodiment.

[0112] An embodiment of the present invention further provides a machine-readable storage medium, which stores machine-executable instructions. When the machine-executable instructions are called and executed by a processor, the machine-executable instructions prompt the processor to implement the above-mentioned web page generation method. The specific implementation can be found in the method embodiment and will not be repeated here.

[0113] The webpage generation method, apparatus, and electronic device computer program product provided in embodiments of the present invention include a computer-readable storage medium storing program code. The program code includes instructions for executing the methods described in the preceding method embodiments. Specific implementations can be found in the method embodiments and are not further described here. If the functions described are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium.

[0114] Based on this understanding, the technical solution of the present invention, or the portion that contributes to the prior art, or the portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, electronic device, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a mobile hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0115] Finally, it should be noted that the above-described embodiments are only specific implementation methods of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the above-described embodiments, those skilled in the art should understand that any person skilled in the art can modify or easily conceive of changes to the technical solutions described in the above-described embodiments within the technical scope disclosed by the present invention, or replace some of the technical features therein with equivalents. Such modifications, changes, or replacements do not deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the scope of protection of the present invention. Therefore, the scope of protection of the present invention shall be subject to the scope of protection of the claims.

Claims

1. A method for generating a web page, characterized in that: The method comprises: In response to a selection instruction for a target component, the target component is displayed; wherein the target component includes component information to be configured; the component information to be configured includes: component name, component code, component category, component status and component content; the component content includes at least one content list; each content list includes a list title, a list code and a content description; In response to a configuration instruction for the component information, generating the configured target component; In response to a selection instruction for the configured display style of the target component, the display style is displayed; wherein the display style includes style information to be configured; the style information to be configured includes: style name, supported clients, computer-side style code, mobile-side style code, and style status; In response to a configuration instruction for the style information, generating the configured display style; The configured target component is encapsulated into a functional component; there are multiple functional components; the component information of the functional component includes a component code; the component information corresponding to the functional component and the style information of the display style corresponding to the functional component are saved in a preset database; according to the display style configured by the target component, the display effect of the functional component is previewed; if a release instruction is received, the component codes corresponding to multiple functional components are extracted from the release instruction; for each functional component, based on the component code corresponding to the functional component, the preset interface is called through the node technology to obtain the component information of the functional component matching the component code and the style information of the display style corresponding to the functional component from the preset database, the information corresponding to each functional component obtained is parsed, and the web page is generated.

2. The method according to claim 1, characterized in that The step of generating the configured target component in response to the configuration instruction of the component information includes: If a configuration instruction of the target component is received, extracting the component name, component code, component category, component status and component content carried in the configuration instruction of the target component; The target component is configured according to the extracted component name, the component code, the component classification, the component status and the component content to obtain the configured target component.

3. The method according to claim 2, characterized in that If the configuration instruction of the target component is received, before the step of extracting the component name, component code, component category, component status and component content carried in the configuration instruction of the target component, the method further includes: In response to the content list configuration instruction for the target component, a plurality of content lists for the target component are generated according to a preset limit on the number of content lists.

4. The method according to claim 1, wherein The step of generating the configured display style in response to the configuration instruction of the style information includes: If a configuration instruction for the display style is received, extracting style information from the configuration instruction for the display style; The display style is configured according to the extracted style information to obtain the configured display style.

5. A device for generating a web page, characterized in that: The device comprises: A component selection model for displaying a target component in response to a selection instruction for the target component; wherein the target component includes information about the component to be configured; the information about the component to be configured includes: component name, component code, component category, component status, and component content; the component content includes at least one content list; each content list includes a list title, a list code, and a content description; A component configuration module, configured to generate the configured target component in response to a configuration instruction for the component information; and to display the display style in response to a selection instruction for the display style of the configured target component; wherein the display style includes style information to be configured; the style information to be configured includes: style name, supported clients, computer-side style code, mobile-side style code, and style status; and to generate the configured display style in response to a configuration instruction for the style information; A page generation module is used to encapsulate the configured target component into a functional component; there are multiple functional components; the component information of the functional component includes a component code; the component information corresponding to the functional component and the style information of the display style corresponding to the functional component are saved in a preset database; according to the display style configured by the target component, the display effect of the functional component is previewed; if a publishing instruction is received, the component codes corresponding to multiple functional components are extracted from the publishing instruction; for each functional component, based on the component code corresponding to the functional component, the preset interface is called through the node technology to obtain the component information of the functional component matching the component code and the style information of the display style corresponding to the functional component from the preset database, the information corresponding to each functional component obtained is parsed, and the web page is generated.

6. An electronic device, characterized in that: The method comprises a processor and a memory, wherein the memory stores machine-executable instructions that can be executed by the processor, and the processor executes the machine-executable instructions to implement the method for generating a web page according to any one of claims 1 to 4.

7. A machine-readable storage medium, characterized in that The machine-readable storage medium stores machine-executable instructions. When the machine-executable instructions are called and executed by a processor, the machine-executable instructions prompt the processor to implement the method for generating a web page according to any one of claims 1 to 4.

Citation Information

Patent Citations

  • Webpage generation method and device, terminal and storage medium

    CN110795666A