Front-end passive code customization development method and system

Abstract

The invention provides a front-end passive code customization development method and system, and belongs to the technical field of Internet, and the method comprises the steps: creating a template project based on a modular architecture, obtaining and quoting a component library through a management tool, and globally or locally registering components of the component library in the template project; in the process of constructing and packaging the template project, reserving a specified customized development file, so that the customized development file is still kept in a readable and editable non-confusion form after being packaged; the template project completed after construction is published as a deployable product, and in a specified directory of the deployable product, the reserved customized development file is in a non-confusion form; and in response to the customization demand, modifying the customization development file in the deployable product to realize the change of the front-end interface or function. According to the method, the readable and editable customized development file is reserved, so that customized modification of the front-end project is realized on the premise that the whole source code is not leaked.

Description

Technical Field

[0001] The present invention relates to the field of Internet technologies, and in particular, to a method and system for customizing and developing a front end without source code. Background Art

[0002] In the current front-end development field, with the increasing popularity of Internet applications, customers' personalized requirements for front-end projects are constantly increasing, and it is required to quickly customize the interface and functions within a short period of time.

[0003] However, in the prior art, to meet the customization requirements, it is usually necessary to provide developers or third parties with the complete front-end source code, and these source codes are often processed by obfuscation, compression, etc. to protect business secrets and core technologies, resulting in the source code being difficult to read and modify. In addition, to prevent leakage, enterprises tend to restrict the opening of source codes in customized development, forcing developers to modify by obtaining the complete source code, which not only prolongs the development cycle but also increases the risks of source code leakage and business information leakage.

[0004] Therefore, how to achieve customized modification of front-end projects on the premise that the overall source code does not leak has become a technical problem to be urgently solved. Summary of the Invention

[0005] The present invention provides a method, a system, an electronic device, and a storage medium for customizing and developing a front end without source code, so as to solve the defects in the prior art and achieve customized modification of front-end projects on the premise that the overall source code does not leak.

[0006] The present invention provides a method for customizing and developing a front end without source code, including the following steps: Develop a reusable component library containing standardized interfaces, and publish the component library to a preset management tool; Create a template project based on a modular architecture, obtain and reference the component library through the management tool, and globally or locally register the components of the component library in the template project; During the process of building and packaging the template project, retain specified customized development files, so that the customized development files remain in a non-obfuscated form that is readable and editable after packaging is completed; Publish the completed template project after construction as a deployable product, where in a specified directory of the deployable product, the retained customized development files are in a non-obfuscated form; In response to customization requirements, modify the customized development files in the deployable product to achieve changes in the front-end interface or functions.

[0007] A front-end source-code-free customization development method provided by the present invention, the development includes a reusable component library with standardized interfaces, and publishing the component library to a preset management tool, including: Classify the components, and define basic components and business components respectively; Through a preset interface standard, uniformly define the input attributes, output events, and insertable content of each component; During the construction process of the component library, package and manage the versions of the components through configuration files or scripts; Publish the component library to a preset management tool so that the component library can be obtained and referenced through the management tool subsequently.

[0008] A front-end source-code-free customization development method provided by the present invention, during the process of building and packaging the template project, retain specified customization development files, including: Set exclusion rules in the packaging configuration file or script to identify and mark the customization development files; Perform obfuscation, compression, or packaging operations on other files except the customization development files; Skip the obfuscation or compression processing of the customization development files, and package the customization development files in their original readable form to a specified directory of the deployable product.

[0009] A front-end source-code-free customization development method provided by the present invention, the process of publishing the built template project as a deployable product includes: Package the static resource files and configuration files generated after construction through an automated script or a continuous integration platform to obtain a packaged file; Upload the packaged file to a preset server or cloud storage platform; Load and deploy the packaged file in a preset production environment or test environment to generate corresponding accessible links or service endpoints; Record the product information of the successfully deployed product in a versioned manner for subsequent viewing, comparison, and rollback operations.

[0010] A front-end source-code-free customization development method provided by the present invention, the customization development files include a routing configuration file, a style variable declaration file, and a template file for an expandable slot; the modification of the customization development files in the deployable product includes: Add or modify dynamic routing rules in the routing configuration file; Override predefined CSS variables in the style variable declaration file; Insert customized content at the reserved slot position of the template file.

[0011] According to a front - end source - code - free customization development method provided by the present invention, after adding or modifying dynamic routing rules in the routing configuration file, it further includes: Binding route guards to the newly added or changed routes in the routing configuration file; When an access request arrives, verifying the access request through the route guards to determine whether the user role information or permission information carried by the access request meets the preset access conditions; When it is determined that the user role information or permission information carried by the access request meets the preset access conditions, allowing route redirection and displaying the corresponding newly added or changed page; When it is determined that the user role information or permission information carried by the access request does not meet the preset access conditions, interrupting the redirection or redirecting to a pre - configured error page.

[0012] According to a front - end source - code - free customization development method provided by the present invention, it further includes: Configuring a file change monitoring script in the operating environment of the deployable product to continuously monitor the directory where the customization development files are located; When the file change monitoring script detects that the customization development files have been modified, triggering a hot update event; According to the hot update event, performing a partial re - load or in - memory replacement on the modified customization development files, and injecting the updated content in the modified customization development files into the existing running instance; Automatically updating the front - end interface through a real - time communication channel on the browser side or a preset refresh mechanism to display the updated content.

[0013] The present invention also provides a front - end source - code - free customization development system, including the following modules: A first processing module, used to develop a reusable component library containing standardized interfaces and publish the component library to a preset management tool; A second processing module, used to create a template project based on a modular architecture, obtain and reference the component library through the management tool, and globally or locally register the components of the component library in the template project; A third processing module, used to retain specified customization development files during the process of building and packaging the template project, so that the customization development files remain readable and editable in a non - obfuscated form after packaging; A fourth processing module, used to publish the built template project as a deployable product, where the retained customization development files are in a non - obfuscated form in the specified directory of the deployable product; The fifth processing module is used to modify the customized development files in the deployable product in response to customization requirements, so as to achieve changes in the front-end interface or functions.

[0014] The present invention also provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, the front-end source-code-free customization development method as described in any one of the above is implemented.

[0015] The present invention also provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the front-end source-code-free customization development method as described in any one of the above is implemented.

[0016] The present invention also provides a computer program product, including a computer program. When the computer program is executed by a processor, the front-end source-code-free customization development method as described in any one of the above is implemented.

[0017] In summary, one or more technical solutions provided in the embodiments of the present application have at least the following technical effects or advantages: By developing a reusable component library containing standardized interfaces and publishing the component library to a preset management tool, the unified management and efficient reuse of components are achieved, greatly reducing the redundancy and repetition in the development process, and improving the development efficiency and maintenance convenience; by creating a template project based on a modular architecture, obtaining and referencing the component library through the management tool, and globally or locally registering the components of the component library in the template project, the process of component reference and integration is simplified, the learning cost and technical threshold in the process of using components are reduced, and at the same time, the readability and standardization of project code are improved; by retaining the specified customized development files during the process of building and packaging the template project, so that the customized development files remain readable and editable in a non-obfuscated form after packaging is completed, the security of the overall project code is protected while still enabling developers to modify and customize local files conveniently, greatly reducing the risk of source code exposure and the technical complexity of subsequent customization development; by publishing the completed template project after construction as a deployable product, and in the specified directory of the deployable product, the retained customized development files are in a non-obfuscated form, so that the deployment product has the ability to directly and conveniently modify the customized content, effectively improving the maintenance efficiency and flexibility after deployment, and reducing the additional costs brought by frequent redeployment; by modifying the customized development files in the deployable product in response to customization requirements to achieve changes in the front-end interface or functions, the customized modification of the front-end project is realized on the premise that the overall source code does not leak. Description of the Drawings

[0018] To more clearly illustrate the technical solutions in the present invention or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0019] Figure 1 It is one of the flow schematic diagrams of the front-end source-code-free customization development method provided by the present invention.

[0020] Figure 2 It is the second flow schematic diagram of the front-end source-code-free customization development method provided by the present invention.

[0021] Figure 3 It is the third flow schematic diagram of the front-end source-code-free customization development method provided by the present invention.

[0022] Figure 4 It is the fourth flow schematic diagram of the front-end source-code-free customization development method provided by the present invention.

[0023] Figure 5 It is the fifth flow schematic diagram of the front-end source-code-free customization development method provided by the present invention.

[0024] Figure 6 It is the sixth flow schematic diagram of the front-end source-code-free customization development method provided by the present invention.

[0025] Figure 7 It is the seventh flow schematic diagram of the front-end source-code-free customization development method provided by the present invention.

[0026] Figure 8 It is the structural schematic diagram of the front-end source-code-free customization development system provided by the present invention.

[0027] Figure 9 It is the structural schematic diagram of the electronic device provided by the present invention. Detailed implementation manners

[0028] To make the objectives, technical solutions, and advantages of the present invention clearer, the following will clearly and completely describe the technical solutions in the present invention with reference to the accompanying drawings in the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art without creative efforts based on the embodiments in the present invention belong to the scope of protection of the present invention.

[0029] It should be noted that in the description of the present invention, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or also includes elements inherent to such process, method, article or device. Without further limitation, the element defined by the statement "including one..." does not exclude the existence of additional identical elements in the process, method, article or device including the said element. The orientation or positional relationship indicated by terms such as "upper", "lower", etc. is based on the orientation or positional relationship shown in the drawings, and is only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the system or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and thus should not be construed as a limitation to the present invention. For those of ordinary skill in the art, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0030] The terms "first", "second", etc. in the present invention are used to distinguish similar objects, rather than to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged under appropriate circumstances, so that the embodiments of the present invention can be implemented in an order other than those illustrated or described herein, and the objects distinguished by "first", "second", etc. are usually of the same category, and do not limit the number of objects. For example, the first object can be one or multiple. In addition, "and / or" means at least one of the connected objects, and the character " / " generally indicates that the related objects before and after are in an "or" relationship.

[0031] The following combines Figures 1-9 to describe the front-end source-code-free customization development method, system, electronic device and storage medium provided by the present invention.

[0032] Figure 1 is one of the flow diagrams of the front-end source-code-free customization development method provided by the present invention. As Figure 1 shown, it includes but is not limited to the following steps: Step 101: Develop a reusable component library containing standardized interfaces and publish the component library to a preset management tool.

[0033] In order to avoid the leakage risk caused by the exposure of source code in the traditional front-end customization development process, and at the same time improve the front-end development efficiency and code reuse rate, this embodiment proposes a method for developing a reusable component library containing standardized interfaces.

[0034] In a possible implementation manner, referring to Figure 2 , Figure 2 is the second flow diagram of the front-end source-code-free customization development method provided by the present invention. Step 101 specifically includes the following steps: Step 201: Classify the components and define basic components and business components respectively.

[0035] Step 202: Through a preset interface standard, uniformly define the input attributes, output events, and insertable content of each component.

[0036] Step 203: During the construction of the component library, package and manage the versions of the components through configuration files or scripts.

[0037] Step 204: Publish the component library to a preset management tool so that the component library can be obtained and referenced through the management tool subsequently.

[0038] Specifically, in this embodiment, the components are first classified according to the differences in business scenarios. Components with strong generality and relatively basic functions are defined as basic components, such as buttons, input boxes, etc. Developers can directly reuse these basic components on any page that requires basic interaction elements, thus saving the time of repeatedly writing common logic. When users of the component library need to extend on top of the native functions, they can also perform secondary development on the basic components through methods such as encapsulation and inheritance. For business components, due to their deeper binding with specific business processes, data structures, or display forms, their internal logic usually needs to handle multi-level data interactions and business judgments, such as lists, forms, information cards, etc., to facilitate more precise component management and invocation.

[0039] Meanwhile, to ensure that each component within the component library has a unified and clear invocation method, this embodiment also uniformly defines the input attributes (props), output events (events), and the slot positions for inserting custom content of each component through a preset interface standard. For example, for input attributes, this embodiment uses a unified props definition method to clearly define the types, formats, and constraint conditions of the data received by the component externally; for output events, they are standardized through events to clearly define the event names, parameter passing forms, and structures that each component needs to throw in different business scenarios; while the insertable content is uniformly defined and managed through the slot mechanism, and the positions within the component where custom content can be extended or inserted are pre-planned in advance, so that component users can perform flexible content extension or replacement during invocation.

[0040] In addition, to facilitate the unified management and version control of the component library, during the construction of the component library in this embodiment, components are also uniformly packaged and version-managed through pre-written configuration files or automated build scripts, thereby improving the convenience and controllability of subsequent update iteration, maintenance, and management of the component library.

[0041] Furthermore, in this embodiment, the constructed component library is also published to a preset management tool, such as a private npm repository or an internal component management platform, so that developers can conveniently obtain and reference the component library through the management tool and quickly realize component reuse in different projects.

[0042] Through the above method, the component library developed in this embodiment effectively realizes the standardization of component interfaces, the reusability of component functions, and the convenience of component management, reduces the dependence on the development capabilities of front-end personnel during the project development process, significantly improves the development efficiency and maintenance convenience, and at the same time avoids the security risks caused by the exposure of source code in the traditional source code customization development mode.

[0043] Step 102: Create a template project based on a modular architecture, obtain and reference the component library through a management tool, and globally or locally register the components of the component library in the template project.

[0044] In order to further improve the development efficiency of front-end projects and reduce the difficulty for developers in component integration and configuration, this embodiment proposes to create a template project based on a modular architecture, obtain and reference the component library through a management tool, and globally or locally register the components of the component library in the template project. In the traditional front-end development process, the methods of component reference and registration are often messy due to the lack of unified management and specifications, which is likely to lead to component reference errors, duplicate references, and even increase the costs of project development and maintenance.

[0045] Specifically, in this embodiment, a front-end template project is first designed based on a modular architecture. The architecture of the template project includes a basic layer, a business layer, and an extended layer. Each layer module is independent of each other and has clear responsibilities, and can be flexibly hot-plugged and replaced. When creating the template project, in this embodiment, through a management tool, such as a private npm repository or an internal component management platform within the team, the developed and unified interface standard component library is conveniently obtained and referenced. After referencing the component library, in this embodiment, in the entry file of the template project, according to the actual project requirements, the components of the component library are registered globally or locally: for components that are frequently used and generally applicable in the project, the global registration method is usually adopted to ensure that any page can directly call; while for components that are only used in specific pages or modules, the local registration method can be selected to be loaded and used only when needed.

[0046] Through the above modular architecture design and component registration method, this embodiment greatly simplifies the integration process of components in the template project. Developers do not need to frequently handle component references and registrations manually, significantly reducing the probability of errors when calling components and further ensuring the clarity and consistency of the project code. In addition, since the template project has pre-set a standardized component reference and registration mechanism, developers can quickly implement business requirements at the start of the project without paying too much attention to the reference details of underlying components, significantly improving the project development efficiency and reducing the development and maintenance costs.

[0047] Step 103: During the process of building and packaging the template project, retain the specified customized development files so that the customized development files remain in a readable and editable non-obfuscated form after packaging is complete.

[0048] During the building and packaging process of traditional front-end projects, code obfuscation, compression and other means are usually used to process front-end code. Although this can effectively protect the security of the source code, it also brings the problem of difficult customized development. Especially when users or customers have personalized requirements for the front-end interface, due to the obfuscated and compressed code being difficult to read and edit, it is necessary to obtain the source code again, increasing the risk of source code leakage and exposure of business information.

[0049] Therefore, in response to the above problems, Step 103 retains the specified customized development files during the process of building and packaging the template project, so that these files remain in a readable and editable non-obfuscated form after packaging is complete. On the premise of avoiding the exposure of the overall source code, it realizes the retention of key customized files, thus meeting the customer's customized requirements and greatly reducing the risk of source code leakage and exposure of business information.

[0050] In a possible implementation manner, referring to Figure 3 , Figure 3 is the third flow diagram of the front-end source-code-free customized development method provided by the present invention. Step 103 specifically includes the following steps: Step 301: Set exclusion rules in the packaging configuration file or script to identify and mark the customized development files.

[0051] Step 302: Perform obfuscation, compression or packaging operations on other files except the customized development files.

[0052] Step 303: Skip the obfuscation or compression process of the customized development files and package the customized development files in their original readable form to the specified directory of the deployable product.

[0053] Specifically, in this embodiment, exclusion rules are first set in the packaging configuration file or the automated build script to clearly identify the customized development files that need to skip the obfuscation or compression process during the build, such as routing configuration files, style variable declaration files, and template files containing expandable slots. These files play an important role in project customization and personalized function adjustment, and their structural integrity and readability must be maintained so that developers can quickly implement customized requirements in the subsequent stage.

[0054] During the actual execution of the build and packaging process, based on the above exclusion rules, this embodiment automatically identifies and skips the obfuscation, compression, or other optimization processes for the files marked as customized development files, while performing regular obfuscation and compression operations on other code files other than these. After the build is completed, this embodiment packages the non-obfuscated or non-compressed customized development files in their original readable form into a specified directory in the finally generated deployable product, thus ensuring that it still has a complete code structure, clear comments, and easy-to-understand content after deployment.

[0055] In the above manner, while ensuring the security, stability, and performance of the overall front-end code, this embodiment also significantly reduces the technical threshold for subsequent customized development, enabling developers to quickly and accurately modify local functions or styles without obtaining the complete source code, improving the secondary development efficiency of the project and the flexibility to adapt to personalized requirements, and further reducing the risk of source code exposure and leakage.

[0056] Step 104: Publish the built template project as a deployable product, where the retained customized development files in the specified directory of the deployable product are in non-obfuscated form.

[0057] To more efficiently complete the deployment process of the front-end template project and ensure the convenience of subsequent project operation and maintenance, this embodiment proposes a specific method for publishing the built template project as a deployable product. Traditional front-end project deployment usually adopts the method of manual packaging, uploading, and configuring to the server environment. This manual mode is often inefficient, prone to human errors, and difficult to achieve fast version management and rollback operations.

[0058] To solve the above problems, this embodiment publishes the built template project as a deployable product, where the retained customized development files in the specified directory of the deployable product are in non-obfuscated form, thus realizing the full automation and standardization of the front-end template project publishing process, greatly improving the efficiency, stability, and operation and maintenance convenience of project deployment, and at the same time ensuring the efficiency and security of subsequent project version management.

[0059] In a possible implementation manner, referring to Figure 4 , Figure 4It is the fourth process schematic diagram of the front-end source code-free customization development method provided by the present invention. Step 104 specifically includes the following steps: Step 401: Package the static resource files and configuration files generated after building through an automated script or a continuous integration platform to obtain a packaged file.

[0060] Step 402: Upload the packaged file to a preset server or cloud storage platform.

[0061] Step 403: Load and deploy the packaged file in a preset production environment or test environment to generate corresponding accessible links or service endpoints.

[0062] Step 404: Record the version information of the successfully deployed product for subsequent viewing, comparison, and rollback operations.

[0063] Specifically, in this embodiment, an automated script or a continuous integration platform is first used to perform standardized automatic packaging on the built template project, specifically including uniformly organizing and encapsulating the built static resource files and configuration files to form a packaged file with a clear structure and unified specification. The reason for using an automated script or a continuous integration platform to complete this operation is that the traditional manual packaging method is prone to human omissions, file omissions, and incorrect configurations, while automated processing effectively avoids these risks, ensures that the generated packaged files are highly consistent and standardized each time, and reduces the difficulty of subsequent operation and maintenance and troubleshooting.

[0064] After obtaining the standardized packaged file, this embodiment further uploads the packaged file to a preset server or cloud storage platform through an automated upload mechanism, such as a static resource server deployed within the company or a third-party cloud service storage. Through the automatic upload and deployment method, this embodiment avoids the time-consuming and error-prone problems caused by traditional manual uploads, realizes the standardization and rapidity of the deployment process, and ensures the controllability and reliability of the deployment process.

[0065] After the upload is completed, this embodiment also automatically loads and deploys the above-mentioned packaged file in a preset production environment or test environment, thereby generating corresponding accessible links or service endpoints for direct use or verification by end users or testers. This method avoids the environmental differences and deployment errors caused by traditional manual configuration, and ensures the consistency and stability of the project operation in the production or test environment.

[0066] Meanwhile, to further improve the project operation and maintenance efficiency and support subsequent rapid rollback and version comparison, after the successful deployment in this embodiment, the versioning records and management of the deployed product information are automatically carried out in a unified manner. Such versioning records can help the development team clearly understand the deployment time, content changes, and corresponding configuration information of each version, making the subsequent operation and maintenance, rollback, and problem troubleshooting of the project more convenient and efficient, and effectively reducing the project maintenance cost caused by version chaos.

[0067] Through the above method, this embodiment effectively realizes the automated and standardized deployment of the template project, greatly improves the project release and operation and maintenance management efficiency, effectively reduces the error risk caused by manual operations, and further improves the security and reliability of the project deployment.

[0068] Step 105: In response to the customization requirements, modify the customized development files in the deployable product to implement the changes of the front-end interface or functions.

[0069] To more flexibly meet the personalized needs of customers or projects and avoid exposing the source code of the entire front-end project at the same time, this embodiment proposes a method of directly modifying the specified customized development files in the deployable product to implement the customization changes of the front-end interface or functions. When traditional front-end projects meet personalized needs, they usually need to apply for the source code for modification, which not only increases the project development cycle and personnel investment, but also risks source code leakage and business information leakage.

[0070] To solve the above problems, this embodiment modifies the customized development files in the deployable product in response to the customization requirements to implement the changes of the front-end interface or functions, thereby clearly defining and only exposing the necessary local content externally, effectively reducing the source code leakage risk of the entire project.

[0071] In a possible implementation manner, the customized development files include a routing configuration file, a style variable declaration file, and a template file of an expandable slot; referring to Figure 5 , Figure 5 is the fifth flowchart of the front-end source-code-free customization development method provided by the present invention. Step 105 specifically includes the following steps: Step 501: Add or modify dynamic routing rules in the routing configuration file.

[0072] Step 502: Overwrite the predefined CSS variables in the style variable declaration file.

[0073] Step 503: Insert customized content at the reserved slot position of the template file.

[0074] Specifically, when receiving customization requirements, this embodiment first directly modifies the routing configuration file retained in the deployable product. Developers can quickly add or modify dynamic routing rules in the routing configuration file according to business requirements, so as to flexibly adjust the front-end page jump logic or quickly access new pages, without the need to recompile and deploy the entire project.

[0075] Secondly, to quickly implement the adjustment of the interface style or detailed styles, this embodiment allows developers to directly modify the retained style variable declaration file. By overriding the predefined CSS variables, the unified or partial adjustment of styles such as interface colors, fonts, and layouts can be achieved. In this way, developers can quickly complete the customization of the user interface's personalized style without directly touching the original component code, significantly improving the efficiency of project customization development and avoiding security risks caused by the exposure of source code.

[0076] In addition, for more specific customization content expansion requirements, this embodiment also pre-sets expandable slot positions in the template file, enabling developers to directly insert specific content customized by users or businesses into the corresponding slots, such as specific business logic displays, custom function modules, or interactive elements. Through the slot mechanism, these personalized contents can be clearly separated from the basic template, and developers do not need to modify the internal logic or layout structure of the original components, further simplifying the difficulty of customizing function expansion.

[0077] Through the above implementation methods, this embodiment effectively solves traditional problems such as slow response to front-end project customization requirements, complex implementation, and high source code exposure risks, realizes fast, convenient, and secure customization development, effectively improves the project delivery efficiency and user satisfaction, and significantly reduces the overall development and maintenance costs.

[0078] In a possible implementation manner, referring to Figure 6 , Figure 6 is the sixth flowchart of the front-end source-code-free customization development method provided by the present invention. After step 501, the method further includes the following steps: Step 601: Bind route guards to the newly added or changed routes in the routing configuration file.

[0079] Step 602: When an access request arrives, verify the access request through the route guard, and determine whether the user role information or permission information carried by the access request meets the preset access conditions.

[0080] Step 603: When it is determined that the user role information or permission information carried by the access request meets the preset access conditions, allow the route to jump and display the corresponding newly added or changed page.

[0081] Step 604: When it is determined that the user role information or permission information carried in the access request does not meet the preset access conditions, the redirection is interrupted or redirected to a pre-configured error page.

[0082] In actual front-end project applications, when dynamic routing rules are added or modified through customized development files, corresponding access control mechanisms are usually required to ensure the security and access compliance of the newly added or modified pages. Traditional front-end routing control methods often lack flexible permission management, which can easily lead to unauthorized access to newly added pages, increasing potential security risks and management difficulties.

[0083] To address the above issues, this embodiment further proposes a permission control method based on route guards after adding or modifying dynamic routing rules in the routing configuration file. Specifically, this embodiment first binds a unified route guard to the newly added or modified routes in the routing configuration file. When a user initiates a page access request, the route guard first intercepts the request and verifies it in real time.

[0084] During the verification process, the routing guard determines whether the user role or permission information included in the access request meets the pre-defined access conditions. For example, when a user requests access to a newly added or modified page, the routing guard automatically reads the user's role or permission data and compares it with the access rights configured for that page. If the user's role or permission information meets the pre-defined conditions, the routing guard allows the access request to proceed, completes the route jump, and displays the corresponding newly added or modified page.

[0085] Conversely, if the user's role or permission information does not meet the access permission requirements configured for the page, the routing guard will automatically interrupt the current page jump request or redirect the request to a pre-configured general error page or permission prompt page. This effectively prevents unauthorized users from accessing restricted pages, ensuring the security and compliance of front-end project page access.

[0086] This embodiment, through the aforementioned routing guard mechanism, not only achieves precise control of page permissions, but also significantly improves the flexibility and convenience of permission management during customized development. Furthermore, this method avoids the manual oversight and complex configuration inherent in traditional permission control methods, significantly reducing the technical cost and maintenance difficulty of permission management, and improving the security and reliability of the overall project.

[0087] In one possible implementation, refer to Figure 7 , Figure 7 This is the seventh flow chart of the front-end source-free customized development method provided by the present invention. After step 105, the method further includes the following steps: Step 701: Configure a file change monitoring script in the running environment of the deployable product to continuously monitor the directory where the customized development files are located.

[0088] Step 702: When the file change monitoring script detects that the customized development file has been modified, trigger a hot update event.

[0089] Step 703: According to the hot update event, perform partial reloading or in-memory replacement on the modified customized development file, and inject the updated content in the modified customized development file into the existing running instance.

[0090] Step 704: Automatically update the front-end interface through a real-time communication channel or a preset refresh mechanism on the browser side to display the updated content.

[0091] In the actual application environment, the customized requirements after the front-end project is deployed often have the characteristics of high-frequency changes and fast response. In traditional front-end projects, when any modification is made to the customized development file, the entire front-end project needs to be rebuilt and redeployed, resulting in high update costs and slow response speeds of the project, and unable to meet the ever-changing personalized needs of users in a timely manner.

[0092] To effectively solve the above problems, this embodiment introduces a real-time monitoring and hot update mechanism in the running environment of the deployable product to quickly respond to changes in the customized development file. Specifically, this embodiment first configures a file change monitoring script in the running environment of the deployable product to continuously monitor and detect the directory where the customized development files are located. Once the file change monitoring script detects an addition, deletion, or modification operation on the customized development file, it immediately triggers a hot update event, thereby starting the hot update mechanism.

[0093] After the hot update mechanism is started, this embodiment will automatically perform partial reloading or in-memory replacement operations on the modified customized development file to dynamically inject the updated content in the file into the currently running project instance to ensure that the updated content can take effect in a timely manner. At the same time, in order to achieve real-time and automatic update of the front-end interface, this embodiment pre-integrates a real-time communication channel, such as a WebSocket connection, or a preset automatic refresh mechanism on the browser side, so that the interface can immediately synchronously display the latest modification effect after receiving the trigger signal of the hot update mechanism without the user manually refreshing the page.

[0094] Through the above implementation manners, this embodiment effectively avoids the cumbersome process of overall reconstruction and release after each modification of customized content in traditional projects, and greatly improves the response speed and flexibility for customized development requirements. At the same time, since the modification of customized development files takes effect within a local scope, the stability and operation efficiency of the overall front-end project are not affected, greatly reducing the risks and costs during project updates and significantly improving the user experience and maintenance efficiency after project deployment.

[0095] Referring to Figure 8 , Figure 8 is a schematic structural diagram of a front-end source-code-free customized development system provided by the present invention. The system includes: A first processing module, configured to develop a reusable component library including standardized interfaces and publish the component library to a preset management tool; A second processing module, configured to create a template project based on a modular architecture, obtain and reference the component library through the management tool, and globally or locally register the components of the component library in the template project; A third processing module, configured to retain specified customized development files during the process of building and packaging the template project, so that the customized development files remain readable and editable in a non-obfuscated form after the packaging is completed; A fourth processing module, configured to publish the completed template project after construction as a deployable product, wherein in a specified directory of the deployable product, the retained customized development files are in a non-obfuscated form; A fifth processing module, configured to modify the customized development files in the deployable product in response to customized requirements to implement changes to the front-end interface or functions.

[0096] In a possible implementation manner, the first processing module is further configured to: Classify the components and define basic components and business components respectively; Uniformly define the input attributes, output events, and insertable content of each component through a preset interface standard; During the construction process of the component library, package and manage the components through a configuration file or script; Publish the component library to a preset management tool so that the component library can be obtained and referenced through the management tool subsequently.

[0097] In a possible implementation manner, the third processing module is further configured to: Set an exclusion rule in the packaging configuration file or script to identify and mark the customized development files; Perform obfuscation, compression, or packaging operations on other files except the customized development files; Skip the obfuscation or compression process of the customized development files, and package the customized development files in their original readable form into a specified directory of the deployable product.

[0098] In a possible implementation, the fourth processing module is further configured to: Package the static resource files and configuration files generated after building through an automated script or a continuous integration platform to obtain a packaged file; Upload the packaged file to a preset server or cloud storage platform; Load and deploy the packaged file in a preset production environment or test environment to generate corresponding accessible links or service endpoints; Record the version information of the successfully deployed product for subsequent viewing, comparison, and rollback operations.

[0099] In a possible implementation, the fifth processing module is further configured to: Add or modify dynamic routing rules in the routing configuration file; Override the predefined CSS variables in the style variable declaration file; Insert customized content at the reserved slot position in the template file.

[0100] In a possible implementation, the fifth processing module is further configured to: Bind route guards to the newly added or changed routes in the routing configuration file; When an access request arrives, verify the access request through the route guard to determine whether the user role information or permission information carried by the access request meets the preset access conditions; When it is determined that the user role information or permission information carried by the access request meets the preset access conditions, allow route jumping and display the corresponding newly added or changed page; When it is determined that the user role information or permission information carried by the access request does not meet the preset access conditions, interrupt the jump or jump to a pre-configured error page.

[0101] In a possible implementation, the system further includes a sixth processing module for: Configure a file change monitoring script in the operating environment of the deployable product to continuously monitor the directory where the customized development files are located; When the file change monitoring script detects that the customized development files have been modified, trigger a hot update event; According to the hot update event, perform a partial reloading or in-memory replacement on the modified customized development files, and inject the updated content in the modified customized development files into the existing running instances; Automatically update the front-end interface through a real-time communication channel on the browser side or a preset refresh mechanism to display the updated content.

[0102] It should be noted that for the front-end source-code-free customization development system provided by the present invention, during specific operation, it can execute the front-end source-code-free customization development method of any of the above embodiments, and this embodiment will not be elaborated herein.

[0103] Figure 9 is a schematic structural diagram of the electronic device provided by the present invention. As Figure 9 shown, the electronic device may include: a processor 910 (processor), a communication interface 920 (Communications Interface), a memory 930 (memory), and a communication bus 940. Among them, the processor 910, the communication interface 920, and the memory 930 complete mutual communication through the communication bus 940. The processor 910 can call the logical instructions in the memory 930 to execute the front-end source-code-free customization development method, and the method includes: developing a reusable component library containing standardized interfaces and publishing the component library to a preset management tool; creating a template project based on a modular architecture, obtaining and referencing the component library through the management tool, and globally or locally registering the components of the component library in the template project; during the process of building and packaging the template project, retaining the specified customization development files so that the customization development files remain readable and editable in a non-obfuscated form after packaging is completed; publishing the built template project as a deployable product, where in the specified directory of the deployable product, the retained customization development files are in a non-obfuscated form; in response to customization requirements, modifying the customization development files in the deployable product to implement changes to the front-end interface or functions.

[0104] In addition, when the logical instructions in the above-mentioned memory 930 are implemented in the form of software functional units and sold or used as an independent product, they can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods of various embodiments of the present invention. The foregoing storage medium includes: various media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk, or an optical disc that can store program codes.

[0105] On the other hand, the present invention also provides a computer program product. The computer program product includes a computer program stored on a non-transitory computer-readable storage medium. The computer program includes program instructions. When the program instructions are executed by a computer, the computer can execute the front-end source-code-free customization development method provided in the above embodiments. The method includes: developing a reusable component library containing standardized interfaces and publishing the component library to a preset management tool; creating a template project based on a modular architecture, obtaining and referencing the component library through the management tool, and globally or locally registering the components of the component library in the template project; during the process of building and packaging the template project, retaining specified customization development files so that the customization development files remain in a readable and editable non-obfuscated form after packaging is completed; publishing the completed template project after building as a deployable product, wherein in a specified directory of the deployable product, the retained customization development files are in a non-obfuscated form; in response to customization requirements, modifying the customization development files in the deployable product to implement changes to the front-end interface or functions.

[0106] In another aspect, the present invention also provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it is configured to execute the front-end source-code-free customization development method provided in the above embodiments. The method includes: developing a reusable component library containing standardized interfaces and publishing the component library to a preset management tool; creating a template project based on a modular architecture, obtaining and referencing the component library through the management tool, and globally or locally registering the components of the component library in the template project; during the process of building and packaging the template project, retaining specified customization development files so that the customization development files remain in a readable and editable non-obfuscated form after packaging is completed; publishing the completed template project after building as a deployable product, wherein in a specified directory of the deployable product, the retained customization development files are in a non-obfuscated form; in response to customization requirements, modifying the customization development files in the deployable product to implement changes to the front-end interface or functions.

[0107] The system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. A person of ordinary skill in the art can understand and implement it without creative labor.

[0108] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on such an understanding, the essence of the above technical solution, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute the methods of each embodiment or some parts of the embodiments.

[0109] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements for some of the technical features. And these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A front-end source-code-free customization development method, characterized in that, Including: Develop a reusable component library with standardized interfaces and publish the component library to a preset management tool; Create a template project based on a modular architecture, obtain and reference the component library through the management tool, and globally or locally register the components of the component library in the template project; During the process of building and packaging the template project, retain specified customized development files so that the customized development files remain in a readable and editable non-obfuscated form after packaging; Publish the built template project as a deployable product, where in a specified directory of the deployable product, the retained customized development files are in a non-obfuscated form; In response to customization requirements, modify the customized development files in the deployable product to implement changes to the front-end interface or functions.

2. The front-end source-code-free customized development method according to claim 1, wherein The developing a reusable component library with standardized interfaces and publishing the component library to a preset management tool includes: Classify the components and define basic components and business components respectively; Through a preset interface standard, uniformly define the input attributes, output events, and insertable content of each component; During the construction process of the component library, package and manage the versions of the components through configuration files or scripts; Publish the component library to a preset management tool so that the component library can be obtained and referenced through the management tool subsequently.

3. The front-end source-code-free customization development method according to claim 1, wherein The retaining specified customized development files during the process of building and packaging the template project includes: Set exclusion rules in the packaging configuration file or script to identify and mark the customized development files; Perform obfuscation, compression, or packaging operations on other files except the customized development files; Skip the obfuscation or compression processing of the customized development files and package the customized development files in their original readable form into a specified directory of the deployable product.

4. The front-end source-code-free customization development method according to claim 1, wherein The publishing the built template project as a deployable product includes: Package the generated static resource files and configuration files after building through an automated script or a continuous integration platform to obtain a packaged file; Upload the packaged file to a preset server or cloud storage platform; Load and deploy the packaged file in a preset production environment or test environment to generate corresponding accessible links or service endpoints; Record the version information of the successfully deployed product for subsequent viewing, comparison, and rollback operations.

5. The front-end source code-free customization development method according to claim 1, wherein The customized development files include a routing configuration file, a style variable declaration file, and a template file for an extensible slot; the modifying the customized development files in the deployable product includes: Add or modify dynamic routing rules in the routing configuration file; Override predefined CSS variables in the style variable declaration file; Insert customized content at the reserved slot position in the template file.

6. The front-end source-code-free customization development method according to claim 5, wherein After adding or modifying dynamic routing rules in the routing configuration file, it further includes: Bind route guards to the newly added or changed routes in the routing configuration file; When an access request arrives, the access request is verified by the routing guard to determine whether the user role information or permission information carried in the access request meets the preset access conditions; When it is determined that the user role information or permission information carried in the access request meets the preset access conditions, route jumping is allowed and the corresponding new or modified page is displayed; When it is determined that the user role information or permission information carried in the access request does not meet the preset access conditions, the jump is interrupted or the jump is made to a pre-configured error page.

7. The front-end source-code-free customization development method according to claim 1, characterized in that It further includes: Configuring a file change monitoring script in the operating environment of the deployable product to continuously monitor the directory where the customized development files are located; When the file change monitoring script detects that the customized development file has been modified, a hot update event is triggered; According to the hot update event, partial reloading or in-memory replacement is performed on the modified customized development file, and the updated content in the modified customized development file is injected into the existing running instance; The front-end interface is automatically updated through a real-time communication channel or a preset refresh mechanism on the browser side to display the updated content.

8. A front-end source-code-free customization development system, characterized in that, It includes: A first processing module for developing a reusable component library containing standardized interfaces and publishing the component library to a preset management tool; A second processing module for creating a template project based on a modular architecture, obtaining and referencing the component library through the management tool, and globally or locally registering the components of the component library in the template project; A third processing module for retaining specified customized development files during the process of building and packaging the template project, so that the customized development files remain in a non-obfuscated form that is readable and editable after the packaging is completed; A fourth processing module for publishing the built template project as a deployable product, where the retained customized development files are in a non-obfuscated form in the specified directory of the deployable product; A fifth processing module for modifying the customized development files in the deployable product in response to customization requirements to achieve changes to the front-end interface or functions.

9. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and running on the processor, characterized in that, When the processor executes the computer program, it implements the front-end source-code-free customization development method according to any one of claims 1-7.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the front-end source-code-free customization development method according to any one of claims 1-7.

11. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the front-end source-code-free customization development method according to any one of claims 1-7.

Images