Webpage generation method and device based on partition layout

Abstract

The invention discloses a webpage generation method and device based on partition layout, relates to the technical field of computers, and mainly aims to solve the problems of high cost and high difficulty of later page maintenance caused by tight coupling between codes and pages in a current webpage generation method combining partition layout and card type design. According to the main technical scheme, the method comprises the steps of obtaining preset service content; according to the preset business content, a webpage first area slot of the preset partition container assembly is filled, and first area content of the webpage is obtained; according to the preset business content, utilizing a multi-label tab component in the preset partition container component to generate second region content of the webpage; and integrating the first area content and the second area content by utilizing a preset partition container component to generate a target webpage. The method and device are used for webpage generation.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method and device for generating a web page based on partition layout. Background Art

[0002] In web page generation, partition layout has become the mainstream solution to improve user browsing experience. Partition layout refers to dividing a web page into multiple independent and functional areas, each of which is responsible for displaying preset content, thereby helping users to obtain the required information more intuitively and quickly. By combining partition layout with card-style design, different content can be visually separated, improving the efficiency of users obtaining information.

[0003] The current solution to achieve the combination of partition layout and card-style design is: developers first write layout code and design page styles, and also need to create card components with annotation functions. After that, these layout codes, page styles and card components are combined to build a web page that meets the requirements.

[0004] However, this implementation method has a significant problem. If the existing page needs to be adjusted or updated later, due to the tight coupling between the code and the page, the developer often needs to completely modify the code of the entire page, which undoubtedly increases the cost of later maintenance. Therefore, a more flexible solution is urgently needed to reduce the cost of later page maintenance. Summary of the invention

[0005] In view of the above problems, the present disclosure provides a web page generation method and device based on partition layout, the main purpose of which is to solve the problem of high cost and difficulty of subsequent page maintenance caused by the tight coupling between code and page in the current web page generation method combining partition layout with card-type design.

[0006] In order to solve the above technical problems, the present disclosure proposes the following solutions:

[0007] In a first aspect, the present disclosure provides a method for generating a web page based on a partition layout, the method comprising:

[0008] Get preset business content;

[0009] According to the preset business content, the first area slot of the webpage of the preset partition container component is filled to obtain the first area content of the webpage;

[0010] According to the preset business content, using the multi-label tab component in the preset partition container component to generate the second area content of the web page;

[0011] The preset partition container component is used to integrate the first area content and the second area content to generate a target webpage.

[0012] In a second aspect, the present disclosure provides a webpage generation device based on partition layout, the device comprising:

[0013] An acquisition unit, used to acquire preset business content;

[0014] A first content generating unit, configured to fill the first area slot of the webpage of the preset partition container component according to the preset business content acquired by the acquiring unit, so as to obtain the first area content of the webpage;

[0015] A second content generating unit, configured to generate second area content of a web page by using a multi-label tab component in the preset partition container component according to the preset business content acquired by the acquiring unit;

[0016] The page generating unit is used to integrate the first area content generated by the first content generating unit and the second area content generated by the second content generating unit by using the preset partition container component to generate a target web page.

[0017] In order to achieve the above-mentioned purpose, according to the third aspect of the present disclosure, a storage medium is provided, wherein the storage medium includes a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the web page generation method based on partition layout according to the above-mentioned first aspect.

[0018] In order to achieve the above objective, according to a fourth aspect of the present disclosure, a processor is provided, the processor being used to run a program, wherein the program, when running, executes the webpage generation method based on partition layout according to the first aspect.

[0019] By means of the above technical scheme, the present disclosure provides a method and device for generating a web page based on a partition layout, which significantly reduces the coupling between the code and the page, and improves the flexibility and maintainability of web page generation. In actual operation, the preset business content can be obtained first, and then the first area slot of the web page of the preset partition container component can be filled according to these contents, so as to generate the first area content of the web page. Next, the multi-label tab component in the preset partition container component can be used to generate the second area content of the web page according to the same preset business content. Finally, the first area and the second area content are integrated by the preset partition container component to generate the target web page. Through this method, developers do not need to write layout code and page style from scratch, but can use the pre-designed partition container component to realize the setting of web page content. In addition, the slot mechanism of the preset partition container component greatly reduces the coupling between the code and the page, so that when configuring the web page content, the developer only needs to fill the corresponding content into the corresponding slot. If the web page content needs to be adjusted later, it is only necessary to update the content of the relevant slot in a targeted manner, without making large-scale changes to the entire layout structure. This design makes the code structure clearer and easier to maintain and manage later. In general, the present disclosure not only optimizes the development process of web page generation and improves development efficiency, but also reduces the coupling between code and page through the slot mechanism, making the configuration and subsequent maintenance of web pages simpler and more efficient, greatly reducing the subsequent maintenance costs.

[0020] The above description is only an overview of the technical solution of the present disclosure. In order to more clearly understand the technical means of the present disclosure, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present disclosure more obvious and easy to understand, the specific implementation methods of the present disclosure are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present disclosure. Also, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0022] Figure 1 A flow chart of a method for generating a web page based on partition layout provided by an embodiment of the present disclosure is shown;

[0023] Figure 2 A flow chart of another method for generating a web page based on partition layout provided by an embodiment of the present disclosure is shown;

[0024] Figure 3 A block diagram showing a web page generation device based on partition layout provided by an embodiment of the present disclosure is shown;

[0025] Figure 4 A block diagram showing another webpage generation device based on partition layout provided by an embodiment of the present disclosure is shown;

[0026] Figure 5 A schematic diagram of a target webpage provided by an embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0027] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0028] Before describing the specific implementation methods of the present disclosure, it should be noted that the information, data and signals involved in the present disclosure are all authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data comply with the relevant laws, regulations and standards of relevant countries and regions.

[0029] The problem of tight coupling between code and page in the current web page generation method combining partition layout with card-style design increases the difficulty and cost of later page maintenance. To this end, the inventor conducted in-depth exploration and research and proposed a web page generation method based on partition layout, which pre-designs a reusable partition container component and pre-sets placeholders, also known as slots, at each key position. This design allows the content to be filled or adjusted for the corresponding slot when it is necessary to build or modify the web page content, without the need to write code and adjust the entire page structure on a large scale. This not only greatly improves the flexibility and efficiency of web page generation, but also significantly reduces the difficulty and cost of later page maintenance. The execution subject of the web page generation method based on partition layout can be an automated web page construction system applied to any platform or an electronic device equipped with the system. The relationship between the automated web page construction system of the present disclosure and the preset partition container component can be an inclusion relationship or a call relationship. If it is an inclusion relationship, the preset partition container component is built into the implementation system as part of the system source code library. In this case, the design, function, interface, etc. of the component all follow the overall architecture principles and technical specifications of the system, and are tightly integrated with other parts of the system to form a highly coupled whole.

[0030] If it is expressed as a calling relationship, the preset partition container component exists as an independent third-party library or module. The automated web page construction system calls or integrates this component through a specific interface or dependency management mechanism. Under this relationship, the coupling between the preset partition container component and the automated web page construction system is relatively low, so that the preset partition container component can be more freely called by other business implementation systems, thereby improving its reusability and calling flexibility. This design not only simplifies the maintenance and management of the system, but also promotes the cross-platform application and sharing of components.

[0031] In this embodiment, the relationship between the preset partition container component and the implementation system is not limited, as long as the relationship between the two can achieve the expected purpose.

[0032] The method for generating a web page based on partition layout provided by the embodiment of the present disclosure executes the following steps: Figure 1 As shown, at least 101-104 are included.

[0033] 101. Obtain preset business content.

[0034] In step 101, the business personnel may store the business content in a designated database in advance. Subsequently, the server of the implementation system of the webpage generation method based on partition layout (the execution subject of the present disclosure) can extract the pre-set business content from the designated database, which includes part or all of the data and information related to the business content.

[0035] It is worth noting that there are many options for specifying a database, which can be a self-built database within the enterprise, an API interface provided by a third party, or a cloud storage service, etc. No matter which method is chosen, the key is to ensure the stability and reliability of the data source to ensure that accurate and complete data support can be obtained in the subsequent web page generation process.

[0036] In addition, after successfully extracting the pre-set business data from the specified database, the implementation system will further clean and process the acquired business data. For example, invalid values ​​and outliers are removed to ensure the accuracy of the data; at the same time, data type conversion and standardization can be performed as needed to adapt to different data processing requirements. After these processes, the business data will be converted into a format suitable for web page display, such as HTML fragments, JSON objects, or rich text. Such conversion work facilitates subsequent slot filling operations and ensures the accuracy and consistency of web page content.

[0037] For example, the preset business content may include robot task data and call data closely related to the robot tasks. The robot task data may record the number of robot tasks in detail, while the call data may include key information such as call turns and call intentions. It should be emphasized that these are only exemplary descriptions, and the actual business content should be flexibly adjusted according to the specific circumstances of each enterprise to meet its specific business needs and design goals.

[0038] In order to more accurately understand the implementation of the present disclosure, the following is a detailed description of the relationship between the preset partition container component and the web page involved in the present disclosure:

[0039] In fact, a web page can be composed of one or more reusable partition container components, and slots can be set in each component. These slots provide a place to carry the web page content. A component is an overall structure, and a slot is a part of a component. A component can be likened to a box with a preset layout, and a slot is a small grid pre-divided in the box. For example, in a component used to display product information, the component itself defines the general layout framework of the product title, product image, product description, etc., and the slot is the location reserved for each specific content (such as title, image, description) within this framework.

[0040] This design makes web page construction more flexible and efficient. By reusing these components, you can quickly build a web page, and when modifying the content of a web page, you only need to operate on the slots in the component without making large-scale adjustments to the code structure of the entire web page.

[0041] Regarding the correspondence between the partition container component and the web page, this relationship is diverse. The partition container component can correspond to the entire web page, or it can correspond to a specific fixed area (such as the first area of ​​the web page). For example, a partition container component for the user login function corresponds to the login area on the web page, and its slots may include a user name input slot, a password input slot, a login button slot, etc. This correspondence can be determined based on the function and design plan of the web page. By reasonably arranging different partition container components and their slot contents, the function and content display of each part of the web page can be realized.

[0042] In the present disclosure, each component in the partition container component may correspond to a different area in the entire web page, thereby achieving efficient and flexible web page construction and content management.

[0043] 102. Fill the first area slot of the web page of the preset partition container component according to the preset business content to obtain the first area content of the web page.

[0044] In this embodiment, the webpage first area slot of the preset partition container component may be filled according to the extracted business content to obtain the first area content of the webpage, wherein the first area content includes a plurality of card contents.

[0045] When filling the slots of the first area, all slots used to carry the content of the first area can be accurately identified in the preset partition container component according to the identifier of the slot. The identifiers of these slots have been pre-defined in the component writing stage, and the identifiers include the location and name of the area to which they belong, thereby ensuring the accuracy and identifiability of the slots. In one example, the identifier of the slot can be represented by a number (such as a string), which can characterize the location and name of the area to which the slot belongs. For example, the first area slots include a head slot, a dynamic card list slot, and a bottom slot; the identifier of the head slot is "first area 001", which is used to represent the slot of the head of the first area; the identifier of the dynamic card list slot is "first area 002", which is used to represent the slot in the middle part of the first area; the identifier of the bottom slot is "first area 003", which is used to represent the slot at the bottom of the first area. Through such a design, the slots can be quickly and accurately identified and operated, which provides great convenience for subsequent filling work.

[0046] After all slots for carrying the content of the first region of the web page are successfully identified, the preset business content can be filled into the corresponding slots to generate the complete content of the first region of the web page.

[0047] In some embodiments, there is a correspondence between the preset business content and the identifier of the slot, which is used to indicate the slot into which the preset business content should be filled. In one example, the business configuration content includes the header interface interaction content, the task configuration content and the bottom interface interaction content. The first area slot includes the header slot, the dynamic card list slot and the bottom slot. The identifier of the header slot is "first area 001", the identifier of the dynamic card list slot is "first area 002", and the identifier of the bottom slot is "first area 003". The header interface interaction content has a corresponding relationship with the "first area 001", the task configuration content has a corresponding relationship with the "first area 002", and the bottom interface interaction content has a corresponding relationship with the "first area 003". Among them, the header interface interaction content includes:

[0048] When receiving the business configuration content of the preset business content, if the header interface interaction content is identified, the identified header interface interaction content will be filled into the header slot represented by "first area 001" according to the correspondence between the preset business content and the identifier of the slot. When designing the header interface interaction content, you may encounter multiple fields and their corresponding contents, and the header slot may also contain multiple different positions. In response to this situation, one way to deal with it is to randomly assign the contents of each field to each header slot. However, a more accurate method is to preset a sub-identifier for each position in the header slot, such as "first area 0011" is used to refer to the first position of the header slot. In this way, each field content in the header interface interaction content can establish a clear correspondence with a specific header slot sub-identifier. In this way, the corresponding field content can be accurately placed in the specified header slot position based on these correspondences. This method not only improves the accuracy of the interface layout, but also enhances the coherence and consistency of the user experience.

[0049] The content filled into the slot of the first area can be the business configuration content in the preset business content, such as the specific task title, task quantity, task ID and other information. In addition, the first area can also be used to display indicative business content, such as the specific number of web pages to be displayed based on the specific business quantity, or some interactive content. This is because users tend to follow the reading habit from left to right and from top to bottom when browsing web pages. Placing key business configuration content or indicative information first not only enhances the visibility and readability of the information, but also instructs users to quickly locate and operate.

[0050] It should be emphasized here that in the filling process, all business data is not simply filled into all slots in the first area. Instead, the relevant part of the business data is extracted and filled into the corresponding slot according to the specific purpose and function of each slot.

[0051] For example, if a slot is designed to display news summaries, the corresponding news summary content can be extracted from the business data and filled into this "news summary slot". In this way, it can be ensured that each business content can find a matching slot, thus presenting a clear and orderly content in the first area of ​​the web page.

[0052] When the relevant parts of the business data are extracted in a targeted manner and filled into the corresponding slots, the implementation system of the present invention, that is, the execution subject of the present invention, can use the form of a programming language to dynamically insert the extracted business content into the corresponding first area slot to ensure that the filled content can adapt to different terminal devices and browser environments.

[0053] 103. Generate second area content of the web page using a multi-label tab component in a preset partition container component according to preset business content.

[0054] In this step, multiple labels in the second area of ​​the webpage can be constructed based on the specific task details and task labels in the preset business content using the multi-label tab component in the preset partition container component. Each label corresponds to a content area. When the user clicks on a different label, the content area will dynamically switch to the page or data associated with the selected label for display.

[0055] For example, based on the call data of the robot task, the multiple labels of the second area formed by the multi-label tab component in the preset partition container component may include "Dial Details", "Task Analysis", etc. When the "Dial Details" label is selected, the content area below it can display various statistical indicators of the call, such as call duration, call rounds and other key information.

[0056] A fixed coding method can be used to fill the content area under each tag, that is, directly write the code of the relevant data in the logic block corresponding to the tag, so as to display the relevant data under the corresponding tag; a slot mechanism can also be set under each tag, that is, insert the data under each tag into the corresponding slot.

[0057] 104. Integrate the first area content and the second area content using a preset partition container component to generate a target web page.

[0058] In this step, the preset partition container component can integrate the content of the first area and the content of the second area according to its internal layout structure. After the integration, the width ratio of the left and right areas can be reasonably allocated. The display style, including fonts, colors, spacing and other elements, needs to be adjusted to meet the design specifications of the project. In this way, a target web page that meets the requirements is obtained.

[0059] Based on the above Figure 1As can be seen from the implementation method, the present disclosure provides a web page generation method based on partition layout, which significantly reduces the coupling between code and page, and improves the flexibility and maintainability of web page generation. In actual operation, the preset business content can be obtained, and the first area slot of the web page of the preset partition container component can be filled according to these contents, so as to generate the first area content of the web page. The embodiment of the present disclosure can also use the multi-label tab component in the preset partition container component to generate the second area content of the web page according to the same preset business content. Finally, the first and second area contents are integrated by the preset partition container component to generate the target web page. Through this method, developers do not need to write layout code and page style from scratch, but can use the pre-designed partition container component to implement the setting of web page content. In addition, the slot mechanism of the preset partition container component greatly reduces the coupling between code and page, so that when configuring web page content, developers only need to fill the corresponding content into the corresponding slot. If the web page content needs to be adjusted later, it is only necessary to update the content of the relevant slot in a targeted manner, without making large-scale changes to the entire layout structure. This design makes the code structure clearer and easier to maintain and manage later. In general, the present disclosure not only optimizes the development process of web page generation and improves development efficiency, but also reduces the coupling between code and page through the slot mechanism, making the configuration and subsequent maintenance of web pages simpler and more efficient, greatly reducing the subsequent maintenance costs.

[0060] Furthermore, as a Figure 1 The embodiment shown in the figure is refined and extended. The embodiment of the present disclosure also provides another method for generating a web page based on a partition layout, such as Figure 2 As shown, the specific steps are as follows:

[0061] 201. Obtain preset business content.

[0062] Among them, the specific implementation of step 201 is the same as that of step 101, and can achieve the same technical effect and solve the same technical problem, and will not be repeated here.

[0063] 202. Fill the first area slot of the webpage of the preset partition container component according to the preset business content to obtain the first area content of the webpage.

[0064] In this embodiment, the business configuration content in the preset business content may be obtained first, and then the webpage first area slot of the preset partition container component may be filled according to the business configuration content to obtain the first area content of the webpage.

[0065] Specifically, in order to build a first area of ​​a web page with clear hierarchy and content, the slots can be subdivided into header slots, dynamic card list slots, and bottom slots. These slots have their own functions and are designed to accommodate different types of content, and together build a first area with complete functions.

[0066] Among them, multiple header slots can be filled according to the header interface interaction content in the business configuration content, so as to generate the header content of the web page. These header contents usually include key elements such as titles, operation buttons, and filter items.

[0067] For example, Figure 5 As shown, Figure 5 A schematic diagram of a target webpage provided by the present disclosure, taking a robot call task as an example, the title in the header content can be displayed as "Number of seats: 0 / 203", which intuitively shows the number of seats currently available. At the same time, the operation button can be displayed as "New Task", and when the user clicks the button, the interface for creating a new task can be quickly popped up, making it convenient for the user to complete the creation of a new task.

[0068] In addition, according to the task configuration content in the business configuration content, you can edit the title, image, description, status label and other information of each card in each dynamic card list slot to obtain multiple card contents in the first area of ​​the web page. This design can significantly improve the clarity of information display and the comfort of user experience.

[0069] Among them, the status label is a dynamic element, and its changes are closely linked to other card contents. When other content on the card changes, the status label will be adjusted accordingly to reflect the latest status information.

[0070] like Figure 5 As shown in the figure, taking the robot call task as an example, the content on the card (that is, the corresponding task configuration content) may include information such as title, task type, task ID, etc., and the status label is used to display the status of the task in real time. When the card title shows "Test Route 03", if the progress changes from "1 / 1" to "0 / 1", the status label will immediately change from "Completed" to "Uncompleted" dynamically (this change status is in Figure 5 This design enables the card content to be updated in real time, providing users with the latest task status information, thereby helping them better manage tasks and make decisions.

[0071] Finally, multiple bottom slots in the first area of ​​the webpage can be filled according to the bottom interface interactive content in the business configuration content, thereby generating the bottom content of the webpage. These bottom contents mainly include page turning, footer information, and prompt information. By filling the header interface interactive content in the business configuration content into multiple header slots, filling the task configuration content into multiple dynamic card list slots, and filling the bottom interface interactive content into multiple bottom slots, the overall layout is clear, and users can see each part of the content at a glance, reducing the time and complexity of information search.

[0072] It should be noted that there is a linkage and interactive relationship between the content of the header, the content of the first card and the content at the bottom. For example, as the bottom content switches, the contents of the multiple cards displayed in the first area will also switch accordingly, ensuring that the user can obtain the corresponding card information when browsing between different pages.

[0073] by Figure 5 For example, the bottom content can be displayed as "75 <1 / 8> in total", which means there are 75 records in total and the content of page 1 is currently displayed. When the user clicks the page-turning button to switch to the second page, the webpage will automatically display the card content corresponding to the second page, ensuring that the user can browse and obtain the required information smoothly. This design not only improves the user experience, but also makes the information display on the webpage clearer and more orderly.

[0074] 203. Generate second area content of the webpage using the multi-label tab component in the preset partition container component according to the preset business content.

[0075] In this embodiment, multiple labels in the second area of ​​the webpage can be generated according to the task labels in the preset business content using the multi-label tab component in the preset partition container component. Next, it is preferred to set slots under the labels, and fill the slots under each label according to the task details in the specific business content, so as to obtain the content under each label. These contents may include key information such as business reports and user setting options to meet the diverse needs of users.

[0076] The second area of ​​the web page includes label slots and content slots. Each label slot and content slot has its corresponding slot identifier, such as "label 1 slot" and "content 1 slot". In addition, an association relationship is established between each label slot and one or more content slots, which indicates that the information entered in these content slots belongs to the corresponding label. There is a corresponding relationship between each specific task label and the preset label slot identifier, and the task details of each task are matched with the specific content slot identifier. Therefore, when the system recognizes a task label, it can accurately fill this task label into the corresponding label slot according to the preset association relationship; then, fill the task details corresponding to the task label into the associated content slot. This design ensures the orderly display of information and improves the user's operating experience.

[0077] In addition, no matter whether there are multiple task tags or task details, you can find the corresponding slot and fill it according to the specific correspondence.

[0078] In the second area of ​​the webpage, it is assumed that there is a project management tool, which includes a label slot and a content slot. Each label slot and content slot has its corresponding slot identifier, such as "label 1 slot" and "content 1 slot". In order to better organize information, each label slot is associated with one or more content slots to ensure that the information entered in the content slot can be correctly attributed to the corresponding label.

[0079] Example scenario

[0080] The correspondence between task labels and content

[0081] Task label: "Design", label slot ID: "Label 1 slot", associated content slot ID: "Content 1 slot"

[0082] Task label: "Develop", label slot ID: "label 2 slot", associated content slot ID: "content 2 slot", "content 3 slot"

[0083] Task label: "Test", label slot ID: "Label 3 slot", associated content slot ID: "Content 4 slot"

[0084] Specific task details

[0085] Task details: "Complete the design of the project homepage", task label: "Design", content slot identifier: "Content 1 slot"

[0086] Task details: "Realize user login function", task label: "Develop", content slot identifier: "Content 2 slot"

[0087] Task details: "Optimize database query efficiency", task label: "Development", content slot identifier: "Content 3 slot"

[0088] Task details: "Perform system integration testing", task label: "Test", content slot identifier: "Content 4 slot"

[0089] Filling process

[0090] When the system recognizes the task label "Design", it will fill this label into the "Label 1 Slot" according to the preset correspondence, and fill the task details of "Complete the design of the project homepage" into the "Content 1 Slot".

[0091] For the task label "Development", the system also fills it into the "Label 2 Slot" based on the corresponding relationship, and fills the two task details of "Implementing user login function" and "Optimizing database query efficiency" into the "Content 2 Slot" and "Content 3 Slot" respectively.

[0092] Finally, for the task label "Test", the system populates it into the "Label 3 slot" and populates the task details of "Perform system integration testing" into the "Content 4 slot".

[0093] It is worth mentioning that the second display area can be linked and interacted with the first display area. For example, when a user selects a card in the first area, the second area will display the content corresponding to the card, realizing the rapid positioning and presentation of information. In addition, when the first area switches to different pages through the page turning function, the second area will also display the card content of the corresponding page, further improving the user experience and the efficiency of information acquisition. Through this design, close cooperation and efficient interaction between the left and right areas of the web page are achieved, providing users with a more convenient and intuitive information display and operation platform.

[0094] Based on the above text, the relationship between the content in the second area and the cards in the first area and how to generate the second web page according to the business content are further explained:

[0095] The relationship between the second content and the cards in the first area

[0096] Linkage: The second content is linked to the cards in the first area. When the user performs an operation in the first area (such as selecting a card or switching pages by turning pages), the system can monitor the operation and control the second area to change the displayed content accordingly to match the state of the card in the first area or the information it represents. This linkage makes the left and right areas form an organic whole, providing users with a coherent interactive experience.

[0097] Correspondence: The second content corresponds to the card in the first area. Specifically, each card in the first area has a specific information association, and the second area will display the matching content based on the title or ID of the card in the first area. For example, if the card in the first area is the ID of a task, the second area may display a detailed introduction to the task that matches the task ID.

[0098] In addition, it should be noted that in the case of turning pages or switching cards, it is only necessary to obtain and update the content in the second slot according to the content of the new first area. This avoids the performance overhead caused by frequently creating and destroying different slots in the container component, and also reduces memory usage. For example, in a news web page, the second slot is used to display news details. No matter how the first news list is turned, the second slots (such as the title slot, text slot, picture slot, etc.) are always the same, but the news content inside is updated according to the first selected news.

[0099] In order to implement the page turning function, it is necessary to predetermine in the backend which business content belongs to the first page, which belongs to the second page, and so on. In this way, when the client requests data for a specific page, the backend can return the corresponding business content based on the requested page number. In addition, the business content of each page is associated with the corresponding slot identifier.

[0100] When the page is turned, the business content of the corresponding page number can be filled into the corresponding slot. In this way, neither the label slot nor the content slot needs to be re-rendered or changed. You only need to update the content in the specific slot to the associated content under the corresponding page number when turning the page. This method ensures efficient page updates while maintaining a consistent and smooth user experience.

[0101] Suppose there is an application webpage of an online bookstore where users can browse different books. The following are the business contents that need to be predetermined by the backend when implementing the page turning function:

[0102] Determine the number of books to display per page: Assume that 10 books are displayed per page.

[0103] Classification and sorting: The backend needs to know the classification and sorting rules of books. For example, books can be sorted by publication date, rating, price or title.

[0104] Here are the specific steps and examples:

[0105] Step 1: Backend data processing

[0106] Suppose there are 100 books, sorted in descending order by publication date.

[0107] The first page (page number 1) will contain information for books 1 through 10.

[0108] The second page (page 2) will contain information for books 11 through 20, and so on.

[0109] Step 2: Slot ID association

[0110] Each book's information is associated with a slot identifier. For example:

[0111] The slot identifiers may be book-slot-1 to book-slot-10. Books 1-10 and 11-20 are associated with book-slot-1 to book-slot-10 respectively, for example, book 1 and book 11 are both associated with book-slot-1.

[0112] Step 3: Page turning

[0113] When the user clicks the "Next Page" button, the front end sends a request to the back end, requesting data for page number 2.

[0114] After receiving the request, the backend searches for the book information corresponding to page number 2 (books 11 to 20) and sends the information to the frontend.

[0115] Step 4: Update front-end content

[0116] After the front end receives the data from the back end, it does not need to re-render the entire page, but only needs to update the corresponding slot content.

[0117] For example, replace the contents of book-slot-1 to book-slot-10 with the contents of books 11 to 20.

[0118] In addition, it should be noted that each tag in the second area has a unique key, which ensures the uniqueness of each tag and facilitates the system to identify and manage it. In order to achieve accurate association between tags and content, the slot name used in the content area under each tag can be set to be consistent with its corresponding tag key.

[0119] like Figure 5 As shown in the figure, the second area may include real-time status, case management, call details, etc. Under the call details label, you can include call duration filter, call round filter, mobile phone number, conversation ID, etc. Due to space limitations, the remaining functions of the second area are not described here one by one, but can be found in the specific reference Figure 5 It is important to emphasize that Figure 5 This is only an example of the present disclosure, and does not limit the application scope of the present disclosure to the business scope. In fact, the present disclosure has a wide range of applicability and can be applied to a variety of different business scenarios and needs.

[0120] Based on the same inventive concept, in some embodiments, when the card in the first area is switched to the target card, the label in the second area and the content area corresponding to the label will be generated according to the target business content corresponding to the target card, and the target business content corresponding to the target card is the business content used to fill the target card slot. Specifically, when the card in the first area is switched to the target card, the target task label and target task details used to fill the label slot and content slot in the second area in the target business content will be obtained, and when a task label is triggered to be displayed, the label slot corresponding to the task label and the associated content slot will be filled.

[0121] In summary, this step first generates multiple labels in the second area of ​​the web page according to the task label using the multi-label tab component in the preset partition container component, wherein each label corresponds to a content area. After generating multiple labels, the slots under each label can be filled according to the task details to obtain the content under each label. In this way, the user can quickly access the required task details by clicking on different labels, reducing the number and time of page jumps and improving the convenience of operation. In addition, multiple labels and their contents will change with the selected state of the content of the first multiple cards on the web page. This linkage mechanism enables the content of the second area to be updated instantly when the user selects different task cards, improving the consistency and convenience of the operation and ensuring the smooth transition of the user between different tasks.

[0122] 204. Integrate the first area content and the second area content using a preset partition container component to generate a target webpage.

[0123] Among them, the specific implementation of step 204 is the same as that of step 104, and can achieve the same technical effect and solve the same technical problem, and will not be repeated here.

[0124] In addition, it should be particularly emphasized that the target web page generated by the present disclosure is not limited to a single page, but can be set to multiple pages according to actual business volume and needs. The specific number of these pages is not limited by the present disclosure and can be flexibly adjusted according to actual conditions.

[0125] The first area mentioned in the present disclosure may be located in the left area of ​​the web page, and the second area may be located in the right area of ​​the web page. However, this layout is not fixed, and it can be flexibly adjusted according to the user's actual browsing habits and design requirements. For example, in some cases, the right area of ​​the web page may be set as the first area, and the left area becomes the second area accordingly. Such a layout design is intended to optimize the user experience and ensure the rationality of information presentation and the coordination of the interface.

[0126] 205. When there is a request to modify the target webpage, adjust the content of the target webpage.

[0127] In this embodiment, it is possible to detect whether there is a modification request for the target webpage. The modification request will carry the content to be adjusted and the category to be adjusted of the target webpage.

[0128] Once the existence of the modification request is detected, the area to be adjusted in the target webpage can be located according to the content to be adjusted. Subsequently, the corresponding content adjustment operation is performed on the area to be adjusted in combination with the content to be adjusted and the category to be adjusted.

[0129] For example, assume that the content to be adjusted is to adjust "Number of seats: 0 / 203" to "Number of seats: 2 / 203". By consulting the records in the pre-configuration, it can be determined that this content is located in the header area of ​​the webpage, so the area to be adjusted is the header of the first area.

[0130] When adjusting the content of the area to be adjusted, the specific operation method can be determined according to the category to be adjusted. If the category to be adjusted is content addition, the target insertion position in the preset partition container component can be determined according to the area to be adjusted. Subsequently, it can be checked whether there is a free slot at the target insertion position. If there is a free slot, the content to be adjusted can be directly filled into the free slot. If there is no free slot, a new slot will be created at the target insertion position, and the content to be adjusted will be filled into the newly created slot. In this way, the effective use of existing slot resources is ensured and unnecessary waste of resources is avoided. When slot resources are insufficient, new slots can be created at the target insertion position to ensure the scalability of the web page structure to adapt to possible content growth needs in the future.

[0131] If the area to be adjusted is the card area of ​​the first area, the target insertion position can be the dynamic card list slot part of the first area in the preset partition container. If the category to be adjusted is content addition, you can check whether there is an empty slot in the dynamic card list slot of the first area. If there is an empty slot, you can directly insert the new content into it; if there is no empty slot, you can create a new dynamic card list slot in the first area and insert the new content into the newly created slot. That is, create a new card in the first area.

[0132] In addition, if the category to be adjusted is content change, the target change slot in the preset partition container component can be determined according to the area to be adjusted, and then the content in the target change slot is replaced with the content to be adjusted. In this way, by directly locating the target change slot and replacing the content, rapid content updates are achieved, improving the timeliness of information transmission. In addition, this method allows independent changes to the content of a specific slot without affecting other slots or other parts of the page, increasing the flexibility of web content management.

[0133] For example, if the area to be adjusted is the head of the first area, the target change slot can be the head slot. At this time, if the content to be adjusted is to adjust "Number of seats: 0 / 203" to "Number of seats: 2 / 203", the "Number of seats: 0 / 203" in the head slot can be replaced with "Number of seats: 2 / 203".

[0134] Furthermore, as a response to the above Figure 1 In order to realize the method shown in the figure, the embodiment of the present disclosure also provides a web page generation device based on partition layout, which is used for Figure 1 The device embodiment corresponds to the aforementioned method embodiment. For ease of reading, this device embodiment will not repeat the details of the aforementioned method embodiment one by one, but it should be clear that the device in this embodiment can correspond to all the contents of the aforementioned method embodiment. Figure 3 As shown, the device comprises:

[0135] The acquisition unit 301 is used to acquire preset service content;

[0136] A first content generating unit 302 is configured to fill the first area slot of the webpage of the preset partition container component according to the preset business content obtained by the obtaining unit 301 to obtain the first area content of the webpage;

[0137] A second content generating unit 303 is configured to generate second area content of a web page using a multi-label tab component in the preset partition container component according to the preset business content acquired by the acquiring unit 301;

[0138] The page generating unit 304 is used to integrate the first area content generated by the first content generating unit 302 and the second area content generated by the second content generating unit 303 using the preset partition container component to generate a target web page.

[0139] Furthermore, as a response to the above Figure 2 In addition to the implementation of the method shown in the figure, the embodiment of the present disclosure also provides another web page generation device based on partition layout, which is used for the above Figure 2 The device embodiment corresponds to the aforementioned method embodiment. For ease of reading, this device embodiment will not repeat the details of the aforementioned method embodiment one by one, but it should be clear that the device in this embodiment can correspond to all the contents of the aforementioned method embodiment. Figure 4 As shown, the device comprises:

[0140] The acquisition unit 301 is used to acquire preset service content;

[0141] A first content generating unit 302 is configured to fill the first area slot of the webpage of the preset partition container component according to the preset business content obtained by the obtaining unit 301 to obtain the first area content of the webpage;

[0142] A second content generating unit 303 is configured to generate second area content of a web page using a multi-label tab component in the preset partition container component according to the preset business content acquired by the acquiring unit 301;

[0143] The page generating unit 304 is used to integrate the first area content generated by the first content generating unit 302 and the second area content generated by the second content generating unit 303 using the preset partition container component to generate a target web page.

[0144] In an optional implementation manner, the first content generation unit 302 is specifically configured to:

[0145] Obtaining the service configuration content in the preset service content;

[0146] The webpage first area slot of the preset partition container component is filled according to the business configuration content to obtain the first area content of the webpage.

[0147] In an optional implementation, the business configuration content includes header interface interaction content, task configuration content, and bottom interface interaction content, and the first area slot includes a header slot, a dynamic card list slot, and a bottom slot; then the first content generation unit 302 fills the first area slot of the web page of the preset partition container component according to the business configuration content to obtain the first area content of the web page, specifically for:

[0148] Filling multiple header slots in the first area slot of the webpage according to the header interface interaction content in the business configuration content to obtain the header content of the webpage, wherein the header content includes a title, an operation button, and a filter item;

[0149] Filling multiple dynamic card list slots in the first area slot of the webpage according to the task configuration content in the business configuration content to obtain multiple card contents in the first area of ​​the webpage, wherein the card contents include a title, a picture, a description, and a status label;

[0150] According to the bottom interface interaction content in the business configuration content, multiple bottom slots in the first area slots of the web page are filled to obtain the bottom content of the web page, wherein the bottom content includes page turning, footer information and prompt information, and the multiple card contents are switched with the switching of the bottom content.

[0151] In an optional implementation manner, the second content generating unit 303 is specifically configured to:

[0152] Obtaining task tags and task details in the preset business content;

[0153] Based on the task label and the task details, the second area content of the webpage is generated using the multi-label tab component in the preset partition container component.

[0154] In an optional implementation manner, when the second content generating unit 303 generates the second area content of the webpage based on the task tag and the task details using the multi-label tab component in the preset partition container component, it is specifically used to:

[0155] According to the task label, a plurality of labels in the second area of ​​the webpage are generated by using the multi-label tab component in the preset partition container component, wherein each label corresponds to a content area;

[0156] According to the task details, the slots under each label are filled to obtain the content under each label, wherein the content includes business reports and user setting options, wherein the multiple labels and the content under the labels change with the selection status of the multiple card contents in the first area of ​​the web page.

[0157] In an optional implementation, after the page generation unit 304 generates the target web page, the device further includes a content modification unit 305, wherein the content modification unit 305 is specifically configured to:

[0158] If there is a modification request for the target webpage, determining the area to be adjusted of the target webpage according to the content to be adjusted, wherein the modification request includes the content to be adjusted and the category to be adjusted;

[0159] A content adjustment operation is performed on the area to be adjusted according to the content to be adjusted and the category to be adjusted.

[0160] In an optional implementation manner, when the content modification unit 305 performs a content adjustment operation on the area to be adjusted according to the content to be adjusted and the category to be adjusted, it is specifically configured to:

[0161] If the category to be adjusted is content addition, determining a target insertion position in a preset partition container component according to the area to be adjusted;

[0162] If there is an idle slot at the target insertion position, fill the content to be adjusted into the idle slot;

[0163] If there is no free slot at the target insertion position, creating a new slot at the target insertion position, and filling the content to be adjusted into the new slot;

[0164] or

[0165] If the category to be adjusted is content change, determining a target change slot in a preset partition container component according to the area to be adjusted;

[0166] Replace the content in the target change slot with the content to be adjusted.

[0167] Furthermore, the embodiment of the present disclosure also provides a storage medium, wherein the storage medium is used to store a computer program, wherein when the computer program is running, the device where the storage medium is located is controlled to execute the above Figure 1-2 The web page generation method based on partition layout described in.

[0168] Furthermore, the embodiment of the present disclosure also provides a processor, the processor is used to run a program, wherein the program executes the above Figure 1-2 The web page generation method based on partition layout described in.

[0169] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0170] It is understandable that the related features in the above methods and devices can be referenced to each other. In addition, the "first", "second" and the like in the above embodiments are used to distinguish the embodiments, but do not represent the advantages and disadvantages of the embodiments.

[0171] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0172] The algorithms and displays provided herein are not inherently related to any particular computer, virtual system or other device. Various general purpose systems may also be used together with the teachings based thereon. According to the above description, it is apparent that the structure required for constructing such systems is. In addition, the present disclosure is not directed to any particular programming language either. It should be understood that various programming languages ​​may be utilized to implement the disclosure described herein, and the description of the specific languages ​​above is intended to disclose the best mode of implementation of the present disclosure.

[0173] In addition, the memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0174] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0175] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0176] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0177] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0178] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0179] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0180] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0181] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0182] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0183] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A web page generation method based on partition layout, characterized in that: The method comprises: Get preset business content; According to the preset business content, the first area slot of the webpage of the preset partition container component is filled to obtain the first area content of the webpage; According to the preset business content, using the multi-label tab component in the preset partition container component to generate the second area content of the web page; The preset partition container component is used to integrate the first area content and the second area content to generate a target webpage.

2. The method according to claim 1, characterized in that According to the preset business content, the first area slot of the preset partition container component is filled to obtain the first area content of the webpage, including: Obtaining the service configuration content in the preset service content; The webpage first area slot of the preset partition container component is filled according to the business configuration content to obtain the first area content of the webpage.

3. The method according to claim 2, characterized in that The business configuration content includes header interface interaction content, task configuration content and bottom interface interaction content, and the first area slot of the webpage includes a header slot, a dynamic card list slot and a bottom slot; the first area slot of the webpage of the preset partition container component is filled according to the business configuration content to obtain the first area content of the webpage, including: Filling multiple header slots in the first area slot of the webpage according to the header interface interaction content in the business configuration content to obtain the header content of the webpage, wherein the header content includes a title, an operation button, and a filter item; Filling multiple dynamic card list slots in the first area slot of the webpage according to the task configuration content in the business configuration content to obtain multiple card contents in the first area of ​​the webpage, wherein the card contents include a title, a picture, a description, and a status label; According to the bottom interface interaction content in the business configuration content, multiple bottom slots in the first area slots of the web page are filled to obtain the bottom content of the web page, wherein the bottom content includes page turning, footer information and prompt information, and the multiple card contents are switched with the switching of the bottom content.

4. The method according to claim 1, characterized in that: Generating the second area content of the webpage using the multi-label tab component in the preset partition container component according to the preset business content includes: Obtaining task tags and task details in the preset business content; Based on the task label and the task details, the second area content of the webpage is generated using the multi-label tab component in the preset partition container component.

5. The method according to claim 4, characterized in that Based on the task label and the task details, using the multi-label tab component in the preset partition container component to generate the second area content of the webpage includes: According to the task label, a plurality of labels in the second area of ​​the webpage are generated by using the multi-label tab component in the preset partition container component, wherein each label corresponds to a content area; According to the task details, the slots under each label are filled to obtain the content under each label, wherein the content includes business reports and user setting options, wherein the multiple labels and the content under the labels change with the selection status of the multiple card contents in the first area of ​​the web page.

6. The method according to claim 1, characterized in that After generating the target webpage, the method further includes: If there is a modification request for the target webpage, determining the area to be adjusted of the target webpage according to the content to be adjusted, wherein the modification request includes the content to be adjusted and the category to be adjusted; A content adjustment operation is performed on the area to be adjusted according to the content to be adjusted and the category to be adjusted.

7. The method according to claim 6, characterized in that Performing a content adjustment operation on the area to be adjusted according to the content to be adjusted and the category to be adjusted includes: If the category to be adjusted is content addition, determining a target insertion position in a preset partition container component according to the area to be adjusted; If there is an idle slot at the target insertion position, fill the content to be adjusted into the idle slot; If there is no free slot at the target insertion position, creating a new slot at the target insertion position, and filling the content to be adjusted into the new slot; or If the category to be adjusted is content change, determining a target change slot in a preset partition container component according to the area to be adjusted; Replace the content in the target change slot with the content to be adjusted.

8. A web page generation device based on partition layout, characterized in that: The device comprises: An acquisition unit, used to acquire preset business content; A first content generating unit, configured to fill the first area slot of the webpage of the preset partition container component according to the preset business content acquired by the acquiring unit, so as to obtain the first area content of the webpage; A second content generating unit, configured to generate second area content of a web page by using a multi-label tab component in the preset partition container component according to the preset business content acquired by the acquiring unit; The page generating unit is used to integrate the first area content generated by the first content generating unit and the second area content generated by the second content generating unit by using the preset partition container component to generate a target web page.

9. A storage medium, characterized in that: The storage medium includes a stored program, wherein when the program is executed, the device where the storage medium is located is controlled to execute the web page generation method based on partition layout according to any one of claims 1 to 7.

10. A processor, characterized in that: The processor is used to run a program, wherein the program, when running, executes the web page generation method based on partition layout as described in any one of claims 1 to 7.

Images