An algorithmic animation generation method and system based on proxy pattern and front-end / back-end separation

Abstract

This disclosure belongs to the field of Internet technology, specifically relating to a method and system for generating algorithm animations based on a proxy model and front-end / back-end separation. The method includes: loading an algorithm animation display page through a front-end server and mapping the animation display page to a preset position; generating custom code in the front-end server based on required code information and sending a code submission request to a back-end server; the back-end server receiving the code submission request from the front-end server, processing the received code, generating code animation data, and returning the generated code animation data to the front-end server; and the front-end server receiving the code animation data returned by the back-end server and generating an algorithm animation based on the mapped preset position.

Description

Technical Field

[0001] This disclosure belongs to the field of Internet technology, specifically relating to an algorithm animation generation method and system based on proxy pattern and front-end / back-end separation. Background Technology

[0002] The statements in this section are merely background information relating to this disclosure and do not necessarily constitute prior art.

[0003] With the development of Internet technology, computer technology has become increasingly popular. Algorithms play a crucial role in computer technology, but learning algorithms is tedious and difficult.

[0004] According to the inventor, there is a lack of research in the existing technology on reducing the difficulty of algorithm learning. Summary of the Invention

[0005] To address the aforementioned issues, this disclosure proposes an algorithm animation generation method and system based on the proxy pattern and front-end / back-end separation. Utilizing the proxy pattern, front-end Vue component technology, back-end server technology, and front-end / back-end separation technology, the method generates animation data from algorithm code and then generates viewable algorithm animations based on this data. This transforms the algorithm into a visually appealing animation for viewing and learning, effectively reducing the difficulty of learning the algorithm.

[0006] According to some embodiments, the first solution of this disclosure provides an algorithmic animation generation method based on proxy pattern and front-end / back-end separation, adopting the following technical solution:

[0007] An algorithmic animation generation method based on proxy pattern and front-end / back-end separation includes:

[0008] The algorithm animation display page is loaded by the front-end server and mapped to a preset position;

[0009] Based on the information required by the code, generate custom code in the front-end server and send a code submission request to the back-end server;

[0010] The backend server receives the code submission request initiated by the frontend server, processes the received code, generates code animation data, and returns the generated code animation data to the frontend server.

[0011] The front-end server receives the code animation data returned by the back-end server and generates algorithm animations by combining the mapped preset positions.

[0012] As a further technical limitation, the front-end server performs initialization before loading the algorithm animation display page. Specifically, the front-end server sends... Nginx The server requests static resources, using axiosWhen requesting data resources from the backend server, the frontend server first requests data resources from the backend server. Nginx The server initiates a request. Nginx The server request is forwarded to the corresponding backend server for processing.

[0013] As a further technical limitation, during the loading of the algorithm animation display page, the algorithm animation is played through the algorithm animation component on the front-end server. Vue Components, the Vue The component uses canvas Canvas DOM Elements, through JavaScript Including canvas Canvas DOM The algorithmic animation is drawn and generated for the area where the element is located.

[0014] Furthermore, in the process of mapping the animation display page to a preset location, routing is used to map each animation display page component to its corresponding location, i.e., using the... Vue Routing plugin in the component framework Vue - Router To map the algorithm animation display page loaded and generated in the front-end server, according to Vue The routing rules are used to create an algorithm animation display on each page. Vue The component matching maps the algorithm animation display page to the matching preset position.

[0015] As a further technical limitation, users select the running mode, programming language, set code execution labels, and input test cases to write custom code; the front-end server initiates... POST ask, Nginx The server forwards the request to the controller corresponding to the backend server, and sends a code submission request to the backend server.

[0016] As a further technical limitation, the backend server obtains the user... POST The request includes the programming language type information; the backend server is started based on this information. API To create the corresponding Docker The container, the backend server reads during the container creation process. POST The execution mode and code execution tag sent in the request are stored in the database; the backend server reads them. POSTThe user-defined code in the request injects user-input test cases as raw data into the code file as data structure proxy class. The code file is then saved to a data volume created by the container for internal access and execution. After the program finishes running, the sequence of changes to the algorithm data structure stored in the proxy class will be output. The backend server program captures this output information, and the user will see the captured data structure change sequence output information. POST The raw test sample data sent by the user is packaged as follows: JavaScript The information captured by the backend server's service program and the output information captured by the user regarding changes in the data structure are both used as objects. JavaScript The value in the object.

[0017] As a further technical limitation, the front-end server from JSON The data is parsed from the change sequence information and original data of the proxy class data structure in the custom code. Both the change sequence and the original data are in the following format: JavaScript Array; based on the parsed data, use JavaScript Operating the server DOM Animations are generated by moving elements.

[0018] According to some embodiments, the second solution of this disclosure provides an algorithmic animation generation system based on proxy mode and front-end / back-end separation, adopting the following technical solution:

[0019] An algorithmic animation generation system based on proxy pattern and front-end / back-end separation includes:

[0020] The front-end server initialization module is configured to load the algorithm animation display page through the front-end server and map the animation display page to a preset position.

[0021] A custom code module is configured to generate custom code in the front-end server based on the information required by the code and send a code submission request to the back-end server.

[0022] The backend server processing module is configured to receive code submission requests from the frontend server, process the received code, generate code animation data, and return the generated code animation data to the frontend server.

[0023] The algorithm animation generation module is configured to receive code animation data returned by the backend server from the frontend server and generate algorithm animations by combining the mapped preset positions.

[0024] According to some embodiments, a third aspect of this disclosure provides a computer-readable storage medium, employing the following technical solution:

[0025] A computer-readable storage medium having a program stored thereon that, when executed by a processor, implements the steps of the algorithmic animation generation method based on proxy pattern and front-end / back-end separation as described in the first aspect of this disclosure.

[0026] According to some embodiments, the fourth solution of this disclosure provides an electronic device that adopts the following technical solution:

[0027] An electronic device includes a memory, a processor, and a program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps in the algorithm animation generation method based on proxy pattern and front-end / back-end separation as described in the first aspect of this disclosure.

[0028] Compared with the prior art, the beneficial effects of this disclosure are as follows:

[0029] This disclosure proposes a method for generating algorithm animations using a proxy pattern, based on a front-end and back-end separation design. The changes in the data structure in the code are displayed in the form of animation, forming a complete algorithm animation corresponding to the code program. The front-end server is responsible for generating and displaying the animation, while the back-end is responsible for executing the code. The front-end and back-end interact with each other through network requests. The division of labor is clear, and the maintainability and scalability are very high. Attached Figure Description

[0030] The accompanying drawings, which form part of this disclosure, are used to provide a further understanding of this disclosure. The illustrative embodiments of this disclosure and their descriptions are used to explain this disclosure and do not constitute an undue limitation of this disclosure.

[0031] Figure 1 This is a flowchart of the algorithm animation generation method based on proxy pattern and front-end / back-end separation in Embodiment 1 of this disclosure;

[0032] Figure 2 This is a flowchart of the user-defined code stage in Embodiment 1 of this disclosure;

[0033] Figure 3 This is a flowchart of the backend processing code generating data stage in Embodiment 1 of this disclosure;

[0034] Figure 4 This is a schematic diagram of the custom code animation display interface and algorithm animation in Embodiment 1 of this disclosure;

[0035] Figure 5 This is a structural block diagram of the algorithm animation generation system based on proxy pattern and front-end / back-end separation in Embodiment 2 of this disclosure. Detailed Implementation

[0036] The present disclosure will be further described below with reference to the accompanying drawings and embodiments.

[0037] It should be noted that the following detailed descriptions are illustrative and intended to provide further explanation of this disclosure. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this disclosure pertains.

[0038] It should be noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the exemplary embodiments according to this disclosure. As used herein, the singular form is intended to include the plural form as well, unless the context clearly indicates otherwise. Furthermore, it should be understood that when the terms “comprising” and / or “including” are used in this specification, they indicate the presence of features, steps, operations, devices, components, and / or combinations thereof.

[0039] Where there is no conflict, the embodiments and features described herein can be combined with each other.

[0040] Example 1

[0041] Embodiment 1 of this disclosure introduces an algorithmic animation generation method based on proxy pattern and front-end / back-end separation.

[0042] like Figure 1 The algorithmic animation generation method shown includes:

[0043] Front-end initialization phase: The front-end server initializes and loads the algorithm animation display page, and uses routing to map each page component to the corresponding location;

[0044] User-defined code stage: Users select the running mode, programming language, set code execution labels, input test cases, write custom code, and send a code submission request to the backend server;

[0045] Backend code processing and data generation stage: After receiving the code from the frontend, the backend server processes the code and returns data that generates code animations in a predefined format;

[0046] Front-end server generates algorithm animation stage: The front-end server receives data for generating code animation and uses this data to generate algorithm animation.

[0047] As one or more implementation methods, the front-end initialization phase includes: the front-end server initializing and loading the algorithm animation display page, and using routing to map each page component to the corresponding location.

[0048] Specifically, during the process of initializing and loading the algorithm animation display page by the front-end server, the front-end server sends... Nginx The server requests static resources; the front-end server uses... axiosWhen requesting data resources from the backend server, that is, when the frontend server requests data resources from the backend server, it first sends a request to the backend server. Nginx The server initiates a request. Nginx The server request is forwarded to the corresponding backend service for processing; frontend Vue Algorithm animation component.

[0049] front end Vue The algorithm animation component specifically includes:

[0050] The front-end algorithm animation component is used to play algorithm animations. Vue Component, which contains a canvas canvas DOM Elements, can be used with J avaScript exist canvas The algorithm animation is drawn and generated within the area containing the element. To simplify the generation of algorithm animations, various operation animations for arrays, trees, and graphs can be encapsulated. After encapsulation, the front-end only needs to call the encapsulated methods to generate a frame of the animation when displaying the algorithm animation. Multiple frames can be strung together to form a complete algorithm animation. The underlying principle of encapsulating animations is operation... canvas canvas DOM Elements are drawn, and finally, an animation is generated.

[0051] In the process of using routing to map each page component to its corresponding location, Vue Routing plugins in the framework Vue - Router To map all pages on the frontend server; to load routes using lazy loading to improve page load speed; the frontend will use Vue - Router The plugin will be in accordance with Vue Routing rules match each page Vue Components Vue Routing rules can also be nested, offering great flexibility and making it easy to build single-page applications. Lazy loading of routes allows components to be loaded only when needed, improving application performance and user experience.

[0052] As one or more implementation methods, the flowchart of the user-defined code phase is as follows: Figure 2 As shown, users need to input a lot of information when writing custom code and use proxy classes to write the code. The specific process is as follows:

[0053] First, the user enters the necessary information required to submit the code;

[0054] (1) User selects operating mode

[0055] There are three running modes: array, tree, and graph. The choice of running mode depends on the type of proxy class in the user program. If the code uses a tree proxy class and the final target animation is an algorithmic animation of a tree data structure, then the selected running mode should also be tree.

[0056] (2) User selects programming language

[0057] Users can write code in different programming languages, and algorithm animation is supported. Java , C++ , Python After the code is sent to the backend server, a runtime environment with the corresponding programming language will be created based on the user's selected programming language. Docker container.

[0058] (3) User inputs code to execute label

[0059] The execution label in this execution table is used to briefly describe the algorithm in the code. It is mainly for marking purposes and can be filled in arbitrarily according to needs.

[0060] (4) User input test cases

[0061] The test samples input by the user will be used to initialize the raw data of the data structures in the user-defined code.

[0062] Secondly, users write custom code;

[0063] (1) Design the algorithm and write the code using a proxy class.

[0064] Users should first consider the data structures required in the algorithm and implement the algorithm using arrays, trees, or graph proxy classes.

[0065] (2) Modify data using specific methods provided by the proxy class.

[0066] These methods can record and store operations performed in the proxy class, such as adding or modifying data, in memory as a sequence, and output all this information when the program ends.

[0067] The following lists the methods provided in the array, tree, and graph proxy classes:

[0068] array

[0069] swap ( index 1, index 2): Swap the indices in the array. index 1 and index Elements of 2.

[0070] add (index , value ): at array index index Add a value to the position value Element.

[0071] get ( index ): Get array index index Element.

[0072] remove ( index ): Delete array index is index Element.

[0073] Tree( index The position of a node in a complete binary tree (the tree does not have to be a complete binary tree, but the strategy of marking the position of elements in the tree is to use a complete binary tree) is used.

[0074] get ( index ): Get the position in the tree index Element.

[0075] swap ( index 1, index 2): The position in the swap tree is index 1 and index Elements of 2.

[0076] insert ( index , value In the tree index Insert a new leaf node into the empty leaf node at position , and the value of this leaf node is... value .

[0077] remove ( index In the tree index Delete the leaf node at the specified position.

[0078] picture

[0079] emp ( index ): The number is index The nodes in the graph are marked as emphasized states.

[0080] unemp ( index ): The number is index The nodes in the graph are marked as non-emphasis states.

[0081] link ( index 1, index 2): Number the diagram as shownindex 1 and index In graph 2, the edges defined by the nodes are marked as emphasized.

[0082] unlink ( index 1, index 2): Number the diagram as shown index 1 and index In graph 2, the edges defined by the nodes are marked as non-emphasis states.

[0083] addPoint ( position 1, position 2): The coordinates in the figure are ( position 1, position Add a point at position 2).

[0084] addLine ( position 1, position 2, position 3, position 4): The coordinates in the graph are ( position 1, position 2) and ( position 3, position 4) Add an edge between the points.

[0085] (3) Send a code submission request to the backend server

[0086] The front-end server will initiate POST ask, Nginx The server will forward the request to the controller corresponding to the backend service, and then the server will process the code and return the animation data needed to generate the animation.

[0087] As one or more implementation methods, the flowchart for the backend processing code to generate data stage is as follows: Figure 3 As shown, specifically:

[0088] First, create a code execution environment. Docker container;

[0089] The backend server will first obtain the user POST The request includes the programming language type information; the backend service is started based on this programming language information. API To create the corresponding Docker Containers. The backend server also reads during the container creation process. POST The execution mode and code execution tag sent in the request are stored in the database.

[0090] Secondly, save the code as a file to the data volume created by the container, and run the code in the container;

[0091] The backend server will read POST The request takes user-defined code, and then injects the user-inputted test cases as raw data into the code file as data structure proxy class. After that, the code file is saved to a data volume created by the container so that the container can access and execute the code.

[0092] Next, after the program finishes running, it retrieves the data for generating the code animation and destroys the container;

[0093] After the program finishes running, the change sequence of the algorithm data structure stored in the proxy class will be output. This change sequence is one of the important data sets used to generate the algorithm animation. The backend server program will capture the output information. The user-defined code program can be destroyed after execution. docker Containers save server disk resources.

[0094] Finally, the backend server encapsulates the data used to generate the code animation into... JSON ;

[0095] Users will capture the output information of the data structure change sequence and POST The raw test sample data sent by the user is packaged as follows: JavaScript Both types of information are treated as objects. JavaScript The keys corresponding to the two types of information in the object can be agreed upon as appropriate, but it is essential to ensure that the front-end browser adheres to this agreement.

[0096] As one or more implementation methods, the specific process of the front-end server generating algorithm animation stage is as follows:

[0097] First, the received JSON Data parsing;

[0098] front end from JSON The data parsing function parses the sequence of changes to the proxy class data structure within the custom code, as well as the original data. Both the sequence of changes to the proxy class data structure and the original data are in the following format: JavaScript Array.

[0099] Secondly, based on the parsed data, use JavaScript Operating the server DOM Animation is generated by moving elements;

[0100] During the animation generation process, JavaScript Operation DOM The object is canvas Canvas element. When generating algorithmic animations, it first reads... JSON The parsed raw data is then used according to the type of data structure. JavaScriptProvided API exist canvas Draw what the data structure looks like at the beginning of the code algorithm, and then based on... JSON The parsed data structure changes the sequence of animation frames, and animation transition effects are added between each frame. By connecting each frame of the animation and playing it together, a viewable algorithmic animation can be formed.

[0101] The design of the data structure proxy class and the server architecture in this embodiment are implemented as follows:

[0102] Backend

[0103] 1. Design of Data Structure Proxy Class

[0104] (1) Design and implementation of array proxy class

[0105] Now Java In language ArrayList Let's take a proxy class as an example to discuss the specific implementation ideas and details of a proxy class. First, we write a class named... ArrayList In custom ArrayList Add the following variable to: one java.util Under the lease ArrayList Variable, variable name arr A generic type is String Type java.util.ArrayList Variable, variable name operations Then in the custom ArrayList Write the necessary methods, for example get method, swap method, add method, remove Methods, proxy classes get , swap , add , remove The method is to call java.util Under the lease ArrayList It's implemented using methods within variables, but a process is performed before the method is called. operations The code records the operations performed, such as swapping the elements at index 1 and index 2 during program execution, or calling a method. swap (1,2), operations It will be recorded as a string. swap (1,2)”.

[0106] (2) Design and implementation of tree proxy class

[0107] It can be seen that recording the operation sequence of data structures similar to arrays is relatively simple. If we want to record the operation sequence of trees and graphs, we need to find new methods.

[0108] Write a class to animate a tree. BinaryTree , operations Variables are used to record operations performed on the tree. The basic tree operations include insertion, deletion, swapping, and retrieval. (This is done when writing code.) insert , remove , swap , get Methods, when these methods are called, write the operations to... operations Recording these operations requires finding a way to accurately locate the positions of nodes in the tree, and a complete binary tree provides a good approach. A complete binary tree can be represented as an array, where each index of the array can locate a node in the tree. If a node is empty, the corresponding index is set to a special character. If the left child of the node at index 5 is empty, and a new left child is inserted, with the node's index set to 1, then... 操作 Add the string " to the variable 插入 (10,1)" (The index of the parent node in the complete binary tree is...) n The index of the left child node is 2. n The index of the right child node is 2. n +1). If we want to swap the positions of the node with index 5 and its left child, we will move to... 操作 Add the string " to the variable 交换 (5,10)". To delete the node with index 5 (requiring that the left and right subtrees of the node to be deleted are empty), it will... 操作 Add the string " to the variable 移除 (5)". To retrieve the value of the node with index 5, you would need to... 操作 Add the string " to the variable 获取 (5)”.

[0109] (3) Design and implementation of graph proxy class

[0110] Regarding the animation of graphs, it is agreed that all 2D graphs exist in a Cartesian coordinate system. Each point in the graph can be represented by two numbers, and lines in the graph can be represented by the coordinates of two points. Based on these constraints, changes to any point or line in the graph can be recorded. A [defined...] 图 Class, containing 操作 Variables are used to record operations performed on the graph. For example, if a point is added at coordinates (1,2) on the graph, then... 操作 Add the string " to the variable 添加点 (1,2)”, if you want to add a line segment between the points with coordinates (1,2) and (3,4), then... 操作 Add the string " to the variable 添加线(1,2,3,4), deleting line segments and deleting points is similar to the previous description.

[0111] 2. Server architecture design and implementation

[0112] (1) Server execution implementation

[0113] First, the request sent from the front end will first go through... Nginx Perform request forwarding. 网络 Terminal use Vue Packaged 发布 Folders are also Nginx The static resources to be processed will be created on the server by the backend after receiving a request from the frontend containing user-defined code. 数据 The file, and the one sent from the front end. JSON User-defined raw data writing in the data 数据 After creating a file, a code file is created, and the user's code is written into this file. There is a restriction when the user submits code: the data structures in the code, such as lists, binary trees, etc., must be proxy classes provided by this product. Any modifications to these proxy class objects during code execution must also use the methods provided by the proxy classes. These proxy classes each have a... 字符串 Type 操作 An array is used to record all the operations performed by these classes in the program; the proxy class also has the ability to generate... 数据 The automatic data injection feature in the file is implemented during proxy class initialization. 数据 The data in the file is stored in the class, and will be cleared when the program terminates. 操作 and raw data JSON The format is output to the console. After the server writes all the code and data in the request to the file, assuming the user submitted... Java Code (users can submit code in different programming languages, and the backend can use it based on the programming language). Docker (Generate containers with different images) At this point, the server will use... Docker of openjdk A container is generated from the image; the code files generated above are mounted into the container, and... Docker The code runs within the container. As mentioned earlier, once the code finishes running, it will generate a... JSON String, this JSON The string records the sequence of operations performed on the data structure in the program and the original data information, which the backend receives. JSON The string is then returned to the front end, which uses it for... JSON The sequence of operations in the string is used to generate an animation of the algorithm that is displayed on the page.

[0114] (2) Server security design and implementation

[0115] It is well known that allowing users to upload and execute their code on a server poses significant security risks. Malicious users may submit malicious code, which, once executed, could cause unimaginable catastrophic consequences for the machine. To avoid this, using... Docker To isolate the code execution environment from the server's own environment, providing the running code with... Docker Only one container is allocated. 中央处理器 This way, even if malicious code exhausts the resources... Docker Used 中央处理器 Resources will not be affected. Docker The use of server functions outside of containers, because of other server functions and Docker They are using two completely different ones. 中央处理器 They do not interfere with each other and have no direct connection. If the user's code causes [problems] during execution... Docker If a container crashes, the server will delete the code that caused the Docker container to crash and restart the Docker container. During the restart process, code that has already been committed to the server is not allowed to run. It must wait for the Docker container to restart successfully before running the code in sequence. This design gives the backend server a certain degree of self-healing capability.

[0116] front-end part

[0117] 3. Submit custom code

[0118] (1) Enter the necessary information required to submit the code and write the custom code.

[0119] Front-end usage Vue Framework setup and usage Vue To develop 网络 All pages on the front-end server will provide the necessary information for entering and submitting the code. Vue Input components and input custom code Vue Input component. Vue All components are encapsulated in a single-page application for easier engineering development.

[0120] 4. Send the code to the backend.

[0121] Front-end usage axios send 超文本传输协议 The request encapsulates the user-submitted information and custom code within... POST The request is sent to the backend server.

[0122] 5. Animation Showcase Stage

[0123] Frontend received JSON First, convert the string to... JavaScript An object is used to extract its original data information and the sequence of changes in its data structure based on the key. The front-end encapsulates animation generation; the principle of this encapsulation is to... Vue Operations in the algorithm animation component 文档对象模型 element 画布 The code is modularized, and a new interface named [codename] is provided externally. mvns of JavaScript Array variables only need to be specified in the command prompt. mvns By adding changes to the corresponding data structure in an array variable, frame-by-frame playback of the algorithm animation can be achieved, such as... Figure 4 The image shows a frame-by-frame animation of the tree inorder traversal algorithm.

[0124] This embodiment implements a data structure proxy class based on the proxy pattern, which can output the sequence of data structure changes after the program finishes running; it implements a data structure proxy class based on the proxy pattern. Docker The server security architecture is encapsulated; the generation operation of front-end algorithm animation is encapsulated, forming a simple and easy-to-use frame-by-frame playback method for algorithm animation; and an interactive algorithm animation display with front-end and back-end separation is realized.

[0125] Example 2

[0126] Embodiment 2 of this disclosure introduces an algorithmic animation generation system based on the proxy pattern and front-end / back-end separation.

[0127] like Figure 5 The illustrated algorithmic animation generation system based on proxy pattern and front-end / back-end separation includes:

[0128] The front-end server initialization module is configured to load the algorithm animation display page through the front-end server and map the animation display page to a preset position.

[0129] A custom code module is configured to generate custom code in the front-end server based on the information required by the code and send a code submission request to the back-end server.

[0130] The backend server processing module is configured to receive code submission requests from the frontend server, process the received code, generate code animation data, and return the generated code animation data to the frontend server.

[0131] The algorithm animation generation module is configured to receive code animation data returned by the backend server from the frontend server and generate algorithm animations by combining the mapped preset positions.

[0132] The detailed steps are the same as those of the algorithm animation generation method based on proxy mode and front-end / back-end separation provided in Example 1, and will not be repeated here.

[0133] Example 3

[0134] Embodiment 3 of this disclosure provides a computer-readable storage medium.

[0135] A computer-readable storage medium having a program stored thereon, which, when executed by a processor, implements the steps in the algorithmic animation generation method based on proxy pattern and front-end / back-end separation as described in Embodiment 1 of this disclosure.

[0136] The detailed steps are the same as those of the algorithm animation generation method based on proxy mode and front-end / back-end separation provided in Example 1, and will not be repeated here.

[0137] Example 4

[0138] Embodiment 4 of this disclosure provides an electronic device.

[0139] An electronic device includes a memory, a processor, and a program stored in the memory and executable on the processor. When the processor executes the program, it implements the steps in the algorithm animation generation method based on proxy pattern and front-end / back-end separation as described in Embodiment 1 of this disclosure.

[0140] The detailed steps are the same as those of the algorithm animation generation method based on proxy mode and front-end / back-end separation provided in Example 1, and will not be repeated here.

[0141] The above description is merely a preferred embodiment of this disclosure and is not intended to limit this disclosure. Various modifications and variations can be made to this disclosure by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. An algorithmic animation generation method based on proxy pattern and front-end / back-end separation, characterized in that, include: The algorithm animation display page is loaded by the front-end server and mapped to a preset position; Based on the information required by the code, generate custom code in the front-end server and send a code submission request to the back-end server; The backend server receives the code submission request initiated by the frontend server, processes the received code, generates code animation data, and returns the generated code animation data to the frontend server. Backend server read POST The user-defined code in the request injects user-input test cases as raw data into the code file as data structure proxy class. The code file is then saved to a data volume created by the container for internal access and execution. After the program finishes running, the sequence of changes to the algorithm data structure stored in the proxy class will be output. The backend server program captures this output information, and the user will see the captured data structure change sequence output information. POST The raw test sample data sent by the user is packaged as follows: JavaScript The information captured by the backend server's service program and the output information captured by the user regarding changes in the data structure are both used as objects. JavaScript The values ​​in the object; the backend server encapsulates the data used to generate the code animation into JSON; The front-end server receives the code animation data returned by the back-end server and generates an algorithm animation based on the mapped preset positions; the front-end server then... JSON The data is parsed from the change sequence information and original data of the proxy class data structure in the custom code. Both the change sequence and the original data are in the following format: JavaScript Array; based on the parsed data, use JavaScript Operating the server DOM Animations are generated by moving elements.

2. The algorithmic animation generation method based on proxy pattern and front-end / back-end separation as described in claim 1, characterized in that, Before loading the algorithm animation display page, the front-end server performs initialization, specifically: the front-end server sends... Nginx The server requests static resources, using axios When requesting data resources from the backend server, the frontend server first requests data resources from the backend server. Nginx The server initiates a request. Nginx The server request is forwarded to the corresponding backend server for processing.

3. The algorithmic animation generation method based on proxy pattern and front-end / back-end separation as described in claim 1, characterized in that, During the loading of the algorithm animation display page, the algorithm animation is played through the algorithm animation component on the front-end server. Vue Components, the Vue The component uses canvas Canvas DOM Elements, through JavaScript Including canvas Canvas DOM The algorithmic animation is drawn and generated for the area where the element is located.

4. The algorithmic animation generation method based on proxy pattern and front-end / back-end separation as described in claim 3, characterized in that, In the process of mapping the animation display page to a preset location, routing is used to map each animation display page component to its corresponding location, that is, using the... Vue Routing plugin in the component framework Vue-Router To map the algorithm animation display page loaded and generated in the front-end server, according to Vue The routing rules are used to create an algorithm animation display on each page. Vue The component matching maps the algorithm animation display page to the matching preset position.

5. The algorithmic animation generation method based on proxy pattern and front-end / back-end separation as described in claim 1, characterized in that, Users select the running mode, programming language, set code execution labels, and input test cases to write custom code; the front-end server initiates... POST ask, Nginx The server forwards the request to the controller corresponding to the backend server, and sends a code submission request to the backend server.

6. The algorithmic animation generation method based on proxy pattern and front-end / back-end separation as described in claim 1, characterized in that, Backend server retrieves user POST The request includes the programming language type information; the backend server is started based on this information. API To create the corresponding Docker The container, the backend server reads during the container creation process. POST The execution mode and code execution tag sent in the request are stored in the database.

7. An algorithmic animation generation system based on proxy pattern and front-end / back-end separation, characterized in that, include: The front-end server initialization module is configured to load the algorithm animation display page through the front-end server and map the animation display page to a preset position. A custom code module is configured to generate custom code in the front-end server based on the information required by the code and send a code submission request to the back-end server. The backend server processing module is configured to receive code submission requests from the frontend server, process the received code, generate code animation data, and return the generated code animation data to the frontend server. Backend server read POST The user-defined code in the request injects user-input test cases as raw data into the code file as data structure proxy class. The code file is then saved to a data volume created by the container for internal access and execution. After the program finishes running, the sequence of changes to the algorithm data structure stored in the proxy class will be output. The backend server program captures this output information, and the user will see the captured data structure change sequence output information. POST The raw test sample data sent by the user is packaged as follows: JavaScript The information captured by the backend server's service program and the output information captured by the user regarding changes in the data structure are both used as objects. JavaScript The values ​​in the object; the backend server encapsulates the data used to generate the code animation into JSON; The algorithm animation generation module is configured so that the front-end server receives code animation data returned by the back-end server and generates algorithm animations based on the mapped preset positions; the front-end server receives... JSON The data is parsed from the change sequence information and original data of the proxy class data structure in the custom code. Both the change sequence and the original data are in the following format: JavaScript Array; based on the parsed data, use JavaScript Operating the server DOM Animations are generated by moving elements.

8. A computer-readable storage medium having a program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps in the algorithm animation generation method based on proxy pattern and front-end / back-end separation as described in any one of claims 1-6.

9. An electronic device comprising a memory, a processor, and a program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps in the algorithm animation generation method based on proxy mode and front-end / back-end separation as described in any one of claims 1-6.

Images