Front-end component development method, front-end component development equipment and medium

Abstract

The invention discloses a front-end component development method, front-end component development equipment and a medium. The method comprises the following steps: defining JSON (JavaScript Object Notation) metadata in a unified format; the method comprises the following steps: initializing a base class framework of metadata processing, and generating a BaseFramework base class instance; according to the BaseFramework base class instance, life cycle processing is carried out on JSON metadata, and application layer metadata is generated; according to a preset framework adaptation rule, creating a target framework adapter to convert the application layer metadata into a response type model adaptive to a target framework; and according to the BaseFramework base class instance, carrying out analysis rendering processing on the response type model, and generating a complete front-end page. Through the metadata base class and the adapter mode, the code quantity is greatly reduced, the code reusability is remarkably improved, and the front-end component development efficiency is greatly improved. Through a unified life cycle management and authority verification mechanism, the behaviors of the components under different frameworks are consistent, and the stability is enhanced.

Description

Technical Field

[0001] This application relates to the field of computers, and more particularly to a method, apparatus and medium for developing front-end components. Background Technology

[0002] In the field of computer software development, front-end development often faces complex scenarios involving multiple frameworks and multiple terminal applications, such as the coexistence of mainstream frameworks like Angular, Vue, and React, as well as terminals like Web, mobile, and mini-programs.

[0003] Existing front-end component development methods lack a unified metadata abstraction layer, requiring the same page logic to be repeatedly coded for different frameworks, resulting in high code redundancy. Furthermore, since different teams are responsible for development of different frameworks, there are differences in parameter naming and function implementation, leading to extremely poor cross-framework reusability, which severely restricts development efficiency and system stability. Secondly, because the metadata configuration of each page is implemented independently, the functional performance of each component is inconsistent on different pages, requiring modifications to the core business code to add new functions, which increases the cost of function expansion and makes secondary development difficult. Summary of the Invention

[0004] This application provides a front-end component development method, device, and medium to solve the problems of low development efficiency and poor stability in existing front-end component development methods.

[0005] The embodiments of this application adopt the following technical solutions:

[0006] On one hand, embodiments of this application provide a front-end component development method, which includes: defining JSON metadata in a unified format; initializing a base class framework for metadata processing and generating a BaseFramework base class instance; performing lifecycle processing on the JSON metadata based on the BaseFramework base class instance to generate application layer metadata; creating a target framework adapter according to preset framework adaptation rules to convert the application layer metadata into a responsive model adapted to the target framework; and parsing and rendering the responsive model based on the BaseFramework base class instance to generate a complete front-end page.

[0007] In one example, based on the BaseFramework base class instance, the JSON metadata undergoes lifecycle processing to generate application-layer metadata. Specifically, this includes: preprocessing and validating the JSON metadata using the loadModelMetaBefore method to generate metadata to be loaded; querying multiple preset data sources to load the metadata to be loaded, generating raw metadata; filtering the raw metadata according to preset permission rules and verifying the legality of the filtered raw metadata using the checkMeta method to generate legal metadata; storing the legal metadata in the model_meta state and parsing the function strings in the legal metadata into executable functions using the individualParse method to generate standard metadata; loading the metadata definition plugin for the page to be developed using the itemPlugin method and initializing the custom hook functions of the page to be developed using the initMetaHooks method to extend the standard metadata; translating the extended standard metadata into multiple languages ​​and setting titles, parsing buttons, and rendering content areas for the translated standard metadata to generate application-layer metadata that can directly drive components.

[0008] In one example, the reactive model is parsed and rendered based on the BaseFramework instance to generate a complete front-end page. Specifically, this includes: initializing a cross-framework data request service using the initCrudService method of the BaseFramework instance; identifying and matching the bizType parameter in the reactive model using the initContentModel method, and calling the corresponding component factory function based on the business type of the bizType parameter to generate core business components that conform to the reactive characteristics of the target framework; parsing and converting the btn_model configuration information in the reactive model using the initBtnModel method to obtain button component generation instructions, and generating a button component using these instructions; requesting a backend interface to update the content_model data of the core business components using the loadModelData method based on the loadDataAfterInit flag in the reactive model; and rendering the updated core business component data and the button component to generate the complete front-end page.

[0009] In one example, the method parses and transforms the btn_model configuration information in the reactive model using the initBtnModel method to obtain the button component generation instruction. After generating the button component using the button component generation instruction, the method further includes: reading the reactive model using the initModelMeta method to obtain the current metadata status information of the reactive model; performing lifecycle processing on the current metadata of the reactive model using the metadata lifecycle management method in the BaseFramework base class instance to update the current metadata status information of the reactive model; and synchronizing the updated current metadata status information of the reactive model to the reactive model using the initModelMeta method.

[0010] In one example, after parsing and rendering the responsive model based on the BaseFramework base class instance to generate a complete front-end page, the method further includes: determining the terminal type for generating the complete front-end page through an environment detection mechanism to obtain a terminal type identifier parameter; extracting application layer metadata to determine the terminal adaptation parameter set corresponding to the terminal type identifier parameter; reconstructing the complete front-end page through a component layout engine according to the layout rules of the terminal adaptation parameter set; and modifying the component interaction response mechanism of the complete front-end page according to the interaction restriction parameters in the terminal adaptation parameter set.

[0011] In one example, after modifying the component interaction response mechanism of the complete front-end page according to the interaction restriction parameters in the terminal adaptation parameter set, the method further includes: verifying whether the component layout and modified response mechanism of the reconstructed complete front-end page conform to the technical specifications of the current terminal according to the terminal compatibility verification function; when they conform to the technical specifications of the current terminal, re-rendering the complete front-end page components to generate a complete front-end page adapted for display on the target terminal; the target terminal is the page display terminal that the current page display terminal is about to be converted to.

[0012] In one instance, the base class framework for metadata processing is initialized, generating a BaseFramework base class instance. This includes: defining the BaseFramework base class using abstract class syntax, determining the basic logic of the BaseFramework base class's metadata lifecycle management methods, general atomic action sets, and event orchestration engine, while reserving extension interfaces for framework-independent design; and generating a BaseFramework base class instance by calling the BaseFramework base class's constructor using the new keyword, passing in initialization parameters, according to the pre-defined base class method implementation logic.

[0013] In one example, a target framework adapter is created according to preset framework adaptation rules to convert the application layer metadata into a reactive model adapted to the target framework. Specifically, this includes: determining a unified adapter interface according to preset framework adaptation rules; determining adapter configuration logic according to the target framework; creating a target framework adapter according to the adapter configuration logic and adapter interface, and calling the component model factory function of the target framework to convert the application layer metadata into a reactive model adapted to the target framework.

[0014] On the other hand, embodiments of this application provide a front-end component development device, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform any of the aforementioned front-end component development methods.

[0015] On the other hand, embodiments of this application provide a non-volatile computer storage medium for front-end component development, which stores computer-executable instructions that can execute any of the above-mentioned front-end component development methods.

[0016] The above-described technical solutions adopted in the embodiments of this application can achieve the following beneficial effects:

[0017] This application defines a unified metadata system to abstract business logic and uses the adapter pattern to convert metadata into a form recognizable by various frameworks, significantly reducing code size. This not only saves development time and manpower costs but also reduces the difficulty of code maintenance, as a change in one place can take effect in multiple frameworks, greatly improving development efficiency. Secondly, through unified lifecycle management, a unified event execution mechanism and atomic event definition, as well as permission verification mechanisms and component interface definitions, it ensures consistent component behavior across different frameworks, guaranteeing consistent control over user operation permissions across different frameworks. This avoids data leaks or unauthorized operations caused by inconsistent permission control, thereby greatly improving system stability. Attached Figure Description

[0018] To more clearly illustrate the technical solution of this application, some embodiments of this application will be described in detail below with reference to the accompanying drawings, in which:

[0019] Figure 1 A flowchart illustrating a front-end component development method provided in an embodiment of this application;

[0020] Figure 2 A loading sequence diagram of the metadata infrastructure framework for a front-end component development method provided in this application embodiment;

[0021] Figure 3 A sequence diagram of data loading method execution for a front-end component development method provided in this application embodiment;

[0022] Figure 4 This is a schematic diagram of the structure of a front-end component development device provided in an embodiment of this application. Detailed Implementation

[0023] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0024] Some embodiments of this application will now be described in detail with reference to the accompanying drawings.

[0025] Figure 1 This is a flowchart illustrating a front-end component development method provided in an embodiment of this application. This method can be applied to different business domains. Certain input parameters or intermediate results in this process allow for manual intervention and adjustment to help improve accuracy.

[0026] The analysis method involved in the embodiments of this application can be implemented by a terminal device or a server, and this application does not impose any special limitations on it. For ease of understanding and description, the following embodiments are all described in detail using a controller as an example.

[0027] Based on this Figure 1 The process may include the following steps:

[0028] S101: Define a unified format of JSON metadata; the JSON metadata includes a description of the component parameter structure and a description of the interaction logic.

[0029] In some embodiments of this application, when developing front-end components, a unified metadata specification is first defined to generate JSON-formatted metadata containing component parameter structure (such as the options configuration of the fields field) and interaction logic (such as the action event chain). This metadata serves as the core configuration basis for front-end component development.

[0030] S102: Initialize the base class framework for metadata processing and generate a BaseFramework instance; the BaseFramework instance includes metadata lifecycle management methods, a set of general atomic actions, and an event orchestration engine.

[0031] In some embodiments of this application, after defining JSON metadata in a uniform format, it is necessary to define a base class BaseFramework.

[0032] Specifically, the BaseFramework base class is defined using abstract class syntax (such as JavaScript's class or TypeScript's abstractclass). This defines the metadata lifecycle management methods (such as loadModelMetaBefore, getMetaEngine, checkOperateRoles, checkMeta, individualParse, smallPlugin, initMetaHooks, loadModelMetaAfter, setModelMeta, etc.), the basic logic of the general atomic action set, and the event orchestration engine included in the BaseFramework base class. At the same time, it reserves extension interfaces for framework-independent design (such as reactive model transformation interfaces and component factory function interfaces).

[0033] Furthermore, common processing logic is preset for lifecycle methods. For example, loadModelMetaBefore implements basic parameter format validation and basic environment validation by default; getMetaEngine implements a unified interface encapsulation for loading multiple data sources by default, supports specifying the data source type through configuration parameters, and returns a standardized raw metadata format, etc.

[0034] Furthermore, the constructor of the BaseFramework base class is called using the new keyword, passing in initialization parameters (such as default data source configuration, global permission information, multi-language basic configuration, etc.) to generate an instance of the BaseFramework base class.

[0035] This instance inherits all methods and properties of the base class, and can directly call its lifecycle management methods, atomic actions and event engine. It also supports implementing project-level custom logic by overriding base class methods after instantiation, to meet the special needs of different business scenarios.

[0036] S103: Based on the BaseFramework base class instance, perform lifecycle processing on the JSON metadata to generate application layer metadata.

[0037] In some embodiments of this application, after obtaining the BaseFramework base class instance, the JSON metadata is processed through various metadata lifecycle management methods in the BaseFramework base class instance. Specifically, the JSON metadata is preprocessed (e.g., supplemented with dynamically generated temporary parameters) and the environment is verified (e.g., detected whether the current terminal type is compatible with the metadata) through the loadModelMetaBefore method of the BaseFramework instance, and metadata to be loaded is generated.

[0038] Furthermore, the getMetaEngine method of the BaseFramework instance is used to query multiple preset data sources to load the metadata to be loaded and generate the original metadata. The multiple data sources include databases, configuration files and network interfaces.

[0039] Furthermore, the `checkOperateRoles` method of the `BaseFramework` instance filters the original metadata according to preset permission rules, and verifies the legality of the filtered original metadata using the `checkMeta` method of the `BaseFramework` instance, generating valid metadata. Then, the valid metadata is stored in the `model_meta` state, and the `individualParse` method of the `BaseFramework` instance parses the function strings in the valid metadata into executable functions, generating standard metadata.

[0040] The metadata definition plugin for the page to be developed is loaded through the `initailPlugin` method of the `BaseFramework` instance, and the custom hook function of the page to be developed is initialized through the `initMetaHooks` method of the `BaseFramework` instance to extend the standard metadata.

[0041] Finally, the extended standard metadata is translated into multiple languages ​​using the loadModelMetaAfter method of the BaseFramework instance. The translated standard metadata is then used for title setting, button parsing, and content area rendering to generate application layer metadata that can directly drive components.

[0042] S104: Create a target framework adapter according to the preset framework adaptation rules to convert the application layer metadata into a responsive model that adapts to the target framework; the target framework is the component metadata framework of the page to be developed.

[0043] In some embodiments of this application, after generating application layer metadata that can directly drive components, a unified adapter interface is determined according to preset framework adaptation rules. This interface includes a core conversion method, explicitly stating that the input is application layer metadata and the output is a model instance that conforms to the responsive characteristics of the target framework, ensuring that the adapter's adaptation logic for different frameworks follows a consistent input and output standard.

[0044] Then, the adapter configuration logic is determined based on the target framework. For example, if the target framework is Vue, the adapter processes the application layer metadata through the reactive function, converting the field configuration, action configuration, and bizType parameter in the metadata into Vue traceable reactive objects.

[0045] For example, if the target framework is React, the adapter is based on the MobX observable mechanism, which wraps the application layer metadata into observable objects and marks the core fields in the metadata as reactive dependencies through the makeObservable method, ensuring that when the metadata changes, the React component can be aware of it through the observer higher-order component and re-render it.

[0046] During the transformation process, the adapter calls the component model factory function of the corresponding framework to inject the transformed reactive data into the model instance. For example, the hcList model instance in the Vue framework obtains the reactive listData and pagination through the adapter and binds them to the Vue component's template to achieve data-driven view; the hcList model instance in the React framework drives the component's render method through mobx's reactive data.

[0047] By using a metadata base class and the adapter pattern, the amount of code is significantly reduced, code reusability is greatly improved, and the efficiency of front-end component development is greatly enhanced.

[0048] S105: Based on the BaseFramework instance, the responsive model is parsed and rendered to generate a complete front-end page.

[0049] In some embodiments of this application, after obtaining the responsive model, a cross-framework data request service is initialized according to the initCrudService method of the BaseFramework base class instance, providing a foundation for data interaction.

[0050] Then, the `initContentModel` method of the `BaseFramework` base class instance is used to identify and match the `bizType` parameter in the reactive model. Based on the business type corresponding to the `bizType` parameter, the corresponding component factory function is called to generate core business components that conform to the reactive characteristics of the target framework.

[0051] Furthermore, the btn_model configuration information in the responsive model is parsed and transformed through the initBtnModel method of the BaseFramework base class instance. This configuration information is mapped into button component generation instructions that conform to the target front-end framework specification. Finally, based on these instructions, button components that can be directly rendered on the page are generated.

[0052] Furthermore, based on the loadDataAfterInit flag in the responsive model, the backend interface is requested through the loadModelData method of the BaseFramework base class instance to update the content_model data of the core business component. Then, the updated core business component data and button component are rendered to generate a complete front-end page.

[0053] It should be noted that after generating a button component that can be directly rendered on the page according to this instruction,

[0054] The system reads the reactive model through the initModelMeta method of the BaseFramework base class instance to obtain the current metadata status information of the reactive model; then, it updates the current metadata status information of the reactive model by performing lifecycle processing such as S103 on the current metadata of the reactive model through the metadata lifecycle management methods in the BaseFramework base class instance; finally, it synchronizes the updated current metadata status information of the reactive model to the reactive model through the initModelMeta method of the BaseFramework base class instance.

[0055] By performing lifecycle management again, dynamic updates of metadata are achieved during the page loading stage, which solves the problem of metadata becoming outdated after the first load due to environmental changes (such as permission adjustments or data source updates), and further ensures the consistency of component behavior in different scenarios.

[0056] Furthermore, after generating the complete front-end page, the terminal type for generating the complete front-end page will be determined through an environment detection mechanism, and the terminal type identifier parameter will be obtained.

[0057] Extract application layer metadata to determine the terminal adaptation parameter set corresponding to the terminal type identifier parameter; this parameter set includes terminal-specific layout rules (such as multi-column layout for web and single-column layout for mobile), style parameters (such as component size, font size, and spacing threshold), interaction restrictions (such as disabling floating effects on mobile and simplifying operation steps on mini-programs), and function switches (such as hiding non-core function buttons for certain components on mini-programs).

[0058] Based on the terminal adaptation parameter set layout rules, the complete front-end page is reconstructed through the component layout engine. For example, the component arrangement method is adjusted (such as turning the horizontally arranged button group on the web into a vertically stacked one on the mobile device), or the terminal screen size is adapted (such as automatically scaling the table column width according to the mobile screen width, or folding the secondary information area on the mini-program), or the element display priority is optimized (such as fields marked as mobile-first in the metadata are displayed first when there is insufficient screen space).

[0059] At the same time, based on the interaction constraint parameters in the terminal adaptation parameter set, modify the component interaction response mechanism of the complete front-end page. For example, convert mouse events on the web to touch events on the mobile (such as displaying a tooltip when long-pressing), or simplify the multi-terminal operation process (such as merging multi-step form submission on the web into a pop-up quick submission on the mobile), or adapt to the terminal-specific interaction specifications (such as following the navigation bar jump rules on the mini-program side and replacing the original routing jump logic on the web side).

[0060] Finally, the terminal compatibility verification function is called to verify whether the adjusted component layout and interaction logic conform to the technical specifications of the current terminal (such as the size limit of mini-program components and mobile browser compatibility). After the verification passes, the component is re-rendered, and the final page effect adapted for display on the target terminal is generated. This achieves a balance between consistent functional presentation of the same component on web, mobile, and mini-program platforms and differentiated terminal experiences.

[0061] This application avoids the redundant work of repeatedly developing components for different terminals by using the terminal adaptation parameters and dynamic adjustment mechanism preset in the metadata. This allows the components to automatically adapt to multiple terminals based on the same set of metadata configurations, and the adaptation rules can be flexibly extended through the metadata without modifying the core code of the components.

[0062] It should be noted that, although the embodiments in this application are based on... Figure 1 Steps S101 to S105 will be described sequentially, but this does not mean that steps S101 and S105 must be performed in a strict order. The reason this embodiment follows this order is... Figure 1The order in which steps S101 to S105 are described is provided to facilitate understanding of the technical solutions of the embodiments of this application by those skilled in the art. In other words, in the embodiments of this application, the order of steps S101 to S105 can be appropriately adjusted according to actual needs.

[0063] pass Figure 1 This application employs a unified metadata system to abstract business logic and utilizes the adapter pattern to convert metadata into a form recognizable by various frameworks. This significantly reduces code size, saving development time and manpower costs, and lowering maintenance difficulty, as a single modification takes effect across multiple frameworks, greatly improving development efficiency. Secondly, through unified lifecycle management, a unified event execution mechanism and atomic event definition, as well as permission verification mechanisms and component interface definitions, component behavior is consistent across different frameworks, reducing the failure rate by 90%. This ensures consistent control over user access permissions across different frameworks, avoiding data leaks or unauthorized operations caused by inconsistent permission control, thereby greatly improving system stability.

[0064] Figure 2 This is a loading sequence diagram of the metadata infrastructure framework for a front-end component development method provided in an embodiment of this application.

[0065] exist Figure 2 The image shows the metadata loading steps of this application, from initializing the page to finally initializing the metadata and then loading it.

[0066] Figure 3 This is a timing diagram of the data loading method in a front-end component development method provided in an embodiment of this application.

[0067] exist Figure 3 The diagram illustrates the steps of the data loading method in this application, from the metadata insertion point before loading to the page frame overriding insertion point after loading.

[0068] Figure 4 A schematic diagram of a front-end component development device provided in this application embodiment includes:

[0069] At least one processor; and,

[0070] A memory that is communicatively connected to at least one processor; wherein,

[0071] A front-end component development method in which the memory stores instructions that can be executed by at least one processor, such that the at least one processor is able to perform any of the above-mentioned tasks.

[0072] Some embodiments of this application provide a non-volatile computer storage medium for front-end component development, which stores computer-executable instructions capable of executing any of the aforementioned front-end component development methods.

[0073] The various embodiments in this application are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device and medium embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the description of the method embodiments.

[0074] The devices and media provided in this application are one-to-one with the methods. Therefore, the devices and media also have similar beneficial technical effects as their corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0075] It will be understood by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Thus, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0076] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0077] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0078] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0079] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0080] Memory may include non-persistent storage in computer-readable media, random access memory (RAM), and non-volatile memory such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0081] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0082] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0083] The above are merely embodiments of this application and are not intended to limit this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, or improvements made within the technical principles of this application should fall within the protection scope of this application.

Claims

1. A front-end component development method, characterized in that, The method includes: Define a unified format for JSON metadata; the JSON metadata includes a description of the component parameter structure and an interaction logic description; Initialize the base class framework for metadata processing and generate a BaseFramework instance; the BaseFramework instance includes metadata lifecycle management methods, a set of general atomic actions, and an event orchestration engine. Based on the BaseFramework base class instance, the JSON metadata is processed over its lifecycle to generate application layer metadata; According to the preset framework adaptation rules, a target framework adapter is created to convert the application layer metadata into a responsive model that adapts to the target framework; the target framework is the component metadata framework of the page to be developed. The responsive model is parsed and rendered based on the BaseFramework instance to generate a complete front-end page.

2. The method according to claim 1, characterized in that, The step of performing lifecycle processing on the JSON metadata based on the BaseFramework base class instance to generate application-layer metadata specifically includes: The JSON metadata is preprocessed and the environment is verified using the loadModelMetaBefore method to generate metadata to be loaded. The system queries multiple preset data sources to load the metadata to be loaded and generate the original metadata; the multiple data sources include databases, configuration files, and network interfaces. According to the preset permission rules, the original metadata is filtered for permissions, and the legality of the filtered original metadata is verified by the checkMeta method to generate legal metadata; The valid metadata is stored in the model_meta state, and the function string in the valid metadata is parsed into an executable function using the individualParse method to generate standard metadata; The metadata definition plugin for the page to be developed is loaded through the `initailPlugin` method, and the custom hook functions of the page to be developed are initialized through the `initMetaHooks` method to extend the standard metadata. The extended standard metadata is translated into multiple languages, and the translated standard metadata is then used for title setting, button parsing, and content area rendering to generate application layer metadata that can directly drive components.

3. The method according to claim 1, characterized in that, The step of parsing and rendering the responsive model based on the BaseFramework instance to generate a complete front-end page specifically includes: Initialize the cross-framework data request service based on the initCrudService method of the BaseFramework base class instance; The initContentModel method identifies and matches the bizType parameter in the reactive model. Based on the business type corresponding to the bizType parameter, the corresponding component factory function is called to generate core business components that conform to the reactive characteristics of the target framework. The initBtnModel method parses and transforms the btn_model configuration information in the responsive model to obtain the button component generation instruction, and then generates the button component using the button component generation instruction; Based on the loadDataAfterInit flag in the reactive model, the loadModelData method is used to request the backend interface to update the content_model data of the core business component. Render the updated core business component data and button components to generate a complete front-end page.

4. The method according to claim 3, characterized in that, The method further includes parsing and transforming the btn_model configuration information in the responsive model using the initBtnModel method to obtain the button component generation instruction, and then generating the button component using the button component generation instruction. The reactive model is read through the initModelMeta method to obtain the current metadata status information of the reactive model; The current metadata of the reactive model is processed through the metadata lifecycle management methods in the BaseFramework base class instance, and the current metadata state information of the reactive model is updated. The initModelMeta method synchronizes the updated metadata state information of the reactive model to the reactive model.

5. The method according to claim 1, characterized in that, After parsing and rendering the responsive model based on the BaseFramework base class instance to generate a complete front-end page, the method further includes: The terminal type for generating the complete front-end page is determined through an environmental detection mechanism, and the terminal type identifier parameter is obtained. Extract application layer metadata to determine the terminal adaptation parameter set corresponding to the terminal type identifier parameter; Based on the terminal adaptation parameter set layout rules, the complete front-end page is reconstructed using a component layout engine; Based on the interaction restriction parameters in the terminal adaptation parameter set, modify the component interaction response mechanism of the complete front-end page.

6. The method according to claim 5, characterized in that, After modifying the component interaction response mechanism of the complete front-end page according to the interaction restriction parameters in the terminal adaptation parameter set, the method further includes: Based on the terminal compatibility verification function, verify whether the component layout and modified response mechanism of the reconstructed complete front-end page conform to the technical specifications of the current terminal. When the technology specifications of the current terminal are met, the complete front-end page components are re-rendered to generate a complete front-end page that is adapted for display on the target terminal; the target terminal is the page display terminal that the current page display terminal is about to be converted to.

7. The method according to claim 1, characterized in that, The initialization of the base class framework for metadata processing, generating a BaseFramework base class instance, specifically includes: The BaseFramework base class is defined using abstract class syntax, which determines the basic logic of the BaseFramework base class's metadata lifecycle management methods, general atomic action set, and event orchestration engine, while reserving extension interfaces for framework-independent design. Based on the pre-defined base class method implementation logic, the constructor of the BaseFramework base class is called using the new keyword, and initialization parameters are passed in to generate an instance of the BaseFramework base class.

8. The method according to claim 1, characterized in that, The step of creating a target framework adapter according to preset framework adaptation rules to convert the application layer metadata into a responsive model adapted to the target framework specifically includes: Based on the preset framework adaptation rules, a unified adapter interface is determined; Determine the adapter configuration logic based on the target framework; Based on the adapter configuration logic and adapter interface, a target framework adapter is created, and the component model factory function of the target framework is called to convert the application layer metadata into a reactive model adapted to the target framework.

9. A front-end component development device, characterized in that, include: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, which, when executed, enables the at least one processor to perform a front-end component development method according to any one of claims 1-8.

10. A front-end component development storage medium storing computer-executable instructions, characterized in that, The computer-executable instructions are capable of executing a front-end component development method as described in any one of claims 1-8.

Images