Efficient App dynamic layout visual configuration platform and device and storage medium

Abstract

The invention discloses an efficient App dynamic layout visual configuration platform and device and a storage medium, and relates to the technical field of computer visual development, the platform comprises a mobile terminal, an intelligent DNS and a comprehensive management system, and the mobile terminal is connected with the intelligent DNS through a wireless network. When the efficient App dynamic layout visual configuration platform and device and the storage medium are used, a hot loading mechanism in a starting stage is provided for page layout configuration, so that dynamic updating of page layout is realized, quick online and backspacing of the App page layout can be realized, safety and stability are provided for App operation, and the user experience is improved. According to the method, the front-end page layout and the back-end service configuration are synchronously updated by providing a visual configuration interface, so that the configuration efficiency and accuracy are remarkably improved, the version management is simplified, and the efficiency and flexibility of daily operation are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of computer visualization development, and particularly to an efficient App dynamic layout visualization configuration platform, device, and storage medium. Background Art

[0002] Mobile applications refer to computer software applications designed to run on smartphones, tablets, and other mobile devices. Mobile applications include personal and enterprise-level applications. Personal-level applications mainly serve individual users to meet their various needs such as entertainment, social interaction, learning, and life; enterprise-level applications mainly serve enterprises to help them improve and expand their information application scenarios, improve management efficiency, and reduce operating costs, etc. The value of an App depends to a large extent on the form of value delivery, such as page layout. A good page layout can centrally reflect the value demands of customers, which is also an effective means of acquiring customers and maintaining customer relationships. Regarding the change of the App page layout, as a native means, since the change plan is solidified in the application in the form of code, the basic condition for delivery is the release of a new version; while H5, as an effective supplement to the App's presentation form, due to its flexible page design and resource release mode, can to a certain extent make up for the deficiencies of the App's native version.

[0003] However, the conventional layout scheme is solidified in the client in a hard-coded manner, and the App generally adopts the mode of releasing new versions in the process of responding to the market. In this process, in addition to the necessary R & D, testing, deployment, and release stages, it also involves necessary links such as the approval of the external application market and the operation and delivery strategy, which will lead to insufficient agility in the whole process, poor value performance, and then low customer stickiness and easy customer loss; and H5 is loaded and presented in the App in the form of a resource. In this scenario, H5 not only undertakes the responsibility of page layout but also has to take into account many embedded business logics. Therefore, the resource volume is relatively large and the traffic proportion is high. Then, during the peak period of server traffic, H5, as the App's home page, is prone to failures such as incomplete content display, blank screen, and malfunction due to incomplete loading of some resources, thus affecting the use of the App. Summary of the Invention

[0004] The purpose of the present invention is to provide an efficient App dynamic layout visualization configuration platform, device, and storage medium to solve the problems raised in the above background art.

[0005] To achieve the above object, the present invention provides the following technical solutions: An efficient App dynamic layout visualization configuration platform, device, and storage medium, including a mobile terminal, an intelligent DNS, and an integrated management system. The mobile terminal is connected to the intelligent DNS through a wireless network, and the mobile terminal internally is provided with Guosheng Tong native module, Guosheng Tong H5 module, and third-party module. The mobile terminal is connected to CDNA through the Guosheng Tong native module, and CDNA is connected to CDNB through a local area network. Both CDNA and CDNB are connected to a resource server through a wireless network, and both CDNA and CDNB are connected to a firewall through a local area network. The mobile terminal is connected to a third-party service through the third-party module. The resource server is connected to the integrated management system through a local area network, and the integrated management system includes a front-end H5, a server side, and a persistence module.

[0006] Preferably, the front-end H5 includes a page layout design module. The server side internally is provided with a page layout service module, and the output end of the page layout service module is sequentially connected to static resource local persistence, artifact publishing, and data storage in the database. The persistence module includes a disk and a database main body. The artifact publishing is connected to a NAS through a wireless network.

[0007] Preferably, the static resource local persistence is connected to the disk, the data storage in the database is connected to the database main body, the resource server is connected to the NAS through a wireless network, and the mobile terminal is connected to the resource server through the Guosheng Tong H5 module.

[0008] Preferably, the front-end H5 uses the Vue framework to simulate the layout settings required by the native side. The server side uses the SpringMVC service architecture to respond to service logic. The persistence module is a storage layer, and the storage layer respectively uses the relational database MySQL to store the current design draft and the published snapshot, and uses the NAS to store the published artifacts. The counterweight resources are exposed through a static server, such as an Nginx server and an Apache server.

[0009] Preferably, the mobile terminal provides a hot loading mechanism in the startup stage for page layout configuration, so as to achieve dynamic update of the page layout. The integrated management system is a management platform, and the integrated management system is the core of the App dynamic layout visualization configuration, used for page layout design, management, deployment, and publishing, as well as version control and publishing rollback. The resource server is a publishing window for resources, and the mobile terminal directly interacts with it during startup to obtain page layout configuration information.

[0010] Preferably, the intelligent DNS is an intelligent domain name resolution system, whose core objective is to optimize network resource allocation and user experience through intelligent decision-making. The intelligent DNS architecture includes a resolution engine, a data collection layer, and a policy configuration center, and the intelligent DNS has a dynamic response mechanism.

[0011] Preferably, CDNA and CDNB are distributed network architectures, whose core objective is to reduce the load on the source server by optimizing the content distribution path. CDNA and CDNB have the characteristics of reducing latency, improving bandwidth utilization, and enhancing reliability.

[0012] Preferably, the NAS is a data storage server, and the NAS is connected to the management platform and the resource server. The page layout design module includes a layout designer, a version maintenance module, and a publishing module. The firewall is a network security system and is an important part of the network security field.

[0013] Compared with the prior art, the beneficial effects of the present invention are as follows: When the efficient App dynamic layout visual configuration platform, device, and storage medium are used, by providing a hot loading mechanism in the startup phase for page layout configuration, the dynamic update of the page layout is realized, and the quick online and rollback of the App page layout can be achieved, providing security and stability for the operation of the App. Then, by providing an intuitive visual configuration interface, the synchronous update of the front-end page layout and the back-end service configuration is realized, thereby significantly improving the efficiency and accuracy of configuration, while simplifying version management, and thus enhancing the efficiency and flexibility of daily operations. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] Figure 1 is a schematic structural diagram of the overall architecture of the present invention; Figure 2 is a schematic structural diagram of the resource server process of the present invention; Figure 3 is a schematic structural diagram of the integrated management system of the present invention.

[0015] In the figure: 1. Mobile terminal; 2. Intelligent DNS; 3. CDNA; 4. CDNB; 5. Resource server; 6. Firewall; 7. Third-party service; 8. Integrated management system; 9. Front-end H5; 10. Server; 11. Persistence module; 12. Page layout design module; 13. Page layout service module; 14. Static resource local persistence; 15. Artifact release; 16. Data storage; 17. Disk; 18. Database; 19. NAS. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0016] The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0017] Please refer to Figures 1 - 3, the present invention provides a technical solution: an efficient App dynamic layout visualization configuration platform, device, and storage medium, including a mobile terminal 1, an intelligent DNS 2, and a comprehensive management system 8. The mobile terminal 1 is connected to the intelligent DNS 2 through a wireless network, and the mobile terminal 1 is internally provided with a Guosheng Tong native module, a Guosheng Tong H5 module, and a third-party module. The mobile terminal 1 is connected to a CDNA 3 through the Guosheng Tong native module, and the CDNA 3 is connected to a CDNB 4 through a local area network. Both the CDNA 3 and the CDNB 4 are connected to a resource server 5 through a wireless network, and both the CDNA 3 and the CDNB 4 are connected to a firewall 6 through a local area network. The mobile terminal 1 is connected to a third-party service 7 through the third-party module. The resource server 5 is connected to the comprehensive management system 8 through a local area network, and the comprehensive management system 8 includes a front-end H5 9, a server 10, and a persistence module 11; the front-end H5 9 includes a page layout design module 12. The server 10 is internally provided with a page layout service module 13, and the output end of the page layout service module 13 is sequentially connected to a static resource local persistence 14, an artifact release 15, and a data storage in the database 16. The persistence module 11 includes a disk 17 and a database main body 18. The artifact release 15 is connected to a NAS 19 through a wireless network; the static resource local persistence 14 is connected to the disk 17, the data storage in the database 16 is connected to the database main body 18, the resource server 5 is connected to the NAS 19 through a wireless network, and the mobile terminal 1 is connected to the resource server 5 through the Guosheng Tong H5 module; the front-end H5 9 uses the Vue framework to simulate and implement the layout settings required by the native end. The server 10 uses the SpringMVC service architecture to respond to service logic. The persistence module 11 is the storage layer, and the storage layer respectively uses the relational database MySQL to store the current design draft and the release snapshot, and uses the NAS 19 to store the released artifacts. The counterweight resources are exposed through a static server, such as an Nginx server and an Apache server; the mobile terminal 1 provides a hot loading mechanism during the startup phase for page layout configuration, thereby realizing the dynamic update of the page layout. The comprehensive management system 8 is a management platform, and the comprehensive management system 8 is the core of the App dynamic layout visualization configuration, used for page layout design, management, deployment, and release, as well as version control and release rollback. The resource server 5 is the release window of resources, and the mobile terminal 1 directly interacts with it during startup to obtain page layout configuration information; the intelligent DNS 2 is an intelligent domain name resolution system, and its core goal is to optimize network resource allocation and user experience through intelligent decision-making. The intelligent DNS 2 architecture includes a parsing engine, a data collection layer, and a policy configuration center, and the intelligent DNS 2 has a dynamic response mechanism; the CDNA 3 and the CDNB 4 are distributed network architectures, and their core goal is to reduce the load on the source server by optimizing the content distribution path. The CDNA 3 and the CDNB 4 have the characteristics of reducing latency, improving bandwidth utilization, and enhancing reliability;NAS19 is a data storage server, and NAS19 is connected to the management platform and the resource server 5. The page layout design module 12 includes a layout designer, a version maintenance module and a publishing module. The firewall 6 is a network security system, which is an important part of the network security field. In order to solve the performance and traffic problems, the combination mode of intelligent DNS2, CDNA3 and CDNB4 is used to accelerate the access speed. ;

[0018] In specific implementation, during the use of the App dynamic layout visualization configuration platform and device and storage medium, in order to speed up the response speed of the APP and improve the user experience, because the mobile terminal 1 is connected to the intelligent DNS2, the intelligent DNS2 first analyzes various factors of the user request in real time, such as geographic location, network status, server load, etc. Geographic location resolution: returning the nearest server through user IP positioning; network quality optimization: real-time detection of link delays, and selection of the fastest responding node; load balancing: allocating traffic according to server load conditions to avoid single-point overload, and then dynamically returning the optimal server IP address to improve access speed, achieve load balancing or disaster recovery backup, and then when the server address is transmitted to the mobile terminal 1, the content is cached to a server node closer to the user through CDNA3 and CDNB4, which speeds up content transmission, reduces latency, and reduces the load on the source server, because CDNA3 and CDNB4 are composed of multiple geographically distributed server nodes. It is called edge nodes, which store copies of the source server content. When a user requests content, CDN will route the request to the node closest to the user, thereby reducing the data transmission distance, and CDN nodes will cache static resources. When a user requests these resources, they are directly returned from the cache without having to access the source server every time. In addition, CDN uses intelligent algorithms such as Anycast or DNS load balancing to dynamically select the optimal node to ensure that users have access to the fastest and most stable node, thereby improving the user access experience. Because the mobile terminal 1 is connected to a third-party service 7, it can also cooperate with the services provided by the third party through the third-party service 7 to improve the user experience, and the resource server 5 is used as a resource publishing window. The App directly interacts with it during the startup process, and then obtains the page layout configuration information in real time. At the same time, it monitors and controls network traffic through the firewall 6, and decides whether to allow the transmission of data packets based on predefined security rules, thereby ensuring that only data packets that comply with security rules can pass; Since NAS19 is connected to the resource server 5 and the integrated management system 8, and the integrated management system 8 includes the front-end H59, the server 10 and the persistence module 11. First, through the page layout design module 12 in the front-end H59, a visual layout editor is provided, allowing developers or designers to quickly build pages by dragging and dropping components such as forms, tables, and charts. And through modular design, duplicate code is reduced, the reuse of page components is achieved, preset templates and themes are provided, standardized pages are quickly generated, and through reasonable layout design, it is ensured that users can quickly find the required functions and reduce operation steps. Then, through the page layout business module 13 in the server 10, a clear navigation and interface structure are provided, and the security and recoverability of static resources are ensured through static resource local persistence 14. Local persistence means saving static resources in the local storage medium of the server, such as a hard disk or a disk 17, so that they can be reloaded and used when needed. Through local persistence, even if the server crashes or other failures occur, the static resources will not be lost, thus ensuring the data security of the system;

[0019] Since the data landing library 16 is connected to the database main body 18, then through the data landing library 16, the data is saved in the database main body 18. Through the data landing library 16, the integrated management system 8 can store various business data, user information, configuration parameters, etc. on the storage medium of the server for a long time, ensuring the persistence and recoverability of the data. Even if the system crashes or restarts, the landed data will not be lost, thus ensuring the integrity and availability of the data. And the database main body 18 system usually includes various security mechanisms, such as user authentication, permission control, data encryption, etc., to protect the data from unauthorized access or tampering. Through the data landing library 16, the integrated management system 8 can make full use of these security mechanisms to ensure the security of the data. In addition, the database main body 18 also supports the backup and recovery functions of the data, further enhancing the reliability and fault tolerance of the data. After that, through the artifact release 15, the tested and verified software artifacts are quickly deployed to the production environment, thus reducing manual intervention and errors, and improving the efficiency and accuracy of the deployment. This function is crucial for quickly responding to market demands and achieving business agility; Since the mobile terminal 1 provides a hot loading mechanism in the startup phase for page layout configuration to achieve dynamic updates of the page layout, and since the integrated management system 8 is a management platform for page layout design, management, deployment, and release, as well as version control and release rollback, and the resource server 5 is a release window for resources, the mobile terminal 1 directly interacts with it during startup to obtain page layout configuration information; and since the NAS 19 connects the integrated management system 8 and the resource server 5, enabling the deployment and release processes to be locally operated, expanding and simplifying the system implementation solution and reducing the coupling degree between systems; at the same time, because its interface protocol is widely supported, it directly extends the portability of stored content. For example, connecting the NAS 19 to the CDN A 3 and CDN B 4 can achieve rapid content distribution with the help of CDN acceleration technology; at the same time, to solve performance and traffic problems, a combination mode of intelligent DNS 2 and CDN can be used to accelerate the access speed, thereby realizing visual configuration by intuitively configuring the front-end page through the management background, achieving real-time synchronization by immediately reflecting front-end layout modifications on the interface, and supporting detailed settings of various functions in the front-end layout; Furthermore, a visual operation interface is provided, a page layout designer is introduced into the management platform, and at the same time, page components such as styles, pictures, titles, labels, hyperlinks, and text descriptions are supported, replicating the front-end layout one-to-one to ensure that designers can intuitively and immediately experience the design finished product during the design stage; and by referring to the release mode of H5, the page layout is used as a configuration resource, and the App provides a hot loading mechanism in the startup phase to achieve dynamic updates of the page layout; and since the target of the present invention is only for page layout, its design products are relatively clean, the configuration information resource occupancy is small, so the download delay is small and there is almost no lag; and a content management mechanism is provided, adopting a multi-version and differentiated layout design and operation plan, and at the same time combining the personalized design of the page local focus map, it is possible to achieve personalized experiences for different users. For the page layout content, a version control system is introduced, which can not only facilitate design but also realize the backtracking and auditing of released items during the production process; and for rapid release, the management platform architecture is optimized, incorporating deployment and release capabilities, and equipped with a version control system, which can achieve the rapid online and rollback of the App page layout, providing security and stability for the operation of the App. Furthermore, by providing an intuitive visual configuration interface, the synchronous update of the front-end page layout and the back-end service configuration is realized, thus significantly improving the efficiency and accuracy of configuration, while simplifying version management. Compared with traditional technologies, the efficiency and flexibility of daily operations are greatly improved.

[0020] In summary, when using the efficient App dynamic layout visualization configuration platform, device, and storage medium, first, the product manager collects the new layout requirements of the page. Then, the operator or product manager designs the layout in the page layout design module 12 of the comprehensive management system 8 according to the requirements in the UAT environment. After that, preview the final design in the comprehensive management system 8 and conduct basic checks on the layout. If there are no errors, perform a quick release. Then, open the App in the mobile terminal 1 and check whether the functions of each part of the new layout take effect as expected. If not, return to the comprehensive management system 8 for fine-tuning. After it takes effect, the new layout plan can be pushed to the production environment for release. And on the basis of the above business process, in case of production emergencies, such as the collapse of the supplier system, the historical available version can be traced back immediately, set as the current available version, and the risk entry can be cut off, and a quick release can be executed. Furthermore, by providing an intuitive visualization configuration interface, the synchronous update of the front-end page layout and the back-end service configuration is realized, thereby significantly improving the efficiency and accuracy of configuration, while simplifying version management, thus greatly enhancing the efficiency and flexibility of daily operations. The content not described in detail in this description belongs to the prior art well-known to those skilled in the art.

[0021] Although the present invention has been described in detail with reference to the foregoing embodiments, for those skilled in the art, they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements for some of the technical features. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. An efficient App dynamic layout visualization configuration platform, device, and storage medium, including a mobile terminal (1), an intelligent DNS (2), and an integrated management system (8), characterized in that: The mobile terminal (1) is connected to an intelligent DNS (2) via a wireless network, and a Guosheng Tong native module, a Guosheng Tong H5 module, and a third-party module are provided inside the mobile terminal (1). The mobile terminal (1) is connected to a CDNA (3) via the Guosheng Tong native module, and the CDNA (3) is connected to a CDNB (4) via a local area network. Both the CDNA (3) and the CDNB (4) are connected to a resource server (5) via a wireless network, and both the CDNA (3) and the CDNB (4) are connected to a firewall (6) via a local area network. The mobile terminal (1) is connected to a third-party service (7) via the third-party module. The resource server (5) is connected to an integrated management system (8) via a local area network, and the integrated management system (8) includes a front-end H5 (9), a server-side (10), and a persistence module (11).

2. An efficient App dynamic layout visualization configuration platform, device, and storage medium according to claim 1, characterized in that: The front-end H5 (9) includes a page layout design module (12). Inside the server-side (10), a page layout service module (13) is provided. The output end of the page layout service module (13) is sequentially connected to a static resource local persistence (14), an artifact release (15), and a data storage in the database (16). The persistence module (11) includes a disk (17) and a database main body (18). The artifact release (15) is connected to a NAS (19) via a wireless network.

3. An efficient App dynamic layout visualization configuration platform, device, and storage medium according to claim 2, characterized in that: The static resource local persistence (14) is connected to the disk (17), and the data storage in the database (16) is connected to the database main body (18). The resource server (5) is connected to the NAS (19) via a wireless network. The mobile terminal (1) is connected to the resource server (5) via the Guosheng Tong H5 module.

4. An efficient App dynamic layout visualization configuration platform, device, and storage medium according to claim 3, characterized in that: The front-end H5 (9) uses the Vue framework to simulate and implement the layout settings required for the native side. The server-side (10) uses the SpringMVC business architecture to respond to business logic. The persistence module (11) is a storage layer. The storage layer uses the relational database MySQL to store the current design draft and the release snapshot respectively, and uses the NAS (19) to store the released artifacts. The counterweight resources are exposed through a static server, such as an Nginx server and an Apache server.

5. An efficient App dynamic layout visualization configuration platform, device, and storage medium according to claim 4, characterized in that: The mobile terminal (1) provides a hot reload mechanism during the startup phase for page layout configuration, thereby realizing the dynamic update of the page layout. The integrated management system (8) is a management platform, and the integrated management system (8) is the core of the App dynamic layout visual configuration, which is used for page layout design, management, deployment, and release, as well as version control and release rollback. The resource server (5) is a release window for resources. The mobile terminal (1) directly interacts with it during the startup process to obtain page layout configuration information.

6. An efficient App dynamic layout visualization configuration platform, device, and storage medium according to claim 5, characterized in that: The intelligent DNS (2) is an intelligent domain name resolution system. Its core goal is to optimize network resource allocation and user experience through intelligent decision-making. The intelligent DNS (2) architecture includes a parsing engine, a data collection layer, and a policy configuration center, and the intelligent DNS (2) has a dynamic response mechanism.

7. An efficient App dynamic layout visualization configuration platform, device, and storage medium according to claim 6, characterized in that: The cDNA (3) and CDNB (4) are in a distributed network architecture, and its core objective is to reduce the load on the source server by optimizing the content distribution path. The cDNA (3) and CDNB (4) have the characteristics of reducing latency, improving bandwidth utilization, and enhancing reliability.

8. An efficient App dynamic layout visualization configuration platform, device, and storage medium according to claim 7, characterized in that: The NAS (19) is a data storage server, and the NAS (19) is connected to the management platform and the resource server (5). The page layout design module (12) includes a layout designer, a version maintenance module, and a publishing module. The firewall (6) is a network security system and is an important part of the network security field.

Images