Webpage online updating method and device, equipment and storage medium

By calling the customer -side production environment page in the webpage development, receiving and analyzing the development code, forming a modular code update to the development page, solving the problem that it is difficult for developers to have a long development cycle caused by the client side joint test test. Develop and update faster.

CN119376767AActive Publication Date: 2025-01-28E SURFING IOT CO LTD
View PDF 5 Cites 0 Cited by

Patent Information

Application Number
CN202411521450.5
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-10-29
Publication Date
2025-01-28
Estimated Expiration
2044-10-29

AI Technical Summary

Technical Problem

In the prior art, it is difficult for developers to form joint debugging tests with the client side when updating web pages, resulting in a long development cycle.

Method used

By calling the pages of the development of the customer -side production environment according to the unique identifier of the target, the development code entered by the developer is received, and the development code is used to analyze the development code to obtain multiple code modules. To develop pages.

Benefits of technology

The development page is realized by calling the customer -side production environment, and the development code is analyzed and rendered through the plug -in to form a modular development code. The development page is updated according to the code module, shortening the development cycle.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119376767A_ABST
    Figure CN119376767A_ABST
Patent Text Reader

Abstract

The invention relates to the technical field of software development, in particular to a web page online updating method and device, equipment and a storage medium. According to a target unique identifier, a to-be-developed page in a production environment of a client side is called; receiving a development code input by a developer through the front-end and back-end communication tool; analyzing and rendering the development code through at least one preset plug-in to obtain a plurality of code modules; the to-be-developed page is updated according to the multiple code modules, the to-be-developed page in the production environment of the client side is called, development codes input by developers are analyzed and rendered through at least one plug-in, so that modularized development codes are formed, the to-be-developed page is updated according to the code modules, and the development efficiency of the to-be-developed page is improved. The development period is shortened, and the technical problem that in the prior art, when a developer updates the webpage, joint debugging test is difficult to form with the client side, and consequently the development period is long is solved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a method, device, equipment and storage medium for online updating of web pages. Background Art

[0002] When faced with the ever-increasing front-end customization requirements of the privatized platform, due to the limitations of network isolation or security policies, it is difficult for front-end developers to conduct joint debugging and testing locally with the platform back-end services deployed on the customer side.

[0003] The existing technology is to construct simulated data in a local or test environment to perform front-end and back-end joint debugging and development. However, due to the differences in version iterations of different modules and key components, it is impossible to fully reproduce the production environment on the client side, which easily leads to unexpected problems. In addition, after the front-end web page is developed, it needs to be built and deployed by operation and maintenance personnel. If problems occur after deployment, the above steps need to be repeated again, which prolongs the development cycle again and has poor flexibility and scalability.

[0004] The above contents are only used to assist in understanding the technical solution of the present invention and do not constitute an admission that the above contents are prior art. Summary of the invention

[0005] The main purpose of the present invention is to provide a method, device, equipment and storage medium for online updating of web pages, aiming to solve the technical problem in the prior art that it is difficult for developers to form joint debugging tests with the client side when updating web pages, resulting in a long development cycle.

[0006] To achieve the above object, the present invention provides a method for online updating of web pages, the method comprising the following steps:

[0007] Call the page to be developed in the production environment on the client side according to the target unique identifier;

[0008] Receive development code input by developers through front-end and back-end communication tools;

[0009] Parsing and rendering the development code through at least one preset plug-in to obtain multiple code modules;

[0010] The page to be developed is updated according to the multiple code modules.

[0011] Optionally, the development code is parsed and rendered by at least one preset plug-in to obtain multiple code modules, including:

[0012] The development code is parsed by a first parsing plug-in to obtain a page element component, a logic processing component, and a style content component;

[0013] Preprocessing the page element component, the logic processing component and the style content component respectively;

[0014] The preprocessed page element components, logic processing components and style content components are style rendered through a preset rendering component to obtain multiple code modules.

[0015] Optionally, the preprocessing of the page element component, the logic processing component and the style content component respectively includes:

[0016] Adding a parent element to the page element component and updating the identity code of the parent element;

[0017] Turn off the export function of the logic processing component;

[0018] The style content component is converted into style content syntax and associated with the parent element of the page element construction.

[0019] Optionally, before calling the page to be developed in the production environment of the client side according to the target unique identifier, the method further includes:

[0020] Verifying the authority of the client side through the synchronous multiplexing platform;

[0021] After verification, the existing resources of the client-side privatization platform are integrated through the basic tools of the synchronous multiplexing platform, and the existing resources at least include platform interfaces, user information and static resources.

[0022] Optionally, after receiving the development code input by the developer through the front-end and back-end communication tools, the method further includes:

[0023] determining a target annotation in the development code;

[0024] Detecting whether the prototype chain of the online development platform contains a target extension tool component corresponding to the target annotation;

[0025] If not, the target extension tool component is mounted to the prototype chain of the online development platform.

[0026] Optionally, after parsing and rendering the development code through at least one preset plug-in to obtain multiple code modules, the method further includes:

[0027] The preset event bus instance is mounted to the prototype chain of the online development platform. The preset event bus instance is used to control each code module to publish and subscribe to events, thereby connecting each code module for communication.

[0028] Optionally, the web page online updating method also includes

[0029] Storing the location information and size information of the development code and each code module on the page to be developed in a database on the client side;

[0030] Associating the development code with the module identification code of each code module in the database of the client side;

[0031] The updated page to be developed is switched to a full-screen mode, wherein the full-screen mode is used to hide the navigation bar and the tool bar of the page to be developed, so as to complete the online development of the page to be developed.

[0032] In addition, to achieve the above-mentioned purpose, the present invention also proposes a web page online updating device, the web page online updating device comprising:

[0033] A calling module, used to call a page to be developed in a production environment on the client side according to a target unique identifier;

[0034] A receiving module is used to receive development codes input by developers through front-end and back-end communication tools;

[0035] A parsing module, used to parse and render the development code through at least one preset plug-in to obtain multiple code modules;

[0036] An updating module is used to update the to-be-developed page according to the multiple code modules.

[0037] In addition, to achieve the above-mentioned purpose, the present invention also proposes an online update device for web pages, which includes: a memory, a processor, and an online update program for web pages stored in the memory and executable on the processor, wherein the online update program for web pages is configured to implement the steps of the online update method for web pages described above.

[0038] In addition, to achieve the above objectives, the present invention further proposes a storage medium, on which a web page online update program is stored, and when the web page online update program is executed by a processor, the steps of the web page online update method described above are implemented.

[0039] In addition, to achieve the above-mentioned purpose, the present application also provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps of the online updating method of a web page are implemented as described above.

[0040] One or more technical solutions proposed in the present application have at least the following technical effects: the present invention calls the page to be developed in the production environment of the client side according to the target unique identifier; receives the development code input by the developer through the front-end and back-end communication tools; parses and renders the development code through at least one preset plug-in to obtain multiple code modules; updates the page to be developed according to the multiple code modules, thereby forming a modular development code by calling the page to be developed in the production environment of the client side, and parsing and rendering the development code input by the developer through at least one plug-in, and updating the page to be developed according to the code module, shortening the development cycle, and avoiding the technical problem in the prior art that it is difficult for developers to form joint debugging tests with the client side when updating web pages, resulting in a long development cycle. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0042] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0043] Figure 1 It is a flowchart of a first embodiment of a method for online updating of web pages of the present invention;

[0044] Figure 2 It is a flowchart of a second embodiment of the online updating method of a web page of the present invention;

[0045] Figure 3 It is a structural block diagram of the first embodiment of the online updating device for web pages of the present invention;

[0046] Figure 4 It is a structural diagram of a web page online updating device in a hardware operating environment involved in an embodiment of the present invention.

[0047] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0048] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0049] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0050] Based on this, the embodiment of the present invention provides a method for updating a web page online, referring to Figure 1 , Figure 1 It is a flowchart of a first embodiment of a method for online updating of a web page of the present invention.

[0051] In this embodiment, the web page online updating method includes:

[0052] Step S10: calling the page to be developed in the production environment of the client side according to the target unique identifier.

[0053] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an electronic device capable of realizing the above functions, a control computer or a cloud server, etc. The following takes the control computer as an example to illustrate this embodiment and the following embodiments.

[0054] It is worth noting that the target unique identifier refers to the Uniform Resource Locator (URL) used to point to the web page in the client-side production environment. In this embodiment, the target unique identifier may also include: page ID, mode selection (development / display), user ID and corresponding token, and related information on whether to display in full screen. Among them, the page ID is the unique identifier of the page, which ensures that the system can accurately locate the specified page resources, whether it is loading, rendering or updating operations; the user ID and Token are the key to implement single sign-on authentication. By verifying the validity of the user ID and Token, the embarrassment of logging into the current platform across platforms can be avoided, and the effect of seamless access across platforms can be achieved in the process.

[0055] Mode selection related information allows the caller to switch freely between development mode and presentation mode according to actual needs. The development mode retains the debugging information and development tools of the page, which is convenient for developers to perform subsequent maintenance and iteration; while the presentation mode focuses on user experience, hides all non-essential platform elements, and ensures that the page is presented to the user in the best state; full-screen presentation information is used when this parameter is set to full-screen mode, the page will occupy the entire browser window or application interface, hide all platform-provided navigation bars, toolbars and other elements, and provide users with an immersive browsing experience. This function is particularly important for pages that need to be published across platforms, because it can ensure that the page is displayed consistently on different platforms and will not be interfered with by platform native elements.

[0056] Furthermore, before calling the page to be developed in the production environment of the client side according to the target unique identifier, the method further includes:

[0057] Verifying the authority of the client side through the synchronous multiplexing platform;

[0058] After verification, the existing resources of the client-side privatization platform are integrated through the basic tools of the synchronous multiplexing platform, and the existing resources at least include platform interfaces, user information and static resources.

[0059] In the specific implementation, if the developer wants to call the page to be developed in the production environment on the client side, he needs to use the existing packaged front-end development tool set to maintain consistency with the platform.

[0060] In this embodiment, the front-end development tool set includes basic tools and extended tools, wherein the basic tools include but are not limited to the front-end and back-end communication tools Axios and the style component element-ui; the extended tools include but are not limited to the chart visualization component echarts, the three-dimensional visualization tool three.js and the map plug-in.

[0061] Step S20: receiving the development code input by the developer through the front-end and back-end communication tools.

[0062] Specifically, taking Axios, a front-end and back-end communication tool, as an example, a multi-layer interceptor is implemented on the basis of the axios plug-in through the synchronous reuse platform, which can verify the user's permissions and encrypt and decrypt the front-end and back-end communication data. The existing basic tools of the reuse platform can seamlessly integrate the existing resources of the privatization platform, including but not limited to platform interfaces, user information, and static resources, thereby improving page loading efficiency.

[0063] Furthermore, after receiving the development code input by the developer through the front-end and back-end communication tools, the method further includes:

[0064] determining a target annotation in the development code;

[0065] Detecting whether the prototype chain of the online development platform contains a target extension tool component corresponding to the target annotation;

[0066] If not, the target extension tool component is mounted to the prototype chain of the online development platform.

[0067] In the specific implementation, for the extension tools, this embodiment adopts an on-demand asynchronous loading strategy to improve the efficiency of page recording. When developers are writing code, they will use comments in a specific format to indicate the extension tools that need to be introduced in the code. Before the subsequent compilation, it will check whether the online development platform vue prototype chain contains the required tool components. If not, the required extension tools will be dynamically loaded and added to the code compilation by mounting the online development platform vue prototype chain. If the required tool components are already available, they will be compiled directly without repeated loading, which can effectively speed up the page loading speed.

[0068] Step S30: parsing and rendering the development code through at least one preset plug-in to obtain multiple code modules.

[0069] The preset plug-ins include but are not limited to the page element component template, the logic processing component script and the style content component style.

[0070] After the module development is completed, the development code and the compiled code will be stored in the database according to the module, getting rid of the code repository restrictions and facilitating code management. Later, the corresponding module ID can be mapped to the corresponding compiled code, without repeated compilation to achieve fast rendering effects, thereby improving the development efficiency of web pages.

[0071] Furthermore, after parsing and rendering the development code through at least one preset plug-in to obtain multiple code modules, the method further includes:

[0072] The preset event bus instance is mounted to the prototype chain of the online development platform. The preset event bus instance is used to control each code module to publish and subscribe to events, thereby connecting each code module for communication.

[0073] In the specific implementation, traditional online development focuses on full-page development and ignores modular development. The present invention adopts a two-layer architecture of module layer and page layer, supports modular development and reduces repeated coding work. Developers can drag and reuse published modules to other pages through the vue-draggable plug-in, and the position and size can be customized. After the page is developed, the location information of the corresponding module and the corresponding length and width parameters will be recorded in the database. When rendering, the corresponding compiled code can be found according to the corresponding module id, and quickly built and rendered in the specified position and range.

[0074] After other code modules are loaded on the page to be developed, since there is no association between the newly loaded code modules and other modules in the page, for example: adding a code module for historical search records on the page to be developed, although the "historical search records" are embedded in the front-end page, when the user clicks on the module, it should trigger the module for displaying the historical search records. During this process, the historical search record module will initiate requests to other modules in this page, and when the data receives the event, it will respond to the event publishing request of the "historical search records", search for historical data, and feed it back to the historical search record module for display.

[0075] The preset event bus instance is used to receive the event publishing time and event subscription events of each module, and serves as a controller between each module, so as to realize the communication between modules and break the isolation between modules. Among them, event publishing means that when each module needs to pass information or requests to other modules, it can call a specific method (such as $emit) through this event bus instance to publish events. When publishing an event, any type of data can be attached as the event payload, and these data will be passed along with the event to all modules in the page that have subscribed to the event; event subscription means that all modules in the page can subscribe to events through the listening method of the event bus instance (such as $on). Once an event is published and the name of the event matches the name specified during subscription, the module that subscribes to the event will be notified immediately and can execute the corresponding callback function to process the received event payload. Based on the above mechanism, the mutual linkage between modules can be realized, and the effects of controlling the hiding and display of a certain module, data changes, etc. can be realized, which greatly improves the modularity and maintainability of the code, making the system more flexible and easy to expand.

[0076] Step S40: updating the page to be developed according to the multiple code modules.

[0077] The process of updating the page to be developed can be reused in other pages through the vue-draggable plug-in, so that the locally developed code module can be embedded in the page to be developed on the client side, and the code module can be stored in the client side database. When the customer calls the page, the module can be directly called based on the client side database to achieve real-time rendering, without the need for operation and maintenance deployment by front-end developers, shortening the page development and update cycle.

[0078] Furthermore, the web page online updating method also includes

[0079] Storing the location information and size information of the development code and each code module on the page to be developed in a database on the client side;

[0080] Associating the development code with the module identification code of each code module in the database of the client side;

[0081] The updated page to be developed is switched to a full-screen mode, wherein the full-screen mode is used to hide the navigation bar and the tool bar of the page to be developed, so as to complete the online development of the page to be developed.

[0082] It should be understood that since the traditional page update development process generally uploads the developed page to the cloud database, when the user calls the page, the client needs to request the data of the entire page from the cloud database, and the client-side environment will interfere with the layout of the entire page, resulting in various UI graphics in the front-end page being misaligned when rendered on the client side due to size or resolution. Therefore, this embodiment stores the location information and size information of the development code and the developed code module of the page to be developed in the client-side database, and updates the page to be developed in a modular manner without updating the entire page, thereby minimizing the impact of the client-side environment on the page.

[0083] Finally, the updated development page is switched to full-screen mode, hiding all platform-provided navigation bars, toolbars and other elements to provide users with an immersive browsing experience.

[0084] This embodiment calls the page to be developed in the production environment of the client side according to the target unique identifier; receives the development code input by the developer through the front-end and back-end communication tools; parses and renders the development code through at least one preset plug-in to obtain multiple code modules; updates the page to be developed according to the multiple code modules, thereby forming a modular development code by calling the page to be developed in the production environment of the client side and parsing and rendering the development code input by the developer through at least one plug-in, and updating the page to be developed according to the code modules, shortening the development cycle, and avoiding the technical problem in the prior art that it is difficult for developers to form joint debugging tests with the client side when updating web pages, resulting in a long development cycle.

[0085] Based on the first embodiment of the present application, in the second embodiment of the present application, the same or similar contents as those in the above-mentioned embodiment 1 can be referred to the above introduction, and will not be repeated in the following. Figure 2 , step S30, comprising:

[0086] Step S301: parsing the development code through a first parsing plug-in to obtain a page element component, a logic processing component and a style content component.

[0087] Step S302: pre-processing the page element component, the logic processing component and the style content component respectively.

[0088] Step S303: performing style rendering on the preprocessed page element component, logic processing component and style content component through a preset rendering component to obtain multiple code modules.

[0089] It should be noted that the first parsing plug-in refers to the vue-template-compiler plug-in, which performs preliminary parsing of the code. After the parsing is completed, the page element components, logic processing components and style content components are obtained respectively, and then the page element components, logic processing components and style content components are preprocessed to reduce interference between modules and improve rendering efficiency.

[0090] After preprocessing, Vue's own extend method is used to build components and perform style rendering to obtain multiple encapsulated code modules.

[0091] Furthermore, the preprocessing of the page element component, the logic processing component and the style content component respectively includes:

[0092] Adding a parent element to the page element component and updating the identity code of the parent element;

[0093] Turn off the export function of the logic processing component;

[0094] The style content component is converted into style content syntax and associated with the parent element of the page element construction.

[0095] In the specific implementation, for the page element component, since this embodiment is developed through code modularization, in order to avoid mutual interference with other modules, this embodiment will add a layer of parent element section on the basis of the page element component, and assign the ids of different modules to the id attribute of the parent element. The parent elements are distinguished by id to facilitate subsequent distinction and isolation.

[0096] For the logic processing component, it contains the data of the Vue component, hooks and a collection of processing methods, but because its format cannot be directly executed, in order to obtain the above collection, it is necessary to cancel its export function and run compilation on it;

[0097] For the style content component, since the extend method does not have a separate parameter reserved for the style module, the traditional approach is to embed the style statement into the template element, but this approach is not suitable for complex style processing and does not conform to programming habits. For different style syntaxes (scss, less, etc.), the present invention converts it into a common style syntax and embeds it into the page, and in order to prevent mutual interference between modules, it is necessary to add a layer of selection based on the converted style, pointing to the parent element in the template component.

[0098] After the module development is completed, the development code and the compiled code will be stored in the database by module, getting rid of the code repository restrictions and facilitating code management. Later, the corresponding module ID can be mapped to the corresponding compiled code, without repeated compilation to achieve fast rendering effects.

[0099] This embodiment parses the development code through a first parsing plug-in to obtain a page element component, a logic processing component and a style content component; preprocesses the page element component, the logic processing component and the style content component respectively; performs style rendering on the preprocessed page element component, the logic processing component and the style content component through a preset rendering component to obtain multiple code modules, thereby reducing conflicts between modules and improving the efficiency of subsequent module rendering.

[0100] This application also provides a web page online update device, please refer to Figure 3 , the web page online updating device comprises:

[0101] The calling module 10 is used to call the page to be developed in the production environment of the client side according to the target unique identifier.

[0102] The receiving module 20 is used to receive the development code input by the developer through the front-end and back-end communication tools.

[0103] The parsing module 30 is used to parse and render the development code through at least one preset plug-in to obtain multiple code modules.

[0104] The updating module 40 is used to update the to-be-developed page according to the multiple code modules.

[0105] This embodiment calls the page to be developed in the production environment of the client side according to the target unique identifier; receives the development code input by the developer through the front-end and back-end communication tools; parses and renders the development code through at least one preset plug-in to obtain multiple code modules; updates the page to be developed according to the multiple code modules, thereby forming a modular development code by calling the page to be developed in the production environment of the client side and parsing and rendering the development code input by the developer through at least one plug-in, and updating the page to be developed according to the code modules, shortening the development cycle, and avoiding the technical problem in the prior art that it is difficult for developers to form joint debugging tests with the client side when updating web pages, resulting in a long development cycle.

[0106] In one embodiment, the receiving module 20 is further used to parse the development code through a first parsing plug-in to obtain a page element component, a logic processing component and a style content component; pre-process the page element component, the logic processing component and the style content component respectively; and perform style rendering on the pre-processed page element component, the logic processing component and the style content component through a preset rendering component to obtain multiple code modules.

[0107] In one embodiment, the receiving module 20 is also used to add a parent element to the page element component and update the identity identification code of the parent element; turn off the export function of the logic processing component; convert the style content component into style content syntax, and associate the parent element of the page element construction.

[0108] In one embodiment, the calling module 10 is also used to verify the permissions of the client side through the synchronous multiplexing platform; after the verification is passed, the existing resources of the client side's privatization platform are integrated through the basic tools of the synchronous multiplexing platform, and the existing resources include at least platform interfaces, user information and static resources.

[0109] In one embodiment, the receiving module 20 is further used to determine the target annotation in the development code; detect whether the prototype chain of the online development platform contains the target expansion tool component corresponding to the target annotation; if not, mount the target expansion tool component to the prototype chain of the online development platform.

[0110] In one embodiment, the parsing module 30 is also used to mount a preset event bus instance to a prototype chain of an online development platform, and the preset event bus instance is used to control each code module to publish and subscribe to events, thereby connecting each code module for communication.

[0111] In one embodiment, the update module 40 is further used to store the location information and size information of the development code and each code module on the page to be developed in a database on the client side; associate the development code and the module identification code of each code module in the database on the client side; switch the updated page to be developed to full-screen mode, and the full-screen mode is used to hide the navigation bar and toolbar of the page to be developed to complete the online development of the page to be developed.

[0112] The present application provides a web page online update device, which includes: at least one processor; and a memory that is communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the web page online update method in the above-mentioned embodiment 1.

[0113] Reference below Figure 4 , which shows a schematic diagram of the structure of a web page online update device suitable for implementing the embodiment of the present application. The web page online update device in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The web page online update device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0114] like Figure 4As shown, the web page online update device may include a processing device 1001 (such as a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM: Read Only Memory) 1002 or the program loaded from the storage device 1003 to the random access memory (RAM: Random Access Memory) 1004. In the RAM 1004, various programs and data required for the operation of the web page online update device are also stored. The processing device 1001, the ROM 1002 and the RAM 1004 are connected to each other through a bus 1005. The input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the web page online update device to communicate with other devices wirelessly or by wire to exchange data. Although the figure shows a web page online update device with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or provided instead.

[0115] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0116] The web page online update device provided by the present application adopts the web page online update method in the above embodiment, which can solve the technical problem of online update of web pages. Compared with the prior art, the beneficial effects of the web page online update device provided by the present application are the same as the beneficial effects of the web page online update method provided by the above embodiment, and other technical features in the web page online update device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0117] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0118] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0119] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the online updating method for web pages in the above-mentioned embodiment.

[0120] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0121] The computer-readable storage medium may be included in the web page online updating device; or may exist independently without being assembled into the web page online updating device.

[0122] The computer-readable storage medium carries one or more programs. When the one or more programs are executed by the web page online updating device, the web page online updating device is enabled to update the web page online.

[0123] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0124] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0125] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0126] The readable storage medium provided by the present application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned online updating method for web pages, and can solve the technical problem of online updating of web pages. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the present application are the same as the beneficial effects of the online updating method for web pages provided by the above-mentioned embodiment, and will not be described in detail here.

[0127] The present application also provides a computer program product, including a computer program, which implements the steps of the above-mentioned web page online updating method when executed by a processor.

[0128] The computer program product provided by this application can solve the technical problem of online updating of web pages. Compared with the prior art, the beneficial effects of the computer program product provided by this application are the same as the beneficial effects of the online updating method of web pages provided by the above embodiment, which will not be repeated here.

[0129] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A method for updating a web page online, characterized in that: The webpage online updating method comprises: Call the page to be developed in the production environment on the client side according to the target unique identifier; Receive development code input by developers through front-end and back-end communication tools; Parsing and rendering the development code through at least one preset plug-in to obtain multiple code modules; The page to be developed is updated according to the multiple code modules.

2. The method according to claim 1, characterized in that The development code is parsed and rendered by at least one preset plug-in to obtain multiple code modules, including: The development code is parsed by a first parsing plug-in to obtain a page element component, a logic processing component, and a style content component; Preprocessing the page element component, the logic processing component and the style content component respectively; The preprocessed page element components, logic processing components and style content components are style rendered through a preset rendering component to obtain multiple code modules.

3. The method according to claim 2, characterized in that The preprocessing of the page element component, the logic processing component and the style content component respectively includes: Adding a parent element to the page element component and updating the identity code of the parent element; Turn off the export function of the logic processing component; The style content component is converted into style content syntax and associated with the parent element of the page element construction.

4. The method according to any one of claims 1 to 3, characterized in that Before calling the page to be developed in the production environment of the client side according to the target unique identifier, it also includes: Verifying the authority of the client side through the synchronous multiplexing platform; After verification, the existing resources of the client-side privatization platform are integrated through the basic tools of the synchronous multiplexing platform, and the existing resources at least include platform interfaces, user information and static resources.

5. The method according to any one of claims 1 to 3, characterized in that After receiving the development code input by the developer through the front-end and back-end communication tools, the method further includes: determining a target annotation in the development code; Detecting whether the prototype chain of the online development platform contains a target extension tool component corresponding to the target annotation; If not, the target extension tool component is mounted to the prototype chain of the online development platform.

6. The method according to any one of claims 1 to 3, characterized in that After the development code is parsed and rendered by at least one preset plug-in to obtain multiple code modules, the method further includes: The preset event bus instance is mounted to the prototype chain of the online development platform. The preset event bus instance is used to control each code module to publish and subscribe to events, thereby connecting each code module for communication.

7. The method according to any one of claims 1 to 3, characterized in that The web page online updating method also includes Storing the location information and size information of the development code and each code module on the page to be developed in a database on the client side; Associating the development code with the module identification code of each code module in the database of the client side; The updated page to be developed is switched to a full-screen mode, wherein the full-screen mode is used to hide the navigation bar and the tool bar of the page to be developed, so as to complete the online development of the page to be developed.

8. A web page online updating device, characterized in that: The webpage online updating device comprises: A calling module, used to call a page to be developed in a production environment on the client side according to a target unique identifier; A receiving module is used to receive development codes input by developers through front-end and back-end communication tools; A parsing module, used to parse and render the development code through at least one preset plug-in to obtain multiple code modules; An updating module is used to update the to-be-developed page according to the multiple code modules.

9. A web page online update device, characterized in that: The web page online update device includes: a memory, a processor, and a web page online update program stored in the memory and executable on the processor, wherein the web page online update program is configured to implement the steps of the web page online update method according to any one of claims 1 to 7.

10. A storage medium, characterized in that: The storage medium stores a web page online update program, and when the web page online update program is executed by the processor, the steps of the web page online update method according to any one of claims 1 to 7 are implemented.

Citation Information

Patent Citations

  • Page debugging method and device, equipment and storage medium

    CN117033213A

  • Interface interface debugging method and device, electronic equipment and medium

    CN117234933A

  • Method and device for developing and debugging page codes

    CN118733465A

  • Page updating method and device and nonvolatile storage medium

    CN118796161A

  • Visual processing method, apparatus, and system for front-end service logic

    WO2024046313A1