A cross-platform front-end business construction method and system based on a zero-code mode

Abstract

The application provides a cross-platform front-end business construction method and system based on a zero-code mode, which comprises the following steps: a terminal requests front-end business application page data from a server according to a front-end business application identifier; the server verifies the request and returns a corresponding front-end business application page data packet to the terminal according to the front-end business application identifier; and the terminal parses and renders the front-end business application page data packet through a front-end parser to display the front-end business application page. The application abstracts front-end business logic into a platform-independent intermediate description layer through visual drag-and-drop components and logic configuration, and automatically generates native front-end code for each target platform in combination with a dynamic adaptation engine, thereby realizing one-time design and multi-terminal operation.

Description

Technical Field

[0001] This invention relates to the field of front-end business development technology, and in particular to a cross-platform front-end business construction method and a cross-platform front-end business construction system based on no-code mode. Background Technology

[0002] The current front-end development field faces the challenge of a wide variety of frameworks with significant differences in platform compatibility. For example, frameworks such as React, Vue, and WXML are suited to different technical environments, resulting in the need for independent and repetitive development of the same business logic for Android, iOS, Web, and WeChat platforms, each based on its specific front-end framework. Due to the differences in the underlying operating systems and runtime environments of each platform—Android terminals are based on the Android system, iOS terminals rely on the Apple ecosystem, Web terminals need to adapt to multiple browsers, and WeChat terminals are limited by the mini-program development standards—the front-end frameworks used on these platforms are incompatible, making it impossible to directly reuse business code. This situation not only increases development and time costs but also increases the complexity of version management and maintenance. Therefore, how to achieve cross-platform operation with a single front-end business development has become a key challenge in reducing development costs and unifying version management. Summary of the Invention

[0003] In view of the above problems, the present invention is proposed to provide a cross-platform front-end business construction method and a corresponding cross-platform front-end business construction system based on no-code mode to overcome or at least partially solve the above problems.

[0004] This invention discloses a cross-platform front-end business construction method based on a no-code model, the method comprising: The terminal requests front-end business application page data from the server based on the front-end business application identifier; The server verifies the request and returns the corresponding front-end business application page data packet to the terminal based on the front-end business application identifier; The terminal parses and renders the front-end business application page data packets through the front-end parser in order to display the front-end business application page.

[0005] This invention also discloses a cross-platform front-end business building system based on a no-code model, the system comprising: The front-end parser module is used to parse and render the received front-end business application page data packet after requesting front-end business application page data from the server according to the front-end business application identifier, so as to display the front-end business application page; the front-end business application page data packet is obtained by the server receiving the request, verifying the request, and returning the corresponding front-end business application page data packet to the terminal according to the front-end business application identifier.

[0006] This invention has the following advantages: This invention enables zero-code, visual drag-and-drop page construction. Combined with a custom DSL and a dynamic adaptation engine, it automatically converts once-configured business logic into native code for various platforms, achieving "develop once, run natively on multiple platforms," ​​fundamentally eliminating the need for repetitive development for different platforms. This invention significantly lowers the technical barrier and time cost of front-end development, allowing business personnel to directly participate in application building. Simultaneously, through a unified version management and real-time distribution mechanism, it ensures consistency across multiple platforms and agile iterative update capabilities, effectively solving the problems of version fragmentation and complex maintenance in cross-platform development. Attached Figure Description

[0007] Figure 1 This is a flowchart of a cross-platform front-end business construction method based on a no-code mode provided by an embodiment of the present invention; Figure 2 This is a structural block diagram of a cross-platform front-end business building system based on a no-code model, provided by an embodiment of the present invention. Detailed Implementation

[0008] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0009] The cross-platform front-end business construction method based on no-code mode provided in this embodiment of the invention may specifically include the following steps: The terminal requests front-end business application page data from the server based on the front-end business application identifier; The server verifies the request and returns the corresponding front-end business application page data packet to the terminal based on the front-end business application identifier; The terminal parses and renders the front-end business application page data packets through the front-end parser in order to display the front-end business application page.

[0010] In an optional embodiment of the present invention, before the step of the terminal requesting front-end application page data from the server based on the front-end application identifier, the method further includes: Responding to drag-and-drop operations, select the target component from the basic component library and the composite component library to configure the page content of the front-end business application; Adjust the style and configure the layout parameters of the target component dragged to the page to form the front-end business application; The front-end business application is bound to the specified host program to establish a mapping relationship.

[0011] In an optional embodiment of the present invention, the server verifies the request and returns the corresponding front-end business application page data packet to the terminal according to the front-end business application identifier, including: The server decrypts the request to obtain the host program identifier, the front-end business application identifier, and the front-end parser identifier. Verify that the host program identifier, front-end business application identifier, and front-end parser identifier have all been registered and have a mapping relationship, and that the front-end parser is a trusted parser; Based on the front-end business application identifier, determine whether the corresponding front-end application page has been updated. If it has been updated, load and return the updated front-end business application page data packet.

[0012] In an optional embodiment of the present invention, the terminal parses and renders the front-end business application page data packet through a front-end parser to display the front-end business application page, including: The front-end parser verifies and decrypts the front-end business application page data packet, and parses the page style, layout and event data defined in the front-end business application page data packet. The parsed page styles, layouts, and event data are rendered to display the front-end business application pages.

[0013] In an optional embodiment of the present invention, parsing the page style, layout, and event data defined in the front-end business application page data packet includes: The front-end parser performs lexical, syntactic, and semantic analysis on the business logic defined in the custom DSL language within the data packet of the front-end business application page, and transforms it into a standardized intermediate representation. The front-end parser calls the dynamic adaptation engine, which, based on the target platform type of the current terminal, calls the corresponding adaptation strategy from the built-in platform underlying specification mapping library, and converts the standardized intermediate representation into native code executable by the current terminal platform according to the corresponding adaptation strategy.

[0014] like Figure 1 As shown, the detailed process of building cross-platform front-end business based on the no-code model of this invention is as follows: Step 1: The terminal requests front-end page data from the server based on the front-end business ID and the front-end parser ID.

[0015] Step 2: The backend service verifies and decrypts the frontend request body, obtaining the decrypted host application ID, frontend business ID, and frontend parser ID. It then determines the relationship between these three, checks if they are all properly registered, and verifies the trustworthiness of the parser. Based on the frontend business ID and the current terminal version number, it checks if the frontend application page has been updated. If so, it loads the updated frontend page data package. The terminal version, currently listed, serves as the sole version source, supporting modifications, updates, and draft saving of listed versions. Version iteration records are uniformly stored and traced, avoiding inconsistencies between multiple versions. Updated versions are synchronized in real-time via a reload triggered by terminal events, ensuring seamless application updates. This solves the management challenges of "version fragmentation" and "iteration asynchrony" in traditional multi-terminal development. Real-time synchronization reduces version release time and improves the efficiency of business application deployment.

[0016] Step 3: The backend service returns the corresponding frontend page data package to the terminal based on the business ID.

[0017] Step 4: After receiving the page data packet, the terminal verifies and decrypts it using a parser. It then parses the page data packet, including page styles, layouts, and events, and loads the corresponding parser processing module to complete the rendering of the front-end homepage components, layout, and styles. The entire data packet is cached on the front end to reduce the number of page data requests and improve page rendering speed.

[0018] Specifically, by using a custom DSL language to abstract business logic such as mobile component structure, interaction logic, and data flow rules, native executable code for each platform is generated through the collaboration of a parser and a dynamic adaptation engine. First, the parser performs lexical, syntactic, and semantic analysis on the DSL text, transforming platform-independent business logic into a standardized intermediate representation, eliminating syntactic ambiguity and logical loopholes. Second, the dynamic adaptation engine incorporates underlying specification mapping libraries for each platform (covering component libraries, API interfaces, rendering mechanisms, etc.), matching the optimal adaptation strategy based on the system version of the target platform (WeChat Mini Program ecosystem / iOS / Android, etc.), and standardizing the syntax... The logic is transformed into platform-specific logic. Finally, through a templated and incremental generation mechanism, the platform-specific logic is injected into the native code templates of each platform, automatically supplementing platform-specific logic such as lifecycle and permission adaptation. After syntax and compatibility verification, native code that can be directly compiled and executed on platforms such as WeChat Mini Program, iOS, and Android can be generated, realizing "one-time DSL business logic definition, multi-platform native code output". This fundamentally breaks the difference limitations of front-end frameworks on different platforms, realizing "one-time business logic definition, multi-platform business application parsing and use", avoiding repeated development for different platforms and reducing the difficulty of front-end compositing for large application systems.

[0019] Based on the above description of the process of building cross-platform front-end services using a zero-code model, the following section uses a specific application as an example to illustrate its construction and operation process: Step 1: Business personnel add front-end application A through the front-end business management module; Step 2: Configure data service capabilities for front-end application A, and save the configuration of the third-party backend interface and data interface; Step 3: Enter the A front-end application visual building page, configure the page display content, layout, and style, connect different pages into a whole through events, and configure data service parameters for page components; Step 4: Establish a mapping relationship by binding the front-end application ID to the specified front-end host program; Step 5: The user accesses the host program through the front-end application ID, retrieves the front-end application page data, renders it in the parser, and displays the complete configuration of the front-end application on the terminal; Output: The terminal displays the completed business application.

[0020] It should be noted that, for the sake of simplicity, the method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments of the present invention are not limited to the described order of actions, because according to the embodiments of the present invention, some steps can be performed in other orders or simultaneously. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions involved are not necessarily essential to the embodiments of the present invention.

[0021] This invention provides a cross-platform front-end business building system based on a no-code model, which may specifically include the following modules: The front-end parser module is used to parse and render the received front-end business application page data packet after requesting front-end business application page data from the server according to the front-end business application identifier, so as to display the front-end business application page; the front-end business application page data packet is obtained by the server receiving the request, verifying the request, and returning the corresponding front-end business application page data packet to the terminal according to the front-end business application identifier.

[0022] In an optional embodiment of the present invention, the system further includes: The component management module is used to manage and provide basic component libraries and composite component libraries for the visual front-end business construction module to call; The visual front-end business construction module is used to respond to drag-and-drop operations by selecting target components from the basic component library and the composite component library to configure the page content of the front-end business application, and to adjust the style and configure the layout parameters of the target components dragged to the page to form the front-end business application. The routing control module is used to bind the front-end business application to a specified host program and establish a mapping relationship; The front-end business management module is used to manage the front-end business application configured by the visual front-end business construction module; The data service module is used to configure the backend service interfaces and input / output parameter data structures associated with the frontend business application page components.

[0023] In an optional embodiment of the present invention, the server is further configured to: Decrypt the request to obtain the host program identifier, the front-end business application identifier, and the front-end parser identifier; Verify that the host program identifier, front-end business application identifier, and front-end parser identifier have all been registered and have a mapping relationship, and that the front-end parser is a trusted parser; Based on the front-end business application identifier, determine whether the corresponding front-end application page has been updated. If it has been updated, load and return the updated front-end business application page data packet.

[0024] In an optional embodiment of the present invention, the front-end parser module is further configured to: The front-end parser verifies and decrypts the front-end business application page data packet, and parses the page style, layout and event data defined in the front-end business application page data packet. The parsed page styles, layouts, and event data are rendered to display the front-end business application pages.

[0025] In an optional embodiment of the present invention, the front-end parser module is further configured to: The front-end parser performs lexical, syntactic, and semantic analysis on the business logic defined in the custom DSL language within the data packet of the front-end business application page, and transforms it into a standardized intermediate representation. The front-end parser calls the dynamic adaptation engine, which, based on the target platform type of the current terminal, calls the corresponding adaptation strategy from the built-in platform underlying specification mapping library, and converts the standardized intermediate representation into native code executable by the current terminal platform according to the corresponding adaptation strategy.

[0026] like Figure 2 As shown, the specific modules and functions of the cross-platform front-end business building system based on the no-code model of this invention are described below: (1) Parser module: Develop corresponding parsers according to different terminal platforms. The main function of the parser is to uniformly parse the configured front-end business applications on different platforms, and obtain the terminal environment, device number, network operator and other identifying data within the scope of user permission, associate this data with the user, and make risk decisions on device environment factors based on the risk control system to confirm that the device environment is safe and reliable.

[0027] (2) Visual front-end business construction module: The display content of specific pages can be set by drag and drop, the style and layout of specific components can be adjusted, and the associated parameter mapping can be set for the components.

[0028] (3) Routing control module: By establishing a routing mapping between the front-end business application and the host program, the application can enter the specific host program according to the front-end business ID. This can achieve the effect of dynamically forwarding by changing the application ID to the host.

[0029] (4) Data service module: The backend configures the backend service address of the business application and completes the configuration of the input and output parameter data structure. It serves the visualization front-end business construction module and is used to select and assign values ​​when mapping component parameters.

[0030] (5) Component Management Module: Provides management capabilities for visual page configuration elements such as basic components and composite components, and can handle the uploading and deloading of specific components. After the component uploading and deloading operation, the effect will be reflected in the visual front-end business construction module. By designing a visual drag-and-drop platform that includes a basic component library (such as buttons, forms, lists, etc.), a composite component library (such as custom headers, custom layouts, etc.), and a logic configuration module (such as condition judgment, event binding, and third-party application capability linkage, etc.), it supports non-professional developers (such as product managers and business personnel) to directly generate intermediate description layer content by dragging and dropping components, configuring parameters and logical relationships, without writing code. This lowers the technical threshold for front-end business construction and realizes "business personnel-led development". It supports custom component capabilities, meeting the customized display needs of different businesses while enabling rapid component reuse and reducing the time-consuming process of repeated configuration.

[0031] (6) Front-end business management module: This module is for overall application management. It is a front-end application formed by summarizing multiple pages after visual front-end business is built. It can perform data query authorization, application information configuration, etc. on the front-end application.

[0032] As the system implementation is basically similar to the method implementation, it is described in a relatively simple way. For relevant details, please refer to the description of the method implementation.

[0033] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0034] The various embodiments in this specification are described in a related manner. The same or similar parts between the various embodiments can be referred to each other. Each embodiment focuses on describing the differences from other embodiments.

[0035] The above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.

Claims

1. A method for building cross-platform front-end business logic based on a no-code model, characterized in that, The method includes: The terminal requests front-end business application page data from the server based on the front-end business application identifier; The server verifies the request and returns the corresponding front-end business application page data packet to the terminal based on the front-end business application identifier; The terminal parses and renders the front-end business application page data packets through the front-end parser in order to display the front-end business application page.

2. The method according to claim 1, characterized in that, Before the step of the terminal requesting front-end application page data from the server based on the front-end application identifier, the following steps are also included: Responding to drag-and-drop operations, select the target component from the basic component library and the composite component library to configure the page content of the front-end business application; Adjust the style and configure the layout parameters of the target component dragged to the page to form the front-end business application; The front-end business application is bound to the specified host program to establish a mapping relationship.

3. The method according to claim 1, characterized in that, The server verifies the request and returns the corresponding front-end business application page data packet to the terminal based on the front-end business application identifier, including: The server decrypts the request to obtain the host program identifier, the front-end business application identifier, and the front-end parser identifier. Verify that the host program identifier, front-end business application identifier, and front-end parser identifier have all been registered and have a mapping relationship, and that the front-end parser is a trusted parser; Based on the front-end business application identifier, determine whether the corresponding front-end application page has been updated. If it has been updated, load and return the updated front-end business application page data packet.

4. The method according to claim 1, characterized in that, The terminal parses and renders the front-end business application page data packets through a front-end parser to display the front-end business application page, including: The front-end parser verifies and decrypts the front-end business application page data packet, and parses the page style, layout and event data defined in the front-end business application page data packet. The parsed page styles, layouts, and event data are rendered to display the front-end business application pages.

5. The method according to claim 4, characterized in that, Parse the page styles, layouts, and event data defined within the front-end business application page data package, including: The front-end parser performs lexical, syntactic, and semantic analysis on the business logic defined in the custom DSL language within the data packet of the front-end business application page, and transforms it into a standardized intermediate representation. The front-end parser calls the dynamic adaptation engine, which, based on the target platform type of the current terminal, calls the corresponding adaptation strategy from the built-in platform underlying specification mapping library, and converts the standardized intermediate representation into native code executable by the current terminal platform according to the corresponding adaptation strategy.

6. A cross-platform front-end business logic building system based on a no-code model, characterized in that, The system includes: The front-end parser module is used to parse and render the received front-end business application page data packet after requesting front-end business application page data from the server according to the front-end business application identifier, so as to display the front-end business application page; the front-end business application page data packet is obtained by the server receiving the request, verifying the request, and returning the corresponding front-end business application page data packet to the terminal according to the front-end business application identifier.

7. The system according to claim 6, characterized in that, The system also includes: The component management module is used to manage and provide basic component libraries and composite component libraries for the visual front-end business construction module to call; The visual front-end business construction module is used to respond to drag-and-drop operations by selecting target components from the basic component library and the composite component library to configure the page content of the front-end business application, and to adjust the style and configure the layout parameters of the target components dragged to the page to form the front-end business application. The routing control module is used to bind the front-end business application to a specified host program and establish a mapping relationship; The front-end business management module is used to manage the front-end business application configured by the visual front-end business construction module; The data service module is used to configure the backend service interfaces and input / output parameter data structures associated with the frontend business application page components.

8. The system according to claim 6, characterized in that, The server is also used for: Decrypt the request to obtain the host program identifier, the front-end business application identifier, and the front-end parser identifier; Verify that the host program identifier, front-end business application identifier, and front-end parser identifier have all been registered and have a mapping relationship, and that the front-end parser is a trusted parser; Based on the front-end business application identifier, determine whether the corresponding front-end application page has been updated. If it has been updated, load and return the updated front-end business application page data packet.

9. The system according to claim 6, characterized in that, The front-end parser module is also used for: The front-end parser verifies and decrypts the front-end business application page data packet, and parses the page style, layout and event data defined in the front-end business application page data packet. The parsed page styles, layouts, and event data are rendered to display the front-end business application pages.

10. The system according to claim 9, characterized in that, The front-end parser module is also used for: The front-end parser performs lexical, syntactic, and semantic analysis on the business logic defined in the custom DSL language within the data packet of the front-end business application page, and transforms it into a standardized intermediate representation. The front-end parser calls the dynamic adaptation engine, which, based on the target platform type of the current terminal, calls the corresponding adaptation strategy from the built-in platform underlying specification mapping library, and converts the standardized intermediate representation into native code executable by the current terminal platform according to the corresponding adaptation strategy.

Images