A code editing method and system based on SPA

Abstract

This invention relates to the field of code editing technology and discloses a SPA-based code editing method, comprising: associating data between a menu service module and an online editing service module; obtaining modified version code, latest code, and empty code; compiling code in a code compilation module; performing secondary verification on the compiled code; determining and handling any conflicting code; publishing the edited code data through a publishing mechanism and displaying it through interface rendering. This invention also discloses a SPA-based code editing system, which enables real-time code editing and previewing for multi-user collaboration, eliminating the need for a local web front-end development environment, omitting the code building and publishing process, significantly lowering the barrier to entry for web front-end development, and improving development and deployment efficiency.

Description

Technical Field

[0001] This invention relates to the field of code editing technology, specifically to a SPA-based code editing method and system for enabling real-time code editing and previewing for multi-user collaboration. It eliminates the need for a local web front-end development environment, omits the code building and deployment process, significantly lowers the barrier to entry for web front-end development, and improves development and deployment efficiency. Background Technology

[0002] A Single-Page Application (SPA) is a special type of web application used to load a single HTML page and dynamically update that page as the user interacts with the application. It confines all activity to a single web page, loading the corresponding HTML, JavaScript, and CSS only when that web page initializes. Once the page is loaded, an SPA does not reload or redirect based on user actions. Instead, it uses JavaScript to dynamically transform the HTML (using divs to toggle their visibility) to achieve UI interaction with the user. In an SPA application, there is no full page refresh after the application loads. Instead, the presentation logic is pre-loaded and relies on view switching within content regions to display the content.

[0003] SPAs offer a good user experience, allow for front-end and back-end separation, and reduce server load. However, the traditional SPA development and deployment process currently has the following drawbacks:

[0004] First, an SPA (Single-Page Application) has only one HTML file. All user interactions and content presentation are achieved through dynamic page updates, without reloading the entire webpage; only partial updates are performed. Therefore, the project needs to be compiled entirely at once, packaging all resource files together for each release. However, this creates dependency mappings, making complete decoupling difficult. This can lead to releases even when a feature is not fully developed or has failed testing. Even if it can be packaged into multiple files, achieving separate releases of specific features requires using version control tools to switch branches or use historical rollback to create the necessary code versions before a full release. This approach is cumbersome and error-prone.

[0005] Secondly, SPAs usually cannot run directly and need to be built with front-end build tools before they can run. However, due to the large amount of code, the build time is also long. During the web front-end development process, it is necessary to frequently check the effect of code modifications. Therefore, a lot of time is spent waiting for the project to build and the browser to refresh, which greatly reduces the efficiency of the work. Even though there are technologies such as HMR (Hot Module Replacement) at present, it is still impossible to completely get rid of the frequent application builds and browser refreshes.

[0006] Finally, traditional large-scale SPA front-end projects require collaborative development by a large number of people, resulting in inconsistent code quality. SPAs typically employ a complex development process, such as mandating the use of a specific IDE (Integrated Development Environment), specifying code commenting standards, and requiring manual verification before and after commits. While each node in the process controls code quality, since IDEs are usually installed on the local machine, individual configurations can vary, leading to inconsistent code standards. Commonly used version control tools cannot check whether the code is acceptable at the time of submission and prohibit unacceptable code submissions. Custom code suggestions require secondary development of the IDE, which presents significant development challenges. Even with a large investment of manpower in development, the improvement in code quality is not significant.

[0007] Therefore, in order to solve the above technical problems, there is an urgent need for a technical method that can realize real-time code editing and preview functions for multi-person collaboration, thereby eliminating the need for local web front-end development environment, omitting the code building and deployment process, greatly reducing the threshold of web front-end development, and improving the efficiency of development and deployment. Summary of the Invention

[0008] The purpose of this invention is to provide a code editing method and system based on SPA, which can realize real-time code editing and preview functions for multi-user collaboration, thereby eliminating the need for a local web front-end development environment, omitting the code building and deployment process, greatly reducing the threshold for web front-end development, and improving development and deployment efficiency.

[0009] This invention is achieved through the following technical solution: a code editing method based on SPA, comprising the following steps:

[0010] Step S1. Create a new function menu in the menu service module, create a record in the publish table of the function menu and the online editing service module, generate empty code, and associate the data of the menu service module and the online editing service module;

[0011] Step S2. When editing the code of an existing function menu in the menu service module, obtain the associated code in the online editing service module, determine whether the currently logged-in user has modified the version of the code, if so, obtain the most recent version of the code that the user has submitted, if not, obtain the latest code from all user commit tables;

[0012] Step S3. Compile the code obtained in steps S1 and S2 in the code compilation module, and perform a commit or save operation. When a commit operation is performed, proceed to step S4; when a save operation is performed, proceed to step S8.

[0013] Step S4. Perform a second check on the compiled code. The first check checks the syntax and format of the code to determine if the syntax and format of the code are correct. If correct, proceed to the second check; otherwise, return to step S3.

[0014] In the secondary verification, the code that passed the first verification is verified according to the preset code format rules, and the currently edited data is obtained;

[0015] Step S5. Based on the PUBLISH_ID of the currently edited data, obtain the latest commit_VERSION in the commit table, and determine whether the commit_VERSION of the currently edited data is the latest. If yes, proceed to step S7; otherwise, determine whether there is a conflicting line of code. If yes, return to step S3 to process the conflicting code; otherwise, directly perform the merge operation.

[0016] Step S6. Insert a new record into the commit table and increment commit_VERSION forward;

[0017] Step S7. Insert a new record into the dev table to store historical commit records;

[0018] Step S8. Publish the code data edited in steps S1-S7 through the publishing mechanism and display it through interface rendering.

[0019] To better realize the present invention, step S1 further includes:

[0020] The menu data in the function menu includes the menu name, menu route, and parent menu;

[0021] The data created in the publish table by the online editing service module includes a unique identifier (ID), a commit_VERSION for version control, a CODE for storing the published JavaScript code, and related fields for recording the publishing history.

[0022] The system stores the ID of newly generated data in the online editing service module using a dedicated field, CODE_ID, and associates the data between the two service modules.

[0023] In this technical solution, the SPA-based code editing method is implemented using modules such as a code compilation module, a host project, and a Node.js-based server module. This solution primarily describes the necessary technical means for implementation. To implement the code editing method, this solution uses a web front-end host project for rendering. The host project is built using frameworks commonly used in SPA projects, such as Angular, Vue, and React. The project needs to provide rich built-in UI components, such as commonly used form controls, tables, tree components, and modal windows. Common SPA frameworks often have official component libraries, and secondary development or custom component development is also possible based on these libraries. These components can be freely combined to build page templates. The project also includes a rendering engine that can render the configuration files of these templates into actual functional pages. The code compilation module in this technical solution enables online editing of web code. The code compilation module includes functions such as a code editor, code validation, preview, code merging, and code submission. The code editor is a secondary development based on Monaco Editor. The main development content is the customization of code suggestions, which can select appropriate code suggestions based on the current host project. Code validation during the code editing process will display red warnings for code with syntax errors or that does not conform to code formatting standards. Forced validation is also performed during the commit process, requiring users to resolve all problematic code before submission, thus improving code quality to some extent. The preview function mainly involves interaction between the code editor, code compiler, and host project. The basic principle is that the code editor calls the compiler's interface to compile the current code, then interacts with the host project via the browser's BroadcastChannel API, sending the compiled code to the host project, where it is rendered into a page in the host project's renderer. Code merging occurs during code commits. If the currently committed code is not the latest version, it will retrieve the latest version for comparison. If conflicts are found, the user needs to manually resolve them. Code submission includes saving and committing code, which calls the Server module's storage API. This technical solution also utilizes real-time code compilation to compile JavaScript code, and also supports compilation of TypeScript, a pre-compiled language of JavaScript. Babel is used as the code transformation tool to convert it to backward-compatible JavaScript syntax. Built-in plugins are used for code compression and obfuscation, reducing network bandwidth pressure after project deployment and enhancing source code security. The Server module provides APIs for code compilation, history querying, and code storage.This module is responsible for integrating the online editor's code compilation, preview, saving, and history query functions, as well as code acquisition for the production environment. The database stores historical data generated during editing, data used for version control, and data deployed to the production environment. The code compilation module can also function as a tool; during deployment, one online code editing service can be attached to multiple host systems simultaneously. To disable online editing, simply stop the online editor.

[0024] To better realize the present invention, step S2 further includes:

[0025] The menu service module retrieves the associated code from the online editing service based on the CODE_ID recorded in the current menu table. The code includes data from the publish, commit, and dev tables. It then checks the dev table to see if the currently logged-in user has modified the version code. If so, it retrieves the user's most recent commit record from the dev table and returns the CODE field as the editing code for the code compilation module. Otherwise, it automatically retrieves the latest commit_VERSION data from the commit table and returns the CODE field as the editing code for the code compilation module.

[0026] The online editing service module generates a new record in the commit table, which includes a unique identifier ID, a field PUBLISH_ID used to store the ID from the publish table, commit_VERSION used for version control, a field CODE used to store the JavaScript code submitted by the commit operation, and related fields used to record the release history.

[0027] To better realize the present invention, step S3 further includes:

[0028] The online editor of the code compilation module sends the information of the current host project to the online editor based on the host project. The online editor will select the language to be edited based on the information and load the required dependency code for code prompting and verification.

[0029] The information includes the host project's basic framework type, the current project version, and third-party dependencies.

[0030] To better implement this invention, the secondary verification method in step S4 further includes:

[0031] Step S4.1. Convert the code that passes one validation into an AST syntax tree and format the code;

[0032] Step S4.2. In the form component, obtain the corresponding form node according to the AST syntax tree, traverse the name of the node, find the duplicate form items, and display a red error message in the code editor;

[0033] Step S4.3. Perform pre- and post-association checks, unused item checks, and other checks in the host project based on the AST syntax tree, identify the corresponding non-existent associated items, unused items, and other non-existent items, and display red error messages in the code editor.

[0034] To better implement this invention, the method for determining whether there are conflicting lines of code in step S5 further includes:

[0035] Based on the PUBLISH_ID of the currently edited data, retrieve the CODE field of the latest commit_VERSION in the commit table;

[0036] This method updates the commit_VERSION of the current data to the latest version and then compares it with the currently edited data to determine if there are any conflicting lines of code.

[0037] To better realize the present invention, the publishing mechanism in step S8 further includes manual publishing and timed publishing.

[0038] To better implement the present invention, the method for interface rendering in step S8 further includes:

[0039] Based on the CODE_ID saved in the menu, retrieve the JavaScript code of the menu described in the publish table, and render and display it in the renderer of the host project.

[0040] To better realize the present invention, the present invention further provides a code editing system based on a Spatial Application (SPA), including a menu service module, an online editing service module, a code compilation module, and a publishing and display module, wherein:

[0041] The menu service module is used to create a new function menu; when editing the code of an existing function menu, it retrieves the code associated with the online editing service module, determines whether the currently logged-in user has modified the version of the code, and if so, retrieves the most recent version of the code that the user has submitted; otherwise, it retrieves the latest code from all user commit tables.

[0042] The online editing service module provides the publish, commit, and dev tables. It is used to create a record in the publish table and generate an empty code, to insert a new record in the commit table and increment commit_VERSION, to insert a new record in the dev table, and to save historical commit records.

[0043] The code compilation module is used to compile code, perform commit or save operations, and perform secondary verification on the compiled code. It checks the syntax and format of the code against the primary verification to determine if the syntax and format are correct. In the secondary verification, it verifies the code that passed the primary verification according to preset code formatting rules. It retrieves the currently edited data, uses the PUBLISH_ID of the currently edited data to retrieve the latest commit_VERSION in the commit table, and determines if the commit_VERSION of the currently edited data is up-to-date. It handles conflicting code; performs merge operations directly; inserts a new record into the commit table, incrementing the commit_VERSION; and inserts a new record into the dev table to store historical commit records.

[0044] The publish and display module is used to publish the edited code data through the publishing mechanism and display it through interface rendering.

[0045] Compared with the prior art, the present invention has the following advantages and beneficial effects:

[0046] (1) This invention is applied to the code development and management of Web front-end SPA (Single Page Web Application) applications. Through the built-in Web front-end code editor, code compiler and version control system, it realizes the real-time code editing and preview function that can be collaboratively performed by multiple people, thereby getting rid of the local Web front-end development environment, omitting the code building and release process, greatly reducing the threshold of Web front-end development, and improving the efficiency of development and deployment.

[0047] (2) Large-scale SPA-type web front-end systems require collaborative development by multiple people, frequent version releases and iterations. This system can be used to manage code and function development, freeing them from the traditional development process and enabling more flexible releases and stricter code control.

[0048] (3) This system can serve as a central system for code management and development, managing the development and deployment of multiple projects simultaneously;

[0049] (4) This system can be used for development and deployment of projects that require incremental releases and version rollbacks. Attached Figure Description

[0050] The present invention will be further described in conjunction with the following drawings and embodiments. All inventive concepts of the present invention should be considered as disclosed content and within the scope of protection of the present invention.

[0051] Figure 1 A flowchart of a code editing method based on SPA provided by the present invention.

[0052] Figure 2 This invention provides a flowchart of code development and release in a SPA-based code editing method.

[0053] Figure 3 The flowchart illustrates the use of a code compiler in the host project and deployment process of a SPA-based code editing method provided by this invention.

[0054] Figure 4 This invention provides a flowchart of the process from creating / modifying code in a host project to obtaining and rendering the code in a code editing method based on an SPA.

[0055] Figure 5 This is a schematic diagram of the architecture of the host front-end project in a SPA-based code editing method provided by the present invention.

[0056] Figure 6 The traditional SPA flowchart provided for this invention.

[0057] Figure 7 This invention provides a flowchart of the front-end development and deployment process in a SPA-based code editing method. Detailed Implementation

[0058] To more clearly illustrate the technical solutions of the embodiments of the present invention, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments, and therefore should not be regarded as a limitation on the scope of protection. 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.

[0059] In the description of this invention, it should be noted that, unless otherwise explicitly specified and limited, the terms "set up," "connected," and "linked" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this invention based on the specific circumstances.

[0060] Example 1:

[0061] This embodiment provides a code editing method based on SPA, such as Figure 1As shown, the SPA-based code editing method provided in this embodiment is implemented based on modules such as a code compilation module, a host project, and a Node.js-based server module. This technical solution mainly describes the necessary technical means for implementation. To implement the code editing method, this technical solution uses a web front-end host project for rendering. The host project is built using frameworks commonly used in SPA projects, such as Angular, Vue, and React. The project needs to provide rich built-in UI components, such as commonly used form controls, tables, tree components, and modal windows. Common SPA frameworks often have official component libraries, and secondary development or custom component development can also be performed based on these libraries. Page templates can be freely combined based on these components. The project also includes a rendering engine that can render the configuration files of these templates into actual functional pages. The code compilation module in this embodiment enables online editing of web code. The code compilation module includes functions such as a code editor, code verification, preview, code merging, and code submission. The code editor is a secondary development based on Monaco Editor. The main development content is the customization of code suggestions, which can select appropriate code suggestions according to the current host project. Code validation during the code editing process will display red warnings for code with syntax errors or that does not conform to code formatting standards. Forced validation is also performed during the commit process, requiring users to resolve all problematic code before submission, thus improving code quality to some extent. The preview function mainly involves interaction between the code editor, code compiler, and host project. The basic principle is that the code editor calls the compiler's interface to compile the current code, then interacts with the host project via the browser's BroadcastChannel API, sending the compiled code to the host project, where it is rendered into a page in the host project's renderer. Code merging occurs during code commits. If the currently committed code is not the latest version, it will retrieve the latest version for comparison. If conflicts are found, the user needs to manually resolve them. Code submission includes saving and committing code, which calls the Server module's storage API. This technical solution also utilizes real-time code compilation to compile JavaScript code, and also supports compilation of TypeScript, a pre-compiled language of JavaScript. Babel is used as the code transformation tool to convert it to backward-compatible JavaScript syntax. Built-in plugins are used for code compression and obfuscation, reducing network bandwidth pressure after project deployment and enhancing source code security. The Server module provides APIs for code compilation, history querying, and code storage.This module is responsible for integrating the online editor's code compilation, preview, saving, and history query functions, as well as code acquisition for the production environment. The database stores historical data generated during editing, data used for version control, and data deployed to the production environment. The code compilation module can also function as a tool; during deployment, one online code editing service can be attached to multiple host systems simultaneously. To disable online editing, simply stop the online editor.

[0062] The overall idea of ​​this embodiment is to eliminate the dependence of traditional SPA projects on local development environments by deploying the IDE and compiler on a server. This eliminates the need for repeatedly building the project, improving development and deployment efficiency. The online IDE is a secondary development based on open-source projects, making it easier to add auxiliary functions, such as specifying strict code verification rules to ensure a highly consistent coding style in collaborative projects without requiring dedicated human code review. Because local project development is changed to online editing, the preview function no longer requires waiting for the browser to refresh, and it also reduces HTTP requests generated during refreshes, alleviating server load.

[0063] Example 2:

[0064] This embodiment is a further optimization based on Embodiment 1, such as... Figure 2 As shown, when a new function menu is created in the menu service module, a record is simultaneously created in both the menu service module's menu and the online editing service. The menu service creates a new menu record, including the menu name, menu route, and parent menu. Additionally, a dedicated field, CODE_ID, stores the ID of the newly generated data in the online editing service, linking the data between the two services.

[0065] The online editing service will generate a default initial data entry in the publish table. The publish table exists when the project is set up and includes a unique identifier ID, commit_VERSION for version control (default value is 0), a code for storing the published JavaScript code (default value is null), a code for storing the source code before compilation (including source map files, used for code debugging, default value is null), and related fields for recording the publishing history (such as creator, creation time, remarks, etc.).

[0066] When editing the code of an existing menu item, the system retrieves the associated code from the online editing service based on the CODE_ID recorded in the current menu table. This includes data from the publish, commit (which exists during project setup), and dev tables. If the currently logged-in user has not edited the code for the current menu item, the dev table will not contain any historical commit data for that user regarding that menu item. The system will automatically retrieve the latest commit_VERSION data from the commit table and return the code (CODE field) from that record as the editing code for the code compilation module. If the user has edited the code for the menu item, the system will retrieve the user's most recent commit record from the dev table and return the code (CODE field) from that record as the editing code for the code compilation module.

[0067] In this embodiment, the Dev table records historical data generated during online editing for historical backtracking; the Commit table is used for version control of the data edited online, facilitating subsequent releases and rollbacks; the Publish table records data from the production environment and also stores the compiled code, which can be directly used for interface display.

[0068] The other parts of this embodiment are the same as those in Embodiment 1, so they will not be described again.

[0069] Example 3:

[0070] This embodiment is a further optimization based on Embodiment 1, such as... Figure 2 As shown, a `commit` table is created in the online editing service module. A new record is generated in the `commit` table, including a unique identifier (ID), a `PUBLISH_ID` field to store the ID from the `publish` table, a `commit_VERSION` field for version control (default value is 0), a `CODE` field to store the JavaScript code submitted by the commit operation (default value is null), and related fields for recording the publishing history (such as creator, creation time, and comments). Then, an empty code is returned to proceed to the next step for code editing.

[0071] The other parts of this embodiment are the same as those in Embodiment 1, so they will not be described again.

[0072] Example 4:

[0073] This embodiment is a further optimization based on Embodiment 1, such as... Figure 3 and Figure 4As shown, the code editor is accessed through the code compilation module. The returned code—the version code, the latest code, and empty code—serves as the initial code. Then, based on the host project, the online editor receives information such as the host project's underlying framework type (Angular, Vue, or React, etc.), the current project version, and third-party dependencies. The online editor then uses this information to select the current editing language (JavaScript, TypeScript, Vue, etc.) and load the necessary dependency code for code suggestions and validation.

[0074] The other parts of this embodiment are the same as those in Embodiment 1, so they will not be described again.

[0075] Example 5:

[0076] This embodiment is a further optimization based on Embodiment 1, such as... Figure 3 and Figure 4 As shown, code verification involves two steps. The first step checks the code based on the prompts and verifications obtained in the code compilation module, ensuring there are no syntax or formatting errors. The second step verifies the code according to the editor's preset code formatting rules, such as disallowing unused variables and nested loops, to ensure the quality of the submitted code. If either verification fails, the code will be redirected back to the code compilation module to fix the issues.

[0077] Errors in web projects can be categorized into compile-time errors and runtime errors based on when they occur. Common code verification tools can only detect most compile-time errors and are ineffective against runtime errors. Therefore, runtime errors typically require manual review by code auditors and testing by testers. This process demands a high level of experience and skill from auditors and involves a lengthy process from testing to bug fixing. Our platform provides customizable additional verification rules, requiring only one or two experienced personnel to maintain these rules. This reduces the manpower needed for code review, allowing testers to focus solely on functional business testing.

[0078] In this embodiment, we take our current project as an example:

[0079] The edited code is converted into an AST (Abstract Syntax Tree, which is an abstract representation of the syntactic structure of source code. It represents the syntactic structure of a programming language in a tree-like form, where each node in the tree represents a structure in the source code).

[0080] Format the code: Format the code according to the specified format file (such as spaces, indentation, line breaks, etc.).

[0081] Additional validation rules: such as Figure 3 As shown, with Figure 5 Taking the host project architecture as an example:

[0082] Duplicate row validation: Taking a form component as an example, the name of each form item in the current form must be unique. Using the AST generated in step S4.1, the corresponding form node can be found, and by traversing the names of all form items below, duplicate form items can be found, and then a red error message will be displayed in the editor.

[0083] Validating Precedence Relationships: Taking form components as an example, for form items with a cascading relationship, it's necessary to validate whether the preceding item exists. However, unlike variable references, form cascading uses `name` as the associated item, making syntax-based validation impossible. We use the Abstract Syntax Tree (AST) to find the associated form items, then search for the associated item under the current form node. If it doesn't exist, a red error message is displayed in the editor.

[0084] Unused Item Validation: For example, in a table component, there are configurations for defining columns. Table columns have two use cases: displaying data on the page and hiding them for data submission. Therefore, columns that are hidden but not used for submission can be considered redundant columns. We use AST to filter out all hidden columns and code blocks used for data submission. If the data in these columns is not used in the data submission code block, a red error message will be displayed.

[0085] Other validations: Taking page redirection as an example: the redirection route needs to be configured in the code, so it's necessary to verify whether the redirection route exists. We will call the host project's menu query request to determine if the current redirection route exists; if it doesn't, a red error message will be displayed.

[0086] By using the above-mentioned additional validation rules, potential logical problems can be identified during the commit phase, thereby improving code quality.

[0087] The other parts of this embodiment are the same as those in Embodiment 1, so they will not be described again.

[0088] Example 6:

[0089] This embodiment further optimizes upon embodiment 1. Based on the PUBLISH_ID of the currently edited data, it retrieves the latest commit_VERSION code (CODE field) from the commit table, updates the commit_VERSION of the current data to the latest version, and then compares it with the currently edited code. If conflicting lines of code are found, it will revert to step two to handle the conflicting code. If there are no conflicting lines of code, it will directly perform a merge operation and then proceed to the next step.

[0090] The other parts of this embodiment are the same as those in Embodiment 1, so they will not be described again.

[0091] Example 7:

[0092] This embodiment further optimizes upon embodiment 1. In this embodiment, it periodically checks the publish and commit tables according to a set time. If a commit_VERSION in the publish table is lower than the latest commit_VERSION in the commit table, the latest data in the commit table will replace the corresponding data in the publish table. Simultaneously, the server module's compilation API will be called to compile the source code into code that the browser can directly run. Additionally, some menu items can be marked as ignored to skip them during automatic publishing. The flowchart of the process from creating / modifying code in the host project to obtaining the rendered code in the server module is as follows: Figure 4 As shown.

[0093] Manual publishing allows users to select a specific menu item within the system interface and publish to a specific commit_VERSION. This synchronizes the data for that menu item in the commit table to the publish table. After a scheduled publish, if a critical issue arises and the situation is urgent, this feature allows for rapid code rollback and republishing solely through the interface. Clients can automatically refresh after a code rollback or republishing via WebSocket communication. Similarly, after developers have fixed the issue, this feature can be used to independently release specific functionalities.

[0094] The other parts of this embodiment are the same as those in Embodiment 1, so they will not be described again.

[0095] Example 8:

[0096] This embodiment further optimizes upon embodiment 1. In this embodiment, after entering a specific function interface, the JavaScript code of the menu in the publish table is obtained based on the CODE_ID saved in the menu, and then rendered and displayed in the renderer of the host project.

[0097] The other parts of this embodiment are the same as those in Embodiment 1, so they will not be described again.

[0098] Example 9:

[0099] This embodiment further optimizes upon embodiment 1, providing a SPA-based code editing system that matches the method. Therefore, the other parts of this embodiment are the same as in embodiment 1, and will not be described again.

[0100] Example 10:

[0101] like Figure 6 , Figure 7 The diagram illustrates a comparison between traditional SPAs and the front-end development and deployment process provided by this invention. Traditional large-scale SPA front-end projects require a large number of collaborative developers, leading to inconsistent code quality. They typically employ a complex development process, such as mandating the use of a specific IDE (Integrated Development Environment), specifying code commenting standards, and requiring manual verification before and after commits. While each node in the process controls code quality, the IDE is usually installed on the local machine, and the configurations of individuals may differ, resulting in a lack of uniformity in code standards. Common version control tools cannot prevent unqualified code from being submitted, and custom code suggestions require secondary development of the IDE, which is quite difficult. As a result, a large amount of development manpower is invested, but the improvement in code quality is not significant.

[0102] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention in any way. Any simple modifications or equivalent changes made to the above embodiments based on the technical essence of the present invention shall fall within the protection scope of the present invention.

Claims

1. A code editing method based on SPA, characterized in that, Includes the following steps: Step S1. Create a new function menu in the menu service module, create a record in the publish table of the function menu and the online editing service module, generate empty code, and associate the data of the menu service module and the online editing service module; Step S2. When editing the code of an existing function menu in the menu service module, obtain the code associated in the online editing service module, determine whether the currently logged-in user has a modified version of the code, if so, obtain the latest version of the code that has been submitted, if not, obtain the latest code from all user commit tables; Step S3. Compile the code obtained in steps S1 and S2 in the code compilation module, and perform a commit or save operation. When a commit operation is performed, proceed to step S4; when a save operation is performed, proceed to step S8. Step S4. Perform a second check on the compiled code. The first check checks the syntax and format of the code to determine if the syntax and format of the code are correct. If they are correct, proceed to the second check; otherwise, return to step S3. In the secondary verification, the code that passed the first verification is verified according to the preset code format rules, and the currently edited data is obtained; Step S5. Based on the PUBLISH_ID of the currently edited data, obtain the latest commit_VERSION in the commit table, and determine whether the commit_VERSION of the currently edited data is the latest. If yes, proceed to step S7; otherwise, determine whether there is a conflicting line of code. If yes, return to step S3 to process the conflicting code; otherwise, directly perform the merge operation. Step S6. Insert a new record into the commit table of the online editing service module, and increment commit_VERSION forward; Step S7. Insert a new record into the dev table of the online editing service module to save historical commit records; Step S8. Publish the code data edited in steps S1-S7 through the publishing mechanism and display it through interface rendering; Step S2 includes: The menu service module retrieves the associated code from the online editing service based on the CODE_ID recorded in the current menu table. The code includes data from the publish, commit, and dev tables. It then checks whether the currently logged-in user has modified the version code based on whether the dev table contains historical commit data related to the menu. If so, it retrieves the user's most recent commit record from the dev table and uses the returned CODE field as the editing code for the code compilation module. Otherwise, it automatically retrieves the latest commit_VERSION data from the commit table and uses the returned CODE field as the editing code for the code compilation module. The online editing service module generates a new record in the commit table, which includes a unique identifier ID, a field PUBLISH_ID used to store the ID from the publish table, commit_VERSION used for version control, a field CODE used to store the JavaScript code submitted by the commit operation, and related fields used to record the release history.

2. The code editing method based on SPA according to claim 1, characterized in that, Step S1 includes: The menu data in the function menu includes the menu name, menu route, and parent menu; The data created in the publish table by the online editing service module includes a unique identifier (ID), a commit_VERSION for version control, a CODE for storing the published JavaScript code, and related fields for recording the publishing history. The system stores the ID of newly generated data in the online editing service module using a dedicated field, CODE_ID, and associates the data between the two service modules.

3. The code editing method based on SPA according to claim 1, characterized in that, Step S3 includes: The online editor of the code compilation module sends the information of the current host project to the online editor based on the host project. The online editor will select the language to be edited based on the information and load the required dependency code for code prompting and verification. The information includes the host project's basic framework type, the current project version, and third-party dependencies.

4. The code editing method based on SPA according to claim 1, characterized in that, The secondary verification method in step S4 includes: Step S4.

1. Convert the code that passes one validation into an AST syntax tree and format the code; Step S4.

2. In the form component, obtain the corresponding form node according to the AST syntax tree, traverse the name of the node, find the duplicate form items, and display a red error message in the code editor; Step S4.

3. Perform pre- and post-association checks, unused item checks, and other checks in the host project based on the AST syntax tree, identify the corresponding non-existent associated items, unused items, and other non-existent items, and display red error messages in the code editor.

5. The code editing method based on SPA according to claim 1, characterized in that, The method for determining whether there are conflicting lines of code in step S5 includes: Based on the PUBLISH_ID of the currently edited data, retrieve the CODE field of the latest commit_VERSION in the commit table; This method updates the commit_VERSION of the current data to the latest version and then compares it with the currently edited data to determine if there are any conflicting lines of code.

6. The code editing method based on SPA according to claim 1, characterized in that, The publishing mechanism in step S8 includes manual publishing and scheduled publishing.

7. The SPA-based code editing method according to claim 1, characterized in that, The method for rendering the interface in step S8 includes: Based on the CODE_ID saved in the menu, retrieve the JavaScript code of the menu described in the publish table, and render and display it in the renderer of the host project.

8. A SPA-based code editing system for executing the SPA-based code editing method as described in claim 1; characterized in that, It includes a menu service module, an online editing service module, a code compilation module, and a publishing and display module, among which: The menu service module is used to create a new function menu, create a record in the publish table of the function menu and the online editing service module, generate empty code, and associate the data of the menu service module and the online editing service module. When editing the code of an existing function menu in the menu service module, it obtains the associated code in the online editing service module, determines whether the currently logged-in user has modified the version code, and if so, obtains the most recent committed version code; otherwise, it obtains the latest code from all user commit tables. The menu service module obtains the associated code in the online editing service based on the CODE_ID recorded in the current menu table. The code includes data from the publish table, commit table, and dev table. It also determines whether the currently logged-in user has modified the version code based on whether the user has submitted historical commit data about the menu in the dev table. If so, it obtains the user's most recent commit record in the dev table and uses the returned CODE field as the editing code for the code compilation module; otherwise, it automatically obtains the latest data of commit_VERSION in the commit table and uses the returned CODE field as the editing code for the code compilation module. The code compilation module is used to compile the obtained code and perform commit or save operations. When a commit operation is performed, the compiled code undergoes a second verification. The first verification checks the syntax and format of the code to determine if they are correct. If correct, it proceeds to the second verification; otherwise, it performs a commit or save operation. In the second verification, the code that passed the first verification is verified according to preset code format rules to obtain the currently edited data. When a save operation is performed, the edited code data is published through a publishing mechanism. Based on the PUBLISH_ID of the currently edited data, the latest commit_VERSION in the commit table is obtained. It is then determined whether the commit_VERSION of the currently edited data is the latest. If so, a new data entry is inserted into the dev table of the online editing service module to save historical commit records. If not, it is determined whether there are conflicting lines of code. If so, a commit or save operation is performed to handle the conflicting code; otherwise, a merge operation is performed directly. The online editing service module is used to insert a new data record into the commit table of the online editing service module, causing commit_VERSION to increment forward; the new data record generated by the online editing service module in the commit table includes a unique identifier ID, a field PUBLISH_ID used to store the ID in the publish table, a commit_VERSION used for version control, a JavaScript code CODE used to store the commit operation, and related fields used to record the release history; The publishing and display module is used to publish the edited code data through a publishing mechanism and display it through interface rendering.

Images