Card container updating method, system, medium and electronic device

Through the card container update method, plug-in management and micro front-end framework are used to solve the problem that the home page entrance cannot be updated in time when system functions change, and the home page entrance is quickly upgraded, improving user experience and system flexibility.

CN118747079BActive Publication Date: 2025-05-13SHANGHAI HUIYUN XINZHI TECHNOLOGY CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202410901258.2
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2024-07-05
Publication Date
2025-05-13
Estimated Expiration
2044-07-05

AI Technical Summary

Technical Problem

When the functions of the existing B-end and C-end systems change, the homepage entrance cannot be updated in time, resulting in users being unable to quickly see the reflection of new functions or changes in the importance of functions.

Method used

Through the card container update method, obtain card plug-ins and container plug-ins, upload them to the plug-in management module, manage and configure containers and cards, and use the micro front-end framework to combine containers and cards to achieve a fast online upgrade of the homepage entrance.

Benefits of technology

There is no need for system deployment and upgrading services, which can achieve rapid online upgrades of the homepage entrance, improving user experience and system flexibility.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN118747079B_ABST
    Figure CN118747079B_ABST
Patent Text Reader

Abstract

The present application provides a card container update method, system, medium and electronic device. The card container update method includes: obtaining a card plug-in and a container plug-in, uploading the card plug-in and the container plug-in to the plug-in management module through the plug-in management page; the plug-in management module sends the card plug-in and the container plug-in to the card pool and the card container management module; configuring the container through the card container management module; the card container management module obtains the container and container plug-in information according to the container plug-in, and saves the container plug-in information to the database through the server; the card pool obtains the card and card plug-in information according to the card plug-in, and saves the card plug-in information to the database through the server; and displays the card and the container in a cardized form through the homepage entrance.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application belongs to the field of computer technology and relates to a card container updating method, system, medium and electronic device. Background Art

[0002] As time goes by, most B-end and C-end systems will have more and more functions. If the homepage is not updated in time, new functions cannot be displayed to users in time. After the importance of functions is adjusted, they cannot be reflected in time on the homepage. For example, an office system includes large production lines such as smart access, smart conference, smart space, and smart facilities. Smart access includes basic access applications, smart doorplates, smart parking, personnel attendance, smart duty desks, visitor registration, process approval and other applications; conferences include basic conference applications, management panorama, statistical analysis, smart hardware and other applications; space includes basic space applications, smart workstations, space dashboards, space costs and other applications; digital engines include public centers, data centers, IoT centers, application centers, configuration centers and other applications. How to quickly update the entrances that users see when functions change and quickly display the functions they need is an urgent problem to be solved. Summary of the invention

[0003] The purpose of the present application is to provide a card container update method, system, medium and electronic device, which can realize rapid online upgrade of the home page portal without deploying upgrade services for the system.

[0004] In a first aspect, the present application provides a card container updating method, characterized in that the card container updating method includes: obtaining a card plug-in and a container plug-in, and uploading the card plug-in and the container plug-in to a plug-in management module through a plug-in management page; the plug-in management module sends the card plug-in and the container plug-in to a card pool and a card container management module; configuring the container through the card container management module; the card container management module obtains container and container plug-in information according to the container plug-in, and saves the container plug-in information to a database through a server; the card pool obtains card and card plug-in information according to the card plug-in, and saves the card plug-in information to a database through a server; and displays the card and the container in a cardized form through a homepage entrance.

[0005] In an implementation of the first aspect, the process of displaying the card and the container in a carded form through the home page entrance includes: displaying the page base through the page layer of the home page entrance, displaying the card through the card layer of the home page entrance, and displaying the container through the container layer of the home page entrance.

[0006] In an implementation of the first aspect, the card plug-in and the container plug-in are added, updated, and / or deleted through the plug-in management page.

[0007] In an implementation of the first aspect, the card container management module obtains the container and container plug-in information according to the container plug-in, and saves the container plug-in information to the database through the server, including: the card container management module decompresses the container plug-in to obtain a container static folder, a card container access address, and container basic information; uploads the static folder, the card container access address, and the container basic information to the server; and saves the card container access address and the container basic information in the server to the database.

[0008] In an implementation of the first aspect, the card pool obtains cards and card plug-in information according to the card plug-in, and the process of saving the card plug-in information to a database through a server includes: the card pool decompresses the card plug-in to obtain a card static folder, a card preview image, a card access address, and a card basic information; uploading the card static folder, the card preview image, the card access address, and the card basic information to the server; and saving the card access address, the access address of the card preview image, and the card basic information in the server to the database.

[0009] In an implementation of the first aspect, the card container update method also includes: combining the container and the card using a micro-frontend framework, and loading the card through a card identifier configured in the container; adding a third-party component to the container, and processing the card by calling a response method of the container.

[0010] In an implementation of the first aspect, the process of the container loading the card according to different template identifiers includes: the container obtaining responsive template configuration information according to different template identifiers; and obtaining an access address of the card according to the template configuration information to load the card.

[0011] In a second aspect, the present application provides a card container update system, characterized in that the card container update system includes: an acquisition module, used to acquire a card plug-in and a container plug-in, and upload the card plug-in and the container plug-in to the plug-in management module through a plug-in management page; a plug-in management module, used to send the card plug-in and the container plug-in to a card pool and a card container management module; a configuration module, used to configure the container through the card container management module; a card container management module, used to acquire container and container plug-in information according to the container plug-in, and save the container plug-in information to a database through a server; a card pool, used to acquire card and card plug-in information according to the card plug-in, and save the card plug-in information to a database through a server; a display module, used to display the card and the container in a cardized form through a homepage entrance.

[0012] In a third aspect, the present application provides an electronic device, characterized in that the electronic device comprises: a memory on which a computer program is stored; and a processor, communicatively connected to the memory, for executing the computer program to implement the above-mentioned card container update method.

[0013] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, characterized in that the program implements the above-mentioned card container update method when executed by an electronic device.

[0014] As described above, the card container updating method, system, medium and electronic device described in the present application have the following beneficial effects:

[0015] The card container update method provided in the present application uploads the card plug-in and the container plug-in to the plug-in management module through the plug-in management page, and manages the card plug-in and the container plug-in through the plug-in management module. The card container management module can configure the container, and the card pool and the card container management module can process the card plug-in and the container plug-in respectively, and save the plug-in information to the database through the server, and display the card and container in the form of cards at the home page entrance. The card container update method of the present application can realize the rapid online upgrade of the home page entrance without deploying the upgrade service for the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 Shown is a process schematic diagram of the card container updating method described in an embodiment of the present application.

[0017] Figure 2 Shown is a structural diagram of the hierarchical splitting of the home page entrance as described in an embodiment of the present application.

[0018] Figure 3Shown is a schematic diagram of the structure of the card plug-in described in an embodiment of the present application.

[0019] Figure 4 Shown is a schematic diagram of the structure of the container plug-in described in an embodiment of the present application.

[0020] Figure 5 Shown is a schematic diagram of the result of the card layout described in an embodiment of the present application.

[0021] Figure 6 Shown is a schematic diagram of the structure of the plug-in management page described in an embodiment of the present application.

[0022] Figure 7 Shown is a process schematic diagram of the card container updating method described in an embodiment of the present application.

[0023] Figure 8 Shown is a process schematic diagram of the card container updating method described in an embodiment of the present application.

[0024] Fig. 9 Shown is a structural schematic diagram of the card container updating method described in an embodiment of the present application.

[0025] Fig.10 Shown is a process schematic diagram of the card container updating method described in an embodiment of the present application.

[0026] Fig.11 Shown is a schematic diagram of the card loading process described in an embodiment of the present application.

[0027] Fig.12 Shown is a structural schematic diagram of the template configuration page described in an embodiment of the present application.

[0028] Fig.13 Shown is a schematic diagram of the structure of the template table described in an embodiment of the present application.

[0029] Fig.14 Shown is a schematic diagram of the process of loading different templates described in an embodiment of the present application.

[0030] Fig.15 Shown is a structural schematic diagram of the card container updating system described in an embodiment of the present application.

[0031] Fig.16 Shown is a schematic diagram of the structure of an electronic device described in an embodiment of the present application.

[0032] Component number description

[0033] 1 Card container update system

[0034] 11 Get Module

[0035] 12 Plugin Management Module

[0036] 13 Card container management module

[0037] 14 Card Pool

[0038] 15 Configuration Module

[0039] 16 Display Module

[0040] 2 Electronic devices

[0041] 21 Memory

[0042] 22 Processor

[0043] Steps S11 to S16

[0044] Steps S21 to S23

[0045] Steps S31 to S33

[0046] Steps S41 to S42

[0047] Steps S51 to S52 DETAILED DESCRIPTION

[0048] The following describes the embodiments of the present application through specific examples, and those skilled in the art can easily understand other advantages and effects of the present application from the contents disclosed in this specification. The present application can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present application. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict.

[0049] It should be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present application, and thus the drawings only show components related to the present application rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed at will, and the component layout may also be more complicated.

[0050] As time goes by, most B-end and C-end systems will have more and more functions. If the homepage is not updated in time, new functions cannot be displayed to users in time. After the importance of functions is adjusted, they cannot be reflected in time on the homepage. For example, an office system includes large production lines such as smart access, smart conference, smart space, and smart facilities. Smart access includes basic access applications, smart doorplates, smart parking, personnel attendance, smart duty desks, visitor registration, process approval and other applications; conferences include basic conference applications, management panorama, statistical analysis, smart hardware and other applications; space includes basic space applications, smart workstations, space dashboards, space costs and other applications; digital engines include public centers, data centers, IoT centers, application centers, configuration centers and other applications. How to quickly display the functions required by users; how to quickly update the entrances that users see when functions change; how to quickly respond to personalized customer requirements with little or no impact on the overall system.

[0051] At least to address the above-mentioned problems, the following embodiments of the present application provide a card container updating method, system, medium and electronic device.

[0052] The technical solutions in the embodiments of the present application will be described in detail below in conjunction with the drawings in the embodiments of the present application.

[0053] Figure 1 The following is a schematic diagram of the card container updating method in one embodiment of the present application. Figure 1 As shown, the card container updating method includes:

[0054] S11, obtain the card plug-in and the container plug-in, and upload the card plug-in and the container plug-in to the plug-in management module through the plug-in management page. Among them, the card plug-in is used to build and manage the card interface, and the container plug-in is used to manage and organize plug-ins, and can accommodate multiple cards. The card plug-in and the container plug-in are pluggable components. By designing the card plug-in and the container plug-in, the system can be updated and expanded online.

[0055] S12, the plug-in management module sends the card plug-in and the container plug-in to the card pool and card container management module. The plug-in management module can manage the card plug-in and the container plug-in. The plug-in management module allows the system to expand functions by adding new plug-ins, and can dynamically add or remove plug-ins according to actual needs without modifying the system core code.

[0056] S13, configuring the container through the card container management module. The card container management module can configure containers and cards according to different needs and user experience requirements.

[0057] S14, the card container management module obtains the container and container plug-in information according to the container plug-in, and saves the container plug-in information into a database through a server.

[0058] S15, the card pool obtains the card and card plug-in information according to the card plug-in, and saves the card plug-in information into a database through a server.

[0059] S16, displaying the card and the container in a card form through a home page entrance.

[0060] According to the above description, the card container update method provided by the present application uploads the card plug-in and the container plug-in to the plug-in management module through the plug-in management page, and manages the card plug-in and the container plug-in through the plug-in management module. The card container management module can configure the container, and the card pool and the card container management module can process the card plug-in and the container plug-in respectively, and save the plug-in information to the database through the server, and display the card and container in the form of cards at the home page entrance. The card container update method of the present application can realize the rapid online upgrade of the home page entrance without deploying the upgrade service for the system.

[0061] Figure 2 The diagram shows a schematic diagram of the structure of the hierarchical splitting of the home page entrance in one embodiment of the present application. Figure 2 As shown, the process of displaying the card and the container in a card form through the home page entrance includes: displaying the page base through the page layer of the home page entrance, displaying the card through the card layer of the home page entrance, and displaying the container through the container layer of the home page entrance. The home page entrance is disassembled, and the cards, containers and pages are displayed in layers, which reduces the complexity of development and deployment.

[0062] Figure 3 and Figure 4 The diagram shows the structure of the card plug-in and the container plug-in in one embodiment of the present application. Figure 3 and Figure 4 As shown, the card and container are designed as plug-ins to obtain the card plug-in and container plug-in. The card plug-in includes a card preview folder, a card static folder (generated by front-end project packaging), and a card plug-in description file. The card plug-in description file includes basic information of the card, such as card ID, card size, etc. The container plug-in includes a container static folder (generated by front-end project packaging) and a container plug-in description file. Among them, the card plug-in and container plug-in exist in the form of compressed packages.

[0063] Exemplarily, the internal file structure of the card plug-in includes:

[0064] previewImage

[0065] card1.png

[0066] ·card2.png

[0067] ·content

[0068] index.html

[0069] ·static

[0070] size2

[0071] index.html

[0072] ·static

[0073] plugin.yml

[0074] Among them, previewImage is the card preview image folder, card1.png and card2.png are the images of the card, content is the static folder, index.html is the homepage file, static is the static folder, size2 is the size of the card, and plugin.yml is the card plug-in description file.

[0075] The internal file structure of the container plugin includes:

[0076] ·content

[0077] index.html

[0078] ·static

[0079] plugin.yml

[0080] Among them, content is the static folder of the container, index.html is the homepage file, static is the static folder, and plugin.yml is the container plug-in description file.

[0081] The card displays card information in the form of a window. The card information can be scene dynamic information, basic information of the object, statistical and analytical data, matters of concern to the user, reminders of pending events, etc., but this application is not limited to this. Cards can be divided into different types according to the card information, such as application cards, scene cards, object cards, event cards, other cards, etc. The cards are decoupled and maintained independently, ensuring the flexibility of product development.

[0082] A card plugin contains a card. The same card can have multiple sizes. The size of the card can be dynamically adjusted according to time progress and importance.

[0083] Exemplarily, the process of dynamically adjusting according to the time schedule includes: when the reminder time is far from the current time, for example, a reminder for an event at 1 p.m. at 9 a.m., the card size can be set to a smaller 1*1 size. As the reminder time approaches, for example, at 11 a.m., the card size can gradually increase, for example, to 2*2 size, to remind the user of the upcoming event. When the reminder time arrives, for example, at 1 p.m., the card size can be further increased, for example, to 4*4 size, and highlighted by highlighting, vibration, etc., to ensure that the user does not miss important events.

[0084] Exemplarily, the process of dynamic adjustment according to importance includes: for matters of lower importance, such as reminders to read articles, the card size can be set to a smaller 1*1 size, and a concise text description is provided. For matters of higher importance, such as meeting reminders, the card size can be set to a larger 2*2 or 3*3 size, and detailed information, such as the meeting topic, time, location, etc., is provided. For urgent matters, such as urgent task reminders, the card size can be set to the largest 4*4 size, and highlighted in red, flashing, etc., to ensure that users can notice it at the first time.

[0085] The configuration of the container includes the width and height of the container, the background color of the container, and the margins and spacing of the container. The configuration of the cards to be presented in the container includes the type of card to be displayed, the layout of the card, the interaction settings between the card and the container, the position order of the card, and the card size. Among them, the position order of the card can be intelligently sorted according to the frequency of use. The layout of the card includes waterfall flow and grid. Please refer to Figure 5 , the layout of the cards is displayed in a waterfall flow style, that is, each card has a different width and height.

[0086] The size of the card and container can be adjusted in time according to the proportion of the page, ensuring that the card can be displayed normally when the page is zoomed or full screen, and the proportion can be flexibly adjusted to adapt to different page sizes and user needs. This design ensures that no matter how the page is zoomed or switched to full screen mode, the card can remain displayed normally without layout confusion or information loss. And the card can be pinned or unpinned by calling the container response method.

[0087] For example, when a page needs to implement an approval function, the relevant approval card can automatically adjust its position and be placed at the top of the page or in a designated prominent position for users to quickly access and operate. The container response mechanism can ensure that the approval card is at the top when the page is loaded, improving the efficiency and convenience of the approval process. During a specific event, the relevant event card can be automatically placed at the top based on the activity popularity and user participation so that more users can notice and participate. Once the activity popularity decreases or the activity ends, the card can be automatically unpinned and no longer takes up valuable page space, keeping the page information up to date and relevant.

[0088] By automatically placing important cards on top, users can find the information they need faster, improving operational efficiency. Dynamically adjust the card position based on user behavior and content popularity to enhance the interactivity and attractiveness of the page. Flexible adjustment of the card position based on page proportion and content importance improves the coordination and aesthetics of the overall page design.

[0089] Figure 6 The diagram shows the structure of the plug-in management page in one embodiment of the present application. Figure 6 As shown, the card plug-in and the container plug-in are uploaded to the plug-in management module through the plug-in management page. The plug-in management module divides the card plug-in and the container plug-in into a card container management module and a card pool according to the plug-in type.

[0090] Figure 7 The following is a schematic diagram of the card container updating method in one embodiment of the present application. Figure 7 As shown, the process of the card container management module obtaining the container static folder, the card container access address, and the container basic information according to the container plug-in includes:

[0091] S21, the card container management module decompresses the container plug-in to obtain the container static folder, the card container access address, and the container basic information. After receiving the container plug-in, the card container management module decompresses the container plug-in to obtain the container static folder, the card container access address, and the container basic information.

[0092] S22, upload the static folder, the card container access address, and the basic container information to the server. If a container static folder already exists on the server, overwrite the old container static folder with a new container static folder. If the container static folder does not exist on the server, upload the new container static folder to the server. The server is, for example, an Nginx server.

[0093] S23, saving the card container access address and the container basic information in the server to the database.

[0094] Figure 8 The following is a schematic diagram of the card container updating method in one embodiment of the present application. Figure 8 As shown, the card pool obtains the card and the card plug-in information according to the card plug-in, and the process of saving the card plug-in information to the database through the server includes:

[0095] S31, the card pool decompresses the card plug-in to obtain a card static folder, a card preview image, a card access address, and basic card information. After receiving the card plug-in, the card pool decompresses the card plug-in to obtain the card static folder, the card preview image, the card access address, and basic card information.

[0096] S32, upload the card static folder, the card preview image, the card access address, and the card basic information to the server. Upload the card static folder and the card preview image to the card directory on the Nginx server, and determine whether the card information exists on the Nginx server according to the unique identifier of the card. If it exists, the new card information will be used to overwrite the old card information. If it does not exist, the new card information will be uploaded to the Nginx server.

[0097] S33, saving the card access address in the server, the access address of the card preview image, and the basic information of the card to the database.

[0098] Use the plugin management page to add, update and / or delete the card plugin and container plugin. Fig. 9 When a plug-in is deleted through the plug-in management page, the plug-in management module notifies the card container management module and / or card pool according to the plug-in type. The card container management module and / or card pool deletes the static folders and preview images on the server according to the information recorded in the local database, and deletes the corresponding card information and / or container information in the local database. If the deleted card plug-in has been used in the container, the card information in the container configuration is automatically deleted. Through page operations, the card plug-in and container plug-in can be quickly added, updated, and deleted without deploying upgrade services, which realizes the flexibility of system expansion.

[0099] Fig.10 The following is a schematic diagram of the card container updating method in one embodiment of the present application. Fig.10 As shown, the card container updating method further includes:

[0100] S41, combine the container and the card using the micro-frontend framework, and load the card through the card identifier configured in the container. Combine the container and the card using the micro-frontend framework, use the container as the main application and the card as the sub-application, and load the card by obtaining the access address of the card according to the card ID configured in the container. The card ID is the unique identifier of the card. The micro-frontend framework can avoid the need to re-develop and repackage when loading and adjusting the page. The back-end upload is a hot-swap update that does not require adjustment. When displaying on the front end, the micro-frontend framework needs to be used. The micro-frontend framework is used to load the card content according to the card address in the container configuration. When uploading content, only the card content is updated, and the card address does not need to be updated. The card address in the server does not change. After uploading, the homepage can display the corresponding page, which realizes the card replacement and update without user perception and without the need for system upgrades.

[0101] S42, adding a third-party component to the container, and processing the card by calling a response method of the container.

[0102] When a card needs to implement a specific function, it only needs to call the third-party components that have been loaded in the container, without the need to load each card separately. The entire page only needs to load the third-party component once, avoiding page resource redundancy and jamming caused by each card loading its own third-party component, significantly improving the card loading speed and page response efficiency. Third-party components include VUE, Echart (Enterprise Charts), and ElementUI (Element User Interface). Cards in the container load third-party components through memory sharing, and the cards receive third-party components passed by the container by calling the container response method. Container response methods include bootstrap method, mount method, and unmount method.

[0103] Cards can use containers to implement various interactive functions such as pinning, unpinning, changing size, and increasing popularity, without the need for each card to implement these functions separately, which improves the card loading speed and ensures the consistency and stability of the page.

[0104] Containers can associate pages and cards, playing a connecting role. As a component embedded in the WEB or H5 page, the container is responsible for dynamically loading and managing various cards, laying out and sorting the cards according to the preset template configuration. At the same time, the container also provides an open interface for cards and pages, handles various requests from cards and pages, ensures the flow and processing of information, and not only makes the interaction between the two more flexible and efficient, but also maintains the overall stability and performance of the system.

[0105] Fig.11The following is a schematic diagram of the process of loading a card in one embodiment of the present application. Fig.11 As shown, the process of loading the card according to different template identifiers in the container includes:

[0106] S51, the container obtains responsive template configuration information according to different template identifiers. Fig.12 and 13 The template configuration information and template table are the corresponding templates. The template configuration information includes the template number, layout mode (waterfall flow, grid), number of rows and columns, which cards to add, background color, margins, spacing, etc.

[0107] S52, obtain the access address of the card according to the template configuration information to load the card. The cards of related topics are concentrated in the same specific template. The configuration information of the template includes the unique identifier of each card, that is, the card ID. The access address of each card can be efficiently queried through the card ID, and the microservice framework can be used to dynamically load the card. Please refer to Fig.14 , the container can read the template content of the employee homepage and the administrative homepage respectively. Among them, the employee homepage template loads cards in a grid layout, and displays card 1 in a bar chart format by calling a third-party component, and card 2 in a fan chart format. The administrative homepage template loads cards in a waterfall layout, and displays card 1 in a table format by calling a third-party component, and card 2 in a calendar format.

[0108] The container is deployed in the page by overwriting the installation method, and the access address of the container does not change. During the container update process, the new container version will directly overwrite the old container, thus achieving seamless upgrade. This overwriting installation strategy ensures that the addition, deletion and update of cards and containers can be carried out smoothly without restarting or redeploying system services, greatly simplifying the maintenance process and improving the availability and flexibility of the system.

[0109] In one embodiment of the present application, container plug-ins and card plug-ins can be integrated into the page base by loading the container address. Any page base that needs to be integrated can load the container address by using iFrame, realizing online upgrade and addition and deletion of container plug-ins and card plug-ins in any page base.

[0110] In summary, the card container update method provided in the present application can card the home page entrance, and at the same time, plug-in design containers and cards to obtain container plug-ins and card plug-ins, combine containers and cards through the micro-front-end framework, upload card plug-ins and container plug-ins to the plug-in management module through the plug-in management page, and manage card plug-ins and container plug-ins through the plug-in management module. The card container management module can configure the container, and the card pool and card container management module can process the card plug-in and container plug-in respectively, and save the plug-in information to the database through the server. The card container update method of the present application ensures that when card plug-ins and container plug-ins are added and updated, there are independent plug-in management modules to accept and parse them. Through the micro-front-end framework and templated configuration container display content, any page base can load containers and cards, without the need to deploy upgrade services for the system, and completely hot-swappable updates, which realizes the rapid online upgrade of the home page entrance, greatly improves the response speed, and reduces the implementation complexity.

[0111] The protection scope of the card container updating method described in the embodiment of the present application is not limited to the execution order of the steps listed in the present embodiment. All solutions implemented by adding, reducing or replacing steps in the prior art based on the principles of the present application are included in the protection scope of the present application.

[0112] The embodiment of the present application also provides a card container update system, which can implement the card container update method described in the present application. However, the implementation device of the card container update method described in the present application includes but is not limited to the structure of the card container update system listed in the present embodiment. All structural deformations and replacements of the prior art made according to the principles of the present application are included in the protection scope of the present application.

[0113] Fig.15 The structure diagram of the card container updating system in one embodiment of the present application is shown. Fig.15As shown, the card container update system 1 includes: an acquisition module 11, a plug-in management module 12, a card container management module 13, a card pool 14, a configuration module 15, and a display module 16. Among them, the acquisition module 11 is used to acquire a card plug-in and a container plug-in, and upload the card plug-in and the container plug-in to the plug-in management module through the plug-in management page. The plug-in management module 12 is used to send the card plug-in and the container plug-in to the card pool and the card container management module. The card container management module 13 is used to acquire container and container plug-in information according to the container plug-in, and save the container plug-in information to the database through the server. The card pool 14 is used to acquire card and card plug-in information according to the card plug-in, and save the card plug-in information to the database through the server. The configuration module 15 is used to configure the container through the card container management module. The display module 16 is used to display the card and the container in a cardized form through the home page entrance.

[0114] It should be noted that Fig.15 The modules in the card container updating system 1 are Figure 1 The steps in the card container updating method correspond to each other and are not described in detail here.

[0115] In the several embodiments provided in the present application, it should be understood that the disclosed system, device or method can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of modules / units is only a logical function division. There may be other division methods in actual implementation, such as multiple modules or units can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or modules or units, which can be electrical, mechanical or other forms.

[0116] The modules / units described as separate components may or may not be physically separated, and the components displayed as modules / units may or may not be physical modules, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules / units may be selected according to actual needs to achieve the purpose of the embodiments of the present application. For example, the functional modules / units in the various embodiments of the present application may be integrated into one processing module, or each module / unit may exist physically separately, or two or more modules / units may be integrated into one module / unit.

[0117] Those of ordinary skill in the art should further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0118] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by the processor, the card container update method provided by the embodiment of the present application is implemented. A person of ordinary skill in the art can understand that all or part of the steps in the method of implementing the above embodiment can be completed by instructing the processor through a program, and the program can be stored in a computer-readable storage medium, and the storage medium is a non-transitory medium, such as a random access memory, a read-only memory, a flash memory, a hard disk, a solid-state hard disk, a magnetic tape, a floppy disk, an optical disc, and any combination thereof. The above storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or a data center that includes one or more available media. The available medium can be a magnetic medium (for example, a floppy disk, a hard disk, a tape), an optical medium (for example, a digital video disc (DVD)), or a semiconductor medium (for example, a solid-state disk (SSD)), etc.

[0119] The embodiment of the present application may also provide an electronic device. Fig.16 The diagram shows a schematic diagram of the structure of an electronic device 2 in an embodiment of the present application. Fig.16 As shown, in this embodiment, the electronic device 2 includes a memory 21 and a processor 22 .

[0120] The memory 21 is used to store computer programs. In some possible implementations, the memory 21 may include: ROM, RAM, a disk, a USB flash drive, a memory card, or an optical disk, etc., various media that can store program codes.

[0121] In the embodiment of the present application, the memory 21 may include a computer system readable medium in the form of a volatile memory, such as a RAM and / or a cache memory. The electronic device 2 may further include other removable / non-removable, volatile / non-volatile computer system storage media. The memory 21 may include at least one program product having a set (e.g., at least one) of program modules, which are configured to perform the functions of the various embodiments of the present application.

[0122] The processor 22 is connected to the memory 21 and is used to execute the computer program stored in the memory 21 so that the electronic device 2 executes the card container updating method.

[0123] Exemplarily, the processor 22 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc. In other embodiments, the processor 22 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.

[0124] The descriptions of the processes or structures corresponding to the above-mentioned figures have different emphases. For parts that are not described in detail in a certain process or structure, please refer to the relevant descriptions of other processes or structures.

[0125] The above embodiments are merely illustrative of the principles and effects of the present application and are not intended to limit the present application. Anyone familiar with the technology may modify or change the above embodiments without violating the spirit and scope of the present application. Therefore, all equivalent modifications or changes made by a person of ordinary skill in the art without departing from the spirit and technical ideas disclosed in the present application shall still be covered by the claims of the present application.

Claims

1. A card container updating method, characterized in that: The card container updating method comprises: Obtain a card plug-in and a container plug-in, and upload the card plug-in and the container plug-in to a plug-in management module through a plug-in management page; The plug-in management module sends the card plug-in and the container plug-in to the card pool and card container management module; The card container management module obtains the container and container plug-in information according to the container plug-in, and saves the container plug-in information to the database through the server; the process of the card container management module obtaining the container plug-in information according to the container plug-in includes: the card container management module decompresses the container plug-in to obtain the container static folder, the card container access address, and the container basic information; The card pool obtains the card and card plug-in information according to the card plug-in, and saves the card plug-in information to a database through a server; the process of the card pool obtaining the card plug-in information according to the card plug-in includes: the card pool decompresses the card plug-in to obtain a card static folder, a card preview image, a card access address, and basic card information; and configures the container through the card container management module; The card and the container are displayed in a card form through the homepage entrance; the sizes of the card and the container are adjusted in time according to the proportion of the page; based on the container, the card dynamically adjusts the size, position order, and automatic top placement of the card according to time progress, importance, frequency of use, and content popularity; Adding a third-party component to the container, the card loads the third-party component in a memory sharing manner, and the card receives the third-party component transferred by the container by calling a container response method; The container and the card are combined by using a micro front-end framework, the container associates the page with the card, the container is the main application, the card is the sub-application, and the container dynamically loads and manages the card according to the template configuration information; The container obtains the card identifier based on the template configuration information, obtains the access address of the card using the card identifier based on the microservice framework, and displays the display mode of the card through the third-party component.

2. The card container updating method according to claim 1, characterized in that: The process of displaying the card and the container in card form through the home page entrance includes: displaying the page base through the page layer of the home page entrance, displaying the card through the card layer of the home page entrance, and displaying the container through the container layer of the home page entrance.

3. The card container updating method according to claim 1, characterized in that: The card plug-in and the container plug-in are added, updated and / or deleted through the plug-in management page.

4. The card container updating method according to claim 1, characterized in that: The process of the card container management module saving the container plug-in information to the database through the server includes: The static folder, the card container access address, and the basic container information are uploaded to the server; and the card container access address and the basic container information in the server are saved to the database.

5. The card container updating method according to claim 1, characterized in that: The process of the card pool saving the card plug-in information into the database through the server includes: Upload the card static folder, the card preview image, the card access address, and the card basic information to the server; The card access address in the server, the access address of the card preview image, and the basic information of the card are saved in the database.

6. The card container updating method according to claim 1, characterized in that: The process of loading the card according to different template identifiers by the container includes: The container obtains the corresponding template configuration information according to different template identifiers; The card is loaded by acquiring the access address of the card according to the template configuration information.

7. A card container updating system, characterized in that: The card container updating system comprises: An acquisition module, used to acquire a card plug-in and a container plug-in, and upload the card plug-in and the container plug-in to the plug-in management module through a plug-in management page; A plug-in management module, used for sending the card plug-in and the container plug-in to a card pool and a card container management module; The card container management module is used to obtain the container and container plug-in information according to the container plug-in, and save the container plug-in information to the database through the server; the process of the card container management module obtaining the container plug-in information according to the container plug-in includes: the card container management module decompresses the container plug-in to obtain the container static folder, the card container access address, and the container basic information; The card pool is used to obtain the card and card plug-in information according to the card plug-in, and save the card plug-in information to the database through the server; the process of the card pool obtaining the card plug-in information according to the card plug-in includes: the card pool decompresses the card plug-in to obtain the card static folder, card preview image, card access address, and card basic information; A configuration module, used to configure the container through the card container management module; A display module is used to display the card and the container in a card form through the homepage entrance; the size of the card and the container is adjusted in time according to the proportion of the page; based on the container, the card dynamically adjusts the size, position order, and automatic top placement of the card according to time progress, importance, frequency of use, and content popularity; A card call response module is used to combine the container and the card using a micro front-end framework, wherein the container associates the page with the card, the container is a main application, the card is a sub-application, and the container dynamically loads and manages the card according to the template configuration information; Adding a third-party component to the container, the card loads the third-party component in a memory sharing manner, and the card receives the third-party component transferred by the container by calling a container response method; The container obtains the card identifier based on the template configuration information, obtains the access address of the card using the card identifier based on the microservice framework, and displays the display mode of the card through the third-party component.

8. An electronic device, characterized in that: The electronic device comprises: a memory having a computer program stored thereon; A processor is communicatively connected to the memory, and is used to execute the computer program to implement the card container updating method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by an electronic device, the card container updating method according to any one of claims 1 to 6 is implemented.

Citation Information

Patent Citations

  • Page layout loading method, client and server

    CN108268296A

  • Page generation method and device and storage medium

    CN114064161A