Online code editing methods, devices, clients, servers, and storage media

Abstract

This disclosure proposes a method, apparatus, client, server, and storage medium for online code editing. The method includes: sending a link to a first code file to the server; wherein the link is used to determine the identifier of the first code file and query each candidate code file corresponding to the identifier, generating a first target page based on the file content of each candidate code file; receiving and displaying the first target page returned by the server; sending first operation information to the server, wherein the first operation information is used to determine the target code file from each candidate code file and edit the file content of the target code file to update the first target page using the edited file content of the target code file; and receiving and displaying the updated first target page sent by the server. This enables online updating of code file content, reducing the workload of developers and improving development efficiency.

Description

Technical Field

[0001] This disclosure relates to the field of Internet technology, and in particular to a method, apparatus, client, server and storage medium for online code editing. Background Technology

[0002] Application development may require collaboration among multiple developers. In a multi-person collaborative development model, developers need to download a large number of code files to their local machines, modify them multiple times, and then upload the updated code files to the server.

[0003] However, the aforementioned method of updating code files offline not only increases the workload of developers but also reduces development efficiency. Summary of the Invention

[0004] This disclosure aims to at least partially address one of the technical problems in the related art.

[0005] Therefore, the present disclosure proposes the following technical solution:

[0006] The first aspect of this disclosure provides a method for online code editing, applied to a client, including:

[0007] Send a link to a first code file to the server; wherein the link is used to determine the identifier of the first code file, query each of the candidate code files corresponding to the identifier, and generate a first target page based on the file content of each candidate code file;

[0008] Receive the first target page returned by the server and display it;

[0009] Send first operation information to the server, wherein the first operation information is used to determine a target code file from each of the candidate code files, and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file;

[0010] Receive and display the updated first target page sent by the server.

[0011] The second aspect of this disclosure provides another method for online code editing, applied to a server, including:

[0012] Receive the link to the first code file sent by the client;

[0013] Based on the link, determine the identifier of the first code file, and query each candidate code file corresponding to the identifier;

[0014] Based on the file content of each of the candidate code files, generate the first target page;

[0015] Return the first target page to the client;

[0016] The system receives a first operation message sent by the client, responds to the first operation message, determines a target code file from each of the candidate code files, and edits the file content of the target code file to update the first target page using the edited file content of the target code file;

[0017] The updated first target page is sent to the client.

[0018] A third aspect of this disclosure provides an online code editing device for use on a client, comprising:

[0019] A sending module is used to send a link to a first code file to a server; wherein the link is used to determine the identifier of the first code file, query each candidate code file corresponding to the identifier, and generate a first target page based on the file content of each candidate code file;

[0020] A receiving module is used to receive and display the first target page returned by the server;

[0021] The sending module is further configured to send first operation information to the server, wherein the first operation information is configured to determine a target code file from each of the candidate code files and edit the file content of the target code file so as to update the first target page using the edited file content of the target code file;

[0022] The receiving module is also used to receive and display the updated first target page sent by the server.

[0023] The fourth aspect of this disclosure provides another online code editing device applied to a server, comprising:

[0024] The receiving module is used to receive the link to the first code file sent by the client;

[0025] The query module is used to determine the identifier of the first code file based on the link, and to query each candidate code file corresponding to the identifier;

[0026] The generation module is used to generate a first target page based on the file content of each of the candidate code files;

[0027] The sending module is used to return the first target page to the client;

[0028] The receiving module is also used to receive the first operation information sent by the client;

[0029] The determination module is configured to, in response to the first operation information, determine the target code file from each of the candidate code files, and edit the file content of the target code file to update the first target page using the edited file content of the target code file;

[0030] The sending module is also used to send the updated first target page to the client.

[0031] A fifth aspect of this disclosure provides a client comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to invoke and execute the executable instructions stored in the memory to implement the online code editing method as proposed in the first aspect of this disclosure.

[0032] A sixth aspect of this disclosure provides a server comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to invoke and execute the executable instructions stored in the memory to implement an online code editing method as proposed in a second aspect of this disclosure.

[0033] A seventh aspect of this disclosure provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the online code editing method as proposed in the first aspect of this disclosure, or implements the online code editing method as proposed in the second aspect of this disclosure.

[0034] An eighth aspect of this disclosure provides a computer program product in which, when instructions in the computer program product are executed by a processor, the online code editing method as proposed in the first aspect of this disclosure is performed, or the online code editing method as proposed in the second aspect of this disclosure is performed.

[0035] The technical solution disclosed herein involves a client sending a link to a first code file to a server. This link is used to identify the first code file and query the candidate code files corresponding to the identifier. A first target page is generated based on the content of each candidate code file. The client then receives and displays the first target page returned by the server. Next, the client sends first operation information to the server. This first operation information is used to identify the target code file from the candidate code files and edit the content of the target code file to update the first target page. Finally, the client receives and displays the updated first target page from the server. This allows for online updates of code file content, reducing the workload of developers and improving development efficiency.

[0036] Additional aspects and advantages of this disclosure will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this disclosure. Attached Figure Description

[0037] The above and / or additional aspects and advantages of this disclosure will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, in which:

[0038] Figure 1 This is a flowchart illustrating an online code editing method provided in an embodiment of the present disclosure;

[0039] Figure 2 This is a schematic diagram of the first target page in an embodiment of this disclosure. Figure 1 ;

[0040] Figure 3 A flowchart illustrating an online code editing method provided in another embodiment of this disclosure;

[0041] Figure 4 This is a schematic diagram of the first target page in an embodiment of this disclosure. Figure 2 ;

[0042] Figure 5 A flowchart illustrating an online code editing method provided in another embodiment of this disclosure;

[0043] Figure 6 This is a schematic diagram of the second target page in an embodiment of this disclosure;

[0044] Figure 7 This is a schematic diagram illustrating an application scenario of an embodiment of this disclosure;

[0045] Figure 8 This is a diagram of the existing search page;

[0046] Figure 9 A flowchart illustrating an online code editing method provided in another embodiment of this disclosure;

[0047] Figure 10 A flowchart illustrating an online code editing method provided in another embodiment of this disclosure;

[0048] Figure 11 This is a schematic diagram of each first-level folder rendered by the client in an embodiment of this disclosure;

[0049] Figure 12 This is a schematic diagram of the search file tree rendered by the client in an embodiment of this disclosure;

[0050] Figure 13 A flowchart illustrating an online code editing method provided in another embodiment of this disclosure;

[0051] Figure 14 This is a schematic diagram of the client's display interface in an embodiment of this disclosure. Figure 1 ;

[0052] Figure 15 This is a schematic diagram of the client's display interface in an embodiment of this disclosure. Figure 2 ;

[0053] Figure 16 A flowchart illustrating an online code editing method provided in another embodiment of this disclosure;

[0054] Figure 17 This is a schematic diagram of the client's display interface in an embodiment of this disclosure. Figure 3 ;

[0055] Figure 18 This is a schematic diagram of the client's display interface in an embodiment of this disclosure. Figure 4 ;

[0056] Figure 19 A flowchart illustrating an online code editing method provided in another embodiment of this disclosure;

[0057] Figure 20 This is a schematic diagram of the structure of an online code editing device provided in an embodiment of the present disclosure;

[0058] Figure 21 This is a schematic diagram of the structure of an online code editing device provided in another embodiment of the present disclosure;

[0059] Figure 22 A block diagram of an exemplary electronic device suitable for implementing embodiments of the present disclosure is shown. Detailed Implementation

[0060] Embodiments of this disclosure are described in detail below, examples of which are illustrated in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this disclosure, and should not be construed as limiting this disclosure.

[0061] The following description, with reference to the accompanying drawings, outlines an online code editing method, apparatus, client, server, and storage medium according to embodiments of the present disclosure.

[0062] Figure 1 This is a flowchart illustrating an online code editing method provided in an embodiment of the present disclosure.

[0063] like Figure 1 As shown, this online code editing method can be executed by the client and may include the following steps:

[0064] Step 101: Send a link to the first code file to the server; wherein, the link is used to determine the identifier of the first code file, query each candidate code file corresponding to the identifier, and generate the first target page based on the file content of each candidate code file.

[0065] In this embodiment of the disclosure, the link to the first code file may carry information such as the filename and file path of the first code file. For example, the link may be a Gerrit link.

[0066] In this embodiment of the disclosure, the client can send a link to the first code file to the server. Correspondingly, after receiving the link, the server can determine the identifier of the first code file based on the link, query each candidate code file corresponding to the identifier of the first code file, and generate a first target page based on the file content of each candidate code file.

[0067] For example, the file name of the first code file is taken as the identifier of the first code file. The file names corresponding to each historical modification record (or commit history or ancestor modification record) of the same code file can be the same. Based on the Gerrit link, each code file with the same file name can be obtained as a candidate code file. The first target page is generated based on the file content of each candidate code file.

[0068] As an example, for a given code file, assuming the server only stores two historical modification records corresponding to that code file, the first target page generated by the server could be as follows: Figure 2 As shown, areas 21 and 22 each display the contents of a code file.

[0069] Step 102: Receive and display the first target page returned by the server.

[0070] In this embodiment of the disclosure, after the server generates the first target page, it can return the first target page to the client. Correspondingly, after the client receives the first target page, it can display the first target page.

[0071] As an example, using a Gerrit link, the server can open the Gerrit link for the first code file through miTextEditor. The background automatically calls the Gerrit REST API (Application Programming Interface) plugins interface to retrieve all commit history related to that first code file from GitHub. This commit history is then formatted and displayed on the page in an easy-to-read format, allowing the user to select a code file. The generated page can look like this: Figure 2 As shown.

[0072] It should be noted that, Figure 2 In the submission history, the following five types of information are mainly included:

[0073] First, the commit ID of this submission is a unique identifying element in a Git commit;

[0074] Second, the author of this submission;

[0075] Third, the submission date;

[0076] Fourth, a detailed description of the submission (such as what problem was solved, the method used to solve the problem, etc.);

[0077] Fifth, the change ID submitted to the Gerrit server, which is an identifier element on the Gerrit server.

[0078] One option is to use the Monaco editor template from miTextEditor to render the page.

[0079] Step 103: Send first operation information to the server, wherein the first operation information is used to determine the target code file from each candidate code file and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file.

[0080] It is understandable that the first target page displays the historical modification records of the same code file (i.e., each candidate code file is a historical modification record). Users can select one code file from multiple candidate code files as the final required code file according to their needs, which is referred to as the target code file in this disclosure, and determine whether to update the target code file according to their own needs.

[0081] In this embodiment of the disclosure, after the client displays the first target page, if it detects that the user has triggered the first operation information, it can send the first operation information to the server. Correspondingly, after receiving the first operation information, the server can respond to the first operation information, determine the target code file from each candidate code file, and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file.

[0082] Step 104: Receive and display the updated first target page sent by the server.

[0083] In this embodiment, after updating the first target page, the server can send the updated first target page to the client. The client can then receive and display the updated first target page. This enables online updates of code files, reducing the workload of developers and improving development efficiency.

[0084] The online code editing method of this disclosure involves a client sending a link to a first code file to a server. This link is used to identify the first code file and query the candidate code files corresponding to the identifier. A first target page is generated based on the content of each candidate code file. The client then receives and displays the first target page returned by the server. Next, the client sends first operation information to the server. This first operation information is used to identify the target code file from the candidate code files and edit the content of the target code file to update the first target page. Finally, the client receives and displays the updated first target page from the server. This method enables online updating of code file content, reducing the workload of developers and improving development efficiency.

[0085] To clearly illustrate the above embodiments, this disclosure also provides a method for online code editing.

[0086] Figure 3 This is a flowchart illustrating an online code editing method provided in another embodiment of the present disclosure.

[0087] like Figure 3 As shown, this online code editing method can be executed by the client and may include the following steps:

[0088] Step 301: Send a link to the first code file to the server; wherein the link is used to determine the identifier of the first code file, query each candidate code file corresponding to the identifier, and generate the first target page based on the file content of each candidate code file.

[0089] The execution process of step 301 can be referred to the execution process of step 101 in the above embodiments, and will not be repeated here.

[0090] Step 302: Receive and display the first target page returned by the server. The first target page includes multiple areas, each area is used to display the file content of a candidate code file, and each area displays a selection control.

[0091] As an example, the first target page can be as follows: Figure 2 As shown, Figure 2Taking the first target page as an example, which includes two areas, areas 21 and 22, the selection control in area 21 is the "local" control 211, and the selection control in area 22 is the "remote" control 221.

[0092] Step 303: Monitor the triggered operations of the selection controls displayed for multiple areas.

[0093] Step 304: Generate first operation information based on the target region for the trigger operation in multiple regions, wherein the first operation information includes the identifier of the target region; the identifier of the target region is used to determine the target code file based on the file content of the candidate code files displayed in the target region.

[0094] In this embodiment of the disclosure, the client can monitor the triggering operation of the selection control displayed in each area. If a triggering operation is detected for the selection control displayed in multiple areas, the client can generate first operation information based on the target area where the triggering operation is performed in multiple areas.

[0095] Step 305: Send first operation information, wherein the first operation information is used to determine the target code file from each candidate code file and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file.

[0096] In this embodiment of the disclosure, when the server receives the first operation information, it can respond to the first operation information and, based on the identifier of the target area, use the candidate code file displayed in the target area as the target code file. That is, the server can determine the file content of the candidate code file displayed in the target area based on the identifier of the target area, and determine the target code file based on the file content of the candidate code file displayed in the target area. For example, if the file content of code file 1 is displayed in the target area, then the target code file is code file 1. Furthermore, the server can also edit the file content of the target code file according to the first operation information, so as to update the first target page using the edited file content of the target code file.

[0097] As an example, such as Figure 2As shown, users can select candidate code files displayed in area 21 as target code files by clicking the "local" control 211 in area 21, or by clicking the "remote" control 221 in area 22. After selecting a target code file in an area, the user can edit the file content of that target code file to update the first target page.

[0098] In one possible implementation of this disclosure, in order to facilitate the user's knowledge of the target code file currently being used, the server may also highlight the selection control in the target area based on the first operation information.

[0099] As an example, such as Figure 2 As shown, when the server opens a Gerrit link, the background automatically calls the GerritREST API's get diff interface to obtain the differences between the code file before and after modification. Based on the differences, the server background automatically determines whether the code file in region 21 or region 22 is currently selected, and sets the "local" control 211 or "remote" control 221 to the highlighted state.

[0100] For example, if a developer previously selected the code file in area 21, the server can save the hash value of that code file. As a result, when returning the first target page to the client, the selection control in area 21 of that first target page can be highlighted.

[0101] If the developer selects the selection control in area 22, the server calculates the hash value of the code file in area 22. If the hash value of the code file in area 22 is different from the previously saved hash value, it can be determined that the developer has selected a new code file. The selection control in the newly selected area 22 can then be highlighted.

[0102] It's important to note that when a user clicks a selection control that is not currently highlighted, the selected control will become highlighted, indicating that the code file (i.e., the target code file) within the selected area is being selected. Simultaneously, the backend can call the Gerrit REST API's `edit` interface to put the target code file within the highlighted selection area into edit mode. Then, it retrieves the file content from the Gerrit server using the `Gerrit get content` interface, and finally saves the selected target code file's content to the Gerrit server using the `Gerrit edit change edit` interface. Since the target code file is in edit mode on the Gerrit server, the user can modify it freely.

[0103] Step 306: Receive and display the updated first target page sent by the server.

[0104] The execution process of step 306 can be referred to the execution process of the above embodiments, and will not be repeated here.

[0105] In one possible implementation of this disclosure, the first target page may further display an upload control and / or a cancel control. When the user selects the upload control, the client may send a trigger operation to the server for the upload control. The trigger operation for the upload control is used to trigger the server to save the updated target code file. When the user selects the cancel control, the client may send a trigger operation to the server for the cancel control. The trigger operation for the cancel control is used to trigger the server to restore the updated target code file to its original content.

[0106] As an example, such as Figure 2 As shown, when a user selects a target code file and modifies it, and then wants to submit the target code file to the Gerrit server, at this time, as follows: Figure 4As shown, mitexteditor will display an upload control (the publish button) as shown in area 41 and a cancel control (the delete button) as shown in area 42. When the user clicks the publish button, the backend can call the Gerrit REST API's edit-publish interface to submit all changes made in this edit (i.e., the updated target code file) to the Gerrit server. When the user decides that the changes are no longer needed, they can click the delete button. At this time, the backend can call the Gerrit REST API's edit-delete interface to restore all file changes to their original state.

[0107] As an application scenario, this example uses the Python Flask framework on the backend and jQuery on the frontend for online code modification in a browser. It belongs to the B / S architecture in web architecture. The interaction between the frontend and backend uses AJAX (Asynchronous JavaScript and XML, a popular method for creating interactive web applications without sacrificing browser compatibility), and adopts the separation of frontend and backend.

[0108] When developers perform code merging or code selection operations locally, if they determine that two code files conflict and are unable to resolve the conflict, they can submit the Gerrit link of either conflicting code file to the Gerrit server. The Gerrit server will automatically query the ancestor modification record of the conflicting code file (binary file) based on the commit history (this ancestor modification record includes the other conflicting code file). The engineer resolving the conflict can then select a code file as the final code file on the page. This engineer can also edit or modify the selected code file online.

[0109] This allows for the efficient use of interfaces on the Gerrit server, such as retrieving file content, editing files, saving files, and pushing files, enabling the selection and submission of binary code files. Furthermore, in a collaborative development mode, it eliminates the need to download large amounts of code files locally for modification; online modification of code files is possible, improving development efficiency and saving development costs.

[0110] It's worth noting that in the field of software code, there are numerous scenarios where two code files need to be merged. However, in these scenarios, conflicts frequently arise between different code files, requiring developers to resolve them. Current techniques involve developers downloading each code file and comparing them line by line, a tedious and inefficient process.

[0111] To address the aforementioned issues, this disclosure allows for online comparison of different code files and online conflict resolution. The following section combines... Figure 5 The above process will be explained in detail.

[0112] Figure 5 This is a flowchart illustrating an online code editing method provided in another embodiment of the present disclosure.

[0113] like Figure 5 As shown, based on any of the above embodiments, the online code editing method may further include the following steps:

[0114] Step 501: Send a code file query request to the server. The code file query request is used to obtain the second code file and the third code file.

[0115] In this embodiment of the disclosure, the client may send a code file query request to the server to query the second and third code files from the server.

[0116] Step 502: Receive and display the second target page returned by the server, wherein the second target page displays the first file content of the second code file and the second file content of the third code file.

[0117] In this embodiment of the disclosure, the server can respond to the above-mentioned code file query request, obtain the second code file and the third code file, generate the second target page according to the first file content of the second code file and the second file content of the third code file, and return the second target page to the client. Accordingly, when the client receives the second target page, it can display the second target page.

[0118] Step 503: Compare the content of the first file and the content of the second file in the second target page to determine the first part of the content of the first file that is different from the content of the second file, and / or, determine the second part of the content of the second file that is different from the content of the first file.

[0119] In this embodiment of the disclosure, the client can compare the first file content and the second file content in the second target page to determine a first part of the first file content that is different from the second file content, and / or to determine a second part of the second file content that is different from the first file content.

[0120] Step 504: Mark the first part of the content of the first file in the second target page, and / or mark the second part of the content of the second file in the second target page.

[0121] In this embodiment of the disclosure, the client can mark a first portion of the content of the first file in the second target page, and / or mark a second portion of the content of the second file in the second target page. For example, the first and second portions can be displayed in red and green or highlighted, respectively, so that developers can quickly locate and resolve conflicting code content.

[0122] Furthermore, after marking the first part and / or the second part, the R&D personnel can modify the first part and / or the second part, and merge the modified first part and / or the second part with the same parts in the content of the first file and the content of the second file to obtain the content of the merged code file.

[0123] Step 505: Send second operation information to the server, wherein the second operation information is used to trigger the server to modify the marked first part and / or second part; merge the modified first part and / or second part with the same part in the first file content and the second file content to obtain the merged code file content, and use the merged code file content to update the second target page.

[0124] In this embodiment, developers can modify the first and / or second parts based on experience to resolve conflicting code content. Specifically, after detecting a second operation triggered by a user, the client can send the second operation information to the server. Correspondingly, upon receiving the second operation information, the server can modify the marked first and / or second parts in response to the second operation information, and merge the modified first and / or second parts with the same parts in the first and second file content to obtain merged code file content. The merged code file content is then used to update the second target page.

[0125] Step 506: Receive and display the updated second target page sent by the server.

[0126] In this embodiment of the disclosure, after the server updates the second target page, it can send the updated second target page to the client. Correspondingly, the client can receive the updated second target page sent by the server and display the updated second target page.

[0127] In one possible implementation of this disclosure, the server may also save the contents of the merged code file.

[0128] In one possible implementation of this disclosure, in order to facilitate researchers in viewing the contents of each code file, the updated second target page may include a first area and a second area. The contents of the first file and the contents of the second file may be displayed in the first area, and the contents of the merged code file may be displayed in the second area.

[0129] As an example, the second target page can be as follows: Figure 6 As shown, the second target page can be divided into area 61 and area 62. Area 61 displays the contents of the first file and the second file, while area 62 displays the contents of the merged code file. Area 61 can automatically compare the differences between the contents of the first file and the second file, highlighting these differences in red and green, allowing developers to quickly locate and resolve conflicting code. The merged code file in area 62 can be modified and saved by developers as needed.

[0130] As an example of an application scenario, let's take the client as the editor client, such as... Figure 7 As shown, the client can send a code file query request to the online editor server to request the code file content. The online editor server can download the code file from the code server and cache it. The code server can then return the file content and related information to the online editor server. Based on the file content, the online editor server generates a second target page that displays the code file content. The client can then view this second target page. After developers modify the file content on the second target page, they can choose whether to save it. If they choose to save, the client can upload the modified merged code file to the code server through the online editor server.

[0131] Therefore, developers can modify code files online without downloading them, reducing workload and improving development efficiency. Furthermore, the client automatically compares the contents of different code files and marks differences, allowing developers to quickly locate and resolve conflicting code, further enhancing development efficiency.

[0132] It should be noted that in related technologies, conventional search boxes only support single-condition searches and cannot meet users' multi-functional search needs. If users have multiple search requirements, this is generally achieved by adding multiple search boxes, for example... Figure 8 As shown, on the shopping order page, users can only search for purchased items or order details in the specified search boxes. For example, users can search for purchased items in the search box in area 81 and search for order details in the search box in area 82. The page design is redundant, complex, and unclear, and the user operation is extremely inconvenient.

[0133] To address the aforementioned issues, this disclosure provides a method for performing multi-condition searches for URLs and files simultaneously within a single search box. The following section will illustrate this. Figure 9 and Figure 16 The above process will be explained in detail.

[0134] Figure 9 This is a flowchart illustrating an online code editing method provided in another embodiment of the present disclosure.

[0135] like Figure 9 As shown, based on any of the above embodiments, the online code editing method may further include the following steps:

[0136] Step 901: Obtain the URL information entered in the search box and send a search request to the server. The search request includes the URL information used to determine the information of the search file tree.

[0137] In this embodiment of the disclosure, the client can obtain the URL (Uniform Resource Locator) information entered by the user in the search box and send a search request to the server. The search request may include the aforementioned URL information. Accordingly, after receiving the search request, the server can determine the information of the search file tree based on the URL information in the search request, that is, obtain the information of the search file tree that matches the URL information in the search request.

[0138] Step 902: Receive the information about the search file tree returned by the server.

[0139] Step 903: Render the search file tree based on its information to obtain the display content of the search file tree.

[0140] In this embodiment of the disclosure, the content displayed in the search file tree may include folders at all levels and / or files and subfolders under each folder at all levels in the search file tree.

[0141] In this embodiment of the disclosure, the client can receive information about the search file tree returned by the server and render it according to the information to obtain the display content of the search file tree. Therefore, it is possible to input URL information in the search box to retrieve the display content of the search file tree, thus meeting the user's actual search needs.

[0142] It should be understood that if the server returns all folders, files, and subfolders in the search file tree to the client at once, it may cause the front end to crash if there are many files in the search file tree.

[0143] To avoid the above situation, the search file tree information returned by the server to the client can include only the directories of the first-level folders. This allows the client to render only the directories of the first-level folders and obtain the contents of each first-level folder. The following section combines... Figure 10 The above process will be explained in detail.

[0144] Figure 10 This is a flowchart illustrating an online code editing method provided in another embodiment of the present disclosure.

[0145] like Figure 10 As shown above, in the above Figures 1 to 5 Based on any embodiment, the online code editing method may further include the following steps:

[0146] Step 1001: Obtain the URL information entered in the search box and send a search request to the server. The search request includes the URL information used to determine the information of the search file tree. The information of the search file tree includes: the directory of the first-level folder, and the first-level folder matching the target ID carried in the URL information.

[0147] In this embodiment of the disclosure, the client can obtain the URL information entered by the user in the search box and send a search request to the server. The search request may include the aforementioned URL information. Accordingly, after receiving the search request, the server can parse the URL information in the search request to determine the target ID carried by the URL information, determine the first-level folder that matches the target ID, and determine the directory of the first-level folder.

[0148] It should be noted that users may not know how to query all files under the URL information. Therefore, in one possible implementation of this disclosure, in order to make it easier for users to know how to query the file tree, the setting format corresponding to the URL information can be displayed on the client's display page, such as in the search box, so that users only need to enter the corresponding URL information according to the setting format.

[0149] For example, in a development scenario, if a developer wants to query all code files under a specific modification stored on the server, where each modification can be identified by a change ID, the user only needs to enter the corresponding change ID according to the set format to query all code files under the change ID.

[0150] Step 1002: Receive the directory of the first-level folder returned by the server.

[0151] Step 1003: Render the directory of the first-level folder to obtain each first-level folder.

[0152] In this embodiment of the disclosure, the client can receive the directory of the first-level folder returned by the server and render the directory of the first-level folder to obtain each first-level folder.

[0153] It should be noted that if the front end renders a top-level folder, and the user wants to access the sub-files within that folder, they can continue loading the individual files and sub-folders within the top-level folder.

[0154] In a first possible implementation of this disclosure, user query operations on each first-level folder can be monitored. In response to the query operation, a resource query request is sent to the server. The resource query request includes an identifier of the target first-level folder from which the query operation is performed. Accordingly, when the server receives the resource query request, it can query each file and subfolder under the target first-level folder according to the identifier of the target first-level folder, and return each file and subfolder under the target first-level folder to the client. Correspondingly, after receiving the files and subfolders under the target first-level folder, the client can render each file and subfolder under the target first-level folder to obtain a search file tree.

[0155] As an example, the front-end can render a first-level folder as follows: Figure 11 As shown, when the front-end renders a top-level folder, if a user wants to retrieve the sub-files within that folder, the front-end will access the back-end for each top-level folder the user opens. This back-end will then retrieve and load the data for each sub-file and subfolder within that folder. The front-end can then render this data to obtain and display the search file tree. For example, if the user clicks... Figure 11 If the first-level folder is named "frameworks", then the files and subfolders under that first-level folder "frameworks" can be loaded as follows: Figure 12 As shown in region 1201.

[0156] Therefore, by dynamically returning data from a top-level folder to the front end without adding new front-end elements, the front end can avoid crashing due to an excessive number of files being returned at once. In other words, this disclosure utilizes the concept of lazy loading: when some data is not in use, it does not need to be loaded, avoiding resource waste; when this data is needed, it is then retrieved from the back end and loaded onto the front end for display.

[0157] In a second possible implementation of this disclosure, the client may also periodically retrieve some files and / or some subfolders from the server in the first-level folder, and render the some files and / or some subfolders to obtain a search file tree.

[0158] For example, in the first possible implementation described above, the resource query request can be marked as a first resource query request. The client can periodically send a second resource query request to the server. The second resource query request may include an identifier of a first-level folder. After receiving the second resource query request, the server can respond to the second resource query request by querying some files and / or some subfolders in the first-level folder according to the identifier of the first-level folder, and return some files and / or some subfolders in the first-level folder to the client. Correspondingly, after receiving some files and / or some subfolders in the first-level folder, the client can render some files and / or some subfolders in the first-level folder to obtain a search file tree.

[0159] As an example, you can first load the top-level folder, and then use a timer to load parts of the folder at regular intervals to avoid the front end crashing due to too many files being returned at once.

[0160] The online code editing method of this disclosure avoids front-end crashes caused by the server returning a large amount of data to the client at one time by including only the directory of the first-level folder in the search file tree information returned by the server to the client.

[0161] In one possible implementation of this disclosure, to reduce user operations and improve user experience, the server may also return all folders and files matching the target ID carried in the URL information to the client at once, so that the client can directly render all the aforementioned folders and files to obtain a search file tree. The following is in conjunction with... Figure 13 The above process will be explained in detail.

[0162] Figure 13 This is a flowchart illustrating an online code editing method provided in another embodiment of the present disclosure.

[0163] like Figure 13 As shown above, in the above Figures 1 to 5 Based on any embodiment, the online code editing method may further include the following steps:

[0164] Step 1301: Obtain the URL information entered in the search box and send a search request to the server. The search request includes the URL information used to determine the information of the search file tree. The information of the search file tree includes: each folder that matches the target ID carried in the URL information, as well as each file and subfolder under each folder.

[0165] In this embodiment of the disclosure, the client can obtain the URL information entered by the user in the search box and send a search request to the server. The search request may include the aforementioned URL information. Accordingly, after receiving the search request, the server can parse the URL information in the search request to determine the target ID carried in the URL information, and determine each folder, file and subfolder under each folder that matches the target ID.

[0166] Step 1302: Receive the folders, files, and subfolders in each folder that match the target ID carried in the URL information returned by the server.

[0167] Step 1303: Render each folder that matches the target ID, as well as each file and subfolder under each folder, to obtain the search file tree.

[0168] In this embodiment of the disclosure, the client can receive from the server each folder and each file and subfolder under each folder that match the target ID carried in the URL information, and render each folder and each file and subfolder under each folder that match the target ID to obtain a search file tree.

[0169] As an example, in a development scenario, if a developer wants to query all code files under a specific modification stored on the Gerrit server, such as searching for all code files under a certain change ID on the Gerrit server, for example, change ID 1212034, the developer can do so in a way that... Figure 14 Enter the URL in the specified format in the search box shown. Figure 14 The URL is denoted as the change URL, and the last part of the URL is the change ID.

[0170] When the search is complete, such as Figure 15 As shown, a search file tree can be generated on the left side of the client's display interface to show the search results. When the user double-clicks to expand the corresponding change ID (1212034 displayed at the top of the search file tree), a list of all files under that change ID is displayed. When a file is clicked in the search file tree on the left, the specific file content of that file can be loaded on the right.

[0171] The online code editing method of this disclosure returns all folders and files matching the target ID carried in the URL information to the client at once through the server. Users can directly view all files matching the target ID without having to retrieve other subfolders and subfiles from the server, which can reduce the waiting time for users when viewing the search file tree.

[0172] In one possible implementation of this disclosure, the user can also enter search keywords in the search box to search for files in the file tree. The following is in conjunction with... Figure 16 The above process will be explained in detail.

[0173] Figure 16 This is a flowchart illustrating an online code editing method provided in another embodiment of the present disclosure.

[0174] like Figure 16 As shown, based on any of the above embodiments, the online code editing method may further include the following steps:

[0175] Step 1601: Obtain the search keywords entered in the search box.

[0176] In this embodiment of the disclosure, when a user wants to search for a file in the file tree, they can enter search keywords in the search box, such as file names.

[0177] Step 1602: Match the search keywords with the filenames of each file in the search file tree to determine the target file whose filename matches the search keywords.

[0178] In this embodiment, search keywords can be matched with the filenames of files in the search file tree to determine if a target file exists whose filename matches the search keyword. If no target file matches the search keyword in the search file tree, the folders and files in the search file tree can be hidden; for example, only the folders and files in the search file tree can be displayed. Figure 15 The change ID in the search file tree. If a target file matching the search keywords exists in the search file tree, step 1603 can be executed.

[0179] Step 1603: Mark the target file.

[0180] In this embodiment of the disclosure, if a target file matching the search keywords exists in the search file tree, the target file can be marked so that the user can quickly locate the required file.

[0181] As an example, such as Figure 17 As shown, users can enter "ma" in the search box, and the client can match "ma" with the filenames of all files under the change ID, highlighting the matched target files.

[0182] In one possible implementation of this disclosure, the user can also view the file content of a target file according to their own needs. Specifically, the client can monitor triggering operations on the marked target file and, in response to the triggering operations on the marked target file, display the file content corresponding to the target file in the display interface.

[0183] As one possible implementation, the client's display interface may include a first visible area and a second visible area. The search file tree can be displayed in the first visible area, and the file content corresponding to the target file can be displayed in the second visible area.

[0184] As an example, such as Figure 18 As shown, the first visible area can be area 1801, and the second visible area can be 1802. Users can click on the file name of the target file in area 1801 to display the file content of the target file in area 1802, and the file name (i.e., manifest) of the target file can be displayed in the search box.

[0185] In summary, the search box can simultaneously perform multi-condition searches for both URLs and files. When a user enters a URL in the search box, the backend can access the Gerrit API to retrieve data and return it to the frontend for rendering, displaying the search file tree. When a user searches for files, the system can retrieve files matching the search keywords from the search file tree and highlight them. If no files are found, all files in the search file tree can be hidden. Therefore, it's possible to search for URLs with a directory structure within a single search box, while also supporting keyword searches to filter and highlight files within the directory structure. This allows for simultaneous searches with different conditions within a single search box without increasing the number of search boxes, offering simplicity, convenience, and improved user satisfaction.

[0186] The above are implementation examples of methods executed by the client. This disclosure also provides implementation examples of methods executed by the server.

[0187] Figure 19 This is a flowchart illustrating an online code editing method provided in another embodiment of the present disclosure.

[0188] like Figure 19 As shown, this online code editing method can be executed by a server and may include the following steps:

[0189] Step 1901: Receive the link to the first code file sent by the client.

[0190] In this embodiment of the disclosure, the link to the first code file may carry information such as the filename and file path of the first code file. For example, the link may be a Gerrit link.

[0191] Step 1902: Based on the link, determine the identifier of the first code file and query the candidate code files corresponding to the identifier.

[0192] In this embodiment of the disclosure, the client can send a link to the first code file to the server. Accordingly, after receiving the link, the server can determine the identifier of the first code file based on the link and query each candidate code file corresponding to the identifier of the first code file.

[0193] For example, the file name of the first code file is taken as the identifier of the first code file. The file names corresponding to each historical modification record (or commit history or ancestor modification record) of the same code file can be the same. Each code file with the same file name can be obtained as a candidate code file.

[0194] Step 1903: Generate the first target page based on the contents of each candidate code file.

[0195] In this embodiment of the disclosure, the server can generate a first target page based on the file content of each candidate code file.

[0196] As an example, for a given code file, assuming the server only stores two historical modification records corresponding to that code file, the first target page generated by the server could be as follows: Figure 2 As shown, areas 21 and 22 each display the contents of a code file.

[0197] Step 1904: Return the first target page to the client.

[0198] In this embodiment of the disclosure, after the server generates the first target page, it can return the first target page to the client. Correspondingly, after the client receives the first target page, it can display the first target page.

[0199] Step 1905: Receive the first operation information sent by the client, respond to the first operation information, determine the target code file from each candidate code file, and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file.

[0200] It is understandable that the first target page displays the historical modification records of the same code file (i.e., each candidate code file is a historical modification record). Users can select one code file from multiple candidate code files as the final required code file according to their needs, which is referred to as the target code file in this disclosure, and determine whether to update the target code file according to their own needs.

[0201] In this embodiment of the disclosure, after the client displays the first target page, if it detects that the user has triggered the first operation information, it can send the first operation information to the server. Correspondingly, after receiving the first operation information, the server can respond to the first operation information, determine the target code file from each candidate code file, and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file.

[0202] Step 1906: Send the updated first target page to the client.

[0203] In this embodiment, after updating the first target page, the server can send the updated first target page to the client. The client can then receive and display the updated first target page. This enables online updates of code files, reducing the workload of developers and improving development efficiency.

[0204] In one possible implementation of this disclosure, the first target page may include multiple areas, each area displaying the file content of a candidate code file, and each area displaying a selection control; the first operation information includes an identifier of the target area, which is determined by monitoring trigger operations on the selection controls displayed in the multiple areas, based on the area where the trigger operation is performed. The server can determine the file content of the candidate code file displayed in the target area based on the identifier of the target area; and determine the target code file based on the file content of the candidate code file displayed in the target area.

[0205] In one possible implementation of this disclosure, the server may also respond to the first operation information by highlighting the selection control in the target area.

[0206] In one possible implementation of this disclosure, the first target page may further display an upload control and / or a cancel control. The server may also receive a trigger operation sent by the client for the upload control and, in response to the trigger operation for the upload control, save the updated target code file; or, receive a trigger operation sent by the client for the cancel control and, in response to the trigger operation for the cancel control, restore the file content of the updated target code file to the file content of the target code file before the update.

[0207] In one possible implementation of this disclosure, the server may further receive a code file query request sent by the client, and in response to the code file query request, obtain a second code file and a third code file; generate a second target page based on the first file content of the second code file and the second file content of the third code file; and return the second target page to the client; wherein the second target page is used to display and compare the first file content and the second file content to determine a first part of the first file content that is different from the second file content, and / or to determine a second part of the second file content that is different from the first file content, and mark the first part of the first file content, and / or mark the second part of the second file content.

[0208] In one possible implementation of this disclosure, the server may further receive second operation information sent by the client, and in response to the second operation information, modify the marked first part and / or second part; merge the modified first part and / or second part with the same part in the first file content and the second file content to obtain merged code file content; update the second target page using the merged code file content; and send the updated second target page to the client.

[0209] In one possible implementation of this disclosure, the server may also store the contents of the merged code file.

[0210] In one possible implementation of this disclosure, the updated second target page includes a first area and a second area, with the content of the first file and the content of the second file displayed in the first area, and the content of the merged code file displayed in the second area.

[0211] In one possible implementation of this disclosure, the server may further receive search request information sent by the client, wherein the search request information includes URL information entered in the search box; in response to the search request information, determine the information of the search file tree based on the URL information; and return the information of the search file tree to the client, wherein the information of the search file tree is used to render the display content of the obtained search file tree.

[0212] In one possible implementation of this disclosure, the server can parse the URL information to determine the target ID carried in the URL information; determine the first-level folder that matches the target ID; and determine the directory of the first-level folder as information for searching the file tree.

[0213] In one possible implementation of this disclosure, the server may further receive a first resource query request sent by the client, wherein the first resource query request includes an identifier of the target first-level folder for which the query operation is performed; query each file and each subfolder under the target first-level folder according to the identifier of the target first-level folder; and send each file and each subfolder under the target first-level folder to the client, wherein each file and each subfolder under the target first-level folder is used to render a search file tree.

[0214] In one possible implementation of this disclosure, the server may further obtain a second resource query request periodically sent by the client, wherein the second resource query request includes an identifier of a first-level folder; in response to the second resource query request, based on the identifier of the first-level folder, query a portion of the files and / or a portion of the subfolders in the first-level folder; and return a portion of the files and / or a portion of the subfolders in the first-level folder to the client, wherein the portion of the files and / or the portion of the subfolders is used to render a search file tree.

[0215] In one possible implementation of this disclosure, the server can parse the URL information to determine the target ID carried in the URL information; determine each folder and each file and subfolder under each folder that matches the target ID; and determine the matched folders and each file and subfolder under each folder as information for searching the file tree.

[0216] It should be noted that the aforementioned Figures 1 to 16 The explanation of the method implementation examples executed on the client side also applies to the method implementation examples executed on the server side, as their implementation principles are similar and will not be repeated here.

[0217] The online code editing method of this disclosure involves determining the identifier of a first code file based on a link sent by a client, querying candidate code files corresponding to the identifier, generating a first target page based on the content of each candidate code file, returning the first target page to the client, receiving first operation information from the client, determining the target code file from the candidate code files in response to the first operation information, editing the content of the target code file to update the first target page using the edited content, and sending the updated first target page to the client. This enables online updating of code file content, reducing the workload of developers and improving development efficiency.

[0218] With the above Figures 1 to 16 Corresponding to the online code editing method provided in the embodiments, this disclosure also provides an online code editing device. Because the online code editing device provided in the embodiments of this disclosure is similar to the one described above... Figures 1 to 16 The online code editing method provided in the embodiments corresponds to the online code editing method provided in the embodiments of this disclosure, and therefore the implementation of the online code editing method is also applicable to the online code editing device provided in the embodiments of this disclosure, and will not be described in detail in the embodiments of this disclosure.

[0219] Figure 20 This is a schematic diagram of the structure of an online code editing device provided in an embodiment of the present disclosure.

[0220] like Figure 20 As shown, the online code editing device 2000, applied to a client, may include a sending module 2001 and a receiving module 2002.

[0221] The sending module 2001 is used to send a link to the first code file to the server; the link is used to determine the identifier of the first code file, query each candidate code file corresponding to the identifier, and generate the first target page based on the file content of each candidate code file.

[0222] The receiving module 2002 is used to receive the first target page returned by the server and display it.

[0223] The sending module 2001 is also used to send first operation information to the server, wherein the first operation information is used to determine the target code file from each candidate code file and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file.

[0224] The receiving module 2002 is also used to receive and display the updated first target page sent by the server.

[0225] In one possible implementation of this disclosure, the first target page includes multiple areas, each area displaying the file content of a candidate code file, and each area displaying a selection control; the online code editing device 2000 may further include:

[0226] The first monitoring module is used to monitor and trigger operations on the selection controls displayed in multiple areas.

[0227] The generation module is used to generate first operation information based on the target region where the trigger operation is performed in multiple regions. The first operation information includes the identifier of the target region. The identifier of the target region is used to determine the target code file based on the file content of the candidate code files displayed in the target region.

[0228] In one possible implementation of this disclosure, the first operation information is further used to highlight the selection control in the target area.

[0229] In one possible implementation of this disclosure, the first target page further displays an upload control and / or a cancel control. The sending module 2001 is further configured to: send a trigger operation to the server for the upload control; wherein the trigger operation for the upload control is used to trigger the server to save the updated target code file; or, send a trigger operation to the server for the cancel control; wherein the trigger operation for the cancel control is used to trigger the server to restore the file content of the updated target code file to the file content of the target code file before the update.

[0230] In one possible implementation of this disclosure, the sending module 2001 is further configured to send a code file query request to the server, the code file query request being used to obtain a second code file and a third code file.

[0231] The receiving module 2002 is also used to receive and display the second target page returned by the server, wherein the second target page displays the first file content of the second code file and the second file content of the third code file.

[0232] The online code editing device 2000 may also include:

[0233] The determination module is used to compare the contents of the first file and the contents of the second file in the second target page to determine a first part of the contents of the first file that is different from the contents of the second file, and / or to determine a second part of the contents of the second file that is different from the contents of the first file.

[0234] The first marking module is used to mark the first part of the content of the first file in the second target page, and / or mark the second part of the content of the second file in the second target page.

[0235] In one possible implementation of this disclosure, the sending module 2001 is further configured to send second operation information to the server, wherein the second operation information is used to trigger the server to modify the marked first part and / or second part; merge the modified first part and / or second part with the same part in the first file content and the second file content to obtain merged code file content, and update the second target page using the merged code file content.

[0236] The receiving module 2002 is also used to receive and display the updated second target page sent by the server.

[0237] In one possible implementation of this disclosure, the updated second target page includes a first area and a second area, with the content of the first file and the content of the second file displayed in the first area, and the content of the merged code file displayed in the second area.

[0238] In one possible implementation of this disclosure, the online code editing device 2000 may further include:

[0239] The retrieval module is used to retrieve URL information entered in the search box.

[0240] The sending module 2001 is also used to send a search request to the server, wherein the search request includes URL information for determining information about the search file tree.

[0241] The receiving module 2002 is also used to receive information about the search file tree returned by the server.

[0242] The first rendering module is used to render based on the information of the search file tree to obtain the display content of the search file tree.

[0243] In one possible implementation of this disclosure, the information for searching the file tree includes: the directory of the first-level folder, wherein the first-level folder matches the target ID carried in the URL information; and a first rendering module, specifically used to: render the directory of the first-level folder to obtain each first-level folder.

[0244] In one possible implementation of this disclosure, the online code editing device 2000 may further include:

[0245] The second monitoring module is used to monitor query operations on each first-level folder.

[0246] The sending module 2001 is also used to respond to the query operation by sending a resource query request to the server; wherein the resource query request includes the identifier of the target first-level folder for which the query operation is performed, and is used to query each file and subfolder under the target first-level folder.

[0247] The receiving module 2002 is also used to receive files and subfolders under the target first-level folder returned by the server.

[0248] The second rendering module is used to render each file and subfolder under the target first-level folder to obtain the search file tree.

[0249] In one possible implementation of this disclosure, the acquisition module is further configured to periodically acquire a portion of files and / or a portion of subfolders from a first-level folder from the server.

[0250] The online code editing device 2000 may also include:

[0251] The third rendering module is used to render some files and / or some subfolders to obtain the search file tree.

[0252] In one possible implementation of this disclosure, the information of the search file tree includes: each folder matching the target ID carried in the URL information, and each file and subfolder under each folder; the first rendering module is specifically used to: render each folder matching the target ID, and each file and subfolder under each folder, to obtain the search file tree.

[0253] In one possible implementation of this disclosure, the acquisition module is further configured to acquire the search keywords entered in the search box.

[0254] The online code editing device 2000 may also include:

[0255] The matching module is used to match search keywords with the filenames of each file in the search file tree to determine the target file whose filename matches the search keywords.

[0256] The second tagging module is used to tag the target file.

[0257] In one possible implementation of this disclosure, the online code editing device 2000 may further include:

[0258] The hiding module is used to hide folders and files in the search file tree if no target file matching the search keyword exists in the search file tree.

[0259] In one possible implementation of this disclosure, the online code editing device 2000 may further include:

[0260] The third monitoring module is used to monitor the triggering operations on the marked target files.

[0261] The first display module is used to respond to the triggered operation on the marked target file and display the file content corresponding to the target file in the interface.

[0262] In one possible implementation of this disclosure, the interface includes a first visible area and a second visible area, a search file tree is displayed in the first visible area, and the file content corresponding to the target file is displayed in the second visible area.

[0263] In one possible implementation of this disclosure, the online code editing device 2000 may further include:

[0264] The second display module is used to display the set format corresponding to the URL information.

[0265] The online code editing device of this disclosure sends a link to a first code file to a server via a client. The link is used to identify the first code file and query the candidate code files corresponding to the identifier. A first target page is generated based on the content of each candidate code file. The device receives and displays the first target page returned by the server. First operation information is sent to the server, whereby the first operation information is used to identify the target code file from the candidate code files and edit the content of the target code file to update the first target page using the edited content. The updated first target page is then received and displayed by the server. This allows for online updating of code file content, reducing the workload of developers and improving development efficiency.

[0266] With the above Figure 19 Corresponding to the online code editing method provided in the embodiments, this disclosure also provides an online code editing device. Because the online code editing device provided in the embodiments of this disclosure is similar to the one described above... Figure 19 The online code editing method provided in the embodiments corresponds to the online code editing method provided in the embodiments of this disclosure, and therefore the implementation of the online code editing method is also applicable to the online code editing device provided in the embodiments of this disclosure, and will not be described in detail in the embodiments of this disclosure.

[0267] Figure 21 This is a schematic diagram of the structure of an online code editing device provided in another embodiment of the present disclosure.

[0268] like Figure 21 As shown, the online code editing device 2100, applied to a server, may include: a receiving module 2101, a querying module 2102, a generating module 2103, a sending module 2104, and a determining module 2105.

[0269] The receiving module 2101 is used to receive the link to the first code file sent by the client.

[0270] The query module 2102 is used to determine the identifier of the first code file based on the link, and to query each candidate code file corresponding to the identifier.

[0271] The generation module 2103 is used to generate the first target page based on the file content of each candidate code file.

[0272] The sending module 2104 is used to return the first target page to the client.

[0273] The receiving module 2101 is also used to receive the first operation information sent by the client.

[0274] The determination module 2105 is used to determine the target code file from each candidate code file in response to the first operation information, and to edit the file content of the target code file so as to update the first target page using the file content of the edited target code file.

[0275] The sending module 2104 is also used to send the updated first target page to the client.

[0276] In one possible implementation of this disclosure, the first target page includes multiple areas, each area is used to display the file content of a candidate code file, and each area displays a selection control; the first operation information includes an identifier of the target area, the target area is determined by monitoring the selection control displayed in the multiple areas and triggering the operation based on the area in the multiple areas where the triggering operation is performed.

[0277] The determination module 2105 is specifically used for: determining the file content of the candidate code files displayed in the target area based on the identifier of the target area; and determining the target code file based on the file content of the candidate code files displayed in the target area.

[0278] In one possible implementation of this disclosure, the online code editing device 2100 may further include:

[0279] The settings module is used to highlight the selected control in the target area in response to the first operation information.

[0280] In one possible implementation of this disclosure, the first target page further displays an upload control and / or a cancel control. The receiving module 2101 is further configured to: receive a trigger operation sent by the client for the upload control, and in response to the trigger operation for the upload control, save the updated target code file; or, receive a trigger operation sent by the client for the cancel control, and in response to the trigger operation for the cancel control, restore the file content of the updated target code file to the file content of the target code file before the update.

[0281] In one possible implementation of this disclosure, the receiving module 2101 is further configured to receive a code file query request sent by the client, and in response to the code file query request, obtain a second code file and a third code file.

[0282] The generation module 2103 is also used to generate a second target page based on the first file content of the second code file and the second file content of the third code file.

[0283] The sending module 2104 is also used to return a second target page to the client; wherein the second target page is used to display and compare the content of the first file and the content of the second file to determine a first part of the content of the first file that is different from the content of the second file, and / or to determine a second part of the content of the second file that is different from the content of the first file, and to mark the first part of the content of the first file, and / or to mark the second part of the content of the second file.

[0284] In one possible implementation of this disclosure, the receiving module 2101 is further configured to receive second operation information sent by the client, and in response to the second operation information, modify the marked first part and / or second part.

[0285] The online code editing device 2100 may also include:

[0286] The merge module is used to merge the modified first part and / or second part with the same parts in the content of the first file and the content of the second file to obtain the merged code file content.

[0287] The update module is used to update the second target page using the content of the merged code file.

[0288] The sending module 2104 is also used to send the updated second target page to the client.

[0289] In one possible implementation of this disclosure, the online code editing device 2100 may further include:

[0290] The save module is used to save the contents of the merged code file.

[0291] In one possible implementation of this disclosure, the updated second target page includes a first area and a second area, with the content of the first file and the content of the second file displayed in the first area, and the content of the merged code file displayed in the second area.

[0292] In one possible implementation of this disclosure, the receiving module 2101 is further configured to receive search request information sent by the client, wherein the search request information includes URL information entered in the search box.

[0293] The determination module 2105 is also used to determine the information of the search file tree based on the URL information in response to the search request information.

[0294] The sending module 2104 is also used to return information about the search file tree to the client, wherein the information about the search file tree is used to render the display content of the obtained search file tree.

[0295] In one possible implementation of this disclosure, the determining module 2105 is specifically used to: parse the URL information to determine the target ID carried in the URL information; determine the first-level folder that matches the target ID; and determine the directory of the first-level folder as information for searching the file tree.

[0296] In one possible implementation of this disclosure, the receiving module 2101 is further configured to receive a first resource query request sent by the client, wherein the first resource query request includes an identifier of the target first-level folder for which the query operation is performed.

[0297] The query module 2102 is also used to query each file and subfolder under the target first-level folder based on the identifier of the target first-level folder.

[0298] The sending module 2104 is also used to send each file and subfolder under the target first-level folder to the client, wherein each file and subfolder under the target first-level folder is used to render the search file tree.

[0299] In one possible implementation of this disclosure, the receiving module 2101 is further configured to obtain a second resource query request periodically sent by the client, wherein the second resource query request includes the identifier of a first-level folder.

[0300] The query module 2102 is also used to respond to a second resource query request by querying some files and / or some subfolders in the first-level folder based on the identifier of the first-level folder.

[0301] The sending module 2104 is also used to return a portion of the files and / or a portion of the subfolders in the first-level folder to the client, wherein the portion of the files and / or the portion of the subfolders is used to render the search file tree.

[0302] In one possible implementation of this disclosure, the determining module 2105 is specifically used to: parse the URL information to determine the target ID carried in the URL information; determine each folder and each file and subfolder under each folder that matches the target ID; and determine the matched folders and each file and subfolder under each folder as information for searching the file tree.

[0303] The online code editing device of this disclosure, through a server, determines the identifier of a first code file based on a link to a first code file sent by a client, and queries each candidate code file corresponding to the identifier; generates a first target page based on the file content of each candidate code file; returns the first target page to the client; receives first operation information sent by the client, and in response to the first operation information, determines the target code file from each candidate code file, edits the file content of the target code file, and updates the first target page using the edited file content of the target code file; and sends the updated first target page to the client. Thus, online updating of code file content can be achieved, reducing the workload of R&D personnel and improving development efficiency.

[0304] To implement the above embodiments, this disclosure also proposes a client, including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to invoke and execute the executable instructions stored in the memory to achieve the aforementioned implementation described in this disclosure. Figures 1 to 16 The online code editing method proposed in any embodiment.

[0305] To implement the above embodiments, this disclosure also proposes a server, including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to invoke and execute the executable instructions stored in the memory to implement the aforementioned embodiments. Figure 19 The online code editing method proposed in the embodiments.

[0306] To implement the above embodiments, this disclosure also proposes a non-transitory computer-readable storage medium storing a computer program that, when executed by a processor, implements the online code editing method as proposed in any embodiment of this disclosure.

[0307] To implement the above embodiments, this disclosure also proposes a computer program product that, when the instructions in the computer program product are executed by a processor, performs the online code editing method as proposed in any embodiment of this disclosure.

[0308] Figure 22 A block diagram of an exemplary electronic device suitable for implementing embodiments of the present disclosure is shown. The electronic device may include a client or server of any of the above embodiments. Figure 22 The electronic device 22 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.

[0309] like Figure 22As shown, the electronic device 12 is represented in the form of a general-purpose computing device. The components of the electronic device 12 may include, but are not limited to: one or more processors or processing units 16, system memory 28, and bus 18 connecting different system components (including system memory 28 and processing unit 16).

[0310] Bus 18 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. Examples of these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0311] Electronic device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by electronic device 12, including volatile and non-volatile media, removable and non-removable media.

[0312] Memory 28 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM) 30 and / or cache memory 32. Electronic device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 34 may be used to read and write non-removable, non-volatile magnetic media (… Figure 22 Not shown; usually referred to as a "hard drive"). Although Figure 22Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disc drive for reading and writing to a removable non-volatile optical disc (e.g., a compact disc read-only memory (CD-ROM), a digital video disc read-only memory (DVD-ROM), or other optical media) may be provided. In these cases, each drive may be connected to bus 18 via one or more data media interfaces. Memory 28 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of the embodiments of this disclosure.

[0313] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28. Such program modules 42 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. Program modules 42 typically perform the functions and / or methods described in the embodiments of this disclosure.

[0314] Electronic device 12 can also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), and with one or more devices that enable a user to interact with electronic device 12, and / or with any device that enables electronic device 12 to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed via input / output (I / O) interface 22. Furthermore, electronic device 12 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 20. As shown, network adapter 20 communicates with other modules of electronic device 12 via bus 18. It should be understood that, although not shown in the figure, other hardware and / or software modules can be used in conjunction with electronic device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0315] The processing unit 16 executes various functional applications and data processing by running programs stored in the system memory 28, such as implementing the methods mentioned in the foregoing embodiments.

[0316] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this disclosure. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0317] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this disclosure, "a plurality of" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0318] Any process or method description in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing custom logic functions or processes, and the scope of preferred embodiments of this disclosure includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as will be understood by those skilled in the art to which embodiments of this disclosure pertain.

[0319] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as a sequenced list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (such as a computer-based system, a processor-included system, or other system that can fetch and execute instructions from, an instruction execution system, apparatus, or device). For the purposes of this specification, "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transmit programs for use by, or in conjunction with, an instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of computer-readable media include: an electrical connection having one or more wires (electronic device), a portable computer disk drive (magnetic device), random access memory (RAM), read-only memory (ROM), erasable and editable read-only memory (EPROM or flash memory), fiber optic devices, and portable optical disc read-only memory (CDROM). Alternatively, the computer-readable medium may be paper or other suitable media on which the program can be printed, since the program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpreting, or otherwise processing as necessary, and then stored in a computer memory.

[0320] It should be understood that various parts of this disclosure can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0321] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

[0322] Furthermore, the functional units in the various embodiments of this disclosure can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0323] The storage medium mentioned above can be a read-only memory, a disk, or an optical disk, etc. Although embodiments of the present disclosure have been shown and described above, it is to be understood that the above embodiments are exemplary and should not be construed as limiting the present disclosure. Those skilled in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of the present disclosure.

Claims

1. A method for online code editing, characterized in that, Applied to a client, the method includes: Send a link to a first code file to the server; wherein the link is used to determine the identifier of the first code file, query each candidate code file corresponding to the identifier, and generate a first target page based on the file content of each candidate code file; Receive the first target page returned by the server and display it; Send first operation information to the server, wherein the first operation information is used to determine a target code file from each of the candidate code files, and edit the file content of the target code file so as to update the first target page using the file content of the edited target code file; Receive and display the updated first target page sent by the server.

2. The method according to claim 1, characterized in that, The first target page includes multiple areas, each area is used to display the file content of a candidate code file, and each area displays a selection control; the method further includes: Monitor the triggered operations of the selection controls displayed for the multiple areas; The first operation information is generated based on the target region for which the triggering operation is performed in the plurality of regions, wherein the first operation information includes the identifier of the target region; the identifier of the target region is used to determine the target code file based on the file content of the candidate code files displayed in the target region.

3. The method according to claim 2, characterized in that, The first operation information is also used to highlight the selection control in the target area.

4. The method according to any one of claims 1-3, characterized in that, The first target page also displays an upload control and / or a cancel control, and the method further includes: Send a trigger operation to the server for the upload control; wherein the trigger operation for the upload control is used to trigger the server to save the updated target code file; or, Send a trigger operation to the server for the cancel control; wherein the trigger operation for the cancel control is used to trigger the server to restore the updated file content of the target code file to the file content of the target code file before the update.

5. The method according to claim 1, characterized in that, The method further includes: Send a code file query request to the server, the code file query request being used to obtain the second code file and the third code file; Receive and display the second target page returned by the server, wherein the second target page displays the first file content of the second code file and the second file content of the third code file; Compare the content of the first file and the content of the second file in the second target page to determine a first part of the first file content that is different from the content of the second file, and / or, determine a second part of the second file content that is different from the content of the first file; The first portion of the first file content in the second target page is marked, and / or the second portion of the second file content in the second target page is marked.

6. The method according to claim 5, characterized in that, The method further includes: Send a second operation message to the server, wherein the second operation message is used to trigger the server to modify the marked first part and / or second part; merge the modified first part and / or second part with the same part in the first file content and the second file content to obtain merged code file content, and use the merged code file content to update the second target page; Receive and display the updated second target page sent by the server.

7. The method according to claim 6, characterized in that, The updated second target page includes a first area and a second area. The contents of the first file and the second file are displayed in the first area, and the contents of the merged code file are displayed in the second area.

8. The method according to claim 1, characterized in that, The method further includes: Obtain the URL information entered in the search box and send a search request to the server, wherein the search request includes the URL information for determining information about the search file tree; Receive the information about the search file tree returned by the server; The content of the search file tree is rendered based on the information of the search file tree to obtain the display content of the search file tree.

9. The method according to claim 8, characterized in that, The information of the search file tree includes: the directory of the first-level folder, wherein the first-level folder matches the target ID carried in the URL information; The process of rendering the information of the search file tree to obtain the display content of the search file tree includes: The directory structure of the first-level folder is rendered to obtain each of the first-level folders.

10. The method according to claim 9, characterized in that, The method further includes: Monitor query operations on each of the aforementioned first-level folders; In response to the query operation, a resource query request is sent to the server; wherein, the resource query request includes an identifier of the target first-level folder for which the query operation is performed, for querying each file and subfolder under the target first-level folder; Receive the files and subfolders under the target first-level folder returned by the server; The files and subfolders under the target first-level folder are rendered to obtain the search file tree.

11. The method according to claim 9, characterized in that, The method further includes: Periodically retrieve a portion of the files and / or a portion of the subfolders from the server in the first-level folder; The selected files and / or subfolders are rendered to obtain the search file tree.

12. The method according to claim 8, characterized in that, The information of the search file tree includes: each folder that matches the target ID carried in the URL information, and each file and subfolder under each folder; The process of rendering the information of the search file tree to obtain the display content of the search file tree includes: The folders that match the target ID, as well as the files and subfolders under each folder, are rendered to obtain the search file tree.

13. The method according to any one of claims 10-12, characterized in that, The method further includes: Retrieve the search keywords entered in the search box; The search keywords are matched with the filenames of each file in the search file tree to determine the target file whose filename matches the search keywords; The target file is marked.

14. The method according to claim 13, characterized in that, The method further includes: If no target file matching the search keyword exists in the search file tree, then all folders and files in the search file tree are hidden.

15. The method according to claim 13, characterized in that, The method further includes: Monitor the triggering operations on the marked target files; In response to a trigger operation on the marked target file, the file content corresponding to the target file is displayed in the interface.

16. The method according to claim 15, characterized in that, The interface includes a first visible area and a second visible area. The search file tree is displayed in the first visible area, and the file content corresponding to the target file is displayed in the second visible area.

17. The method according to claim 8, characterized in that, Before obtaining the URL information entered by the user in the search box, the method further includes: Display the setting format corresponding to the URL information.

18. A method for online code editing, characterized in that, Applied to a server, the method includes: Receive the link to the first code file sent by the client; Based on the link, determine the identifier of the first code file, and query each candidate code file corresponding to the identifier; Based on the file content of each of the candidate code files, generate the first target page; Return the first target page to the client; The system receives a first operation message sent by the client, responds to the first operation message, determines a target code file from each of the candidate code files, and edits the file content of the target code file to update the first target page using the edited file content of the target code file; The updated first target page is sent to the client.

19. The method according to claim 18, characterized in that, The first target page includes multiple areas, each area is used to display the file content of a candidate code file, and each area displays a selection control; the first operation information includes an identifier of the target area, which is determined by monitoring the triggering operation of the selection control displayed in the multiple areas, based on the area in the multiple areas where the triggering operation is performed; The step of determining the target code file from each of the candidate code files in response to the first operation information includes: Based on the identifier of the target area, determine the file content of the candidate code files displayed in the target area; The target code file is determined based on the file content of the candidate code files displayed in the target area.

20. The method according to claim 18 or 19, characterized in that, The first target page also displays an upload control and / or a cancel control, and the method further includes: Receive the trigger operation sent by the client for the upload control, and in response to the trigger operation for the upload control, save the updated target code file; or, The system receives a trigger operation from the client for the cancel control and, in response to the trigger operation, restores the updated content of the target code file to the original content of the target code file.

21. The method according to claim 18, characterized in that, The method further includes: Receive the code file query request sent by the client, and in response to the code file query request, obtain the second code file and the third code file; The second target page is generated based on the first file content of the second code file and the second file content of the third code file; Return a second target page to the client; wherein the second target page is used to display and compare the content of the first file and the content of the second file to determine a first part of the content of the first file that is different from the content of the second file, and / or to determine a second part of the content of the second file that is different from the content of the first file, and mark the first part of the content of the first file, and / or to mark the second part of the content of the second file.

22. The method according to claim 21, characterized in that, The method further includes: Receive the second operation information sent by the client, and in response to the second operation information, modify the marked first part and / or the second part; The modified first part and / or second part are merged with the same parts in the content of the first file and the content of the second file to obtain the merged code file content; The second target page is updated using the content of the merged code file; The updated second target page is sent to the client.

23. The method according to claim 18, characterized in that, The method further includes: Receive search request information sent by the client, wherein the search request information includes URL information entered in the search box; In response to the search request information, the information of the search file tree is determined based on the URL information; The information of the search file tree is returned to the client, wherein the information of the search file tree is used to render the display content of the search file tree.

24. The method according to claim 23, characterized in that, The step of determining the information of the search file tree based on the URL information includes: The URL information is parsed to determine the target ID carried in the URL information; Identify the top-level folder that matches the target ID; The directory of the first-level folder is determined as the information of the search file tree.

25. The method according to claim 24, characterized in that, The method further includes: Receive a first resource query request sent by the client, wherein the first resource query request includes an identifier of the target first-level folder to perform the query operation; Based on the identifier of the target first-level folder, query each file and subfolder under the target first-level folder; Send each file and subfolder under the target first-level folder to the client, wherein each file and subfolder under the target first-level folder is used to render the search file tree.

26. An online code editing device, characterized in that, Applied to a client, the device includes: A sending module is used to send a link to a first code file to a server; wherein the link is used to determine the identifier of the first code file, query each candidate code file corresponding to the identifier, and generate a first target page based on the file content of each candidate code file; A receiving module is used to receive and display the first target page returned by the server; The sending module is further configured to send first operation information to the server, wherein the first operation information is configured to determine a target code file from each of the candidate code files and edit the file content of the target code file so as to update the first target page using the edited file content of the target code file; The receiving module is also used to receive and display the updated first target page sent by the server.

27. An online code editing device, characterized in that, Applied to a server, the device includes: The receiving module is used to receive the link to the first code file sent by the client; The query module is used to determine the identifier of the first code file based on the link, and to query each candidate code file corresponding to the identifier; The generation module is used to generate a first target page based on the file content of each of the candidate code files; The sending module is used to return the first target page to the client; The receiving module is also used to receive the first operation information sent by the client; The determination module is configured to, in response to the first operation information, determine the target code file from each of the candidate code files, and edit the file content of the target code file to update the first target page using the edited file content of the target code file; The sending module is also used to send the updated first target page to the client.

28. A client application, characterized in that, include: processor; Memory for storing the executable instructions of the processor; The processor is configured to invoke and execute executable instructions stored in the memory to implement the online code editing method as described in any one of claims 1-17.

29. A server, characterized in that, include: processor; Memory for storing the executable instructions of the processor; The processor is configured to invoke and execute executable instructions stored in the memory to implement the online code editing method as described in any one of claims 18-25.

30. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the program implements the online code editing method as described in any one of claims 1-17, or implements the online code editing method as described in any one of claims 18-25.

Images