Project code modification method and device and storage medium
By generating data path information for components in web development and using LLM to assist in code modification, the problems of cumbersome operation and high error rate in existing technologies are solved, thus improving development efficiency and convenience.
Patent Information
- Application Number
- CN202511010663.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-07-22
- Publication Date
- 2025-11-07
Smart Images
Figure CN120909561A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of software development, and particularly relates to a project code modification method, device and storage medium. BACKGROUND
[0002] In web (page) development, developers usually modify codes with the help of an LLM (Large Language Model), in which process, the developers check line by line in the source code of a page, find the codes to be modified, and call the LLM to modify the codes to be modified.
[0003] However, this process is tedious and error-prone, resulting in low web development efficiency. SUMMARY
[0004] Therefore, the present application provides a project code modification method, device and storage medium to improve the web development efficiency.
[0005] A first aspect of the present application provides a project code modification method, a project of a development page provides source code of the page, the page has a plurality of components, and the method comprises the following steps.
[0006] When the source code is packaged, data path information is generated for each component in the source code;
[0007] When the source code and the page are displayed on the client at the same time, the components are selected according to a positioning event occurring on the client;
[0008] The editing information sent by the selected components is received; the editing information describes the content of the modification on the selected components;
[0009] The component code of the selected components in the source code is modified according to the data path information and the editing information;
[0010] The page is re-rendered according to the modified source code;
[0011] The modified source code and the re-rendered page are pushed to the client for display.
[0012] A second aspect of the present application provides a project code modification device, a project of a development page provides source code of the page, the page has a plurality of components, and the device comprises the following steps.
[0013] A data path information generation module is configured to generate data path information for each component in the source code when the source code is packaged;
[0014] The component selecting module is configured to select the component according to the positioning event occurring at the client when the source code and the page are simultaneously displayed at the client;
[0015] The editing information receiving module is configured to receive editing information sent by the selected component; the editing information describes the content of modifying the selected component;
[0016] The component code modifying module is configured to modify the component code of the selected component in the source code according to the data path information and the editing information;
[0017] The page rendering module is configured to re-render the page according to the modified source code;
[0018] The page displaying module is configured to push the modified source code and the re-rendered page to the client for display.
[0019] The third aspect of the present application provides an electronic device, which comprises:
[0020] at least one processor; and
[0021] a memory connected with the at least one processor; wherein
[0022] The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute the modification method of the item code according to the first aspect.
[0023] The fourth aspect of the present application provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to realize the modification method of the item code according to the first aspect.
[0024] The fifth aspect of the present application provides a computer program product, which comprises a computer program, and the computer program is executed by a processor to realize the modification method of the item code according to the first aspect.
[0025] In the embodiment, when the source code is packaged, the data path information is generated for each component in the source code; when the source code and the page are displayed simultaneously on the client, the component is selected according to the positioning event occurring on the client; the editing information sent by the selected component is received; the editing information describes the content of the modification on the selected component; the component code of the selected component in the source code is modified according to the data path information and the editing information; the page is re-rendered according to the modified source code; and the modified source code and the re-rendered page are pushed to the client for display. In the embodiment, the mapping attribute is added to the component when it is packaged, and the code information of the component can be immediately obtained and displayed when the component is selected by the developer, so that the accurate positioning is realized, the efficient modification on the code is realized, the direct interaction based on the page element is realized, the intuitiveness and the convenience of the code modification are improved, and the development process is significantly optimized and the development time is reduced.
[0026] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present application, nor is it intended to limit the scope of the present application. Other features of the present application will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS
[0027] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed in the embodiment description will be briefly introduced. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor.
[0028] Figure 1 is a flowchart of a project code modification method provided by the first embodiment of the present application.
[0029] Figure 2 is an example diagram of a source code and a page provided by the first embodiment of the present application.
[0030] Figure 3 is an example diagram of an edited component provided by the first embodiment of the present application.
[0031] Figure 4 is an example diagram of a modified component provided by the first embodiment of the present application.
[0032] Figure 5 is a structural schematic diagram of a project code modification device provided by the second embodiment of the present application.
[0033] Figure 6 is a structural schematic diagram of an electronic device provided by the third embodiment of the present application. DETAILED DESCRIPTION
[0034] In the following, the technical solutions in the embodiments of the present application will be described clearly and completely with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments of the present application. Based on the embodiments in the present application, all the other embodiments obtained by a person of ordinary skill in the art without creative effort should fall into the protection scope of the present application.
[0035] It should be noted that the terms "first", "second" and the like in the description and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily indicate a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can encompass orders of implementation other than those illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.
[0036] Embodiment one
[0037] Referring to Figure 1 , a flowchart of a project code modification method provided by the first embodiment of the present application is shown, which can be executed by a project code modification device, which can be realized in the form of hardware and / or software, and can be configured in an electronic device. As shown in Figure 1 , the method comprises:
[0038] Step 101, when packaging the source code, generating data path information for each component in the source code.
[0039] In actual application, the project developing the web page provides the source code of the page, which is usually recorded in a structured form of files and folders, and is managed by a version control system before being uploaded to the platform for packaging.
[0040] Generally, in the organization form of the source code, the functional modules are divided in the form of folder structure, such as src / storing source code, public / storing static resources, dist / packaging output directory, etc., which contains various code files (.html,.css,.js,.ts, etc.) and configuration files (package.json, webpack.config.js, etc.), and may also contain dependency management files (package-lock.json or yarn.lock).
[0041] When the compilation of the open source code is completed, the developer can manage the code through a version control tool such as Git, form a code repository, push the code repository to a code hosting platform, continuously integrate the code repository, or the deployment platform pulls the source code from the code repository, the platform executes a packaging command (such as npm run build, yarn build), and generates deployable static files according to the project configuration (Webpack, Vite, etc.). The packaging product (usually in the dist / or build / directory) will be deployed to the server or CDN (Content Delivery Network).
[0042] There are multiple components in the page, and a component refers to a code module with independent functions and reusability. It encapsulates reusable parts in the page (such as buttons, forms, navigation bars, etc.) into independent units, including its own structure (HTML), style (CSS), and behavior (JavaScript).
[0043] By way of example, the components in the page include the following three types:
[0044] 1. Basic components: buttons, input boxes, drop-down menus, etc.
[0045] 2. Business components: user avatars, product cards, comment lists, etc.
[0046] 3. Page-level components: navigation bars, footers, sidebars, etc.
[0047] Currently, end frameworks (such as React, Vue, Angular) all take componentization as the core idea, and build complex web applications through the combination and nesting of components. For example, in Vue, a component can be a.vue file, which includes template, script, and style.
[0048] In the process of packaging source code, the structure of the source code can be analyzed, and data path information data-path is generated for each component in the source code. The data path information includes the context information of the component code of each component in the source code, that is, the data path information contains complete information for locating the component code, laying a data foundation for subsequent modification of the component code.
[0049] In a specific implementation, the platform provides packaging tools webpack and Rollup to package the source code.
[0050] When calling webpack to bundle the page's source code, WebpackCodeInspectorLoader is called to process the page's source code. WebpackCodeInspectorLoader calls the transformation function transformCode, which matches the type of each component, to inject the file paths of each component into the Document Object Model (DOM) element of each component.
[0051] When Rollup packages the source code, it handles file conversion in the transform hook, calling the transformCode function that matches the type of each component to add data path information (data-path) to the Document Object Model (DOM) element of each component.
[0052] The data path information includes the component's file path, the line number of the code, the column number of the code, and the name of the component's document object model element (i.e., element name / component name).
[0053] For example, the format of the data path information is: data-path="file path:line number:column number:element name".
[0054] Step 102: When the source code and the page are displayed simultaneously on the client, select the component based on the positioning event that occurs on the client.
[0055] The platform provides a preview URL (UniformResourceLocator) for the project, which developers can access in a client (such as a browser, instant messaging tool, etc.).
[0056] like Figure 2 As shown, the client provides a code editing area 210 and a page preview area 220. The source code is loaded and displayed in the code editing area 210, and each DOM element has the address attribute of the component code. The page rendered using the source code is loaded and displayed in the page preview area 220 for developers to compare and browse. This can reduce feedback delays in the development process, allowing developers to focus more on the matching of logic implementation and visual effects, thereby improving the development experience and efficiency.
[0057] During the browsing process, developers can directly modify the component code.
[0058] In one case, the developer can directly modify the component code of the component in the source code displayed by the browser, at this time, the client uploads the modified source code to the platform, and jumps to steps 105 and 106, re-renders the page according to the modified source code, and pushes the modified source code and the re-rendered page to the client for display.
[0059] In another case, the developer can modify the component code of the component by means of LLM, which reduces the threshold of page development, helps users such as project managers and artists to enter the role of developers to develop pages, improves the efficiency of page development, and supports rapid iteration.
[0060] In the modification of the component code of the component by means of LLM, one of the operations can be agreed to be an operation of positioning the component to be modified, such as a hovering operation, a double-click operation, etc. The developer can trigger the positioning operation in the client.
[0061] The client continuously listens to positioning events (such as hovering events representing hovering operations) representing positioning operations in the area of the page, and if a positioning event is listened to in the area of the page, the component to be modified is selected according to the positioning event occurring in the client.
[0062] In a specific implementation, when the positioning event occurring in the client is listened to, the position of the positioning event relative to the page is determined.
[0063] Taking the hovering event as an example, the handleMouseMove method is used to process the event of mouse movement. When the Hover Event is listened to, clientX and clientY can be used to obtain the position of the hovering event relative to the visible area of the page. If the page has a scroll bar, the horizontal and vertical scroll offsets of the page can be obtained through window.pageXOffset and window.pageYOffset, which are added to clientX and clientY to obtain the position of the hovering event relative to the entire page. The event.composedPath method is used to obtain all DOM elements on the bubble path of the Hover Event.
[0064] The attribute information of each component (i.e. DOM element) in the client is queried, wherein the attribute information includes geometric information, CSS box model attributes, coordinate information (such as top, left, right, bottom), and the attribute information can be used to depict the area of each component in the page.
[0065] Further, the position and size (i.e. geometry information) of the DOM element can be obtained by the getBoundingClientRect method, and the CSS box model properties (such as border, padding, margin) of the DOM element can be obtained by the getDomPropertyValue method.
[0066] The component located at the position is queried according to the attribute information by the isSamePositionNode method, i.e. the area of the component contains the position where the positioning event occurs, so that the positioning event occurs on the component.
[0067] At this time, the number of components where the positioning event occurs can be counted.
[0068] If the number of components where the positioning event occurs is 1, the component located at the position is selected as the component to be modified.
[0069] If the number of components where the positioning event occurs is greater than 1, i.e. there are multiple components at the position where the positioning event occurs, the areas of the areas of the components located at the position are counted according to the attribute information, and the areas of the components are compared to select the component (usually the inner DOM element) located at the position and having the smallest area.
[0070] Taking the hovering operation as an example, the components are often overlapped, and the area of some components is large, even occupying the entire page. Therefore, the component is selected in priority to the area with the smallest area. For the component with a large area, the mouse can be moved to a place where the overlapping components are reduced (usually a blank place on the page), so that the convenience of selection is improved.
[0071] Further, as shown in Figure 2 , the client can be notified according to the attribute information to generate an outer border 221 for the area of the selected component, and the outer border is executed to prompt the operation.
[0072] For example, the outer edge, background and other elements of the outer border are highlighted by using renderCover to prompt the developer of the currently selected component.
[0073] In addition, as shown in Figure 2 , the information of a single node in the page can be parsed by using the parseNode method, which can extract the data path information of the DOM element, and the client can be notified according to the attribute information to generate a prompt component 222 for the selected component.
[0074] For example, the prompt component is located at the lower edge of the area of the selected component, and the data path information is displayed in the prompt component in the form of a hierarchical panel to prompt the developer.
[0075] The outer border and loading prompt component consume less time, and can provide real-time feedback of the currently selected component to the developer. When the currently selected component is not the component intended to be modified by the developer, the developer can continue to trigger positioning operations such as moving the mouse and hovering, until the currently selected component is the component intended to be modified by the developer.
[0076] In step 103, the editing information sent by the selected component is received.
[0077] When the currently selected component is the component intended to be modified by the developer, the developer can input the editing information in the client for the currently selected component using natural language, where the editing information describes the modification of the selected component, and the client sends the editing information input for the selected component to the platform.
[0078] In a specific implementation, when the currently selected component is the component intended to be modified by the developer, the developer can trigger a selection determination operation in the client, such as a single click, double click, etc.
[0079] In one aspect, as shown in FIG. 3, when the client receives the selection determination operation, an editing component 300 is generated around the selected component according to the attribute information. Figure 3
[0080] The editing component 300 has an input box 301 and an editing determination key 302. The input box 301 is used to receive the editing information input for the selected component, and the editing determination key 302 is used to trigger the editing determination operation when receiving a click operation.
[0081] Of course, in addition to the editing determination key, the developer can also trigger the editing determination operation using other ways (such as triggering the Enter key operation), which is not limited in this embodiment.
[0082] When the client listens to the editing determination operation, the text information in the input box is determined as the editing information input for the selected component.
[0083] At this time, the client can display waiting information to prompt that the system enters the Loading state and is modifying the component code of the selected component.
[0084] In this embodiment, the input box is popped up in the component attachment of the page, supporting the modification requirement of the code described by natural language, generating the modified fragment of the code according to the modification requirement and rendering the effect in real time, so that the code modification is more intuitive and convenient, the code writing threshold is reduced, and the developer can focus more on the function implementation.
[0085] On the other hand, the data path information data-path can be read from the DOM element of the selected component.
[0086] Step 104, modifying the component code of the selected component in the source code according to the data path information and the editing information.
[0087] In the platform, the callable LLM modifies the component code of the selected component in the page source code according to the data path information and the editing information of the component to be selected.
[0088] In a specific implementation, a first prompt Prompt can be constructed using the source code, data path information, and editing information, and the first prompt Prompt is sent to an agent Agent to modify the component code of the selected component. The agent Agent mainly involves intent recognition, code knowledge base import, data cleaning, and other capabilities. According to the mapping information (such as line number, column number, etc.) of the component code in the DOM element, the component code and element information, context information, etc. of the selected component are obtained from the code repository and other locations, the component code is modified, and the modified component code is replaced according to the mapping information. The original component code.
[0089] Exemplarily, the structure of the first prompt Prompt is as follows:
[0090] ### Component generation request
[0091] **File path**: ${element.path}
[0092] **Component name**: ${element.name}
[0093] **Code location (line)**: line ${element.line}
[0094] **Code location (column)**: column ${element.column}
[0095] ### Editing information
[0096] ${content}
[0097] In the process of modifying the component code by the agent Agent and rendering the page by the platform, error information (also known as error information) may be generated, that is, the error information indicates that an error occurs when the agent Agent modifies the component code of the selected component in the source code, or an error occurs when the page is re-rendered.
[0098] When receiving the error information, a second prompt Prompt is constructed using the source code, data path information, editing information, and error information, and the second prompt Prompt is sent to the agent Agent to continue modifying the component code of the selected component, attempt automatic repair, and record detailed error information and repair process, ensuring stable development process.
[0099] Exemplarily, the structure of the second prompt word Prompt is as follows:
[0100] ###Component generation request
[0101] **File path**: ${element.path}
[0102] **Component name**: ${element.name}
[0103] **Code location (line)**: line ${element.line}
[0104] **Code location (column)**: column ${element.column}
[0105] ###Editing information
[0106] ${content}
[0107] ###Error information
[0108] ${errMsg}
[0109] Step 105, re-render the page according to the modified source code.
[0110] In the platform, if the component code of the selected component is modified, the hot update technology can be used to compile and re-render the page according to the modified source code in real time.
[0111] In a specific implementation, the modified component code of the selected component is written into the Component directory in the real-time task RealTime Project.
[0112] The hot update technology uses the dev mode of Rspack, and the real-time task RealTime Project deployment mode is dynamic running, adopting a responsive code hot update strategy.
[0113] The unique identification information of the component content, such as the hash value, is generated for the modified component code of the selected component in the Component directory in the real-time task RealTime Project.
[0114] When generating the code file of the modified component code of the selected component, the identification information and the type of the selected component (such as React, Vue, etc., that is, the file suffix) are set as the file name of the code file (that is, "identification information.type"), and the identification information is written into the route of the selected component, and the unique identification information is used as part of the path of the route to realize dynamic access and preview of the component, and the code file is written into the specified front-end directory in real time.
[0115] If the code file already exists and is not forced to update, the existing code file is reused; if forced to update or the code file does not exist, the code file is overwritten or newly created.
[0116] When a new code file of the component is first generated, a lazy loading import statement and a route definition are automatically inserted in the configuration file of the front-end route, and the lazy loading import statement is used for lazy loading of the component.
[0117] When the modified source code is loaded to re-render the page, a renderer adapted to the type is called to read the code file from the route to render the modified component.
[0118] In this embodiment, the modification of the component includes the existence detection and exception handling of files, directories and routes, which ensures that multiple requests do not cause repeated routes or file conflicts, and guarantees the idempotency and robustness of the system.
[0119] Step 106, push the modified source code and the re-rendered page to the client for display.
[0120] In this embodiment, a unique preview URL based on the component identification information can be generated, and the client can access the real-time generated component through the proxy path, and the platform pushes the modified source code and the re-rendered page to the client, loads the modified source code in the code editing area for display, and loads the page rendered using the modified source code in the page preview area for display, to realize the WYSIWYG component preview experience.
[0121] As shown in Figure 3 , the content of the edit information input by the developer is to modify the component with the name "dataset name" from an input box to a drop-down box, and the options of the drop-down box are "dataset 1", "dataset 2", "dataset 3" and "dataset 4", as shown in Figure 4 , in the re-rendered page, the component with the name "dataset name" belongs to a drop-down box, and the options of the drop-down box are "dataset 1", "dataset 2", "dataset 3" and "dataset 4".
[0122] After the code is modified, the hot update technology is used to compile and update the page in real time, and feedback is given to the developer, so that the developer can preview the modification result in real time, adjust the development strategy in time, avoid the tedious process of repeated compilation and refreshing in traditional development, and improve the development experience.
[0123] In the embodiment, when the source code is packaged, data path information is generated for each component in the source code; when the source code and the page are simultaneously displayed on the client, a component is selected according to a positioning event occurring on the client; editing information sent by the selected component is received; the editing information describes the content of modification on the selected component; component code of the selected component in the source code is modified according to the data path information and the editing information; the page is re-rendered according to the modified source code; and the modified source code and the re-rendered page are pushed to the client for display. In the embodiment, a mapping attribute is added to the component when it is packaged, and when the component is selected by the developer, code information of the component can be immediately obtained and displayed, accurate positioning is realized, efficient modification on the code is realized, and the direct interaction based on the page element not only improves the intuitiveness and convenience of the code modification, but also significantly optimizes the development process and reduces the development time.
[0124] Embodiment Two
[0125] Referring to Figure 5 , a structural schematic diagram of a project code modification device provided by an embodiment of the application is shown. A project developing a page provides source code of the page, and the page has a plurality of components. Figure 5 As shown in the figure, the device comprises:
[0126] A data path information generation module 501 is configured to generate data path information for each component in the source code when the source code is packaged.
[0127] A component selection module 502 is configured to select the component according to a positioning event occurring on the client when the source code and the page are simultaneously displayed on the client.
[0128] An editing information receiving module 503 is configured to receive editing information sent by the selected component; the editing information describes the content of modification on the selected component.
[0129] A component code modification module 504 is configured to modify component code of the selected component in the source code according to the data path information and the editing information.
[0130] A page rendering module 505 is configured to re-render the page according to the modified source code.
[0131] A page display module 506 is configured to push the modified source code and the re-rendered page to the client for display.
[0132] In an embodiment of the application, the data path information generation module 501 comprises:
[0133] The file path injection module is configured to inject a file path of each component into a document object model element of each component by invoking a conversion function matched with the type of each component when invoking webpack to package the source code.
[0134] The data path information adding module is configured to add data path information in a document object model element of each component by invoking a conversion function matched with the type of each component when invoking Rollup to package the source code; the data path information includes a file path of the component, a line where code is located, a column where code is located, and a name of the document object model element of the component.
[0135] In an embodiment of the present application, the component selection module 502 includes:
[0136] The position determining module is configured to determine a position of a positioning event when the positioning event is detected in the client;
[0137] The attribute information querying module is configured to query attribute information of each component in the client;
[0138] The component querying module is configured to query the component located at the position according to the attribute information;
[0139] The first selection module is configured to select the component located at the position if the number of components is 1;
[0140] The area counting module is configured to count areas of each component located at the position according to the attribute information if the number of components is greater than 1;
[0141] The second selection module is configured to select the component located at the position and having the smallest area.
[0142] In an embodiment of the present application, the component selection module 502 further includes:
[0143] The outer frame prompting module is configured to inform the client to generate an outer frame of the selected component according to the attribute information, and perform a prompting operation on the outer frame;
[0144] The data path information prompting module is configured to inform the client to generate a prompt component of the selected component according to the attribute information, and display the data path information in the prompt component.
[0145] In an embodiment of the present application, the editing information receiving module 503 includes:
[0146] The editing component generation module is configured to generate an editing component around the selected component according to the attribute information when the client receives a selected determination operation; the editing component has an input box;
[0147] The input box receiving module is configured to determine that the text information in the input box is editing information input for the selected component when the client listens to an editing determination operation.
[0148] In an embodiment of the present application, the component code modification module 504 comprises:
[0149] The first prompt word construction module is configured to construct a first prompt word using the source code, the data path information and the editing information;
[0150] The first intelligent agent calling module is configured to send the first prompt word to an intelligent agent to modify the component code of the selected component.
[0151] In an embodiment of the present application, the component code modification module 504 further comprises:
[0152] The second prompt word construction module is configured to construct a second prompt word using the source code, the data path information, the editing information and error information when the error information is received; the error information indicates that an error occurs when the intelligent agent modifies the component code of the selected component in the source code, or an error occurs when the page is re-rendered;
[0153] The second intelligent agent calling module is configured to send the second prompt word to an intelligent agent to modify the component code of the selected component.
[0154] In an embodiment of the present application, the page rendering module 505 comprises:
[0155] The real-time task writing module is configured to write the modified component code of the selected component into a real-time task;
[0156] The identification information generation module is configured to generate identification information for the modified component code of the selected component in the real-time task;
[0157] The code file generation module is configured to, when a code file is generated for the modified component code of the selected component, set the identification information and the type of the selected component as the file name of the code file, and write the identification information into the route of the selected component;
[0158] The code file rendering module is configured to, when the page is re-rendered by loading the modified source code, call a renderer adapted to the type to read the code file from the route to render the modified component.
[0159] The project code modification apparatus provided by the embodiments of the present application can execute the project code modification method provided by any of the embodiments of the present application, and has the corresponding function modules and beneficial effects of executing the project code modification method.
[0160] Embodiment three
[0161] Referring to Figure 6 , a structural schematic diagram of an electronic device provided by an embodiment of the present application is shown. The electronic device is intended to represent various forms of digital computers, such as laptops, desktops, tablets, personal digital assistants, servers, mainframes, and other appropriate computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular telephones, smart phones, wearable devices (such as headsets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not intended to limit the implementations of the present application described and / or claimed in this document.
[0162] As Figure 6 shown, the electronic device 10 includes at least one processor 11, and a memory, such as a read-only memory (ROM) 12, a random access memory (RAM) 13, etc., which is communicatively connected to the at least one processor 11, wherein the memory stores a computer program executable by the at least one processor. The processor 11 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 12 or loaded into the random access memory (RAM) 13 from the storage unit 18. In the RAM 13, various programs and data required for the operation of the electronic device 10 can also be stored. The processor 11, the ROM 12, and the RAM 13 are connected to each other through a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.
[0163] A plurality of components in the electronic device 10 are connected to the I / O interface 15, including: an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a magnetic disk, an optical disk, etc.; and a communication unit 19, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information / data with other devices through a computer network, such as the Internet, and / or various telecommunications networks.
[0164] The processor 11 can be various general and / or special purpose processing components having processing and computing capabilities. Some examples of the processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various specialized artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 11 executes various methods and processes described above, such as the modification method of item code.
[0165] In some embodiments, the modification method of item code can be implemented as a computer program tangibly embodied in a computer readable storage medium, such as the storage unit 18. In some embodiments, part or all of the computer program can be loaded and / or installed onto the electronic device 10 via the ROM 12 and / or the communication unit 19. When the computer program is loaded onto the RAM 13 and executed by the processor 11, one or more steps of the modification method of item code described above can be performed. Alternatively, in other embodiments, the processor 11 can be configured to perform the modification method of item code by any other appropriate means, such as by means of firmware.
[0166] Various implementations of the systems and techniques described above can be realized in digital electronic circuitry, integrated circuitry, a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on a chip (SOC), a programmable logic device (PLD), a computer hardware, firmware, software, and / or combinations thereof. These various implementations can include implementation in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which can be special or general purpose, coupled to receive data and instructions from, and to transmit data and instructions to, a storage system, at least one input device, and at least one output device.
[0167] Computer programs used to implement the methods of the application can be written in any combination of one or more programming languages. These computer programs can be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the computer program, when executed by the processor of the machine, implements the functions / acts specified in the flowcharts and / or block diagrams. The computer program can be executed entirely on a machine, partially on a machine, partially on a machine as a stand-alone software package, partially on a machine and partially on a remote machine or entirely on a remote machine or server.
[0168] In the context of the present application, a computer-readable storage medium can be a tangible medium that can contain or store a computer program for use by or in connection with an instruction execution system, apparatus, or device. A computer-readable storage medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium can be a machine-readable signal medium. More specific examples of a machine-readable storage medium will include one or more lines of a program of instructions in a transitory signal, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
[0169] To provide for interaction with a user, the systems and techniques described here can be implemented on an electronic device having a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the electronic device. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.
[0170] The systems and techniques described here can be implemented in a computing system that includes a back end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front end component (e.g., a user computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back end, middleware, or front end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.
[0171] The computing system can include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. Servers can be cloud servers, also known as cloud computing servers or cloud hosts, which are a host product in the cloud computing service system to solve the defects of great management difficulty and weak business scalability in traditional physical hosts and VPS services.
[0172] Embodiment four
[0173] The embodiment of the present application also provides a computer program product, which comprises a computer program, and the computer program is executed by a processor to realize the item code modification method provided by any embodiment of the present application.
[0174] The computer program product can be written in one or more programming languages or combinations of languages to implement the operational steps of the present application, including object-oriented programming languages such as Java, Smalltalk, C++, and conventional procedural programming languages such as 'C' language or similar programming languages. The program code can be executed entirely on a user computer, partially on a user computer, as an independent software package, partially on a user computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer can be connected to the user computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computer (for example, through the Internet by using an Internet service provider).
[0175] It should be understood that the steps shown in the above forms can be reordered, added or deleted. For example, the steps described in the present application can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions of the present application can be achieved, and the present application is not limited herein.
[0176] The above specific embodiments do not constitute a limitation on the scope of protection of the present application. Those skilled in the art should understand that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modifications, equivalent replacements and improvements made within the spirit and principles of the present application shall be included in the scope of protection of the present application.
Claims
1. A method of modifying project code, characterized by, A project of developing a page provides source code of the page, the page has a plurality of components, the method comprises: When packaging the source code, data path information is generated for each of the components in the source code; When the source code and the page are displayed simultaneously on a client, the components are selected according to a positioning event occurring on the client; Editing information sent for the selected components is received; the editing information describes the content of the modification on the selected components; According to the data path information and the editing information, component code of the selected components in the source code is modified; The page is re-rendered according to the modified source code; The modified source code and the re-rendered page are pushed to the client for display.
2. The method of claim 1, wherein, When packaging the source code, data path information is generated for each of the components in the source code, comprising: When calling webpack to package the source code, a conversion function matching the type of each of the components is called to inject a file path of each of the components into a document object model element of each of the components; When calling Rollup to package the source code, a conversion function matching the type of each of the components is called to add data path information in the document object model element of each of the components; the data path information includes a file path of the component, a line where the code is located, a column where the code is located, and a name of the document object model element of the component.
3. The method of claim 1, wherein, According to the positioning event occurring on the client, the components are selected, comprising: When a positioning event is listened to in the client, a position of the positioning event is determined; Attribute information of each of the components in the client is queried; According to the attribute information, the components located at the position are queried; If the number of the components is 1, the components located at the position are selected; If the number of the components is greater than 1, areas of each of the components located at the position are counted according to the attribute information; The components located at the position and having the smallest area are selected.
4. The method of claim 3, wherein, According to the positioning event occurring on the client, the components are selected, further comprising: According to the attribute information, the client is informed to generate an outer frame for the selected components, and a prompt operation is performed on the outer frame; According to the attribute information, the client is informed to generate a prompt component for the selected components, and the data path information is displayed in the prompt component.
5. The method of claim 3, wherein, The editing information sent for the selected components is received, comprising: When a selection determination operation is received in the client, an editing component is generated around the selected components according to the attribute information; the editing component has an input box; When an editing determination operation is listened to in the client, text information in the input box is determined as the editing information input for the selected components.
6. The method of claim 1, wherein, According to the data path information and the editing information, the component code of the selected components in the source code is modified, comprising: A first prompt word is constructed using the source code, the data path information, and the editing information; The first prompt word is sent to an intelligent agent to modify the component code of the selected components.
7. The method of claim 6, wherein, The component code of the selected component in the source code is modified according to the data path information and the edit information, and the method further comprises: When the error information is received, a second prompt word is constructed using the source code, the data path information, the edit information and the error information; the error information indicates that an error occurs when the agent modifies the component code of the selected component in the source code, or an error occurs when the page is re-rendered; The second prompt word is sent to the agent to modify the component code of the selected component.
8. The method according to any one of claims 1-7, characterized in that, The page is re-rendered according to the modified source code, and the method further comprises: The modified component code of the selected component is written into a real-time task; Identification information of the modified component code of the selected component is generated in the real-time task; When the code file of the modified component code of the selected component is generated, the identification information and the type of the selected component are set as the file name of the code file, and the identification information is written into the route of the selected component; When the page is re-rendered by loading the modified source code, a renderer adapted to the type is called to read the code file from the route to render the modified component.
9. An electronic device, comprising: The electronic device comprises: at least one processor; and a memory connected in communication with the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute the modification method of the project code according to any one of claims 1-8.
10. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and the computer program is executed by the processor to implement the modification method of the project code according to any one of claims 1-8.