Webpage online updating method, device and equipment, and storage medium

Abstract

The present application relates to the technical field of software development, and especially relates to a webpage online updating method and device, equipment and a storage medium, the present application calls a to-be-developed page in a production environment on the client side according to a target unique identifier; receives a development code input by a developer through a front-end and back-end communication tool; renders the development code by at least one preset plug-in to obtain a plurality of code modules; updates the to-be-developed page according to the plurality of code modules, realizes the calling of the to-be-developed page in the production environment on the client side, and renders the development code input by the developer through at least one plug-in, thereby forming modular development code, updating the to-be-developed page according to the code modules, shortening the development cycle, and avoiding the technical problem that the developer is difficult to form joint debugging and testing with the client side when updating the webpage, thereby leading to a long development cycle.

Description

Technical Field

[0001] This invention relates to the field of software development technology, and in particular to methods, apparatus, devices and storage media for online webpage updates. Background Technology

[0002] When faced with the ever-increasing front-end customization needs of private platforms, front-end developers find it difficult to conduct joint debugging and testing with the platform's back-end services already deployed on the client side due to network isolation or security policy restrictions.

[0003] Existing technologies involve constructing simulated data in local or testing environments for front-end and back-end integration development. However, due to differences in version iterations of different modules and key components, it is impossible to fully reproduce the production environment on the customer side, which can easily lead to unexpected problems. In addition, after the front-end web page is developed, it needs to be built and deployed by operations and maintenance personnel. If problems occur after deployment, the above steps need to be repeated, which further prolongs the development cycle and results in poor flexibility and scalability.

[0004] The above content is only used to help understand the technical solution of the present invention and does not represent an admission that the above content is prior art. Summary of the Invention

[0005] The main objective of this invention is to provide a method, apparatus, device, and storage medium for online webpage updates, aiming to solve the technical problem in the prior art where developers find it difficult to conduct joint testing with the client side when updating webpages, resulting in a long development cycle.

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

[0007] The target unique identifier is used to call the undeveloped page in the production environment on the client side;

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

[0009] The development code is parsed and rendered using at least one preset plugin to obtain multiple code modules;

[0010] Update the page to be developed based on the multiple code modules.

[0011] Optionally, the development code is parsed and rendered using at least one preset plugin to obtain multiple code modules, including:

[0012] The development code is parsed using the first parsing plugin to obtain page element components, logic processing components, and style content components;

[0013] The page element component, the logic processing component, and the style content component are preprocessed respectively.

[0014] By using preset rendering components, the preprocessed page element components, logic processing components, and style content components are styled and rendered to obtain multiple code modules.

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

[0016] Add a parent element to the page element component and update the identification code of the parent element;

[0017] Disable the export function of the aforementioned logic processing component;

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

[0019] Optionally, before invoking the page to be developed in the production environment on the client side based on the target unique identifier, the method further includes:

[0020] The client-side permissions are verified through a synchronous reuse platform;

[0021] After successful verification, the existing resources of the client-side private platform are integrated through the basic tools of the synchronous reuse platform. The existing resources include at least 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 tool, the method further includes:

[0023] Identify the target comments in the development code;

[0024] Detect whether the prototype chain of the online development platform contains the target extended tool component corresponding to the target annotation;

[0025] If not, the target extension tool component will be attached to the prototype chain of the online development platform.

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

[0027] A preset event bus instance is attached 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 the code modules for communication.

[0028] Optionally, the online webpage update method further includes

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

[0030] The development code and the module identification code of each code module are associated in the database on the client side;

[0031] The updated page to be developed is switched to full-screen mode, which hides the navigation bar and toolbar of the page to be developed, so as to complete the online development of the page.

[0032] Furthermore, to achieve the above objectives, the present invention also proposes an online webpage updating device, the online webpage updating device comprising:

[0033] The calling module is used to call the undeveloped page in the production environment on the client side based on the target unique identifier;

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

[0035] The parsing module is used to parse and render the development code through at least one preset plugin to obtain multiple code modules;

[0036] An update module is used to update the page to be developed based on the multiple code modules.

[0037] Furthermore, to achieve the above objectives, the present invention also proposes a webpage online update device, which includes: a memory, a processor, and a webpage online update program stored in the memory and executable on the processor, wherein the webpage online update program is configured to implement the steps of the webpage online update method described above.

[0038] Furthermore, to achieve the above objectives, the present invention also proposes a storage medium storing a webpage online update program, wherein when the webpage online update program is executed by a processor, it implements the steps of the webpage online update method described above.

[0039] In addition, to achieve the above objectives, this application also provides a computer program product, which includes a computer program that, when executed by a processor, implements the steps of the online webpage update method described above.

[0040] The present application proposes one or more technical solutions, which have at least the following technical effects: The present invention calls the page to be developed in the production environment on the client side according to the unique identifier of the target; 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 plugin to obtain multiple code modules; and updates the page to be developed according to the multiple code modules. This realizes that by calling the page to be developed in the production environment on the client side and parsing and rendering the development code input by the developer through at least one plugin, modular development code is formed, and the page to be developed is updated according to the code modules. This shortens the development cycle and avoids the technical problem in the prior art where it is difficult for developers to conduct joint debugging and testing with the client side when updating web pages, resulting in a long development cycle. Attached Figure Description

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

[0042] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0043] Figure 1 This is a flowchart illustrating the first embodiment of the online webpage update method of the present invention;

[0044] Figure 2 This is a flowchart illustrating the second embodiment of the online webpage update method of the present invention;

[0045] Figure 3 This is a structural block diagram of the first embodiment of the online webpage update device of the present invention;

[0046] Figure 4 This is a schematic diagram of the structure of the webpage online update device of the hardware operating environment involved in the embodiments of the present invention.

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

[0048] It should be understood that the specific embodiments described herein are merely illustrative of the technical solutions of this application and are not intended to limit this application.

[0049] To better understand the technical solution of this application, a detailed description will be provided below in conjunction with the accompanying drawings and specific implementation methods.

[0050] Based on this, embodiments of the present invention provide a method for online updating of web pages, referring to... Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of a webpage online update method according to the present invention.

[0051] In this embodiment, the online webpage update method includes:

[0052] Step S10: Retrieve the undeveloped page in the production environment on the client side based on the target unique identifier.

[0053] It should be noted that the executing entity in this embodiment can be a computing service device with data processing, network communication, and program execution functions, such as a tablet computer, personal computer, or mobile phone, or an electronic device, control computer, or cloud server capable of performing the above functions. The following description uses a control computer as an example to illustrate this embodiment and the subsequent 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's production environment. In this embodiment, the target unique identifier may also include: page ID, mode selection (development / display), user ID and corresponding token, as well as information related to whether to display in full screen. Among them, the page ID, as the unique identifier of the page, ensures that the system can accurately locate the specified page resource, whether for loading, rendering or updating operations. The user ID and token are key to implementing single sign-on authentication. By verifying the validity of the user ID and token, the awkwardness of logging into the same platform when crossing platforms can be avoided, and the effect of seamless cross-platform access can be achieved in terms of process.

[0055] The mode selection information allows callers to freely switch between development mode and presentation mode according to actual needs. Development mode retains the page's debugging information and development tools, facilitating subsequent maintenance and iteration by developers; while presentation mode focuses on user experience, hiding all unnecessary platform elements to ensure the page is presented to the user in its best state. The full-screen display information indicates that when this parameter is set to full-screen mode, the page will occupy the entire browser window or application interface, hiding all platform-specific navigation bars, toolbars, and other elements, providing users with an immersive browsing experience. This feature is particularly important for pages that need to be published across platforms, as it ensures consistent page display across different platforms and is not affected by native platform elements.

[0056] Furthermore, before invoking the page to be developed in the production environment on the client side based on the target unique identifier, the process also includes:

[0057] The client-side permissions are verified through a synchronous reuse platform;

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

[0059] In practice, if developers want to call the undeveloped page in the client's production environment, they need to use an existing, fully encapsulated front-end development toolset to maintain consistency with the platform.

[0060] In this embodiment, the front-end development toolset includes basic tools and extended tools. The basic tools include, but are not limited to, the front-end and back-end communication tool Axios and the style component element-ui; the extended tools include, but are not limited to, the chart visualization component echarts, the 3D visualization tool three.js, and the map plugin.

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

[0062] Specifically, taking the front-end and back-end communication tool Axios as an example, a multi-layered interceptor is implemented on the basis of the axios plugin through the synchronous reuse platform. This can verify user permissions and perform encryption and decryption operations on front-end and back-end communication data. By reusing the existing basic tools of the platform, it can seamlessly integrate the existing resources of the private 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 process also includes:

[0064] Identify the target comments in the development code;

[0065] Detect whether the prototype chain of the online development platform contains the target extended tool component corresponding to the target annotation;

[0066] If not, the target extension tool component will be attached to the prototype chain of the online development platform.

[0067] In its implementation, this embodiment employs an on-demand asynchronous loading strategy for extended tools to improve page loading efficiency. When developers write code, they use comments in a specific format to indicate the extended tools that need to be included in the code. Before subsequent compilation, the system checks whether the required tool components are included in the Vue prototype chain of the online development platform. If not, the required extended tools are dynamically loaded and added to the code compilation by mounting them to the Vue prototype chain of the online development platform. If the required tool components are already present, compilation is performed directly without repeated loading, which effectively speeds up page loading.

[0068] Step S30: The development code is parsed and rendered using at least one preset plugin to obtain multiple code modules.

[0069] Preset plugins include, but are not limited to, page element components (template), logic processing components (script), and style content components (style).

[0070] Once a module is developed, both the development code and the compiled code will be stored in the database by module, eliminating the limitations of code repositories and facilitating code management. Later, the corresponding module ID can be mapped to the corresponding compiled code, achieving fast rendering without repeated compilation and improving the development efficiency of web pages.

[0071] Furthermore, after parsing and rendering the development code using at least one preset plugin to obtain multiple code modules, the process further includes:

[0072] A preset event bus instance is attached 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 the code modules for communication.

[0073] In its implementation, traditional online development focuses on full-page development, neglecting modular development. This invention, however, adopts a two-layer architecture of module and page layers, supporting modular development and reducing repetitive coding. Developers can drag and drop published modules to other pages using the vue-draggable plugin, with customizable position and size. After page development is complete, the position information of the corresponding module and its width and height parameters are recorded in the database. During rendering, the corresponding compiled code can be found based on the module ID, and quickly built and rendered within the specified position and range.

[0074] After loading other code modules onto the page to be developed, since the newly loaded code modules are not related to other modules on the page, for example, if a code module for historical search records is added to the page to be developed, although the "historical search records" are embedded on the front-end page, when the user clicks on this module, the module that displays the historical search records should be triggered. During this process, the historical search records module will send a request to other modules on this page, and when the data receives this event, it will respond to the event publishing request of "historical search records", search for historical data, and feed it back to the historical search records module for display.

[0075] A pre-defined event bus instance is used to receive event publication times and event subscriptions from various modules, acting as a controller between modules to break down their silos and enable communication. Event publication refers to a module calling a specific method (such as `$emit`) through this event bus instance to publish an event when it needs to send information or requests to other modules. When publishing an event, any type of data can be attached as an event payload, which will be passed along with the event to all modules on the page that have subscribed to it. Event subscription means that modules on the page can subscribe to events through the event bus instance's listener methods (such as `$on`). Once an event is published and its name matches the name specified during subscription, the subscribed modules will be immediately notified and can execute the corresponding callback function to process the received event payload. Based on this mechanism, inter-module interaction can be achieved, enabling control over the hiding and showing of modules, data changes, and other effects. This greatly improves code modularity and maintainability, making the system more flexible and easily extensible.

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

[0077] The process of updating a page to be developed can be achieved by reusing the vue-draggable plugin to other pages. This allows locally developed code modules to be embedded into the client-side page to be developed and stored in the client-side database. When the client calls the page, the module can be directly called based on the client-side database to achieve real-time rendering. This eliminates the need for front-end developers to perform maintenance and deployment, thus shortening the page development and update cycle.

[0078] Furthermore, the online webpage update method also includes...

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

[0080] The development code and the module identification code of each code module are associated in the database on the client side;

[0081] The updated page to be developed is switched to full-screen mode, which hides the navigation bar and toolbar of the page to be developed, so as to complete the online development of the page.

[0082] It should be understood that, since the traditional page update development process generally involves uploading the developed page to a cloud database, when a user calls the page, the client needs to request the entire page data from the cloud database. However, the client-side environment can interfere with the layout of the entire page, causing misalignment of various UI graphics on the front-end page when rendered on the client side due to size or resolution issues. Therefore, this embodiment stores the position and size information of the development code and the developed code modules on the page to be developed in the client-side database, updating the page to be developed in a modular way without updating the entire page, thus minimizing the impact of the client-side environment on the page.

[0083] Finally, the updated development page was 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 client's production environment based on a unique target identifier; receives development code input by developers through a front-end and back-end communication tool; parses and renders the development code through at least one preset plugin to obtain multiple code modules; and updates the page to be developed according to the multiple code modules. This achieves modular development code by calling the page to be developed in the client's production environment and parsing and rendering the development code input by developers through at least one plugin. The page to be developed is then updated according to these code modules, shortening the development cycle and avoiding the technical problem in existing technologies where developers find it difficult to conduct joint testing with the client when updating web pages, leading to a long development cycle.

[0085] Based on the first embodiment of this application, in the second embodiment of this application, the content that is the same as or similar to that in the first embodiment described above can be referred to the above description, and will not be repeated hereafter. Based on this, please refer to... Figure 2 Step S30 includes:

[0086] Step S301: The development code is parsed using the first parsing plugin to obtain page element components, logic processing components, and style content components.

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

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

[0089] It should be noted that the first parsing plugin refers to the vue-template-compiler plugin. The vue-template-compiler plugin performs initial parsing of the code. After parsing, it obtains page element components, logic processing components, and style content components. Then, it preprocesses the page element components, logic processing components, and style content components to reduce interference between modules and improve rendering efficiency.

[0090] After preprocessing, the Vue built-in extend method is used to build components and render styles, resulting in multiple encapsulated code modules.

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

[0092] Add a parent element to the page element component and update the identification code of the parent element;

[0093] Disable the export function of the aforementioned logic processing component;

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

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

[0096] The logic processing component contains data from Vue components, hooks, and a collection of processing methods. However, due to its format, it cannot be executed directly. To obtain the complete collection, it is necessary to disable its export function and run and compile it.

[0097] For style content components, since the `extend` method does not reserve a separate parameter for the `style` module, the traditional approach is to embed the `style` statement within the `template` element. However, this approach is not suitable for complex style handling and does not conform to programming habits. For different `style` syntaxes (SCSS, LESS, etc.), this invention converts them into ordinary `style` syntax and embeds them into the page. Furthermore, to prevent interference between modules, a selection layer is added on top of the converted `style`, pointing to the parent element in the `template` component.

[0098] Once a module is developed, both the development code and the compiled code will be stored in the database by module, eliminating the limitations of code repositories and facilitating code management. Later, the corresponding module ID can be mapped to the corresponding compiled code, achieving fast rendering without repeated compilation.

[0099] In this embodiment, the development code is parsed using a first parsing plugin to obtain page element components, logic processing components, and style content components. The page element components, logic processing components, and style content components are preprocessed respectively. The preprocessed page element components, logic processing components, and style content components are then rendered using 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 webpage online update device; please refer to... Figure 3 The online webpage update device includes:

[0101] Module 10 is invoked to call the undeveloped page in the production environment on the client side based on the target unique identifier.

[0102] The receiving module 20 is used to receive development code input by developers through 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 plugin to obtain multiple code modules.

[0104] Update module 40 is used to update the page to be developed based on the plurality of code modules.

[0105] This embodiment calls the page to be developed in the client's production environment based on a unique target identifier; receives development code input by developers through a front-end and back-end communication tool; parses and renders the development code through at least one preset plugin to obtain multiple code modules; and updates the page to be developed according to the multiple code modules. This achieves modular development code by calling the page to be developed in the client's production environment and parsing and rendering the development code input by developers through at least one plugin. The page to be developed is then updated according to these code modules, shortening the development cycle and avoiding the technical problem in existing technologies where developers find it difficult to conduct joint testing with the client when updating web pages, leading to a long development cycle.

[0106] In one embodiment, the receiving module 20 is further configured to parse the development code through a first parsing plugin to obtain page element components, logic processing components, and style content components; preprocess the page element components, logic processing components, and style content components respectively; and perform style rendering on the preprocessed page element components, logic processing components, and style content components through a preset rendering component to obtain multiple code modules.

[0107] In one embodiment, the receiving module 20 is further configured to add a parent element to the page element component and update the identification code of the parent element; disable the export function of the logic processing component; convert the style content component into style content syntax and associate it with the parent element constructed by the page element.

[0108] In one embodiment, the calling module 10 is further configured to verify the client-side permissions through a synchronous reuse platform; after verification, the existing resources of the client-side private platform are integrated through the basic tools of the synchronous reuse platform, wherein the existing resources include at least platform interfaces, user information and static resources.

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

[0110] In one embodiment, the parsing module 30 is further configured to attach a preset event bus instance 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.

[0111] In one embodiment, the update module 40 is further configured to store the position and size information of the development code and each code module on the page to be developed in the 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; and switch the updated page to be developed to full-screen mode, wherein the full-screen mode is used to hide the navigation bar and toolbar of the page to be developed, so as to complete the online development of the page to be developed.

[0112] This application provides a webpage online update device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the webpage online update method in Embodiment 1 above.

[0113] The following is for reference. Figure 4 The diagram illustrates a structural schematic of a webpage online update device suitable for implementing embodiments of this application. The webpage online update device in these embodiments may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Description), PMPs (Portable Media Players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 4 The illustrated online update device is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0114] like Figure 4As shown, the online webpage update device may include a processing unit 1001 (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage device 1003 into a random access memory (RAM) 1004. The RAM 1004 also stores various programs and data required for the operation of the online webpage update device. The processing unit 1001, ROM 1002, and RAM 1004 are interconnected via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to the I / O interface 1006: input devices 1007 including, for example, a touchscreen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; output devices 1008 including, for example, a liquid crystal display (LCD), speaker, vibrator, etc.; storage devices 1003 including, for example, magnetic tape, hard disk, etc.; and communication devices 1009. Communication device 1009 allows the webpage online update device to communicate wirelessly or wiredly with other devices to exchange data. Although webpage online update devices with various systems are shown in the figures, it should be understood that implementation or possession of all the systems shown is not required. More or fewer systems may be implemented alternatively.

[0115] Specifically, according to the embodiments disclosed in this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device, or installed from storage device 1003, or installed from ROM 1002. When the computer program is executed by processing device 1001, it performs the functions defined in the methods of the embodiments disclosed in this application.

[0116] The webpage online update device provided in this application, employing the webpage online update method in the above embodiments, can solve the technical problem of webpage online update. Compared with the prior art, the beneficial effects of the webpage online update device provided in this application are the same as those of the webpage online update method provided in the above embodiments, and other technical features in this webpage online update device are the same as those disclosed in the previous embodiment method, and will not be repeated here.

[0117] It should be understood that the various parts disclosed in this application can be implemented using 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 suitable manner in one or more embodiments or examples.

[0118] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0119] This application provides a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon, the computer-readable program instructions being used to execute the online webpage update method in the above embodiments.

[0120] The computer-readable storage medium provided in this application may be, for example, a USB flash drive, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. 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 conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination thereof.

[0121] The aforementioned computer-readable storage medium may be included in the online web page update device; or it may exist independently and not be assembled into the online web page update device.

[0122] The aforementioned computer-readable storage medium carries one or more programs, which, when executed by the webpage online updating device, cause the webpage online updating device to perform webpage online updating.

[0123] Computer program code for performing the operations of this application can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, and conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a Local Area Network (LAN) or a Wide Area Network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0124] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0125] The modules described in the embodiments of this application can be implemented in software or hardware. The names of the modules do not necessarily limit the functionality of the unit itself.

[0126] The readable storage medium provided in this application is a computer-readable storage medium that stores computer-readable program instructions (i.e., a computer program) for executing the above-described online webpage update method, thereby solving the technical problem of online webpage updates. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the online webpage update method provided in the above embodiments, and will not be repeated here.

[0127] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the online webpage update method described above.

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

[0129] The above description is only a part of the embodiments of this application and does not limit the patent scope of this application. All equivalent structural transformations made under the technical concept of this application and using the contents of the specification and drawings of this application, or direct / indirect applications in other related technical fields, are included in the patent protection scope of this application.

Claims

1. A method for online updating of web pages, characterized in that, The online webpage update method includes: The target unique identifier is used to call the undeveloped page in the production environment on the client side; Receive development code input from developers through front-end and back-end communication tools; The development code is parsed and rendered using at least one preset plugin to obtain multiple code modules; Update the page to be developed according to the multiple code modules; The process of receiving development code input from developers via front-end and back-end communication tools further includes: Identify the target comments in the development code; Detect whether the prototype chain of the online development platform contains the target extended tool component corresponding to the target annotation; If not, the target extension tool component will be attached to the prototype chain of the online development platform; Before calling the undeveloped page in the production environment on the client side based on the target unique identifier, the process also includes: The client-side permissions are verified through a synchronous reuse platform; After successful verification, the existing resources of the client-side private platform are integrated through the basic tools of the synchronous reuse platform. The existing resources include at least platform interfaces, user information, and static resources. The step of parsing and rendering the development code using at least one preset plugin to obtain multiple code modules further includes: A preset event bus instance is attached 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 the code modules for communication.

2. The method as described in claim 1, characterized in that, The process involves parsing and rendering the development code using at least one preset plugin to obtain multiple code modules, including: The development code is parsed using the first parsing plugin to obtain page element components, logic processing components, and style content components; The page element component, the logic processing component, and the style content component are preprocessed respectively. By using preset rendering components, the preprocessed page element components, logic processing components, and style content components are styled and rendered to obtain multiple code modules.

3. The method as described in claim 2, characterized in that, The preprocessing of the page element component, the logic processing component, and the style content component includes: Add a parent element to the page element component and update the identification code of the parent element; Disable the export function of the aforementioned logic processing component; The style content component is converted into style content syntax and associated with the parent element constructed from the page element.

4. The method according to any one of claims 1-3, characterized in that, The online webpage update method also includes The location and size information of the development code and each code module on the page to be developed are stored in the database on the client side; The development code and the module identification code of each code module are associated in the database on the client side; The updated page to be developed is switched to full-screen mode, which hides the navigation bar and toolbar of the page to be developed, so as to complete the online development of the page.

5. A webpage online update device, characterized in that, The webpage online update device is applied to the webpage online update method as described in any one of claims 1 to 4, the device comprising: The calling module is used to call the undeveloped page in the production environment on the client side based on the target unique identifier; The receiving module is used to receive development code input by developers through front-end and back-end communication tools; The parsing module is used to parse and render the development code through at least one preset plugin to obtain multiple code modules; An update module is used to update the page to be developed based on the multiple code modules.

6. A webpage online update device, characterized in that, The online webpage update device includes: a memory, a processor, and an online webpage update program stored in the memory and executable on the processor, wherein the online webpage update program is configured to implement the steps of the online webpage update method as described in any one of claims 1 to 4.

7. A storage medium, characterized in that, The storage medium stores a webpage online update program, which, when executed by a processor, implements the steps of the webpage online update method as described in any one of claims 1 to 4.

Images