Page development method and device, server and storage medium
Patent Information
- Application Number
- CN202210314190.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-03-28
- Publication Date
- 2026-10-23
- Estimated Expiration
- 2042-03-28
AI Technical Summary
[0003]在实现本发明的过程中,发现现有技术中至少存在如下技术问题:富文本平台仅支持简单的页面开发,无法支撑灵活多变的业务场景,需要持续投入沟通成本以及大量占用研发、测试等资源,并且也不支持页面内容的二次编码和已有元素的复用,开发效率低
[0049]本发明实施例提供了一种页面开发方法、装置、服务器及存储介质,首先根据页面需求创建待开发页面,所述页面需求是页面使用者对目标页面的功能的需求;然后通过所述页面需求对应的开发工具处理所述待开发页面,得到所述目标页面,其中,所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境;最后发布所述目标页面。本实施例通过根据页面需求灵活采用不同的开发工具,可利用富文本编辑器导入丰富的模板物料,也可以利用在线集成开发环境供开发者线上快速编写代码,满足了页面功能开发的多样性需求,也提高了开发效率。
Smart Images

Figure CN114706579B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of web page development technology, and in particular to a web page development method, apparatus, server and storage medium. Background Technology
[0002] Rich text platforms are web page creation tools used in web development, providing tools for product and operations teams. They can be used to create simple pages such as product introductions, agreement documents, and system update logs. With the continuous development of internet technology, front-end teams face diverse business scenarios with varying rules and styles. Especially during holidays, changes in geographical location, or irregular events, pages need constant changes and updates. Product managers need to clarify development requirements, communicate with developers, and then the developers go through a complex process of development and testing before the page can be finally released and launched.
[0003] In the process of realizing this invention, it was found that the prior art has at least the following technical problems: rich text platforms only support simple page development, cannot support flexible and ever-changing business scenarios, require continuous investment in communication costs and occupy a large amount of R&D, testing and other resources, and do not support secondary encoding of page content and reuse of existing elements, resulting in low development efficiency. Summary of the Invention
[0004] This invention provides a page development method, apparatus, server, and storage medium to enable flexible development for different page requirements and improve page development efficiency.
[0005] In a first aspect, embodiments of the present invention provide a page development method, including:
[0006] Create a page to be developed based on page requirements, where page requirements are the functional requirements of the target page for page users.
[0007] The page to be developed is processed by the development tool corresponding to the page requirements to obtain the target page. The development tool includes a rich text editor for importing template materials from the template library and / or an online integrated development environment for editing code.
[0008] Publish the target page.
[0009] Optionally, the page requirements include a first category of requirements related to the template material; the development tool includes the rich text editor;
[0010] The step of processing the page to be developed using the corresponding development tools according to the page requirements to obtain the target page includes: obtaining template materials from the template library through the material service according to the first type of requirements, and editing the page to be developed based on the template materials using a rich text editor to obtain the target page.
[0011] Optionally, the page requirements include a second type of requirements related to the code; the development tools include the online integrated development environment;
[0012] The step of processing the page to be developed using the corresponding development tools according to the page requirements to obtain the target page includes: obtaining a scaffolding tool through a compilation service according to the second type of requirements, and compiling the page to be developed based on the scaffolding tool and the code through an online integrated development environment to obtain the target page.
[0013] Optionally, the page requirements include a first type of requirements related to the template material and a second type of requirements related to the code; the development tools include the rich text editor and the online integrated development environment;
[0014] The step of processing the page to be developed using corresponding development tools according to the page requirements to obtain the target page includes: according to the first type of requirements, obtaining template materials from the template library through the material service, and editing the page to be developed based on the template materials using a rich text editor; according to the second type of requirements, obtaining scaffolding tools through the compilation service, and compiling and editing the page to be developed based on the scaffolding tools and the code using an online integrated development environment to obtain the target page.
[0015] Optionally, the method further includes:
[0016] The management service monitors and records in real time at least one of the following for the target page: lifecycle, access permissions, development statistics, version information, and operation logs.
[0017] Optionally, the method further includes:
[0018] The target page is embedded with data using data services, and the statistical results of the embedded data are displayed visually.
[0019] Optionally, before publishing the target page, the method further includes: building an open platform through a client software development kit service;
[0020] Publishing the target page includes:
[0021] The application in the target page is split into multiple sub-applications using micro-frontend services;
[0022] Based on the interface of the open platform, each of the sub-applications is packaged and published to the caller.
[0023] Optionally, the method further includes:
[0024] Register and authenticate the caller, and establish a connection with the caller through the interface of the open platform;
[0025] Receive the caller's request to access the target page;
[0026] The target page is transmitted to the caller according to the call request, so that the caller can review the target page;
[0027] The call request uses the Hypertext Transfer Protocol (HTTP) and / or the Remote Procedure Call (RPC) framework protocol.
[0028] Optionally, before receiving the caller's request to invoke the target page, the method further includes:
[0029] Obtain the interface description file corresponding to the interface of the open platform, and convert the interface description file into a remote procedure call file based on the remote procedure call framework protocol;
[0030] Parse the remote procedure call file to start and listen to the interface service according to the interface;
[0031] The interface service is registered in the routing registry through the service governance proxy service to obtain the route for the caller to send the call request. The destination interface of the route is the interface of the open platform.
[0032] Optionally, the method further includes: converting the target page into a specified language file via a rich text protocol;
[0033] The language configuration file includes at least one of an Hypertext Markup Language file, a Cascading Style Sheets file, and a JavaScript language file.
[0034] Optionally, the method further includes:
[0035] The state management library stores and updates the component states of the target page in real time from the dimensions of the basic configuration layer, assembly layer, and generation layer.
[0036] The basic configuration layer includes the rich text editor and the online integrated development environment;
[0037] The assembly layer includes the template library and scaffolding tools;
[0038] The generation layer includes the language setting file corresponding to the target page.
[0039] Optionally, the template materials include component templates and page templates.
[0040] Secondly, embodiments of the present invention also provide a page development apparatus, comprising:
[0041] The creation module is used to create pages to be developed based on page requirements, which are the functional requirements of the target page by the page users.
[0042] The processing module is used to process the page to be developed through the development tool corresponding to the page requirements to obtain the target page. The development tool includes a rich text editor for importing template materials from the template library and / or an online integrated development environment for editing code.
[0043] The publishing module is used to publish the target page.
[0044] Thirdly, embodiments of the present invention also provide a server, comprising:
[0045] One or more processors;
[0046] Storage device for storing one or more programs;
[0047] The one or more programs are executed by the one or more processors, causing the one or more processors to implement the page development method provided in the embodiments of the present invention.
[0048] Fourthly, embodiments of the present invention also provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the page development method provided in embodiments of the present invention.
[0049] This invention provides a page development method, apparatus, server, and storage medium. First, a page to be developed is created based on page requirements, which are the functional needs of the target page from the user. Then, the page to be developed is processed using a development tool corresponding to the page requirements to obtain the target page. The development tool includes a rich text editor for importing template materials from a template library and / or an online integrated development environment (IDE) for editing code. Finally, the target page is published. This embodiment flexibly employs different development tools according to page requirements. It can utilize a rich text editor to import abundant template materials or an IDE for developers to quickly write code online, meeting the diverse needs of page function development and improving development efficiency. Attached Figure Description
[0050] Figure 1 A flowchart illustrating a page development method provided in one embodiment;
[0051] Figure 2 A flowchart of a page development process is provided as an example;
[0052] Figure 3 This is a schematic diagram illustrating page development based on a rich text platform, as provided in one embodiment.
[0053] Figure 4 A schematic diagram of a page development architecture provided for one embodiment;
[0054] Figure 5 A schematic diagram of a remote procedure call framework provided in one embodiment;
[0055] Figure 6 This is a schematic diagram illustrating global state management through a state management library, as provided in one embodiment.
[0056] Figure 7 This is a schematic diagram of the structure of a page development device provided in an embodiment of the present invention;
[0057] Figure 8 This is a schematic diagram of the structure of a server provided in an embodiment of the present invention. Detailed Implementation
[0058] The present invention will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and not intended to limit it. Furthermore, it should be noted that, for ease of description, the accompanying drawings show only the parts relevant to the present invention, and not all of the structures.
[0059] Before discussing the exemplary embodiments in more detail, it should be noted that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although the flowcharts describe the operations (or steps) as sequential processes, many of these operations can be performed in parallel, concurrently, or simultaneously. Furthermore, the order of the operations can be rearranged. The process can be terminated when its operation is completed, but may also have additional steps not included in the figures. The process can correspond to a method, function, procedure, subroutine, subroutine, etc. Moreover, embodiments and features in the embodiments of the present invention can be combined with each other without conflict.
[0060] The term "comprising" and its variations as used in this invention are open-ended, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment".
[0061] It should be noted that the concepts of "first" and "second" mentioned in this invention are only used to distinguish the corresponding contents and are not used to limit the order or interdependence.
[0062] It should be noted that the terms "a" and "a plurality of" used in this invention are illustrative rather than restrictive. Those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".
[0063] Figure 1 This is a flowchart illustrating a page development method according to one embodiment. The method is applicable to various page development scenarios, such as developing pages for a specific website or for application software. The method can be executed by a page development device, which can be implemented in software and / or hardware and is typically integrated into a server. The server acts as the page developer and server-side provider, publishing the developed page. Page users (such as clients or third parties) can access the page and use its functions.
[0064] like Figure 1 As shown in this embodiment, a page development method is provided, which includes the following steps:
[0065] S110. Create a page to be developed based on page requirements, whereby the page requirements are the functional requirements of the target page for the page users.
[0066] In this embodiment, the target page is the developed page, which can be a webpage (such as a website homepage, directory page, search page, or content page), a software page (such as a login page, chat page, or game page), or a browser page (such as a browser settings page, download page, or bookmarks page). The target page can be a static page or a dynamic page. The target page has certain functions to meet the user's needs, such as news content display, music playback control, account login, and redirection from the current page to a specified link. Different functions mean that page users have different page requirements.
[0067] Page requirements may include one or more requirements. For example, for a shopping platform application, page requirements may include: supporting user login using an account and password; viewing or searching for service providers by keywords; displaying available or searchable service providers in a list; displaying the service provider's introduction and contact information on each service provider's details page; providing a window for interacting with the service provider; supporting user payments to service providers and order generation, etc. Page requirements can be stored in a description document in the form of text, illustrations, charts, and / or codes. For multiple requirements, developing a single target page may suffice, or multiple target pages may be needed to satisfy all requirements. For ease of description, the following example illustrates the development of a single page.
[0068] During page development, the first step is to create a page to be developed based on the page requirements. This page can be a blank page or a page with a specified layout, such as a header, footer, title bar, and / or toolbar. These layout elements can be retained or modified during subsequent development. "Creating" can refer to creating a new page or opening an existing page.
[0069] S120. The page to be developed is processed by the development tool corresponding to the page requirements to obtain the target page. The development tool includes a rich text editor for importing template materials from the template library and / or an online integrated development environment for editing code.
[0070] In this embodiment, different development tools are provided to meet diverse page requirements. A rich text editor is a tool that can be embedded in a browser for creating pages, such as TinyMC, Ckeditor, or UEditor. An online integrated development environment (IDE) is an application that provides an online program development environment; it can be understood as a cloud-based intelligent code editor, such as Eclipse Cheat or WebIDE editors. It can run directly in a browser and generally comes pre-installed with tools such as a code editor, compiler, debugger, and graphical user interface. It supports multiple programming languages and provides various development plugins, such as intelligent suggestions, code completion, and quality checks, integrating code writing, analysis, compilation, and debugging functions into a unified development software service suite. Furthermore, a template library can be built for the rich text editor. The template library includes template materials, which refer to various components or elements that may be used on the page, such as text boxes, images, controls with specific functions (e.g., jumps, playback, pop-ups), or combinations of these components or elements. A template material can also be the entire page. Based on this, rich text editors can be used to import template materials into the page to be developed, or the code edited by the developers can be obtained through an online integrated development environment to realize the development of the target page.
[0071] For example, for some simpler page requirements, the corresponding functionality can be provided by combining existing template materials in the template library. However, for more complex page requirements, such as pages with complex animations and numerous interactions, developers usually need to provide new algorithms, modules, or interfaces through programming to provide the corresponding functionality. In this embodiment, text boxes, images, controls, and / or pages can be stored as template materials in the template library. If using these template materials can meet the page requirements, these template materials can be imported into the page to be developed using a rich text editor to realize the development of the target page; otherwise, an online integrated development environment can be used for developers to edit code to realize the development of the target page.
[0072] It should be noted that two development tools can be used during the development of a target page. For some page requirements, a rich text editor can be used to import the template materials into the page to be developed, while for other page requirements, an online integrated development environment (IDE) can be used for developers to edit the code to realize the target page. Furthermore, the imported template materials can also be further edited through the IDE.
[0073] S130, Publish the target page.
[0074] Specifically, the target page, after being processed by the development tools, possesses the corresponding functionality and meets the page requirements. It can then be handed over to the user via the network or an open platform. For example, for web page development, the target page can be uploaded to a registered server space or domain; for application page development, the target page can be packaged into the application and published through platforms such as app stores. Furthermore, the target page can also be submitted to the caller for collaborative development or public relations review.
[0075] The page development method in this embodiment flexibly employs different development tools according to page requirements. It can utilize a visual rich text editor to import abundant template materials, allowing developers to efficiently and conveniently create, publish, and manage pages independently in a WYSIWYG manner. Alternatively, it can leverage an online integrated development environment (IDE) that provides online coding, cloud storage of code, and secondary editing capabilities, enabling developers to quickly write code online and achieve more complex development. The development tools can be used independently or in combination. When used in combination, the results of editing with the rich text editor can be converted into code and automatically generated into a code repository. Developers can directly pull the code from this repository remotely and perform further development based on it. This method optimizes the page development process, significantly reducing communication costs and requirement delivery time, and improving development efficiency.
[0076] In one embodiment, the page requirements include a first type of requirements related to template materials; the development tools include a rich text editor; processing the page to be developed according to the page requirements using the corresponding development tools to obtain the target page includes: obtaining template materials from the template library through the material service according to the first type of requirements, and editing the page to be developed based on the template materials using the rich text editor to obtain the target page.
[0077] Specifically, the first type of requirement is related to template materials. For the first type of requirement, the corresponding functions can be provided by combining the existing template materials in the template library. The development tool for the first type of requirement is a rich text editor.
[0078] Material services can be understood as a service that collects or converts elements that may be used in page development into template materials to build a template library, and provides export functionality. A rich text editor can export template materials from the template library and import them into the page to be developed. A page typically consists of multiple components (such as image hotspots, videos, headers, and footers). The template materials in the template library can include page templates and component templates. Through a rich text editor, a page template can be copied directly to obtain a complete page to be developed. Alternatively, one or more component templates can be imported into the created page to be developed, and these template materials can be arranged, combined, or adjusted (e.g., modifying the color and size of template materials, replacing specified characters, etc.) to obtain the target page.
[0079] In one embodiment, the page requirements include a second type of requirements related to code; the development tools include an online integrated development environment; processing the page to be developed according to the page requirements using the corresponding development tools to obtain the target page includes: obtaining scaffolding tools through a compilation service according to the second type of requirements, and compiling the page to be developed based on the scaffolding tools and code through the online integrated development environment to obtain the target page.
[0080] Specifically, the second type of requirement is related to code. For this type of requirement, it is difficult to provide the corresponding functions by combining existing template materials in the template library. Usually, developers need to provide new algorithms, modules or interfaces through programming. The development tool corresponding to the second type of requirement is an online integrated development environment, such as WebIDE.
[0081] Compilation services can be understood as a service that provides developers with development scaffolding tools, automated project generation, and built-in basic utilities, interactive charts and visualization browser libraries (Echart), module bundlers (Webpack), gateway information, etc. Based on the initialization of the project's infrastructure and code using scaffolding tools, it connects to the code repository, testing platform, and continuous integration (CI) and continuous delivery (CD) of a software development management collaboration platform (Coding), providing pipeline capabilities from coding and testing to release. Using an online integrated development environment (IDE), the code edited by the developers and the scaffolding tools can be compiled to obtain the target page.
[0082] In one embodiment, page requirements include a first type of requirements related to template materials and a second type of requirements related to code; development tools include a rich text editor and an online integrated development environment (IDE); processing the page to be developed according to the page requirements using the corresponding development tools to obtain the target page includes: according to the first type of requirements, obtaining template materials from the template library through a material service, and editing the page to be developed based on the template materials using a rich text editor; according to the second type of requirements, obtaining scaffolding tools through a compilation service, and obtaining the target page based on the scaffolding tools and the compiled and edited code of the page to be developed using the IDE to obtain the target page.
[0083] In this embodiment, page requirements fall into two categories. Different development tools are used to process the first and second categories of requirements to ultimately obtain the target page. Specifically, for the first category of requirements, a rich text editor is used through a material service to edit the page to be developed, resulting in the edited page. Then, for the second category of requirements, a compilation service is used to process the edited page using an online integrated development environment (IDE), ultimately yielding the target page. During the process of processing the edited page using the IDE, the template materials imported into the page can be adjusted and modified, effectively performing a secondary edit of the rich text editor's results.
[0084] Figure 2 This is a flowchart illustrating a page development process as provided in one embodiment. Figure 2 As shown, depending on the page requirements, you can choose to create a new page or open an existing page to create the page to be developed. For the first type of requirement, you can use a rich text editor to import template materials from the template library to edit the page to be developed. In this case, if there is no second type of requirement, the target page can be quickly and independently built and published based on the template materials. For the second type of requirement, R&D personnel can participate in code development through the online integrated development environment. If the relevant code has been used in an existing project, the code development can be completed by referring to the existing project. Otherwise, a new project is built, and scaffolding tools, CI&CD, etc. are used to complete the code development. After online compilation, deployment, and product acceptance, the target page is published. Based on this, the target page can be divided into built pages (the pages corresponding to the first type of requirement, with relatively low complexity, which can be quickly built using a rich text editor), semi-built pages (the pages corresponding to the first and second types of requirements, where some content can be quickly built using a rich text editor, while other parts need to be handed over to the online integrated development environment and code development), and fully developed pages (the pages corresponding to the second type of requirement, where the entire page is relatively complex and is entirely handed over to the online integrated development environment and code development).
[0085] In one embodiment, the template material includes component templates and page templates.
[0086] Specifically, the template library includes component templates and page templates. A page template can be imported using a rich text editor to directly generate a complete page to be developed. Alternatively, one or more component templates can be imported into a created page to be developed and adjusted to obtain the target page. For example, if the library contains a holiday notice page template, this template can be directly clicked and used using the rich text editor. The date, address, and other information can then be modified according to actual needs to obtain the target page. Similarly, if the library contains a new user benefits redemption component template, this template can be imported into a page to be developed using the rich text editor to provide new user benefits redemption functionality. These page and component templates can be managed by administrators, such as for approval, removal / removal, or updates.
[0087] In one embodiment, the method further includes:
[0088] Step 140: Monitor and record at least one of the following in real time: the lifecycle of the target page, operation permissions, development statistics, version information, and operation logs, through the management service.
[0089] Specifically, the management service can be understood as a service that performs multi-faceted real-time monitoring and recording of the published target page. Specifically, the management service can monitor the lifecycle of the target page, including managing the complete lifecycle of the target page, such as creation, editing, rollback, publishing, and taking it offline, for example, recording the execution count and corresponding timestamps of each stage of the target page's lifecycle.
[0090] The management service can also monitor and record the operation permissions of the target page in real time to enable multi-person collaborative operation. For example, various operations on a target page (such as viewing, modifying, publishing, sharing, or permission transfer) can be performed by one or more operators with the operation permissions. Operations performed by multiple operators can be merged, and if there is a conflict, conflict prompts and trade-offs can be made for different operations based on the priority of operation permissions. In addition, by monitoring and recording the operation permissions of the target page in real time, the legitimacy of the operation can be guaranteed. For example, blacklists and whitelists can be configured for the operation permissions of each operator to achieve dynamic permission management.
[0091] The management service can also record operation logs for each stage and each developer, making it easy to view and trace. After the target page is published, its functions need to be continuously upgraded and optimized, and version updates or rollbacks may occur. The management service can also monitor and record the version information of the target page in real time. The management service can also monitor and record the development statistics of the target page in real time, including the number of times the target page is edited, the number of times it is published, the number of template materials used, etc., which can provide further iteration and optimization directions for the upgrade of the target page.
[0092] In one embodiment, the method further includes:
[0093] Step 150: Implement data tracking on the target page using data services, and visualize the statistical results of the tracking.
[0094] Specifically, data services can be understood as a service that tracks and statistically analyzes data points on a target page. Through data services, the exposure and click tracking of a target page can be statistically analyzed, and the results can be visualized using various mathematical charts (such as bar charts, pie charts, or line charts). Statistical results include page views (PV), unique visitors (UV), user tags, click-through rates for each click location, bounce rate, and / or conversion rate, etc. Based on the statistical results from these tracking points, the content of the target page can be adjusted in a timely manner, facilitating the review of later operational strategies.
[0095] In one embodiment, before publishing the target page, the method further includes: building an open platform using a client software development kit service; and publishing the target page, including:
[0096] Step 1302: Split the application in the target page into multiple sub-applications using micro-frontend services;
[0097] Step 1304: Package each sub-application based on the open platform's interface and publish it to the caller.
[0098] In this embodiment, the client software development kit (SDK) service can be understood as an external service (also known as an extended service or cross-platform service). That is, by building an open platform, the target page is encapsulated into a series of open application programming interfaces (APIs) that are easily recognized by computers and made available to callers for joint development or review, thereby meeting the needs of cross-platform communication.
[0099] Open platforms can be built using client-side Software Development Kit (SDK) services. An SDK can provide API documentation for a programming language, but may also include complex hardware that can communicate with an embedded system. SDKs typically include sample code, supporting technical annotations, or other supporting documentation that explains and describes basic reference materials.
[0100] Micro-frontend services can be understood as a service that uses micro-device splitting to achieve project splitting and governance. In this embodiment, a large front-end application can be split into multiple independent and flexible sub-applications through micro-frontend services. Each application is developed and deployed independently, without affecting each other, and can communicate with each other. Then, based on the API of the open platform, each sub-application is packaged and published to the caller.
[0101] Figure 3 This is a schematic diagram illustrating page development based on a rich text platform, as provided in one embodiment. Figure 3 As shown, this embodiment adds a template library (also known as a template marketplace), page publishing (accessible via computer and Hypertext 5.0, i.e., PC & H5), management services, data services, and external services to the rich text editor. The template library assists in building target pages, making development more convenient, and allows developers to use a wide range of templates according to page requirements. The management center supports the core page development process, managing the target page's creation from scratch, its lifecycle, operation permissions, development statistics, version information, and operation logs. The data service tracks data points on the target page and visualizes the statistical results. The external services seamlessly provide callers with development tools (such as code editors and automatic code deployment capabilities) and form an ecosystem (including management and interaction for caller registration, authentication, and connection).
[0102] Figure 4 This is a schematic diagram illustrating a page development architecture as provided in one embodiment. This architecture offers refined services supported by basic services, thereby improving internal work efficiency and page development efficiency, and providing reliable extended services and cross-platform communication capabilities externally. Figure 4 As shown, the basic services provide data dashboard analysis services, with built-in functions such as scheduled tasks (e.g., scheduled release of target pages and scheduled statistics of development data), log parsing (e.g., parsing operation logs), and performance monitoring (an internally provided monitoring platform; simply register the platform parameters on the monitoring platform to use the monitoring functions). This not only deeply profiles the target user group and provides analytical basis for adjusting operational strategies, but also reduces the proportion of non-R&D work for developers. Scheduled tasks and log parsing are new capabilities, implemented by writing scripts and combining them with business needs. For example, scheduled synchronization of page exposure data to an offline database, combined with log parsing scripts, produces the data required for display in the data dashboard.
[0103] Basic services also include data reporting (such as reporting the statistical results of data tracking points), anomaly monitoring (timely detection of abnormal operations during development), database (used to store data generated during development, data of the target page, and data communicated with the caller), cloud services (using cloud virtual resources to store data generated by users during the use of the target page), configuration storage (storing configuration information of various components of the target page), single sign-on (SSO), push notifications, content moderation (handing over the target page to a third party for review and approval), and content delivery network (CDN) object storage.
[0104] Building upon the above, a personalized template library is created through the material service, providing import functionality for pages and components. It supports data display (e.g., displaying template material usage, frequency of use, template material classification, and applicable scenarios), facilitating quick retrieval of required template materials. The compilation service provides development scaffolding tools, automating project generation and incorporating basic utility tools (Utils), a style loader, plugin configuration presets (Preset), a compiler core package (@babel / core), a transformer (Transform), and the scripting language (ECMAScript). Tools such as ES6 and others are used to connect coding repositories, testing platforms, and continuous integration and continuous delivery (CI&CD), providing the development side with pipeline capabilities from coding and testing to release. Through product empowerment (management services), based on the permission system and release records, it provides page management functions for the entire lifecycle of pages, from creation, editing, rollback, release, and decommissioning. It also enables multi-user collaborative operation and operation permission management through configurable message notifications. Users can create elements online (such as inserting images, text, and videos, and configuring their size, color, and position) through the visual interface of the rich text editor when editing pages. It also provides rich text plugins to customize jump links for text and images, and has the ability to perform development data statistics on event tracking. Through external services, using micro-frontends and client software development kits (SDKs), it can trigger operations such as page release, provides Open API capabilities, supports calls via HTTP and Thrift, and supports CDN synchronization detection, CI&CD, security auditing, and forwarding via a forwarder.
[0105] In one embodiment, publishing the target page includes:
[0106] Step 18100: Register and authenticate the caller and establish a connection with the caller through the open platform's interface;
[0107] Step 18200: Receive the caller's request for the target page;
[0108] Step 18300: Transmit the target page to the caller according to the call request so that the caller can review the target page;
[0109] The call request uses HTTP and / or RPC framework protocols.
[0110] In this embodiment, the caller can refer to a third party that conducts a public relations review of the target page during the publishing process. After the target page is built but before it goes live, a review process can be submitted to public relations personnel. After the public relations personnel review the content of the target page on the review platform, they can issue an instruction to confirm the publication of the target page. Here, the review platform is the caller. After registering with this server and passing authentication, the caller can access this server through the API of the open platform and send a call request according to the guidelines for accessing this server. This server then transfers the target page to the caller based on the call request.
[0111] The target page supports both HTTP and / or RPC framework protocols for invocation. Specifically, the RPC framework protocol can use Thrift, an IDL interface description language and binary communication protocol used to define and create cross-language services. Thrift combines a code generation engine with a software stack to create seamless, high-efficiency cross-platform services of varying degrees.
[0112] In one embodiment, before receiving the caller's request to invoke the target page, the method further includes:
[0113] Step 18102: Obtain the interface description file corresponding to the interface of the open platform, and convert the interface description file into a remote procedure call file based on the remote procedure call framework protocol;
[0114] Step 18104: Parse the remote procedure call file to start and listen to the interface service according to the interface;
[0115] Step 18105: Register the interface service with the routing registry center through the service governance proxy service to obtain the route for the caller to send the call request. The destination interface of the route is the interface of the open platform.
[0116] In this embodiment, an interface description file is defined using Interface Description Language (IDL), and a protocol document is published through the help center. The interface description file can be converted into a JavaScript code file, i.e., an RPC file, using the Thrift framework protocol.
[0117] The interface in the RPC file is parsed and processed, and the interface service is started and listened to accordingly. The interface service can be a Node service, that is, a service developed using the Node language. The Node service can call the relevant API as the server side of the RPC to implement Thrift calls.
[0118] The service governance proxy service is a public service provided internally by the server. It is used to register Node services with the routing registry, which in turn generates routes for the interface services for the caller to invoke.
[0119] Figure 5 This is a schematic diagram of a remote procedure call framework provided in one embodiment. For example... Figure 5 As shown, the Node service acts as the server (e.g., using Java), while the caller, using code written in other languages (such as Java, C / C++, Python, or Objective-C), acts as the client. On the server side, an interface description file is defined and a Javascript code file is generated. Based on this, the Node service is started and registered with the routing registry through the service governance proxy service to obtain the corresponding route. The route is used to discover client Thrift calls and the Node service listens for client Thrift calls. On the client side, the caller can construct parameters using the interface protocol of the corresponding Open API and initiate a Thrift call according to the Node service's route. The service governance proxy service uses serialization and deserialization of the communication protocol to realize data transmission between the server and the caller, enabling cross-platform and cross-language calls.
[0120] In one embodiment, the method further includes: converting the target page into a setting language file via a rich text protocol; wherein the setting language file includes at least one of a Hyper Text Markup Language (HTML) file, a Cascading Style Sheets (CSS) file, and a JavaScript language file.
[0121] Specifically, the configuration and elements of the target page can be converted into HTML, CSS, and / or Javascript files and saved using a rich text protocol. HTML is a language used to describe web pages and define the structure of the target page; CSS indicates how HTML is displayed and defines the style of the target page; Javascript language files are interpreted and run by the browser, facilitating subsequent publishing and secondary development.
[0122] In one embodiment, the method further includes:
[0123] Step 160: Store and update the component states of the target page in real time from the dimensions of the basic configuration layer, assembly layer, and generation layer through the state management library; wherein, the basic configuration layer includes a rich text editor and an online integrated development environment; the assembly layer includes a template library and scaffolding tools; and the generation layer includes the setting language file corresponding to the target page.
[0124] A state management library is used to save and update the data (i.e., state) generated by the target page during the interaction between the server and the client. It extracts the state that needs to be shared between components for unified management and tracking, making changes to component state predictable. State management libraries can be Flux, Redux, or Vuex, etc. In this embodiment, the focus is on building and publishing the target page, breaking down the development process into three dimensions: the basic configuration layer, the assembly layer, and the generation layer. Global state management is achieved between these layers through a state management library.
[0125] Figure 6 This is a schematic diagram illustrating global state management using a state management library, as provided in one embodiment. Figure 6 As shown, the basic configuration layer mainly involves the state management of various capabilities for building the target page, including rich text editors, online integrated development environments (such as WebIDE development tools and their plugins, such as HTML, CSS, Javascript, etc.), personalized configuration modules (for the second type of requirement where developers participate in the development, some general configuration modules are abstracted for developers to use directly. For example, many pages need to be clicked to jump, the only difference being the target page address. In this case, only a general jump module needs to be introduced, and some address parameters need to be configured to realize the jump function. This jump module is a kind of personalized configuration module), and publishing platforms (PC & HTML5). Through data source access and backend Function as a Service (FAS) services, the data of various business parties is mapped and orchestrated according to the customized data standardization protocol, and output to the front-end developers in a unified protocol structure. This data protocol not only includes data results, but also parameters such as clicks, callbacks, and exposure tracking points. The interactive events and dynamic data of the page are reported through Javascript. In addition, the synchronization strategy (synchronization of the target page between different platforms) and the component state of the extension point access (Open API) can also be managed.
[0126] The assembly layer mainly involves productized capabilities such as template library, template material collection, template material import, and page preview function, as well as tools such as scaffolding and developer kits that provide convenience for complex development, and performs state management. Among them, the page preview displays the real-time effect in the form of micro front-end modules by calling the generation layer capabilities. The assembly layer also includes the ability to report exceptions, so as to promptly detect abnormal operations during the development process.
[0127] The generation layer primarily involves parsing and preprocessing the outputs of the assembly layer, namely the target page's data (including styles and dynamic resources). This includes parsing, preprocessing, and pre-compiling the specified language files. Ultimately, the project is packaged into a page that can be directly displayed in the browser. Simultaneously, the server performs code inspection and uploads the data to the storage platform, refreshes the page's publishing area, and generates an accessible online link. It also integrates with a pipeline to automate the integration and management of development code. The pipeline refers to a set of configurations created based on an automation engine, serving as a script implementation for a crucial part of CI / CD. The generation layer also includes components related to Server-Side Rendering (SSR).
[0128] The page development method in this embodiment, by creating a comprehensive rich text platform and a powerful online integrated development environment, enables developers to independently complete the creation, publishing, and management of pages in a WYSIWYG manner. It also provides the ability to develop online secondary editing pages and online code development capabilities, enabling online page building and publishing for PC & H5 channels, reducing communication costs and improving development efficiency. Through micro-frontend services, application decoupling is achieved, allowing each sub-application to be developed, run, and deployed independently, making page development more convenient and easier to maintain. By perfecting the rich text platform's ecosystem, it can connect with callers, achieving cross-platform access. Calls between client services and backend servers are realized through RPC and Open APIs. A state management library enables global state management of relevant components of the target page from the basic configuration layer, assembly layer, and generation layer, making the state of each component predictable. When the state of any component changes, the state of other components can be determined based on the global state, improving the development efficiency and operational reliability of the target page.
[0129] Figure 7 This is a schematic diagram of a page development device provided in an embodiment of the present invention. This device can be implemented by software and / or hardware. Figure 7 As shown, the device includes:
[0130] Module 210 is used to create a page to be developed based on page requirements, where the page requirements are the functional requirements of the target page by the page users.
[0131] The processing module 220 is used to process the page to be developed through the development tool corresponding to the page requirements to obtain the target page, wherein the development tool includes a rich text editor for importing template materials from the template library and / or an online integrated development environment for editing code;
[0132] The publishing module 230 is used to publish the target page.
[0133] The page development device in this embodiment can flexibly adopt different development tools according to page requirements. It can import rich template materials using a rich text editor, or use an online integrated development environment to allow developers to quickly write code online, thus meeting the diverse needs of page function development and improving development efficiency.
[0134] In one embodiment, the page requirements include a first type of requirements related to the template material; the development tool includes the rich text editor;
[0135] The processing module 220 is specifically used to: obtain template materials from the template library through the material service according to the first type of requirement, and edit the page to be developed based on the template materials through a rich text editor to obtain the target page.
[0136] In one embodiment, the page requirements include a second type of requirements related to the code; the development tools include the online integrated development environment;
[0137] The processing module 220 is specifically used to: obtain scaffolding tools through a compilation service according to the second type of requirement, and compile the page to be developed based on the scaffolding tools and the code through an online integrated development environment to obtain the target page.
[0138] In one embodiment, the page requirements include a first type of requirements related to the template material and a second type of requirements related to the code; the development tools include the rich text editor and the online integrated development environment;
[0139] The processing module 220 is specifically used to: obtain template materials from the template library through the material service according to the first type of requirement, and edit the page to be developed based on the template materials through a rich text editor;
[0140] According to the second type of requirement, scaffolding tools are obtained through a compilation service, and the target page is obtained by compiling and editing the page to be developed using the scaffolding tools and the code through an online integrated development environment.
[0141] In one embodiment, the device further includes:
[0142] The first management module is used to monitor and record in real time at least one of the following: the lifecycle of the target page, operation permissions, development statistics, version information, and operation logs.
[0143] In one embodiment, the device further includes:
[0144] The second management module is used to embed data points into the target page through data services and to visualize the statistical results of the embedding points.
[0145] In one embodiment, the device further includes:
[0146] Build modules are used to build an open platform using a client software development kit service before the target page is published;
[0147] Module 230 is published, including:
[0148] A splitting unit is used to split the application in the target page into multiple sub-applications through a micro-frontend service;
[0149] The packaging unit is used to package each of the sub-applications based on the interface of the open platform and then publish them to the caller.
[0150] In one embodiment, the publishing module 230 includes:
[0151] The access unit is used to register and authenticate the caller and establish a connection with the caller through the interface of the open platform;
[0152] A receiving unit is used to receive the caller's request to call the target page;
[0153] A transmission unit is configured to transmit the target page to the caller according to the call request, so that the caller can review the target page;
[0154] The invocation request uses the Hypertext Transfer Protocol and / or the Remote Procedure Call Framework.
[0155] In one embodiment, the device further includes:
[0156] The file conversion module is used to obtain the interface description file corresponding to the interface of the open platform before receiving the caller's call request for the target page, and convert the interface description file into a remote procedure call file based on the remote procedure call framework protocol;
[0157] A listening module is used to parse the remote procedure call file in order to start and listen to the interface service according to the interface.
[0158] The registration module is used to register the interface service with the routing registry center through the service governance proxy service, and obtain the route for the caller to send the call request. The destination interface of the route is the interface of the open platform.
[0159] In one embodiment, the device further includes:
[0160] The page conversion module is used to convert the target page into a file in a specified language using a rich text protocol;
[0161] The language configuration file includes at least one of an Hypertext Markup Language file, a Cascading Style Sheets file, and a JavaScript language file.
[0162] In one embodiment, the device further includes:
[0163] The state management module is used to store and update the component states of the target page in real time from the dimensions of the basic configuration layer, assembly layer and generation layer through the state management library;
[0164] The basic configuration layer includes the rich text editor and the online integrated development environment;
[0165] The assembly layer includes the template library and scaffolding tools;
[0166] The generation layer includes the language setting file corresponding to the target page.
[0167] In one embodiment, the template material of the device includes component templates and page templates.
[0168] The above-described page development apparatus can execute the page development method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the method.
[0169] Figure 8 This is a schematic diagram of the structure of a server provided in an embodiment of the present invention. Figure 8 As shown, the server provided in this embodiment of the invention includes: one or more processors 810 and a storage device 820; the processors 810 in the server may be one or more. Figure 8 Taking a processor 810 as an example; storage device 820 is used to store one or more programs; the one or more programs are executed by the one or more processors 810, so that the one or more processors 810 implement the page development method as described in any one of the embodiments of the present invention.
[0170] The server may also include an input device 830 and an output device 840.
[0171] The processor 810, storage device 820, input device 830, and output device 840 in the server can be connected via a bus or other means. Figure 8 Taking the example of a connection between China and Israel via a bus.
[0172] The storage device 820 in the server serves as a computer-readable storage medium, which can be used to store one or more programs. These programs can be software programs, computer-executable programs, and modules, such as the program instructions / modules corresponding to the page development method provided in this embodiment of the invention (e.g., appendix). Figure 5 The modules in the page development apparatus shown include: a creation module 210, a processing module 220, and a publishing module 230. The processor 810 executes various server functions and data processing by running software programs, instructions, and modules stored in the storage device 820, thereby implementing the page development method in the above method embodiment.
[0173] Storage device 820 may include a stored program area and a stored data area, wherein the stored program area may store the operating system and applications required for at least one function; the stored data area may store data created based on server usage, etc. Furthermore, storage device 820 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some instances, storage device 820 may further include memory remotely located relative to processor 810, which can be connected to the server via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.
[0174] Input device 830 can be used to receive input numerical or character information, and to generate key signal inputs related to user settings and function control of the server. Output device 840 may include display devices such as a display screen.
[0175] Furthermore, when one or more programs included in the aforementioned server are executed by one or more processors 810, the programs perform the following operations: create a page to be developed according to page requirements, wherein the page requirements are the functional requirements of the target page by the page user; process the page to be developed through the development tool corresponding to the page requirements to obtain the target page, wherein the development tool includes a rich text editor for importing template materials from the template library and / or an online integrated development environment for editing code; and publish the target page.
[0176] This invention also provides a computer-readable storage medium storing a computer program thereon. When executed by a processor, the program performs a page development method, which includes: creating a page to be developed based on page requirements, wherein the page requirements are the functional requirements of the target page by the page user; processing the page to be developed using a development tool corresponding to the page requirements to obtain the target page, wherein the development tool includes a rich text editor for importing template materials from a template library and / or an online integrated development environment for editing code; and publishing the target page.
[0177] Optionally, when executed by a processor, the program can also be used to execute the page development method provided in any embodiment of the present invention.
[0178] The computer storage medium of this invention can be any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable CD-ROM, optical storage device, magnetic storage device, or any suitable combination thereof. The computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.
[0179] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit programs for use by or in connection with an instruction execution system, apparatus, or device.
[0180] Program code contained on a computer-readable medium may be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, or radio frequency (RF), or any suitable combination thereof.
[0181] Computer program code for performing the operations of this invention can be written in one or more programming languages or a combination thereof, including object-oriented programming languages such as Java, Smalltalk, and C++, as well as conventional procedural programming languages such as C or similar languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (e.g., via the Internet using an Internet service provider).
[0182] Note that the above description is merely a preferred embodiment of the present invention and the technical principles employed. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of the present invention, the scope of which is determined by the scope of the appended claims.
Claims
1. A page development method, characterized in that, include: Create a page to be developed based on page requirements, where page requirements are the functional requirements of the target page for page users. The page to be developed is processed by the development tools corresponding to the page requirements to obtain the target page. The development tools include a rich text editor for importing template materials from the template library and an online integrated development environment for editing code. The page requirements include a first type of requirements related to the template materials and a second type of requirements related to the code. Publish the target page; The step of processing the page to be developed using appropriate development tools according to the page requirements to obtain the target page includes: Based on the first type of requirement, template materials are obtained from the template library through the material service, and the page to be developed is edited based on the template materials using a rich text editor. According to the second type of requirement, scaffolding tools are obtained through a compilation service, and the target page is obtained by compiling and editing the page to be developed using the scaffolding tools and the code through an online integrated development environment; The process of developing the page to be developed via an online integrated development environment based on the scaffolding tool and the compiled and edited code includes: Adjust and modify the template materials that have been imported into the page to be developed, so as to achieve secondary editing of the editing results of the rich text editor; Publishing the target page includes: The system registers and authenticates the caller and establishes a connection with the caller through the interface of the open platform; wherein the caller is a third party that reviews the target page during the publishing process. Receive the caller's request to access the target page; The target page is transmitted to the caller according to the call request, so that the caller can review the target page; The invocation request adopts the Hypertext Transfer Protocol and / or the Remote Procedure Call Framework protocol; Before receiving the caller's request to invoke the target page, the method further includes: Obtain the interface description file corresponding to the interface of the open platform, and convert the interface description file into a remote procedure call file based on the remote procedure call framework protocol; Parse the remote procedure call file to start and listen to the interface service according to the interface; The interface service is registered in the routing registry through the service governance proxy service to obtain the route for the caller to send the call request. The destination interface of the route is the interface of the open platform.
2. The method according to claim 1, characterized in that, Also includes: The management service monitors and records in real time at least one of the following for the target page: lifecycle, access permissions, development statistics, version information, and operation logs.
3. The method according to claim 1, characterized in that, Also includes: The target page is embedded with data using data services, and the statistical results of the embedded data are displayed visually.
4. The method according to claim 1, characterized in that, Prior to publishing the target page, the method also includes: building an open platform through a client software development kit service; Publishing the target page includes: The application in the target page is split into multiple sub-applications using micro-frontend services; Based on the interface of the open platform, each of the sub-applications is packaged and published to the caller.
5. The method according to claim 1, characterized in that, Also includes: The target page is converted into a specified language file using a rich text protocol; The language configuration file includes at least one of an Hypertext Markup Language file, a Cascading Style Sheets file, and a JavaScript language file.
6. The method according to claim 1, characterized in that, Also includes: The state management library stores and updates the component states of the target page in real time from the dimensions of the basic configuration layer, assembly layer, and generation layer. The basic configuration layer includes the rich text editor and the online integrated development environment; The assembly layer includes the template library and scaffolding tools; The generation layer includes the language setting file corresponding to the target page.
7. The method according to any one of claims 1-6, characterized in that, The template materials include component templates and page templates.
8. A page development apparatus, characterized in that, include: The creation module is used to create pages to be developed based on page requirements, which are the functional requirements of the target page by the page users. The processing module is used to process the page to be developed using the development tools corresponding to the page requirements to obtain the target page. The development tools include a rich text editor for importing template materials from the template library and an online integrated development environment for editing code. The page requirements include a first type of requirements related to the template materials and a second type of requirements related to the code. The publishing module is used to publish the target page; Specifically, the processing module is used for: Based on the first type of requirement, template materials are obtained from the template library through the material service, and the page to be developed is edited based on the template materials using a rich text editor. According to the second type of requirement, scaffolding tools are obtained through a compilation service, and the target page is obtained by compiling and editing the page to be developed using the scaffolding tools and the code through an online integrated development environment; The process of developing the page to be developed via an online integrated development environment based on the scaffolding tool and the compiled and edited code includes: Adjust and modify the template materials that have been imported into the page to be developed, so as to achieve secondary editing of the editing results of the rich text editor; The publishing module includes: The access unit is used to register and authenticate the caller and establish a connection with the caller through the interface of the open platform; wherein, the caller is a third party that reviews the target page during the publishing process; A receiving unit is used to receive the caller's request to call the target page; A transmission unit is configured to transmit the target page to the caller according to the call request, so that the caller can review the target page; The invocation request adopts the Hypertext Transfer Protocol and / or the Remote Procedure Call Framework protocol; The page development apparatus also includes: The file conversion module is used to obtain the interface description file corresponding to the interface of the open platform before receiving the caller's call request for the target page, and convert the interface description file into a remote procedure call file based on the remote procedure call framework protocol; A listening module is used to parse the remote procedure call file in order to start and listen to the interface service according to the interface. The registration module is used to register the interface service with the routing registry center through the service governance proxy service, and obtain the route for the caller to send the call request. The destination interface of the route is the interface of the open platform.
9. A server, characterized in that, include: One or more processors; Storage device for storing one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the page development method as described in any one of claims 1-7.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the page development method as described in any one of claims 1-7.
Citation Information
Patent Citations
Page generation method, device, computer equipment and storage medium
CN110347953A