Intelligent React generation method and system based on Swager and electronic equipment

Abstract

The invention discloses a Swager-based React intelligent generation method and system and electronic equipment. The method comprises the following steps: S1, receiving a Swager API (Application Program Interface) document, analyzing the Swager API document, verifying the legality of the document, extracting structured information and generating a service tag; s2, realizing automatic association of the API and the React component in combination with a preset component mapping rule and a custom component expanded by the plug-in; s3, accessing an external state machine rule and a user permission list, and configuring state circulation and element explicit and implicit logic; and S4, injecting configuration data by using a React template, generating a multi-type source code file, and formatting the multi-type source code file. According to the method, full-automatic generation from the Swager API document to the React front-end code capable of being directly compiled and operated is achieved, repeated labor is reduced, the consistency of the front end and the rear end is guaranteed, meanwhile, service semantic recognition and complex scene adaptation are supported, various components are expanded through plug-ins, and the front-end development efficiency and the code adaptability are further improved.

Description

Technical Field

[0001] This invention relates to the field of front-end and back-end separation development technology, specifically to a React front-end code automation generation technology based on Swagger (OpenAPI) interface documentation, which is particularly suitable for rapid development scenarios of middle and back-end systems and enterprise-level customized front-end projects. Background Technology

[0002] In the current mainstream development model of front-end and back-end separation, Swagger (OpenAPI), as a standardized tool for defining and describing API interfaces, has been widely used in various software projects. The front-end development process heavily relies on the Swagger documentation provided by the back-end, but the existing development workflow has many unavoidable pain points, specifically as follows:

[0003] High proportion of repetitive work: Front-end developers need to manually write a lot of boilerplate code based on the Swagger documentation, including API request function encapsulation (such as Axios call logic), data type definition (TypeScript interface), page UI components (form, list, detail page) and state management logic (such as Redux / Context state maintenance). This kind of work is time-consuming and prone to errors due to human operation.

[0004] Poor consistency between front-end and back-end: When the back-end API changes (such as adding or removing parameters or adjusting the return value structure), the front-end needs to manually update the code, which can easily lead to update delays or omissions, resulting in abnormal online interface calls and increasing project maintenance costs.

[0005] Existing tools lack adaptability: Traditional Swagger code generation tools (such as Swagger Codegen and OpenAPI Generator) can only generate basic API call code or simple HTML interfaces. They cannot be combined with React technology stack features (such as componentization, Hooks state management, and virtual DOM), nor can they recognize business semantics (such as "business type-store" linkage and "approval status flow"). Furthermore, they do not support component extension capabilities. When dealing with enterprise-customized business components (such as industry-specific form controls and complex data visualization components), the generated code requires extensive secondary development to adapt to actual business scenarios.

[0006] Component and permission integration is complex: Commonly used composite components (such as linked selectors and tree tables), state transition logic (such as "draft → pending review → approved") and permission control (such as button visibility and operation permission verification) in React projects cannot be automatically integrated by existing tools. Developers need to write the associated code manually, which further reduces development efficiency.

[0007] Therefore, there is an urgent need for an intelligent generation solution that can deeply parse the business semantics of the Swagger API, seamlessly adapt to the React technology stack, automatically integrate components and permission logic, and support the expansion of the component library through plugins, in order to solve the above-mentioned technical pain points. Summary of the Invention

[0008] The purpose of this invention is to overcome the shortcomings of the prior art and provide a React intelligent generation method, system and electronic device based on the Swagger API. This enables fully automated generation from Swagger API documentation to React front-end code that can be directly compiled and run, reducing repetitive work, ensuring consistency between the front-end and back-end, and supporting business semantic recognition, adaptation to complex scenarios and extension of various components through plugins, thereby further improving front-end development efficiency and code adaptability.

[0009] To achieve the above-mentioned objectives, one aspect of the present invention provides a React intelligent generation method based on Swagger, comprising the following steps:

[0010] Step S1: Receive and parse the Swagger API documentation, verify its validity, extract structured information, and generate business tags; Output: Verified structured interface information (path, parameters, response model), data model information, and business tags.

[0011] Step S2: Based on the interface information and business tags extracted in step S1, combined with the preset component mapping rules and the custom components extended by the plugin, the matching rules of the plugin-based custom components have a higher priority than the preset component mapping rules, so as to realize the automatic association between API and React components.

[0012] Step S3: Integrate external state machine rules (i.e., user-defined business process state rules, used to define the legal flow path and triggering conditions of the business from one state to another, such as "draft → pending review → approved") and user permission list, and configure state flow and element display / hiding logic; Output: state flow logic bound to business tags, and page element display / hiding permission rules.

[0013] Step S4: Use the React template to inject configuration data, generate multiple types of source code files (including page component files, type definition files, API request files, state management files, and plugin component reference files) and format them; call the ESLint and Prettier tools to format the generated source code files.

[0014] This method achieves intelligent code generation through a four-step closed loop of "parsing-matching-configuration-generation". In this process, the "business tags" generated in step S1 provide the core matching basis for "component association" in step S2 and "status / permission configuration" in step S3. The parsing and configuration results of steps S1-S3 together serve as the core data for "template injection" in step S4, forming a complete technical chain.

[0015] Furthermore, step S1 includes the following steps:

[0016] Step S101: Receive the URL address or local file of the Swagger document, verify the validity of the document through the swagger-parser library, remove invalid interfaces, and ensure the integrity and validity of the input data;

[0017] Step S102: Parse the paths field of the Swagger document to extract the path, operation ID, request parameters, and response parameters of each interface; parse the components / schemas node to extract the attribute name, type, required fields, and description information of the interface fields.

[0018] Step S103: Based on the extracted interface metadata, automatically generate corresponding business tags for each interface using a keyword matching algorithm or rule engine.

[0019] Furthermore, step S2 includes the following steps:

[0020] Step S201: Map simple data types directly to React basic UI components to establish the correspondence between data types and basic components;

[0021] Step S202: Identify the relationships or business semantics between interfaces, and match the preset React composite components or custom composite components extended by plugins;

[0022] Step S203: Extend the plug-in components by using a rule configuration file in JSON / YAML format and customizing the mapping logic.

[0023] Furthermore, the process of extending the plug-in component includes the following steps:

[0024] Step S231: Developers develop custom component plugins according to the system's preset plugin specifications;

[0025] Step S232: Import the plugin into the system through the plugin registration interface provided by the system. The system automatically verifies the legality of the plugin and adds the plugin component to the component library.

[0026] In step S233, after the system parses the Swagger API to generate business tags, it simultaneously retrieves the preset components and registered plugin components, and automatically associates the corresponding components according to the priority of the matching rules.

[0027] Furthermore, step S3 includes the following steps:

[0028] Step S301: Receive external state machine configuration and match the corresponding state logic based on the service tag of the interface;

[0029] Step S302: Receive the user permission list and, in conjunction with the business tags of the interface, automatically configure the display logic of page elements.

[0030] Furthermore, step S4 includes the following steps:

[0031] Step S401: Based on the project configuration, select the corresponding React template and inject the parsing results from steps S1-S3 into the template;

[0032] Step S402: Generate React source code files, ensuring the file paths match the project directory structure;

[0033] Step S403: Use ESLint and Prettier tools to automatically format the generated code, ensuring that the code style is consistent with the project specifications, and then commit it to the code repository.

[0034] Furthermore, the React source code file types include: page component files, type definition files, API request files, state management files, and plugin component reference files.

[0035] A second aspect of the present invention provides a React intelligent generation system based on Swagger, comprising an input parsing module, a component mapping module, a state and permission integration module, a code generation module, and a supporting resource layer, wherein:

[0036] The input parsing module is used to receive and parse the Swagger API documentation, verify the validity of the documentation, extract structured interface information, and generate business tags. These business tags are used to associate React components, state transition logic, and page element permission control logic.

[0037] The component mapping module is used to automatically associate APIs with React components based on the interface information and business tags extracted by the input parsing module, combined with preset component mapping rules and pluggable custom components registered according to preset plugin specifications, and according to the principle that the matching rules of pluggable custom components have higher priority than the preset component mapping rules.

[0038] The state and permission integration module is used to access external state machine rules and user permission lists, and to configure state transitions and element display / hiding logic;

[0039] The code generation module is used to generate and format various types of source code files using React templates and configuration data injection.

[0040] The supporting resource layer is used to use React templates, inject configuration data, generate various types of source code files, and call the ESLint and Prettier tools to format the generated source code files.

[0041] An electronic device, which is a code generation server, is characterized in that the server includes a React intelligent generation system based on Swagger, the system including: an input parsing module, a component mapping module, a state and permission integration module, and a code generation module; wherein the modules work together to implement the method as described in any one of claims 1 to 7.

[0042] Compared with existing technologies, this system and method have the following advantages:

[0043] 1. Significantly improved development efficiency: Automation covers repetitive tasks such as API calls, type definitions, UI components, and state management. S4 automates more than 80% of boilerplate code, improving front-end page development efficiency by over 60%, making it especially suitable for rapid iteration of middle and back-end systems;

[0044] 2. Front-end and back-end consistency guarantee: The code is strictly synchronized with the Swagger documentation. When the interface changes, only the code needs to be regenerated, eliminating the "documentation-code inconsistency" problem at its root and reducing online failures;

[0045] 3. Strong business adaptability: Through API semantic parsing and configurable component mapping, it supports complex business scenarios (such as component linkage and state transition), and the generated code can be directly deployed to the production environment with low secondary development costs;

[0046] 4. Excellent ecosystem compatibility: Deeply adapted to the React technology stack (supporting Redux / Zustand / React Query, Ant Design / Eleme UI, etc.), adheres to enterprise-level code standards, and seamlessly integrates with existing projects;

[0047] 5. Lower the development threshold: Junior developers can use this solution to quickly generate standardized pages, reduce reliance on experienced front-end resources, and improve team collaboration efficiency. Attached Figure Description

[0048] Figure 1This is a flowchart of a React intelligent generation method based on Swagger.

[0049] Figure 2 Example code diagram for custom mapping logic using rule configuration files in JSON / YAML format.

[0050] Figure 3 This is a diagram illustrating the code for extended plug-in components.

[0051] Figure 4 This is a sample image for the template.

[0052] Figure 5 This is a structural diagram of a React intelligent generation system based on Swagger. Detailed Implementation

[0053] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0054] like Figure 1 The diagram shown is a flowchart of the method of this invention. This method parses the structured information and business semantics of the Swagger API, combines configurable rules to realize component mapping, state integration and code generation, and supports plug-in extension of the component library. Specifically, it includes the following steps:

[0055] Step S1, Swagger API documentation parsing and semantic annotation. This includes the following steps:

[0056] Step S101, Document Input and Validation: Receive the URL of the Swagger document or a local file (supports JSON / YAML format), validate the document's validity using the swagger-parser library, remove invalid interfaces (such as interfaces with undefined request parameters / response models), and ensure the integrity of the input data.

[0057] Step S102, Structured Information Extraction: Parse the paths field of the Swagger document to extract the path (e.g., / api / activities), HTTP method (GET / POST / PUT / DELETE), operation ID (operationId), request parameters (query / path / body parameters), and response model (schemas) for each interface; parse the components / schemas field to extract the attribute name, type (string / number / array, etc.), required status, and description information of the interface fields.

[0058] Step S103, Business Semantic Annotation: Based on the interface's metadata such as summary, description, and tags, business tags are generated for each interface through keyword matching (e.g., "list" and "query" match "query", "create" and "add" match "create") or a rule engine. Examples are shown in Table 1.

[0059] Table 1:

[0060] Interface information Business Tags GET / api / biz-types (summary: retrieves a list of business types) [Query, Business Type, List] POST / api / activities (summary: Create a marketing campaign) [Creating, Marketing Campaigns, Forms] GET / api / stores?bId={bId} (summary: retrieves stores based on their business type ID) [Search by store, dependent business type]

[0061] Step S2, Smart Component Mapping Configuration (including plug-in component extensions).

[0062] Based on the interface information and business tags extracted in step S1, combined with preset component mapping rules and custom components extended by plugins, the automatic association between APIs and React components is achieved, specifically including the following steps:

[0063] Step S201: For simple data types, directly map to React basic UI components, as shown in Table 2:

[0064] Table 2:

[0065] Data types Business Scenarios Mapping component string (no enumeration) Plain text input <input> (Ant Design Components) string (with enumeration, such as "status": ["DRAFT", "REVIEWED"]) Status Selection <select>< / select> (Dropdown selection box) boolean Switch control <switch / > (Switch assembly) number (date format, such as "startTime") Date selection <datepicker / > (Date picker)

[0066] Step S202: Identify the dependencies or business semantics between interfaces, and match the preset React composite components or custom composite components extended by plugins, as shown in the following example:

[0067] If there are two interfaces, "Get Business Types (GET / api / biz-types)" and "Get Stores by Business Type ID (GET / api / stores?bId={bId})", and the store interface depends on the response parameter (bId) of the business type interface, then the #{BIZAndShopList} linked selector component will be automatically matched (the component logic or style can be updated through plugins) to achieve the linked logic of "automatically loading the corresponding store after selecting the business type".

[0068] If the request parameters of the "Marketing Campaign Creation (POST / api / activities)" interface include "Activity Time Range" (startTime / endTime), the #{TimeRangePicker} component will be automatically matched (supports the extension of quick time options through plugins, such as "Last 7 Days" and "This Month"), supporting quick selection and format validation of the time range;

[0069] If a project needs to integrate industry-specific components (such as a "product SKU selector" in e-commerce scenarios), the component can be registered to the system component library through a plugin. The system will automatically identify the "SKU" related business tags in the interface (such as the summary of the interface POST / api / products containing "product SKU configuration") and match the #{SkuSelector} component extended by the plugin.

[0070] Step S203, the mapping rules can be configured and extended by plug-in components, wherein:

[0071] Provides rule configuration files in JSON / YAML format, allowing developers to customize mapping logic. Example configuration is shown below. Figure 2 As shown.

[0072] The process of extending plug-in components is as follows: Figure 3 As shown, it includes the following steps:

[0073] Step S231, Plugin Development: Developers develop custom component plugins according to the system's preset plugin specifications (such as using the UMD module format, exposing three core fields: componentName (component name), matchRules (matching rules), and component (component instance)).

[0074] Step S232, Plugin Registration: Import the plugin into the system through the plugin registration interface provided by the system (such as registerComponentPlugin(plugin)). The system automatically verifies the legality of the plugin (such as field integrity and name uniqueness) and adds the plugin component to the component library.

[0075] Step S233, Automatic Matching: After the system parses the Swagger API and generates business tags, it will simultaneously search for preset components and registered plugin components, and automatically associate the corresponding components according to the priority of the matching rules (the plugin component rules have higher priority than the preset rules).

[0076] Step S3 involves integrating external state machine rules and user permission lists, and configuring state transitions and element visibility logic. This includes the following steps:

[0077] Step S301, State Machine Rule Access: Receive external state machine configuration (e.g., marketing campaign state transition: draft → pending review → approved → enabled), and match the corresponding state logic based on the business tags of the interface, for example:

[0078] If the business tag for the interface "Submit for Review (POST / api / activities / review)" is [Update, Marketing Activity, Review], then the state change logic of "Draft → Pending Review" will be automatically associated, and a state update Hook (such as useState / useReducer) will be injected into the generated code.

[0079] Step S302, Access Control Configuration: Receive the user permission list (e.g., "admin" role can edit / delete, "operator" role can only view), and automatically configure the display logic of page elements based on the interface's business tags, for example:

[0080] If the current user role is "operator", then in the generated list page code, the "Edit" and "Delete" buttons will be hidden, and only the "View Details" button will be retained;

[0081] The permission logic is implemented using the React higher-order component (HOC) withPermission, which automatically injects permission verification logic and supports permission adaptation for plugin components (plugin components can be wrapped by the withPermission higher-order component to inherit the system's permission control capabilities).

[0082] Step S4 involves using a React template to inject configuration data, generate and format multiple types of source code files. This includes the following steps:

[0083] Step S401, Template Selection and Parameter Injection: Based on the project configuration (e.g., ReduxToolkit for state management, Ant Design for component library), select the corresponding React template (supporting functional components + Hooks syntax), and inject the parsing results from steps S1-S3 (interface information, component mapping (including plugin components), and state rules) into the template. Example template snippet (EJS syntax, including plugin component references) is shown below. Figure 4 As shown.

[0084] Step S402, Multiple File Generation: Generate React source code files of the following types, with file paths consistent with the project directory structure:

[0085] Page component files (.tsx): such as ActivityListPage.tsx (list page), ActivityFormPage.tsx (form page), ProductConfigPage.tsx (product configuration page with plugin components);

[0086] Type definition files (.ts): Generate TypeScript interfaces based on Swagger schemas, such as types.ts;

[0087] API request file (.ts): Encapsulates Axios request logic, such as api.ts;

[0088] State management files (.ts): Generate Redux Slices or Context Hooks, such as activitySlice.ts;

[0089] Plugin component reference file (.ts): Automatically generates import mappings for plugin components, making it easy for page components to reference them directly, such as plugin-components.ts.

[0090] Step S403, Code Formatting: Use ESLint and Prettier tools to automatically format the generated code, ensuring that the code style is consistent with the project specifications (such as indentation, line breaks, and variable naming rules), and it can be directly committed to the code repository.

[0091] Another aspect of the present invention provides a React intelligent generation system based on Swagger, including an input parsing module, a component mapping module, a state and permission integration module, a code generation module, and a supporting resource layer, wherein:

[0092] The input parsing module is used to receive and parse the Swagger API documentation, verify the validity of the documentation, extract structured information, and generate business tags.

[0093] The component mapping module is used to automatically associate APIs with React components based on the interface information and business tags extracted by the input parsing module, combined with preset component mapping rules and custom components extended by plugins.

[0094] The state and permission integration module is used to access external state machine rules and user permission lists, and to configure state transitions and element display / hiding logic;

[0095] The code generation module is used to generate and format various types of source code files using React templates, inject configuration data (including plugin component information);

[0096] The supporting resource layer provides an extensible React component library (including basic components, composite components, and plugin components), stores the project metadata database (including state management paths, code style guides, and plugin configurations), and maintains the template library (including list page / form page templates and plugin component reference templates).

[0097] Taking the generation of a "marketing campaign creation page" as an example, the implementation process of this invention will be explained in detail:

[0098] (a) Input preparation

[0099] Developers should provide the URL for the Swagger documentation containing the following APIs:

[0100] GET / api / biz-types(summary: "Get list of business types", response includes bId (business type ID) and bName (business type name));

[0101] GET / api / stores?bId={bId} (Summary: "Get store by business type ID", request parameter bId, response includes storeId and storeName);

[0102] POST / api / activities (Summary: "Create Marketing Campaign", request parameters include name (campaign name), bId (business type ID), storeIds (list of store IDs), startTime (start time), endTime (end time), response includes id (campaign ID)).

[0103] (II) Step Execution

[0104] Step S1: Parsing and semantic annotation.

[0105] Verify the validity of the Swagger documentation and extract the paths, parameters, and response schemas of the three interfaces;

[0106] Tag the interface:

[0107] GET / api / biz-types → [Query, list of business types];

[0108] GET / api / stores → [Query, store list, dependent business type ID];

[0109] POST / api / activities → [Create, Marketing Campaign].

[0110] Step S2, component mapping.

[0111] Identify the parameter association between GET / api / biz-types and GET / api / stores, and match the #{BIZAndShopList} composite component;

[0112] Identify the startTime / endTime fields of POST / api / activities and match them with the #{DateRangePicker} component;

[0113] Identify the name field (string type, required) and match it with the Input component.

[0114] Step S3: Status and Permission Integration.

[0115] Generate a useForm Hook to manage form status and generate validation rules based on Swagger parameters (such as name being required, startTime ≤ endTime).

[0116] Based on the user role "Operations", display "Submit" and "Reset" buttons, and bind the createActivity API call logic;

[0117] Generate exception handling code: form validation failure message, API request loading status, and redirect to the activity list page after successful submission.

[0118] Step S4: Code generation.

[0119] Load the React+Ant Design+TypeScript template;

[0120] Generate api / activityApi.ts (interface call), api / activityTypes.ts (type definition), and pages / CreateActivity.tsx (page component);

[0121] Use Prettier to format the code and output it to the src / directory.

[0122] (III) Result Verification

[0123] Developers integrate the generated files into an existing React project and perform the following validations:

[0124] Compilation verification: Running `npm run dev`, the project compiles without errors;

[0125] Functionality verification:

[0126] After the page loads, the #{BIZAndShopList} component loads the business list normally, and stores are automatically loaded after a business is selected.

[0127] When the form is submitted, the validation rules are triggered. If the parameters are valid, the POST / api / activities interface is called.

[0128] The API request process displays a loading status. Upon success, the user is redirected to the activity list page; otherwise, an error message is displayed.

[0129] Consistency verification: Modify the name field of POST / api / activities in the Swagger documentation to be optional. After regenerating the code, the form validation rules will be automatically updated without manual modification.

[0130] The beneficial effects of this invention include the following:

[0131] Significantly improved development efficiency: Automation covers repetitive tasks such as API calls, type definitions, UI components, and state management, which is expected to save more than 50% of front-end development time, especially suitable for rapid iteration of middle and back-end systems;

[0132] Front-end and back-end consistency guarantee: The code is strictly synchronized with the Swagger documentation. When the interface changes, only the code needs to be regenerated, eliminating the "documentation-code inconsistency" problem at its root and reducing online failures.

[0133] Strong business adaptability: Through API semantic parsing and configurable component mapping, it supports complex business scenarios (such as component linkage and state transition), and the generated code can be directly deployed to the production environment with low secondary development costs;

[0134] Excellent ecosystem compatibility: Deeply adapted to the React technology stack (supports Redux / Zustand / React Query, AntDesign / Eleme UI, etc.), adheres to enterprise-level code standards, and seamlessly integrates with existing projects;

[0135] Lowering the development threshold: Junior developers can use this solution to quickly generate standardized pages, reduce reliance on experienced front-end developers, and improve team collaboration efficiency.

[0136] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A method for intelligent generation of Swagger-based React, characterized in that, The method comprises the following steps: Step S1, receiving and parsing the Swagger API document, verifying the document legality, extracting structured information, generating business tags, and the business tags are used to associate React components, state transition logic and page element permission control logic; Step S2, based on the interface information and business tags extracted in step S1, combining the preset component mapping rules and the plug-in customized components registered according to the preset plug-in specification, and according to the principle that the plug-in customized component matching rule priority is higher than the preset component mapping rule, the automatic association of API and React component is realized; Step S3, access external state machine rules and user permission list, and configure state transition and element display logic; Step S4, using the React template, injecting the configuration data, generating multiple type source code files, and calling ESLint tool and Prettier tool to format the generated source code files. 2.The Swagger-based React intelligent generation method of claim 1, wherein, Step S1 comprises the following steps: Step S101, receiving the URL address or local file of the Swagger document, verifying the document legality through the swagger-parser library, eliminating invalid interfaces, and ensuring the integrity of the input data; Step S102, parsing the paths field of the Swagger document, extracting the path, operation ID, request parameter and response parameter of each interface; parsing the components / schemas field, extracting the attribute name, type, mandatory and description information of the parameter field; Step S103, based on the interface metadata, generating business tags for each interface through keyword matching or rule engine. 3.The Swagger-based React intelligent generation method of claim 1, wherein, Step S2 comprises the following steps: Step S201, for simple data types, directly mapping React basic UI components; Step S202, identifying the association relationship or business semantics between interfaces, matching the preset React composite components or the plug-in customized composite components registered according to the preset plug-in specification; Step S203, extending the plug-in components through the rule configuration file in JSON / YAML format and customizing the mapping logic.

4. The method of claim 3, wherein the Swagger-based React intelligent generation method is characterized by, The process of the plug-in component extension comprises the following steps: Step S231, the developer develops a custom component plug-in according to the system preset plug-in specification, and the custom component plug-in at least includes three core fields of component name, matching rule and component instance, and the component name has uniqueness; Step S232, the plug-in is imported into the system through the plug-in registration interface provided by the system, the legality of the custom component plug-in is automatically verified, the legality verification includes field integrity verification and component name uniqueness verification, and the plug-in component is added to the component library; Step S233, after the system parses the Swagger API to generate business tags, the preset components and the registered plug-in components are retrieved, and according to the principle that the plug-in customized component matching rule priority is higher than the preset component matching rule, the corresponding components are automatically associated. 5.The Swagger-based React intelligent generation method of claim 1, wherein, Step S3 comprises the following steps: Step S301, receive external state machine configuration, match the corresponding state transition logic based on the interface business tag through precise matching or fuzzy matching; Step S302, receive user permission list, combine interface business tag, automatically configure page element display logic, and the page element display logic is realized through React high-order component. 6.The Swagger-based React intelligent generation method of claim 1, wherein Step S4 includes the following steps: Step S401, based on project configuration, select the corresponding React template, and inject the analysis results of steps S1-S3 into the template; Step S402, generate a React source code file, and the file path is consistent with the project directory structure; Step S403, call ESLint and Prettier tools to automatically format the generated code, ensure that the code style is consistent with the project specification, and submit to the code repository. 7.The Swagger-based React intelligent generation method of claim 6, wherein The React source code file types include: page component file, type definition file, API request file, state management file, and plug-in component reference file. 8.A Swagger-based React intelligent generation system, characterized in that, It includes an input analysis module, a component mapping module, a state permission integration module, a code generation module, and a support resource layer, wherein: The input analysis module is used to receive and analyze Swagger API documents, verify the legality of the documents, extract structured interface information, and generate business tags, which are used to associate React components, state transition logic, and page element permission control logic; The component mapping module is used to automatically associate API and React components based on the interface information and business tags extracted by the input analysis module, combined with the preset component mapping rules and the plug-in custom components registered according to the preset plug-in specification, and according to the principle that the priority of the plug-in custom component matching rule is higher than that of the preset component mapping rule; The state permission integration module is used to access external state machine rules and user permission lists, and configure state transition and element display logic; The code generation module is used to use React templates, inject configuration data, generate multiple types of source code files, and format them; The support resource layer is used to use React templates, inject configuration data, generate multiple types of source code files, and call ESLint and Prettier tools to format the generated source code files.

9. An electronic device, which is a code generation server, characterized by, The server includes a Swagger-based React intelligent generation system, which includes an input analysis module, a component mapping module, a state permission integration module, and a code generation module; wherein the modules are cooperatively operated to realize the method of any one of claims 1-7.

Images