Webpage data processing method and device, storage medium and electronic equipment

Abstract

The invention discloses a webpage data processing method and device, a storage medium and electronic equipment, and belongs to the technical field of computers. The method comprises the following steps: acquiring a basic protocol, wherein the basic protocol comprises a service corresponding to a webpage and a data model shared by the webpage; determining page layout information according to the business data corresponding to the target business; according to the page layout information and the basic protocol, generating display protocol data corresponding to each target display unit; on the basis of the data model, service webpage data are generated according to the service data, and the service webpage data are data needed for driving rendering operation of the target display unit; generating a target protocol corresponding to the target service according to the display protocol data and the service webpage data; and based on the target protocol, rendering the target webpage based on a data driving mode. According to the method and the device, high decoupling of front-end development and rear-end development is realized, and the development efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and particularly to a method and device for processing web page data, a storage medium, and an electronic device. Background Art

[0002] Front-end development and back-end development are two important fields in software development. They each are responsible for different parts, but cooperate together to build a complete application. The main goal of front-end development is to implement the web page interface, such as developing web page layouts, interface elements, animation effects, interaction logics, etc., to ensure that users can obtain a good experience when interacting with the application. Back-end development focuses on the logic and data processing of the application. Since the development content of front-end development and back-end development is different, usually front-end development and back-end development are carried out separately, and full communication with each other is required during the process.

[0003] Currently, there is no unified standard protocol in related technologies for front-end and back-end development, which leads to high development difficulty, relatively long front-end and back-end joint debugging time, and performance problems caused by scattered interfaces. Summary of the Invention

[0004] Embodiments of this application provide a method and device for processing web page data, a storage medium, and an electronic device to solve at least one of the foregoing technical problems.

[0005] According to one aspect of the embodiments of this application, a method for processing web page data is provided. The method includes:

[0006] Obtain a basic protocol, where the basic protocol includes the services corresponding to the web page and the data model shared by the web page. The basic protocol is a splicing extensible protocol in units of display units, and each display unit includes at least one web component in a web component library. Each web component in the web component library is adapted to the data model;

[0007] Determine page layout information according to the service data corresponding to the target service. The page layout information is used to record the number of target display units in the target web page corresponding to the target service and the display layout of each target display unit. The display layout includes the display layout of web components;

[0008] Generate display protocol data corresponding to each target display unit according to the page layout information and the basic protocol;

[0009] Generate service web page data based on the service data on the basis of the data model. The service web page data is the data required to drive the rendering operation of the target display unit;

[0010] Generate a target protocol for the target service according to each of the display protocol data and the service web page data;

[0011] Render a target web page in a data-driven mode based on the target protocol.

[0012] According to one aspect of the embodiments of the present application, a web page data processing device is provided. The device includes:

[0013] A basic protocol acquisition module, configured to acquire a basic protocol, where the basic protocol includes a service corresponding to a web page and a data model shared by the web page. The basic protocol is a splicing extensible protocol in units of display units, and each display unit includes at least one web page component in a web page component library, and each web page component in the web page component library is adapted to the data model;

[0014] A target protocol generation module, configured to determine page layout information according to service data corresponding to a target service, where the page layout information is used to record the number of target display units in a target web page corresponding to the target service and the display layout of each target display unit, and the display layout includes a web page component display layout; generate display protocol data corresponding to each target display unit according to the page layout information and the basic protocol; generate service web page data based on the service data on the basis of the data model, where the service web page data is data required to drive the rendering operation of the target display unit; and generate a target protocol corresponding to the target service according to each of the display protocol data and the service web page data;

[0015] A rendering module, configured to render a target web page in a data-driven mode based on the target protocol.

[0016] According to one aspect of the embodiments of the present application, a computer device is provided. The computer device includes a processor and a memory, and at least one instruction, at least one program, a code set or an instruction set is stored in the memory, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the above-mentioned web page data processing method.

[0017] According to one aspect of the embodiments of the present application, a computer-readable storage medium is provided. At least one instruction, at least one program, a code set or an instruction set is stored in the storage medium, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by a processor to implement the above-mentioned web page data processing method.

[0018] According to one aspect of the embodiments of the present application, a computer program product is provided. The computer program product includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to cause the computer device to execute to implement the above-mentioned web page data processing method.

[0019] The technical solution provided by the embodiments of the present application can bring the following beneficial effects:

[0020] The embodiments of the present application provide a web page data processing method. This method defines a data model that both the front-end web page and the back-end service follow through a basic protocol. By combining the data model with business data, a target protocol corresponding to a specific target business can be customized. The target protocol not only includes the display protocol corresponding to the display unit, but also includes the business web page data required for rendering the display unit. During actual rendering, after obtaining the specific content of the business web page data, the target web page can be rendered by parsing the target protocol.

[0021] The basic protocol used in this method stipulates a data model that both the front end and the back end abide by. Based on this basic protocol and combined with a specific target business, a target protocol can be obtained. Based on the target protocol, the target web page can be rendered without coupling with the back-end development process anymore, realizing a high degree of decoupling between front-end development and back-end development. Moreover, the logical connection between the front end and the back end only remains the specific business application data used when rendering the target web page. In the embodiments of the present application, the business application data can be directly used for data-driven rendering when rendering the target web page to achieve the rendering purpose. The business application data is related to the specific situation of the back-end business and does not require the attention of front-end development. Thus, flexible rendering of the target web page can be completed, that is, when rendering is required, the target protocol can be directly driven by the business application data to achieve web page rendering, completing dynamic rendering. The proposal of the data-driven mode realizes a high degree of decoupling between front-end development and back-end development, and no longer requires joint development or joint debugging of the front end and the back end, thus proposing a new front-end and back-end development mode. Description of the Drawings

[0022] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for describing the embodiments will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0023] Figure 1 It is a schematic diagram of an application program running environment provided by an embodiment of the present application;

[0024] Figure 2It is a flowchart of a web page data processing method provided by an embodiment of the present application;

[0025] Figure 3 It is a schematic diagram of a web page in a payment scenario provided by an embodiment of the present application;

[0026] Figure 4 It is a flowchart of a method for obtaining business web page data provided by an embodiment of the present application;

[0027] Figure 5 It is a schematic diagram of a target protocol generation method process provided by an embodiment of the present application;

[0028] Figure 6 It is a schematic diagram for comparing the development modes before and after logical postposition provided by an embodiment of the present application;

[0029] Figure 7 It is a schematic diagram of the implementation manner of the target web page pre-request function provided by an embodiment of the present application;

[0030] Figure 8 It is a schematic diagram of the structure of a web page development framework provided by an embodiment of the present application;

[0031] Figure 9 It is a schematic diagram of the stages of front-end development based on a web page development framework provided by an embodiment of the present application;

[0032] Figure 10 It is a schematic diagram of the detailed process of the front-end development stage provided by an embodiment of the present application;

[0033] Figure 11 It is a block diagram of a web page data processing device provided by an embodiment of the present application;

[0034] Figure 12 It is a block diagram of the structure of a computer device provided by an embodiment of the present application. Detailed implementation manners

[0035] Before introducing the method embodiments provided by the present application, relevant terms or nouns that may be involved in the method embodiments of the present application are briefly introduced first, so as to facilitate the understanding of those skilled in the art of the present application.

[0036] Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and networks within a wide area network or local area network to achieve data computing, storage, processing, and sharing. Cloud technology is the general term for network technology, information technology, integration technology, management platform technology, application technology, etc. based on the cloud computing business model. It can form a resource pool, be used as needed, and is flexible and convenient. Cloud computing technology will become an important support. The background services of technical network systems require a large amount of computing and storage resources, such as video websites, picture websites, and more portal websites. With the highly developed application of the Internet industry, in the future, each item may have its own identification mark and needs to be transmitted to the background system for logical processing. Data at different levels will be processed separately, and various industry data requires a powerful system backstop, which can only be achieved through cloud computing.

[0037] A distributed system is a software system built on top of a network. It has high cohesion and transparency. Compared with traditional centralized systems, a distributed system divides tasks into multiple parts and distributes them to different computers for processing, thereby improving the system's performance and reliability. The characteristics of a distributed system include:

[0038] High cohesion: The various components in a distributed system are tightly coupled. Task allocation and data exchange are both completed within the system without external intervention.

[0039] Transparency: Users or application programs of a distributed system do not need to care about the internal structure and details of the system. They only need to interact with the system through interfaces.

[0040] Reliability: Each component in a distributed system can operate independently. The failure of a certain component will not cause the entire system to crash.

[0041] Scalability: A distributed system can easily add or reduce nodes to adapt to changes in business requirements.

[0042] High performance: By distributing tasks to multiple nodes for processing, a distributed system can significantly improve the system's processing power and response speed.

[0043] UI components: UI components, also known as user interface components, are one of the common tools in interface design. UI components contain various elements and can be disassembled and recombined in different ways, thus enabling the rapid improvement of interface design. Using UI components can help designers quickly complete their work and improve work efficiency.

[0044] Lifecycle: In software development, the lifecycle refers to the entire process of an object or component from creation to destruction. During this process, the object or component goes through different stages, such as initialization, mounting, updating, and unloading. In front-end development, the lifecycle is usually related to UI components and is used to manage the behavior and state of components at different stages.

[0045] Split-screen loading: Split-screen loading is a performance optimization strategy that divides web page content into multiple screens, with each screen containing a part of the content. When the user scrolls the page, only the content of the currently visible screen is loaded, and the content of the non-visible screens is loaded when needed. This method can reduce the initial loading time and improve the user experience.

[0046] Mock ability: In the development process, it refers to simulating the functions of the back-end service by creating virtual data or faking interface responses. This allows front-end developers to continue development and testing even when the back-end service has not been implemented. The Mock ability helps improve development efficiency and reduce the dependence between the front-end and the back-end. In software development, the Mock function is a simulation technique used to simulate the behavior and state of actual dependencies for independent, stable, and fast testing. During testing, Mock can isolate the code under test from external dependencies, eliminate randomness and uncontrollability, improve test coverage and quality, and accelerate software development and iteration. Mock testing simulates the behavior and state of external dependencies by constructing and configuring Mock objects, making the testing independent, stable, and accurate. In actual software development, the Mock function can be applied to various scenarios, such as unit testing, integration testing, system testing, etc. By using the Mock function, developers can simulate various scenarios and conditions to conduct more comprehensive and accurate testing of the code.

[0047] JavaScript: It is a programming language widely used in web development. It is a scripting language that can run in the browser and interact with the browser to provide various dynamic functions.

[0048] Asynchronous injection: Asynchronous injection is a technique for dynamically loading and executing code. In front-end development, asynchronous injection is usually used to load JavaScript code or modules on demand to reduce the initial loading time. By asynchronous injection, code that does not need to be executed immediately can be separated and loaded and executed when needed, thus improving page performance.

[0049] JSON: Full name is JavaScript Object Notation, which is a lightweight data exchange format. It uses a text format that is completely independent of the language to store and represent data. The concise syntax and cross-platform compatibility make JSON an ideal data exchange language.

[0050] XML: The full name is Extensible Markup Language, which is a markup language. It uses tags to describe data and provides a structured format for the data.

[0051] Front-end page parsing engine: A software component responsible for parsing and processing specific data structures. In development, front-end page parsing engines are usually used to process data formats such as JSON and XML, converting the data into a structure that the front end can handle. The role of the front-end page parsing engine is to simplify the data processing flow, improve development efficiency, and achieve data-driven rendering. The front-end page parsing engine is related to the parsing and use of the protocol agreed upon between the front end and the back end.

[0052] Aochuang Protocol: A development mode that separates the front end and the back end, aiming to improve the efficiency and quality of collaborative development between the front end and the back end.

[0053] API, the full name is Application Programming Interface, which is a protocol or specification that defines how computer programs interact.

[0054] SDK, the full name is Software Development Kit, which is a collection of development tools for creating application software for specific software packages, software frameworks, hardware platforms, operating systems, etc.

[0055] Before specifically elaborating on the embodiments of the present application, the relevant technical background related to the embodiments of the present application is introduced to facilitate the understanding of those skilled in the art of the present application field.

[0056] In the scenario of software development, the front end and the back end can be developed separately based on an agreed-upon protocol. By interacting with the page obtained from front-end development, the corresponding functions of the back end can be triggered. However, in the current related technologies, there is no unified standard protocol for front-end and back-end development, which leads to difficult development, a relatively long time for front-end and back-end joint debugging, and performance problems caused by scattered interfaces.

[0057] As a protocol that supports the development mode of separating the front end and the back end, the emergence of the Aochuang Protocol realizes the decoupling of front-end development and back-end development. However, this protocol still cannot well solve the problems existing in the front-end and back-end development scenarios in the related technologies. The reason is that the Aochuang Protocol has the following drawbacks:

[0058] First, complex to understand: The application of the Ultron Protocol is highly difficult. For developers who are new to it, it may take some time to understand and master the many concepts and technical details it presents, which increases the difficulty of front-end development. Since the Ultron Protocol highly decouples the front-end and back-end, developers need to deeply understand all aspects of the protocol to fully utilize its advantages. This may result in a relatively high learning cost, especially for developers lacking experience in front-end and back-end separation, making it difficult to apply the Ultron Protocol.

[0059] Second, difficult to implement: The Ultron Protocol is optimized for specific business scenarios and technology stacks. However, for non-adapted business scenarios or projects, the implementation difficulty is very high. The Ultron Protocol depends on specific technology stacks and toolchains, which may limit developers' choices in technology selection. The Ultron Protocol itself needs to be continuously updated and optimized. This may lead to a relatively high maintenance cost.

[0060] It can be seen from this that the related technologies cannot provide a simple and easy-to-use front-end and back-end separation development solution. Due to the lack of a unified and user-friendly standard protocol, different conventions are used in the development of each business department, making cross-business development a difficult point. Moreover, the lack of uniformity in conventions makes the overall joint debugging complex, unable to maintain a unified specification, and difficult to maintain.

[0061] Not only that, with the development of computer technology and the increasing requirements for personalized web services, fixed page forms and page content are difficult to meet user needs, making the design of personalized page development solutions extremely urgent.

[0062] For example, in the payment scenario, a certain web service can cooperate with relevant banks providing payment functions to offer bank function recommendation services. The bank function recommendation service can provide a certain service of the bank to accounts that the bank is interested in. Different banks are interested in different accounts, and even the same bank may provide different services to different accounts. That is to say, the banks or services involved in the bank function recommendation services provided by this web service for different accounts can all be different, which generates the need for personalized page development, requiring the content presented on the web pages of different accounts by this web service to be different, so as to achieve the effect of "one person, one face".

[0063] However, the related technologies can neither provide a simple and easy-to-use front-end and back-end separation development solution nor meet the requirements of personalized web development. This is because personalized web development has relatively high requirements for component splicing and display technologies and related interaction technologies. Implementing personalized web development requirements with related technologies will incur relatively high costs, unable to be flexible and fast, and even less able to guarantee the development effect of personalized web pages.

[0064] In view of this, an embodiment of the present application provides a method for processing web page data. This method provides a unified and user-friendly protocol that both the front-end and back-end follow, namely the basic protocol. Through the basic protocol, a data model that both the front-end web page and the back-end service follow is defined. By combining the business data with the data model, a target protocol corresponding to a specific target business can be customized. The target protocol not only includes the display protocol corresponding to the display unit, but also includes the business web page data required for rendering the display unit. By parsing the target protocol, the target web page can be rendered.

[0065] The basic protocol used in this method stipulates the data model that both the front-end and back-end abide by. Based on this basic protocol and combined with the specific target business, the target protocol can be obtained. Based on the target protocol, the target web page can be rendered without being coupled with the back-end development process anymore, achieving a high degree of decoupling between front-end development and back-end development. Moreover, the logical connection between the front-end and back-end only remains the specific business application data used when rendering the target web page. In the embodiment of the present application, the business application data is directly used for data-driven when rendering the target web page. The business application data is related to the specific situation of the back-end business and does not require the front-end development to pay attention. Thus, flexible rendering of the target web page can be completed, that is, when rendering is required, the target protocol is directly driven by the business application data to achieve web page rendering, completing dynamic rendering. Whatever the business application data is, the rendering result is what it is. The business application data is personalized, and the rendering result is also personalized, thus achieving personalized dynamic rendering. The proposal of the data-driven mode realizes a high degree of decoupling between front-end development and back-end development, and no longer requires joint development or joint debugging of the front-end and back-end, thus proposing a new front-end and back-end development mode.

[0066] To make the objectives, technical solutions, and advantages of the present application clearer, the embodiments of the present application will be further described in detail below in conjunction with the accompanying drawings.

[0067] Please refer to Figure 1 , which shows a schematic diagram of the application program running environment provided by an embodiment of the present application. The application program running environment may include: a terminal 10 and a server 20.

[0068] The terminal 10 includes, but is not limited to, electronic devices such as mobile phones, computers, intelligent voice interaction devices, intelligent home appliances, vehicle-mounted terminals, game consoles, e-book readers, multimedia playback devices, and wearable devices. An application program client can be installed in the terminal 10.

[0069] In an embodiment of the present application, the above application can be any application capable of providing or using web page rendering services. Typically, the application can be a payment application. Of course, in addition to payment applications, services that rely on web page rendering services can also be provided in other types of applications. For example, news applications, social applications, interactive entertainment applications, browser applications, shopping applications, content sharing applications, virtual reality (VR) applications, augmented reality (AR) applications, etc. The embodiments of the present application do not limit this. The embodiments of the present application do not limit this. Optionally, a client of the above application runs in the terminal 10.

[0070] The server 20 is used to provide background services for the client of the application in the terminal 10. For example, the server 20 can be the background server of the above application. The server 20 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network, content distribution network), and big data and artificial intelligence platforms. Optionally, the server 20 provides background services for the applications in multiple terminals 10 at the same time.

[0071] Optionally, the terminal 10 and the server 20 can communicate with each other through the network 30. The terminal 10 and the server 20 can be directly or indirectly connected by wired or wireless communication methods, and the present application does not limit this here.

[0072] Please refer to Figure 2 , which shows a flowchart of a web page data processing method provided by an embodiment of the present application. This method can run in a computer device. The above computer device refers to an electronic device with data calculation and processing capabilities. For example, the execution subject of each step can be Figure 1 the server 20 or the terminal 10 in the application running environment shown.

[0073] S201. Obtain a basic protocol. The above basic protocol includes the service corresponding to the web page and the data model shared by the above web page. The above basic protocol is a splicing extensibility protocol in units of display units. Each of the above display units includes at least one web page component in the web page component library. Each of the above web page components in the web page component library is adapted to the above data model.

[0074] In this embodiment of the present application, the basic protocol is a protocol template. Based on the template of the basic protocol, the target protocol corresponding to the specific target service can be obtained. By combining the target protocol with data driving, the target web page can be rendered, thereby reducing the amount of code for front-end development. The basic protocol in the embodiment of the present application may include several contents. For example, it includes a data model shared by the back-end service and the front-end web page. The data used in the back-end service follows this data model, and the web page also parses data based on this data model. This enables complete decoupling of front-end and back-end development. Front-end and back-end development only need to fully respect the data model without interfering with each other in other ways.

[0075] This data model includes a unified floor data structure, which has good scalability to support different types of floors and components. The floor in the embodiment of the present application refers to a display unit. Since the display units can be stacked and spliced in the web page, if the web page is analogized to a building, the display effect of the display unit is similar to that of the floors in the building. The embodiment of the present application does not limit the floor data structure as long as it achieves the technical effect of unifying the front-end and back-end agreements. In some scenarios, the data model can be constructed by agreeing on data specifications and unified fields to extract a unified data dictionary, and by agreeing on the way of floor definition.

[0076] In an exemplary implementation manner, the framework content of the basic protocol is given:

[0077]

[0078]

[0079] In the embodiment of the present application, each UI component that can be rendered in the web page, or a set of web page components, forms a web page component library. Each display unit can select several web page components from the web page component library. The web page components in the web page component library are all adapted to the aforementioned data model. That is to say, by parsing the data that conforms to this data model, parsing results can be obtained, and these parsing results can be used to render these web page components.

[0080] S202. Determine the page layout information according to the service data corresponding to the target service. The page layout information is used to record the number of target display units in the target web page corresponding to the target service and the display layout of each target display unit. The display layout includes the web page component display layout.

[0081] The business data in the embodiment of the present application refers to data related to the specific target business, and data closely related to the target business scenario and the target business requirements, or data used to implement the abstract basic protocol into the business used by the target protocol that meets the specific target business. The page layout information in the embodiment of the present application includes how to stack the display units, what information is displayed in each layer of the display unit, the size, width and height of the display unit, and what components are included in the display unit, etc. The embodiment of the present application does not limit this.

[0082] For an example, see Figure 3 , which shows a schematic diagram of a web page in a payment scenario. The schematic diagram includes five display units, the bottom display unit is the first screen display unit, and the others are split screen display units. In the payment scenario, the top display unit in the web page can display the operation entrance of the first operation linked when a certain payment-related function is triggered, such as "collecting some phone bills", the second display unit can display the entrance for triggering the detailed content of the related function, the third display unit can display the operation entrance of the second operation linked when the related function is triggered, such as "collecting some rights and interests", the fourth display unit can display the operation entrance of other related operations or the entrance for collecting other rights and interests to be collected, and the fifth display unit can display the agreement agreed with the user and provide an entrance for executing the related function. The display units from the first to the fifth layers are all related to the related function, so the business data related to the related function may affect the layout of the display unit. For example, the size of the display unit can be adjusted according to the amount of data related to the display units of each layer in the business data that needs to be displayed; the stacking relationship between the display units is also configured according to the business data related to the associated function, and which data in the business data is displayed by each display unit in each display unit may affect which web page components are used in the display unit and how the web page components are laid out.

[0083] S203. Generate display protocol data corresponding to each of the target display units according to the page layout information and the basic protocol.

[0084] According to the above page layout information and the above basic protocol, the specific content of each target display unit is obtained, that is, the specific content of "modules" and / or "pendants" is obtained, and these specific contents are display protocol data. After the specific target business is implemented in the embodiment of the present application, the display unit in the target web page corresponding to the target business is called the target display unit.

[0085] S204. Based on the data model, generate business web page data according to the business data, where the business web page data is data required to drive the rendering operation of the target display unit.

[0086] According to the foregoing basic protocol, it can be known which data each target display unit corresponds to in the service data. These data can be associated with the target display unit under the data model specification for rendering the target display unit, and these data can also be referred to as first service data. Each target display unit can also share data, which are stored in the common data, and these data can also be referred to as second service data.

[0087] The above service web page data includes first service data and second service data. Please refer to Figure 4 , which shows the flowchart of the service web page data acquisition method. Based on the above data model, generating service web page data according to the above service data includes:

[0088] S401. For each of the above target display units, according to the display service corresponding to the target display unit, determine the target service data block corresponding to the target display unit in the service data; based on the above data model, obtain the first service data corresponding to the target display unit according to the above target service data block.

[0089] Continuing with the previous example, taking Figure 3 as an example, the display service corresponding to the top - level display unit can be understood as the service of displaying the operation entry of the first operation. The service data block corresponding to the first operation in the service data is the target service data block corresponding to the top - level display unit. The display service corresponding to the second - level display unit can be understood as the service of displaying the entry of the associated function. The service data block corresponding to the associated function in the service data is the target service data block corresponding to the second - level display unit. The data that includes both the content of the target service data block and meets the requirements of the data model based on the data model and the target service data block is the first service data corresponding to the target display unit.

[0090] S402. Extract the common data required for rendering the target display unit from the above service data; based on the above data model, obtain the second service data based on the above common data.

[0091] The second service data is common data and meets the requirements of the data model.

[0092] S205. Generate the target protocol corresponding to the above target service according to each of the above display protocol data and the above service web page data.

[0093] The target protocol is the result of the implementation of the specific service of the basic protocol. Please refer to Figure 5 , which shows the schematic flowchart of the target protocol generation method in the embodiments of the present application. The above generating the target protocol corresponding to the above target service according to each of the above display protocol data and the above service web page data includes:

[0094] S501. For each of the above target display units, generate a unit protocol corresponding to the above target display unit according to the first service data corresponding to the above target display unit and the display protocol data corresponding to the above target display unit.

[0095] Each target display unit, whether it is a "module" or a "pendant", can associate its own relevant first service data through "props" to obtain richer "modules" and "pendants", that is, a unit protocol.

[0096] S502. Generate a common data protocol according to the second service data in the above service web page data; splice each of the above unit protocols and the above common data protocol to obtain the above target protocol.

[0097] The content of "common" can be obtained according to the content of the second service data. Splicing each "module", "pendant" and "common" can obtain the target protocol.

[0098] S206. Render the target web page based on the above target protocol in a data-driven mode.

[0099] The embodiment of the present application uses a front-end page parsing engine adapted to the basic protocol to execute step S206. This front-end page parsing engine is specially designed for this basic protocol, and the target protocol obtained under the framework of this basic protocol can all use this front-end page parsing engine for rendering. The embodiment of the present application designs the rendering logic of the front-end page parsing engine and proposes a rendering method based on the data-driven mode. That is to say, when the target web page needs to be rendered, obtain relevant business application data according to the target protocol, parse the specific business application data to be rendered according to the target protocol, and the target web page can be rendered according to the parsing result. There is no need for additional interaction with the back-end related interfaces throughout the process. The business application data is the data generated by the back-end service. If the back-end provides personalized services, the generated business application data is personalized. Naturally, personalized display can also be realized on the front-end without designing additional personalized rendering logic on the front-end. Therefore, the data-driven mode of the embodiment of the present application realizes flexible rendering based on personalized dynamic business application data.

[0100] This rendering mode realizes a design concept of logical postposition. Please refer to Figure 6 , which shows a schematic diagram of the comparison of the development modes before and after logical postposition. Figure 6The left figure shows the development mode used when developing the front end without using the logical postposition design concept in the embodiments of the present application. In this development mode, specific data (datas) and back-end related interfaces (methods) also need to be concerned about in the front end. By implementing various components (components), page rendering is completed to obtain page1. Figure 6 The right figure shows the development mode used when developing the front end without using the logical postposition design concept in the embodiments of the present application. Only some configurations (storeoptions) need to be made in the front-end page parsing engine, without the need to concern about the data datas. Data pulling, rendering, life cycle management, etc. are realized through configuration. Moreover, due to the logical sinking, specific logic does not need to be considered when rendering floors, and only the data needs to be rendered to the page. Therefore, most of the methods do not need to be concerned about, and templated (template) rendering is realized. When rendering each floor, shortcut tools (utils), common methods, and common data (store) can be shared. Since the back end does not need to be considered too much during rendering, templated rendering can be realized, and the rendering efficiency can be further improved by using a large number of web templates.

[0101] Furthermore, the embodiments of the present application can configure the front-end page parsing engine to enable it to implement many functions. These functions are implemented by the front-end page parsing engine, so that users do not need to design additional code, significantly reducing the difficulty of front-end development and realizing low-code or no-code front-end development. Generally speaking, the above front-end page parsing engine can include at least one of the following configuration items:

[0102] A data parsing configuration item for configuring rules for parsing business application data;

[0103] A data parsing handling item for handling the parsing results of business application data;

[0104] A life cycle management item for managing the life cycle of the above target web page;

[0105] A web page layout configuration item for adjusting the layout of the target web page;

[0106] A data modification configuration item for temporarily modifying the parsing results of the above business application data;

[0107] A rendering optimization configuration item for intercepting page jumps, calling the data acquisition interface corresponding to the target page to obtain the associated application data corresponding to the target page, and parsing and caching the associated application data.

[0108] Specifically, the following table gives an excerpt of the configurable content of the front-end page parsing engine:

[0109]

[0110] For the meanings of the technical terms in the table, the embodiments of the present application make the following explanations:

[0111] Transmit standard data: Output common data structures through public data;

[0112] Interface pre-request: When the page is opened or switched, detect in advance and pull the data of the page for caching, which can reduce the loading waiting time;

[0113] beforeRequestApi: Do some special processing before the main interface request, such as reporting or data processing;

[0114] pageKey: To perform general page reporting, the key of the page can be configured for reporting;

[0115] apiPromise: The promise obtained from the main data (the data source for page rendering) interface. Promise refers to an asynchronous method for obtaining data in the front end;

[0116] stickyOption: Since there may be some floors or the first-screen display floors (or widgets) on the page that need to be fixed to the top, but they are not at the top at the beginning, it is necessary to configure the fixed-to-top at this time;

[0117] fixedTop: Mark the height of the content fixed to the top to determine the relative position of the content with dynamic fixed-to-top. For example, there may be a navigation bar widget fixed to the top;

[0118] General function: Provide a method to modify page data:

[0119] $initStore(……): Initialize, used to refresh the page;

[0120] $updateModuleData(……): Update the data of a certain floor;

[0121] $updateModuleInnerData(……): Update the data inside a certain floor (partial update);

[0122] $getModuleData(……): Obtain the data of a certain floor according to the floor identifier;

[0123] $getModulesDataByType(……): Obtain the data of a certain floor according to the floor type;

[0124] $showLayer(……): Show a semi-modal layer;

[0125] $closeLayer(……): Close the semi-popup layer.

[0126] In an embodiment of the present application, the front-end page parsing engine can render the target web page according to the configuration result. Specifically, rendering the target web page based on the above-mentioned target protocol in a data-driven mode may include the following operations performed by the front-end page parsing engine adapted to the above-mentioned basic protocol: when receiving the rendering instruction corresponding to the above-mentioned target web page, obtaining the service application data associated with the above-mentioned target protocol; parsing the service application data based on the above-mentioned target protocol to obtain the first application data corresponding to each of the above-mentioned target display units and the second application data shared by multiple above-mentioned target display units; and rendering the relevant target display units according to each of the above-mentioned first application data and the above-mentioned second application data.

[0127] The above-mentioned target protocol includes a first-screen rendering identifier, and the first-screen rendering identifier indicates the first-screen display unit, and the first-screen display unit is the target display unit to be rendered in the first-screen rendering scenario; when the above-mentioned rendering instruction is a first-screen rendering instruction, the rendering of the relevant target display units according to each of the above-mentioned first application data and the above-mentioned second application data includes: rendering the first-screen display unit according to each of the above-mentioned first application data and the above-mentioned second application data.

[0128] In summary, the above-mentioned front-end page parsing engine is a configurable engine, and the front-end page parsing engine is used to parse the above-mentioned service application data according to the configuration result and render the above-mentioned target web page under the drive of the parsing result of the above-mentioned service application data. The front-end page parsing engine can implement various functions according to its configuration content, including but not limited to target page rendering, first-screen rendering or split-screen rendering. Please refer to Figure 7 , which shows a schematic diagram of the implementation method of the target web page pre-request function in an embodiment of the present application. Figure 7 The content shown is the configuration items that need to be configured in the front-end page parsing engine to implement the target web page pre-request function. If there are operation entrances for certain operations or jump entrances for certain web pages in the target web page, page jumps will occur when these operation entrances or jump entrances are triggered. The target web page pre-request function can actively pull the interfaces related to the target page to be jumped to and cache the relevant data when detecting a page jump, which can save the time-consuming of waiting for data and improve the jump fluency.

[0129] The embodiments of the present application propose a concept of web page rendering in a data-driven mode, which can also improve the testing efficiency and support front-end testing without the need for front-end and back-end joint debugging. The embodiments of the present application can generate test application data according to the above target protocol, render a test page according to the above test application data and the above target protocol, and adjust the above target protocol according to the above test page. Obviously, only virtual or simulated data (test application data) needs to be generated according to the target protocol to achieve the test purpose, without actually conducting joint debugging with the back-end. The generation of test application data can be based on mature Mock capabilities and does not constitute an implementation obstacle. The following table shows the differences between the related technologies and the embodiments of the present application in the front-end testing solution.

[0130]

[0131] In the embodiments of the present application, VO refers to the data of the background interface. In back-end development, VO is short for Value Object (value object). A value object is a design pattern used to represent an object that does not have its own life cycle. View is the element for page rendering. In front-end development, View (view) refers to the display part of the user interface. The view is responsible for presenting data to the user in a visual way and receiving the user's input and interaction. In the present application, VO and View can be associated to implement front-end testing based on a dynamic protocol, without the need to consider the back-end interface or rely on front-end and back-end joint debugging tests.

[0132] In one implementation, determining the page layout information according to the business data corresponding to the target business includes: displaying a page layout design interface, where the page layout design interface includes a component selection control for selecting web components in the above web component library; in response to a trigger instruction for the above component selection control, displaying at least one target web component; in response to a layout editing instruction for the target web component, determining the display layout of the web component; in response to an editing instruction for any one of the above target web components, obtaining the corresponding attribute data of the target web component; and determining the above page layout information according to the corresponding attribute data of each of the above target web components and the above display layout of the web component.

[0133] The embodiments of the present application do not limit the attribute data, which may be data formed by the attributes of the web components themselves. The embodiments of the present application support developers to generate page layout information in a visual manner through the display page layout design interface. In some embodiments, the display page layout design interface may display a layout automatically generated based on business data, and obtain a layout formed by multiple target web components. The developer adjusts the layout to obtain the page layout information. The embodiments of the present application provide a unified visual editor and preview ability, so that what is seen is what is obtained when the business is built. The display page layout design interface can be understood as a visual floor editor, enabling non-technical personnel to easily create and modify floor data. The visual floor editor provides a real-time preview function so that users can immediately see the effect of the changes.

[0134] The web data processing method provided by the embodiments of the present application can be implemented relying on a web development framework. The structure of the web development framework can refer to Figure 8 . Figure 8 The server side in it is the development object of back-end development. R & D personnel for back-end development can design a unified SDK for the server side and support various business services based on the SDK. The protocol platform is used to manage the basic protocols, which include floor definitions, data dictionaries, Mock capabilities, etc. With the support of the protocol platform, the basic protocols can be managed and upgraded, and version management of the basic protocols can be carried out.

[0135] The front-end part mainly provides web page rendering under the dynamic protocol support driven by data based on the front-end page parsing engine, so that most web page personalized renderings can be flexibly realized in a configurable manner. Moreover, the front-end page parsing engine also provides various core capabilities, such as data processing capabilities, management capabilities, event and message management capabilities, etc. With the support of the front-end page parsing engine, web page rendering can be achieved on various front-ends, such as in mini-programs, applications, or web pages based on H5. H5 refers to the fifth-generation hypertext markup language.

[0136] This web development framework has the following remarkable advantages:

[0137] First, this web development framework supports a configurable floor rendering engine, that is, the front-end page parsing engine. It dynamically generates the front-end page according to the unified floor data structure. This simplifies the front-end development process and improves the collaborative development efficiency between the front-end and the back-end through the unified floor data structure and the front-end and back-end interface protocols.

[0138] Second, this web development framework supports a web component library, creating a library containing various common web components, improving the reuse rate of web components and reducing the development cost. These web components should follow the unified floor data structure and support flexible configuration.

[0139] Third, the web development framework stipulates the front-end and back-end interface protocols: Define a set of front-end and back-end interface protocols to enable the front-end and back-end to work together efficiently. The protocol includes specifications in aspects such as data exchange format and interface call method. Provide a unified protocol specification, including unified Mock data capabilities and unified development processes, reducing the understanding cost across different businesses.

[0140] Fourth, the web development framework supports automated testing and deployment: Provide a set of automated testing and deployment tools to ensure stability and reliability throughout the development cycle. This includes various testing methods such as unit testing, integration testing, and performance testing, as well as support for continuous integration and continuous deployment, ensuring front-end stability and reliability; and strengthening security guarantees to prevent potential security risks.

[0141] Fifth, the web development framework supports performance optimization strategies: Implement a series of performance optimization strategies to ensure good performance of the front-end development results in different device and network environments. This includes various technical means such as code compression, image optimization, and lazy loading. Support split-screen rendering, unified reporting, asynchronous injection, single-floor refresh, speed measurement reporting, etc., reducing front-end and back-end development work. Provide security guarantees to ensure stability and security under various security attacks. This includes various security protection measures such as input validation, cross-site scripting attack protection, and SQL injection attack protection.

[0142] Sixth, the web development framework supports visual front-end development. The front-end page parsing engine is configurable, and a visual floor editor is also provided, lowering the development threshold and enabling non-technical personnel to participate in the creation and modification of floors. The web development framework is easy to get started with, has no high costs, and can support most businesses, with a high scope of application.

[0143] Please refer to Figure 9 , which shows a schematic diagram of the stages of front-end development based on the web development framework in the embodiments of the present application. In the first stage, component fields are defined according to business requirements. In the second stage, Mock data is generated according to business requirements. After front-end development, front-end debugging is performed based on the Mock data. In the application stage, more complete online front-end comprehensive testing can be jointly carried out with the back-end.

[0144] Please refer to Figure 10, which shows the schematic diagram of the detailed process in the front-end development stage of the embodiments of the present application. First, designers can generate design drafts in a visual editing manner according to business requirements, and the design drafts reflect the page layout information of specific target services. According to the page layout information and basic protocols, specific target protocols are generated, and under the drive of specific business application data transmitted from the back end, the target protocols are rendered to obtain target web pages. The basic protocols of the embodiments of the present application can support multiple rendering methods, thereby improving the rendering effect of the target protocols. For example, they can support diversified rendering technologies such as split-screen rendering, page structure tiling, component cohesion, and first-screen rendering.

[0145] In some embodiments, the front-end application can also be divided into multiple independent sub-applications, and each sub-application is responsible for a specific business area. This architecture combined with the web development framework in the present application can further decouple the front and back ends, improve development efficiency, and at the same time support different teams to develop using different technology stacks. Moreover, the web development framework in the present application supports visual page editing and page rendering in a data-driven mode, thereby greatly reducing the amount of front-end code that needs to be manually written and providing a no-code or low-code front-end development mode.

[0146] In some embodiments, GraphQL technology can also be used to make the front-end and back-end data interaction more efficient, flexible, and scalable. This can simplify the front-end data processing logic and improve development efficiency. GraphQL is a query language that provides a more effective and reliable way to retrieve and operate data.

[0147] In some embodiments, Web Components technology can also be used to create reusable UI components to achieve component sharing across frameworks and projects. This solution can improve the component reuse rate and reduce development costs. WebComponents is a set of native ways to encapsulate components, allowing developers to define some reusable custom elements.

[0148] The following are the device embodiments of the present application, which can be used to execute the method embodiments of the present application. For details not disclosed in the device embodiments of the present application, please refer to the method embodiments of the present application.

[0149] Please refer to Figure 11 , which shows the block diagram of a web data processing device provided by an embodiment of the present application. The device can be a computer device or can be set in a computer device. The device can include:

[0150] The basic protocol acquisition module 1101 is used to acquire a basic protocol. The above basic protocol includes the services corresponding to the web pages and the data models shared by the above web pages. The above basic protocol is a splicing extensibility protocol in units of display units. Each of the above display units includes at least one web component in the web component library, and each of the above web components in the web component library is adapted to the above data model;

[0151] The target protocol generation module 1102 is used to determine page layout information according to the service data corresponding to the target service. The above page layout information is used to record the number of target display units in the target web page corresponding to the above target service and the display layout of each of the above target display units. The above display layout includes the web component display layout; generate display protocol data corresponding to each of the above target display units according to the above page layout information and the above basic protocol; generate service web page data based on the above service data on the basis of the above data model. The above service web page data is the data required to drive the rendering operation of the above target display unit; and generate the target protocol corresponding to the above target service according to each of the above display protocol data and the above service web page data;

[0152] The rendering module 1103 is used to render the target web page based on the above target protocol in a data-driven mode.

[0153] In one embodiment, the above target protocol generation module 1102 is used to perform the following operations:

[0154] For each of the above target display units, determine the target service data block corresponding to the above target display unit in the service data according to the display service corresponding to the above target display unit; obtain the first service data corresponding to the above target display unit based on the above target service data block on the basis of the above data model;

[0155] Extract the common data required for rendering the target display unit from the above service data;

[0156] Obtain the second service data based on the above common data on the basis of the above data model.

[0157] In one embodiment, the above target protocol generation module 1102 is used to perform the following operations:

[0158] For each of the above target display units, generate the unit protocol corresponding to the above target display unit according to the first service data corresponding to the above target display unit and the display protocol data corresponding to the above target display unit;

[0159] Generate a common data protocol according to the second service data in the above service web page data;

[0160] Splice each of the above unit protocols and the above common data protocol to obtain the above target protocol.

[0161] In one embodiment, the above rendering module 1103 is used to perform the following operations:

[0162] When receiving the rendering instruction corresponding to the above target web page, obtain the service application data associated with the above target protocol;

[0163] Parse the service application data based on the above target protocol to obtain the first application data corresponding to each of the above target display units and the second application data shared by multiple above target display units;

[0164] Render the relevant target display units according to each of the above first application data and the above second application data.

[0165] In one embodiment, the above target protocol includes a first-screen rendering identifier, the first-screen rendering identifier indicates the first-screen display unit, and the first-screen display unit is the target display unit to be rendered in the first-screen rendering scenario; the above rendering module 1103 is used to perform the following operations:

[0166] When the above rendering instruction is a first-screen rendering instruction, render the first-screen display unit according to each of the above first application data and the above second application data.

[0167] In one embodiment, the above front-end page parsing engine is a configurable engine, and the front-end page parsing engine is used to parse the above service application data according to the configuration result and render the above target web page under the drive of the parsing result of the above service application data.

[0168] In one embodiment, the above front-end page parsing engine includes at least one of the following configuration items:

[0169] Data parsing configuration item, used to configure the rules for parsing service application data;

[0170] Data parsing handling item, used to handle the parsing result of service application data;

[0171] Lifecycle management item, used to manage the lifecycle of the above target web page;

[0172] Web page layout configuration item, used to adjust the layout of the target web page;

[0173] Data modification configuration item, used to temporarily modify the parsing result of the above service application data;

[0174] Rendering optimization configuration item, which is used to intercept page jumps, call the data acquisition interface corresponding to the target page to obtain the associated application data corresponding to the target page, and parse and cache the associated application data.

[0175] In one embodiment, the above-mentioned rendering module 1103 is used to perform the following operations:

[0176] Generate test application data according to the above-mentioned target protocol;

[0177] Render a test page according to the above-mentioned test application data and the above-mentioned target protocol;

[0178] Adjust the above-mentioned target protocol according to the above-mentioned test page.

[0179] In one embodiment, the above-mentioned target protocol generation module 1102 is used to perform the following operations:

[0180] Display a page layout design interface, where the page layout design interface includes a component selection control, and the component selection control is used to select web components in the above-mentioned web component library;

[0181] In response to a trigger instruction for the above-mentioned component selection control, display at least one target web component;

[0182] In response to a layout editing instruction for the target web component, determine the web component display layout;

[0183] In response to an editing instruction for any of the above-mentioned target web components, obtain the attribute data corresponding to the target web component;

[0184] Determine the above-mentioned page layout information according to the attribute data corresponding to each of the above-mentioned target web components and the above-mentioned web component display layout.

[0185] It should be noted that when the device provided in the above embodiment realizes its functions, only the division of the above-mentioned functional modules is used for illustration. In actual applications, the above functions can be allocated to different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. In addition, the device provided in the above embodiment and the method embodiment belong to the same concept, and the specific implementation process can be seen in the method embodiment, which will not be repeated here.

[0186] Please refer to Figure 12 , which shows the structural block diagram of a computer device provided in an embodiment of the present application. The computer device can be a server for executing the above-mentioned web data processing method. Specifically:

[0187] The computer device 1200 includes a Central Processing Unit (CPU) 1201, a system memory 1204 including a Random Access Memory (RAM) 1202 and a Read Only Memory (ROM) 1203, and a system bus 1205 connecting the system memory 1204 and the central processing unit 1201. The computer device 1200 also includes a Basic Input / Output System (I / O (Input / Output) system) 1206 for facilitating information transfer between various components within the computer, and a mass storage device 1207 for storing an operating system 1213, application programs 1214, and other program modules 1215.

[0188] The Basic Input / Output System 1206 includes a display 1208 for displaying information and input devices 1209 such as a mouse and a keyboard for user input of information. Both the display 1208 and the input devices 1209 are connected to the central processing unit 1201 through an input / output controller 1210 connected to the system bus 1205. The Basic Input / Output System 1206 may also include the input / output controller 1210 for receiving and processing inputs from multiple other devices such as a keyboard, a mouse, or an electronic stylus. Similarly, the input / output controller 1210 also provides output to a display screen, a printer, or other types of output devices.

[0189] The mass storage device 1207 is connected to the central processing unit 1201 through a mass storage controller (not shown) connected to the system bus 1205. The mass storage device 1207 and its associated computer-readable medium provide non-volatile storage for the computer device 1200. That is, the mass storage device 1207 may include a computer-readable medium (not shown) such as a hard disk or a CD-ROM (Compact Disc Read-Only Memory) drive.

[0190] Without loss of generality, computer-readable media may include computer storage media and communication media. Computer storage media includes volatile and non-volatile, removable and non-removable media implemented by any method or technology for storing information such as computer-readable instructions, data structures, program modules, or other data. Computer storage media includes RAM, ROM, EPROM (Erasable Programmable Read Only Memory), EEPROM (Electrically Erasable Programmable Read Only Memory), flash memory or other solid-state storage technologies, CD-ROM, DVD (Digital Video Disc) or other optical storage, magnetic tape cartridges, tapes, disk storage or other magnetic storage devices. Of course, those skilled in the art will understand that computer storage media is not limited to the above several types. The above-mentioned system memory 1204 and mass storage device 1207 may be collectively referred to as memory.

[0191] According to various embodiments of the present application, the computer device 1200 may also run on a remote computer on the network connected through a network such as the Internet. That is, the computer device 1200 may be connected to the network 1212 through the network interface unit 1211 connected to the system bus 1205, or in other words, the network interface unit 1211 may also be used to connect to other types of networks or remote computer systems (not shown).

[0192] The above-mentioned memory further includes a computer program, which is stored in the memory and is configured to be executed by one or more processors to implement the above-mentioned web page data processing method.

[0193] In an exemplary embodiment, a computer-readable storage medium is further provided. At least one instruction, at least one program segment, a code set or an instruction set is stored in the above-mentioned storage medium. When the above-mentioned at least one instruction, the above-mentioned at least one program segment, the above-mentioned code set or the above-mentioned instruction set is executed by a processor, the above-mentioned web page data processing method is implemented.

[0194] Specifically, the web page data processing method includes:

[0195] Obtain a basic protocol, where the basic protocol includes the services corresponding to the web page and the data model shared by the web page. The basic protocol is a splicing extensibility protocol in units of display units. Each of the above-mentioned display units includes at least one web page component in the web page component library, and each of the above-mentioned web page components in the web page component library is adapted to the above-mentioned data model;

[0196] Determine the page layout information according to the service data corresponding to the target service. The above page layout information is used to record the number of target display units in the target web page corresponding to the above target service and the display layout of each of the above target display units. The above display layout includes the display layout of web page components;

[0197] Generate the display protocol data corresponding to each of the above target display units according to the above page layout information and the above basic protocol;

[0198] On the basis of the above data model, generate service web page data according to the above service data. The above service web page data is the data required to drive the rendering operation of the above target display units;

[0199] Generate the target protocol corresponding to the above target service according to each of the above display protocol data and the above service web page data;

[0200] Render the target web page based on the above target protocol in a data-driven mode.

[0201] In one embodiment, the above service web page data includes first service data and second service data. The above generating service web page data according to the above service data on the basis of the above data model includes:

[0202] For each of the above target display units, determine the target service data block corresponding to the above target display unit in the service data according to the display service corresponding to the above target display unit; on the basis of the above data model, obtain the first service data corresponding to the above target display unit according to the above target service data block;

[0203] Extract the common data required for rendering the target display unit from the above service data;

[0204] On the basis of the above data model, obtain the second service data based on the above common data.

[0205] In one embodiment, the above generating the target protocol corresponding to the above target service according to each of the above display protocol data and the above service web page data includes:

[0206] For each of the above target display units, generate the unit protocol corresponding to the above target display unit according to the first service data corresponding to the above target display unit and the display protocol data corresponding to the above target display unit;

[0207] Generate a common data protocol according to the second service data in the above service web page data;

[0208] Concatenate each of the above unit protocols and the above common data protocol to obtain the above target protocol.

[0209] In one embodiment, rendering a target web page based on a data-driven mode based on the above target protocol includes the following operations performed by a front-end page parsing engine adapted by the above basic protocol:

[0210] When receiving a rendering instruction corresponding to the above target web page, obtaining service application data associated with the above target protocol;

[0211] Parsing the service application data based on the above target protocol to obtain first application data corresponding to each of the above target display units and second application data shared by multiple above target display units;

[0212] Rendering relevant target display units according to each of the above first application data and the above second application data.

[0213] In one embodiment, the above target protocol includes a first-screen rendering identifier, the first-screen rendering identifier indicates a first-screen display unit, and the first-screen display unit is a target display unit to be rendered in a first-screen rendering scenario;

[0214] When the above rendering instruction is a first-screen rendering instruction, the above rendering relevant target display units according to each of the above first application data and the above second application data includes: rendering the first-screen display unit according to each of the above first application data and the above second application data.

[0215] In one embodiment, the above front-end page parsing engine is a configurable engine, and the front-end page parsing engine is used to parse the service application data according to a configuration result and render the above target web page under the drive of a parsing result of the service application data.

[0216] In one embodiment, the above front-end page parsing engine includes at least one of the following configuration items:

[0217] A data parsing configuration item for configuring rules for parsing service application data;

[0218] A data parsing handling item for handling a parsing result of service application data;

[0219] A life cycle management item for managing the life cycle of the above target web page;

[0220] A web page layout configuration item for adjusting the layout of the target web page;

[0221] A data modification configuration item for temporarily modifying a parsing result of the above service application data;

[0222] A rendering optimization configuration item for intercepting page jumps, calling a data acquisition interface corresponding to a target page to obtain associated application data corresponding to the above target page, parsing and caching the associated application data.

[0223] In one embodiment, the above method further includes:

[0224] Generating test application data according to the above target protocol;

[0225] Rendering a test page according to the above test application data and the above target protocol;

[0226] Adjusting the above target protocol according to the above test page.

[0227] In one embodiment, determining the page layout information according to the service data corresponding to the target service includes:

[0228] Displaying a page layout design interface, where the page layout design interface includes a component selection control, and the component selection control is used to select web components in the above web component library;

[0229] In response to a trigger instruction for the above component selection control, displaying at least one target web component;

[0230] In response to a layout editing instruction for the target web component, determining the display layout of the web component;

[0231] In response to an editing instruction for any one of the above target web components, obtaining the attribute data corresponding to the above target web component;

[0232] Determining the above page layout information according to the attribute data corresponding to each of the above target web components and the above display layout of the web component.

[0233] Optionally, the computer-readable storage medium may include: ROM (Read Only Memory), RAM (Random Access Memory), SSD (Solid State Drives), or optical discs, etc. Among them, the random access memory may include ReRAM (Resistance Random Access Memory) and DRAM (Dynamic Random Access Memory).

[0234] In an exemplary embodiment, there is also provided a computer program product or a computer program. The computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the above web page data processing method.

[0235] It should be understood that "a plurality of" as mentioned herein refers to two or more. "And / or" describes the association relationship of associated objects and indicates that there can be three relationships. For example, A and / or B can represent three situations: A exists alone, A and B exist simultaneously, and B exists alone. The character " / " generally represents an "or" relationship between the associated objects before and after. In addition, the step numbers described in this application only exemplarily show a possible execution sequence between steps. In some other embodiments, the above steps may not be executed in the numbered order. For example, two steps with different numbers can be executed simultaneously, or two steps with different numbers can be executed in the reverse order of the illustration. The embodiments of this application do not make any limitations in this regard.

[0236] In the embodiments of this application, the term "module" or "unit" refers to a computer program with a predetermined function or a part of a computer program, which works together with other related parts to achieve a predetermined goal, and can be fully or partially implemented by using software, hardware (such as a processing circuit or a memory), or a combination thereof. Similarly, one processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be a part of the overall module or unit that includes the function of the module or unit.

[0237] In addition, in the specific implementation manners of this application, when it comes to data related to user information, etc., when the above embodiments of this application are applied to specific products or technologies, user permission or consent needs to be obtained, and the collection, use, and processing of relevant data need to comply with the relevant laws, regulations, and standards of the relevant countries and regions.

[0238] The above are only exemplary embodiments of this application and are not intended to limit this application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of this application shall be included within the protection scope of this application.

Claims

1. A method for processing web page data, characterized in that, The method includes: Obtain a basic protocol, where the basic protocol includes the services corresponding to the web page and the data model shared by the web page. The basic protocol is a splicing extensible protocol in units of display units, and each display unit includes at least one web component in the web component library. Each web component in the web component library is adapted to the data model; Determine page layout information according to the service data corresponding to the target service. The page layout information is used to record the number of target display units in the target web page corresponding to the target service and the display layout of each target display unit. The display layout includes the web component display layout; Generate display protocol data corresponding to each target display unit according to the page layout information and the basic protocol; Generate service web page data based on the service data on the basis of the data model. The service web page data is the data required to drive the rendering operation of the target display unit; Generate a target protocol corresponding to the target service according to each display protocol data and the service web page data; Render the target web page based on the data-driven mode based on the target protocol.

2. The method according to claim 1, wherein The service web page data includes first service data and second service data. The generating service web page data based on the service data on the basis of the data model includes: For each target display unit, determine the target service data block corresponding to the target display unit in the service data according to the display service corresponding to the target display unit; on the basis of the data model, obtain the first service data corresponding to the target display unit according to the target service data block; Extract the common data required for rendering the target display unit from the service data; Based on the common data, obtain the second service data on the basis of the data model.

3. The method according to claim 2, wherein The generating the target protocol corresponding to the target service according to each display protocol data and the service web page data includes: For each target display unit, generate a unit protocol corresponding to the target display unit according to the first service data corresponding to the target display unit and the display protocol data corresponding to the target display unit; Generate a common data protocol according to the second service data in the service web page data; Splice each unit protocol and the common data protocol to obtain the target protocol.

4. The method according to any one of claims 1 to 3, characterized in that The rendering the target web page based on the data-driven mode based on the target protocol includes the following operations performed by the front-end page parsing engine adapted by the basic protocol: When receiving the rendering instruction corresponding to the target web page, obtain the service application data associated with the target protocol; Parse the service application data based on the target protocol to obtain the first application data corresponding to each target display unit and the second application data shared by multiple target display units; Render the relevant target display units according to each first application data and the second application data.

5. The method according to claim 4, wherein The target protocol includes a first-screen rendering identifier, which indicates a first-screen display unit, and the first-screen display unit is a target display unit to be rendered in the first-screen rendering scenario; When the rendering instruction is a first-screen rendering instruction, rendering the relevant target display unit according to each of the first application data and the second application data includes: rendering the first-screen display unit according to each of the first application data and the second application data.

6. The method according to claim 4, wherein The front-end page parsing engine is a configurable engine, which is used to parse the service application data according to the configuration result and render the target web page under the drive of the parsing result of the service application data.

7. The method according to claim 6, wherein The front-end page parsing engine includes at least one of the following configuration items: A data parsing configuration item, which is used to configure the rules for parsing service application data; A data parsing handling item, which is used to handle the parsing result of service application data; A lifecycle management item, which is used to manage the lifecycle of the target web page; A web page layout configuration item, which is used to adjust the layout of the target web page; A data modification configuration item, which is used to temporarily modify the parsing result of the service application data; A rendering optimization configuration item, which is used to intercept page jumps, call the data acquisition interface corresponding to the target page to obtain the associated application data corresponding to the target page, and parse and cache the associated application data.

8. The method according to claim 1, wherein The method further includes: Generating test application data according to the target protocol; Rendering a test page according to the test application data and the target protocol; Adjusting the target protocol according to the test page.

9. The method according to claim 1, characterized in that Determining the page layout information according to the service data corresponding to the target service includes: Displaying a page layout design interface, which includes a component selection control for selecting web page components in the web page component library; In response to a trigger instruction for the component selection control, displaying at least one target web page component; In response to a layout editing instruction for the target web page component, determining the display layout of the web page component; In response to an editing instruction for any one of the target web page components, obtaining the attribute data corresponding to the target web page component; Determining the page layout information according to the attribute data corresponding to each target web page component and the display layout of the web page component.

10. A web page data processing device, characterized in that, The device includes: A basic protocol acquisition module, which is used to acquire a basic protocol, and the basic protocol includes the service corresponding to the web page and the data model shared by the web page. The basic protocol is a splicing extensible protocol in units of display units, and each display unit includes at least one web page component in the web page component library, and each web page component in the web page component library is adapted to the data model; A target protocol generation module, configured to determine page layout information according to service data corresponding to a target service, where the page layout information is used to record the number of target display units in a target web page corresponding to the target service and the display layout of each target display unit, and the display layout includes a web component display layout; generate display protocol data corresponding to each target display unit according to the page layout information and the basic protocol; generate service web page data based on the service data on the basis of the data model, where the service web page data is data required to drive the rendering operation of the target display unit; and generate a target protocol corresponding to the target service according to each display protocol data and the service web page data. A rendering module, configured to render a target web page based on the target protocol in a data-driven mode.

11. A computer device, characterized in that, The computer device includes a processor and a memory, and at least one instruction, at least one program, a code set or an instruction set is stored in the memory, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the web page data processing method according to any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, At least one instruction, at least one program, a code set or an instruction set is stored in the storage medium, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by a processor to implement the web page data processing method according to any one of claims 1 to 9.

13. A computer program product, characterized in that, The computer program product includes computer instructions, the computer instructions are stored in a computer-readable storage medium, a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions so that the computer device executes to implement the web page data processing method according to any one of claims 1 to 9.

Images