A low-cost front-end project upgrade method

Abstract

The present invention provides a low-cost front-end project upgrading method, comprising the following steps: step one: setting and opening an entry in a front-end framework of the project; step two: adding a portal page in the project, with the portal page serving as an entry for loading a new page; and step three: processing the content in an HTML file, separating and extracting scripts and styles, and appending the extracted scripts and styles to the portal page to form a new page, thereby completing the upgrade. The present invention opens an entry in the front-end framework and embeds an HTML page, so that page development is not restricted by technology, and is convenient for different developers to perform upgrade processing by adopting technologies in their own familiar fields, thereby removing technical limitations encountered during page development and better performing development and upgrading work. It can also allow update personnel who are unfamiliar with the project to participate in project development. The personnel have a wider scope of application and can be quickly deployed online, greatly saving deployment costs and labor costs, increasing R&D speed, and improving the rate of front-end development.

Description

Technical Field

[0001] The present invention relates to the field of computer network technology, and in particular to a low-cost front-end project upgrading method. Background Art

[0002] With the rise of the three major front-end frameworks, Angular, React, and Vue, front-end development has become increasingly convenient. For intermediate and senior developers, development costs are getting lower and lower. When upgrading a project, the front-end needs to compile and package the code and then replace the online package. No matter how much content is modified, even if only a single word is changed, it will take a long time to package and replace the entire package. If the deployment speed is slow, it will affect users' use of the system during deployment. Therefore, the cost of project upgrades is very high and must be performed during non-user usage hours. In addition, developers need to spend a lot of time familiarizing themselves with the project and iterating versions based on the original project architecture. For example, if a voting page needs to be added or a copy needs to be changed, even such simple requirements require very professional personnel to modify and wait until the appropriate time to update to the online environment. To solve this problem, some projects choose to split or expand into multiple portals and use micro front-ends or iframes to load them. However, such transformation costs are too high and are not suitable for old, complex projects that do not want to reinvest. Summary of the Invention

[0003] In view of the shortcomings of the existing technology, the purpose of the present invention is to provide a low-cost front-end project upgrade method to solve the problems raised in the above background technology. The present invention opens an entrance at the front end to help developers embed HTML pages, and upgrades the project by updating and writing HTML, thereby solving the problems in the existing technology.

[0004] In order to achieve the above object, the present invention is implemented through the following technical solution: a low-cost front-end project upgrade method, comprising the following steps:

[0005] Step 1: Set up and open the entry in the project front-end framework, embed the HTML page, and deploy the front-end code package embedded in the HTML page separately in the root directory of the project;

[0006] Step 2: Add a portal page to the project. The portal page serves as the entry point for loading new pages. When the page content needs to be updated, deploy the new code front-end package to the root directory of the project, replace the original code front-end package, update the page, and access the portal page. The portal page obtains the address of the new page from the access address and obtains the content in the HTML file of the new page through an Ajax get request.

[0007] Step 3: Process the content in the HTML file, separate and extract the scripts and styles, and append the extracted scripts and styles to the portal page to form a new page. Then display the new page on the portal page through v-HTML to complete the upgrade.

[0008] As an improvement to the low-cost front-end project upgrade method described in the present invention, in step 3, the method for separating and extracting scripts and styles is: using the replace method to obtain and delete all script and link strings in the file,

[0009] The regular expression that matches the script string in the Replace method is:

[0010] " / <script.*?> ([\s\S]*?)<\ / script> / ",

[0011] The regular expression that matches the link string is:

[0012] " / <link.*?> / ",

[0013] This separates and extracts the scripts and styles from the HTML.

[0014] As an improvement to the low-cost front-end project upgrade method described in the present invention, in step 3, the method of adding scripts and styles is as follows: processing the obtained script and link strings,

[0015] The script statement contained in the script element and the external script file link pointed to by the src attribute, as well as the external style file link pointed to by the href attribute of the link element are obtained through the indexOf method.

[0016] Create script and style elements through the createElement and appendChild methods and append the elements to the portal page so that the page can load scripts and styles normally.

[0017] As an improvement to the low-cost front-end project upgrade method described in the present invention, in step one, the entry setting method is: find the root directory A in the original project, and create a new folder B under the path of the root directory. Folder B is used to store the corresponding code front-end package or the newly developed ordinary HTML file.

[0018] As an improvement to the low-cost front-end project upgrade method described in the present invention, after the upgrade is completed in step three, the upgraded page will be tested. When an abnormality is found in the new page detection, the information will be fed back through the feedback circuit in the detection software to notify the developer to repair it. After the repair is completed, the test will be performed again.

[0019] Compared with the prior art, the present invention has the following beneficial effects:

[0020] 1. The present invention opens an entrance in the front-end framework and embeds HTML pages, so that page development is not restricted by technology. It is convenient for different developers to upgrade by using technologies in their own familiar fields, eliminating the technical limitations of page development, and better carrying out development and upgrade work. It can also allow update personnel who are not familiar with the project to participate in project development, and the scope of personnel application is wider;

[0021] 2. After the development of the present invention is completed, this part of the code can be directly deployed to a specific path. There is no need to update the original front-end package, and the new page can be smoothly embedded into the current system. If there is a function update, only this file needs to be modified and replaced instead of upgrading the entire project, which reduces the workload during the upgrade;

[0022] 3. Since the update file of the present invention is small and the design scope is narrow, the entire update process is imperceptible and will not affect the user's use of the system. It can be quickly deployed online, greatly saving deployment costs and labor costs, increasing R&D speed, and improving the rate of front-end development, making upgrade work more convenient. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the specific implementation of the present invention or the technical solutions in the prior art, the drawings required for describing the specific implementation or the prior art will be briefly introduced below. Obviously, the drawings described below are only one implementation of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0024] Figure 1 This is a schematic diagram of the project upgrade process structure of the present invention;

[0025] Figure 2 This is a schematic diagram of the module deployment structure of the present invention;

[0026] Figure 3 This is a schematic diagram of the page loading process structure of the present invention. DETAILED DESCRIPTION

[0027] In order to make the technical means, creative features, objectives and effects achieved by the present invention easy to understand, the technical solutions in the specific implementation methods of the present invention are clearly and completely described below to further illustrate the present invention. Obviously, the specific implementation methods described are only part of the implementation methods of the present invention, rather than all styles.

[0028] This specific implementation method is a low-cost front-end project upgrade method, and its project upgrade process structure diagram is as follows Figure 1 As shown, the module deployment structure diagram is as follows Figure 2 As shown, the page loading process structure diagram is as follows Figure 3 As shown, the low-cost front-end project upgrade method includes the following steps:

[0029] Step 1: Set up and open the entry in the project front-end framework, embed the HTML page, and deploy the front-end code package embedded in the HTML page separately in the root directory of the project;

[0030] Step 2: Add a portal page to the project. The portal page serves as the entry point for loading new pages. When the page content needs to be updated, deploy the new code front-end package to the root directory of the project, replace the original code front-end package, update the page, and access the portal page. The portal page obtains the address of the new page from the access address and obtains the content in the HTML file of the new page through an Ajax get request.

[0031] Step 3: Process the content in the HTML file, separate and extract the scripts and styles, and append the extracted scripts and styles to the portal page to form a new page. Then display the new page on the portal page through v-HTML to complete the upgrade.

[0032] At the same time, after the upgrade is completed in step three, the upgraded page will be tested. When an abnormality is found in the new page detection, the information will be fed back through the feedback circuit in the detection software to notify the developer to repair it. After the repair is completed, the test will be performed again.

[0033] When using this technical solution, an entry is set and opened in the front-end framework. Developers can embed HTML pages and deploy the code front-end package embedded in the HTML page separately in the project root directory. Find the root directory A in the original project and create a new folder B under the root directory path. Folder B is used to store the corresponding code front-end package or the newly developed ordinary HTML file. Add a portal page portal to the project as the entry for loading the new page. When the page content needs to be updated, the new code front-end package is deployed to the root directory of the original project, replacing the original code front-end package, updating the page to form a new page, accessing the portal page, the portal page obtains the address of the new page from the access address, and obtains the content of the new page HTML file through an ajax get request, processes the content in the HTML file, separates and extracts scripts and styles, and appends the extracted scripts and styles to the portal page to form a new page. Use the replace method to obtain and delete all script and link strings in the file, where the regular expression that matches the script string in the Replace method is: " / <script.*?> ([\s\S]*?)<\ / script> / ", the regular expression that matches the link string is: " / <link.*?> / ", thereby separating and extracting the scripts and styles in the HTML, processing the obtained script and link strings, and obtaining the script statements contained in the script element and the external script file link pointed to by the src attribute, as well as the external style file link pointed to by the href attribute of the link element through the indexOf method. Script and style elements are created through the createElement and appendChild methods and appended to the portal page, so that the page can load the script and style normally. The new page is then displayed on the portal page through v-HTML to complete the upgrade.

[0034] The above describes the main technical features and basic principles of the present invention and the related advantages. It is obvious to those skilled in the art that the present invention is not limited to the details of the above exemplary embodiments and that the present invention can be implemented in other specific forms without departing from the concept or essential characteristics of the present invention. Therefore, from all perspectives, the above-mentioned specific embodiments should be regarded as exemplary and non-restrictive. The scope of the present invention is defined by the appended claims rather than the foregoing description, and it is intended that all changes that come within the meaning and range of equivalents of the claims be included within the present invention.

[0035] In addition, it should be understood that although this specification is described according to various implementation methods, not every implementation method contains only one independent technical solution. This narrative method of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each implementation method can also be appropriately combined to form other implementation methods that can be understood by those skilled in the art.

Claims

1. A low-cost front-end project upgrade method, characterized in that: The steps include: Step 1: Set up and open an entry in the project front-end framework, embed an HTML page, and deploy the front-end code package embedded in the HTML page separately in the project's root directory. The entry setting method is: find the root directory A in the original project and create a new folder B under the root directory path. Folder B is used to store the newly developed ordinary HTML files; Step 2: Add a portal page to the project. The portal page serves as the entry point for loading new pages. When the page content needs to be updated, deploy the new code front-end package to the project's root directory, replace the original code front-end package, update the page, and access the portal page. The portal page obtains the address of the new page from the access address and obtains the content of the new page HTML file through an Ajax get request. Step 3: Process the content in the HTML file, separate and extract the scripts and styles, and append the extracted scripts and styles to the portal page to form a new page. Then, display the new page on the portal page using v-HTML to complete the upgrade. The method for appending scripts and styles is as follows: process the obtained script and link strings, obtain the script statements contained in the script element and the external script file link pointed to by the src attribute, and the external style file link pointed to by the href attribute of the link element through the indexOf method, create script and style elements through the createElement and appendChild methods and append the elements to the portal page, so that the page can load scripts and styles normally.

2. A low-cost front-end project upgrade method according to claim 1, characterized in that: In step 3, the method of separating and extracting scripts and styles is: use the replace method to obtain and delete all script and link strings in the file, The regular expression that matches the script string in the Replace method is: " / <script.*?> ([\s\S]*?)<\ / script> / ", The regular expression that matches the link string is: " / <link.*?> / ", This separates and extracts the scripts and styles from the HTML.

3. A low-cost front-end project upgrade method according to claim 1, characterized in that: After the upgrade is completed in step three, the upgraded page will be tested. If an abnormality is found in the new page detection, the information will be fed back through the feedback circuit in the detection software to notify the developer to repair it. After the repair is completed, the test will be performed again.

Images