CN114791803A - Algorithmic animation generation method and system based on proxy mode and front-end and back-end separation - Google Patents

Abstract

The disclosure belongs to the technical field of internet, and particularly relates to an algorithm animation generation method and system based on agent mode and front-back end separation, which comprises the following steps: loading an algorithm animation display page through a front-end server, and mapping the animation display page to a preset position; generating a self-defined code in a front-end server based on the information required by the code, and initiating a code submitting request to a back-end server; the back-end server receives a code submitting request initiated by the front-end server, processes the received code, generates code animation data and returns the generated code animation data to the front-end server; and the front-end server receives the code animation data returned by the back-end server and generates algorithm animation by combining the mapped preset position.

Description

Algorithmic animation generation method and system based on proxy mode and front-end and back-end separation

technical field

The present disclosure belongs to the field of Internet technologies, and in particular relates to an algorithm animation generation method and system based on an agent mode and separation of front and back ends.

Background technique

The statements in this section merely provide background information related to the present disclosure and do not necessarily constitute prior art.

With the development of Internet technology, computer technology has become more and more popular. Algorithms play a pivotal role in computer technology, but algorithm learning is boring and difficult.

As far as the inventors know, there is a lack of relevant research on reducing the difficulty of algorithm learning in the prior art.

SUMMARY OF THE INVENTION

In order to solve the above problems, the present disclosure proposes an algorithm animation generation method and system based on proxy mode and front-end and back-end separation. Animation data, generate watchable algorithm animation according to the animation data, and convert the algorithm into a comfortable animation for people to watch and learn, which effectively reduces the difficulty of algorithm learning.

According to some embodiments, the first solution of the present disclosure provides an algorithm animation generation method based on proxy mode and front-end and back-end separation, and adopts the following technical solutions:

An algorithm animation generation method based on proxy mode and separation of front and back ends, including:

Load the algorithm animation display page through the front-end server, and map the animation display page to a preset position;

Generate custom code in the front-end server based on the information required by the code, and initiate a code submission request to the back-end server;

The back-end server receives the code submission request initiated by the front-end server, processes the received code, generates code animation data, and returns the generated code animation data to the front-end server;

The front-end server receives the code animation data returned by the back-end server, and generates algorithm animation in combination with the mapped preset positions.

As a further technical limitation, before loading the algorithm animation display page, the front-end server is initialized, specifically: the front-end server requests static resources from the Nginx server, uses axios to request the data resources of the back-end server, and requests the back-end data resources from the front-end server. At this time, first initiate a request to the Nginx server, and the Nginx server request is forwarded to the corresponding back-end server for processing.

As a further technical limitation, in the process of loading the algorithm animation display page, the Vue component of the algorithm animation is played through the algorithm animation component of the front-end server. The area where the element is located is drawn and generated by algorithmic animation.

Further, in the process of mapping the animation display page to the preset position, each animation display page component is mapped to the corresponding position by routing, that is, the routing plug-in Vue-Router in the Vue component framework is used to map the front end. The generated algorithm animation display page loaded in the server matches each Vue component of the algorithm animation display page according to the Vue routing rules, and maps the algorithm animation display page to the matching preset position.

As a further technical limitation, the user selects the running mode, programming language, sets the code execution label and enters the test sample, and writes custom code; the front-end server initiates a POST request, and the Nginx server forwards the request to the controller corresponding to the back-end server , initiate a code submission request to the backend server.

As a further technical limitation, the back-end server obtains the programming language type information in the user's POST request, starts the API of the back-end server according to the programming language type information to create the corresponding Docker container, and the back-end server reads the POST during the process of creating the container. The running mode sent in the request, the code execution tag is stored in the database; the back-end server reads the user-defined code in the POST request, and injects the test sample input by the user as the original data of the data structure proxy class into the code file. , save the code file to the data volume created by the container for internal access to the container and execute the code; after the program runs, the change sequence of the algorithm data structure stored in the proxy class will be output, and the service program of the back-end server will be output. After capturing the output information, the user wraps the output information of the change sequence of the captured data structure and the original data of the test sample input by the user sent by the POST request into a JavaScript object, and the service program of the back-end server captures the output information and The user captures the output information of the sequence of changes to the data structure as the value in the JavaScript object.

As a further technical limitation, the front-end server parses the change sequence information and original data of the proxy data structure of the custom code from the JSON data, and the change sequence and the original data of the proxy data structure are in the form of JavaScript arrays; according to the parsed data data, using JavaScript to manipulate the movement of DOM elements in the server to generate animations.

According to some embodiments, the second solution of the present disclosure provides an algorithm animation generation system based on proxy mode and front-end and back-end separation, and adopts the following technical solutions:

An algorithm animation generation system based on proxy mode and separation of front and back ends, including:

a front-end server initialization module, which 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, which is configured to generate custom code in the front-end server based on the information required by the code, and initiate a code submission request to the back-end server;

A back-end server processing module, which is configured for the back-end server to receive a code submission request initiated by the front-end server, process the received code, generate code animation data, and return the generated code animation data to the front-end server;

The algorithm animation generation module is configured for the front-end server to receive the code animation data returned by the back-end server, and to generate the algorithm animation in combination with the mapped preset positions.

According to some embodiments, a third solution of the present disclosure provides a computer-readable storage medium, using the following technical solutions:

A computer-readable storage medium stores a program thereon, and when the program is executed by a processor, implements the steps in the algorithm animation generation method based on the agent mode and front-end and back-end separation according to the first aspect of the present disclosure.

According to some embodiments, a fourth solution of the present disclosure provides an electronic device, using the following technical solutions:

An electronic device, comprising a memory, a processor and a program stored on the memory and executable on the processor, when the processor executes the program, the agent-based mode and front-end and back-end described in the first aspect of the present disclosure are implemented Steps in a separate algorithmic animation generation method.

Compared with the prior art, the beneficial effects of the present disclosure are:

Based on the design of separation of front and back ends, the present disclosure proposes a method for generating algorithm animations using proxy mode; the changes in the data structure in the code are displayed in the form of animation to form a complete algorithm animation corresponding to the code program, and the front-end server It is responsible for generating and displaying animations, the back-end is responsible for executing code, and the front-end and back-end interact with data through network requests. The division of labor is clear, and the maintainability and scalability are high.

Description of drawings

The accompanying drawings that constitute a part of the present disclosure are used to provide further understanding of the present disclosure, and the exemplary embodiments of the present disclosure and their descriptions are used to explain the present disclosure and do not constitute an improper limitation of the present disclosure.

1 is a flowchart of an algorithm animation generation method based on proxy mode and front-end and back-end separation in Embodiment 1 of the present disclosure;

2 is a flowchart of a user-defined code stage in Embodiment 1 of the present disclosure;

3 is a flowchart of a back-end processing code generation data stage in Embodiment 1 of the present disclosure;

4 is a schematic diagram of a custom code animation display interface and algorithm animation in Embodiment 1 of the present disclosure;

FIG. 5 is a structural block diagram of an algorithm animation generation system based on an agent mode and front-end and back-end separation in Embodiment 2 of the present disclosure.

Detailed ways

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

It should be noted that the following detailed description is exemplary and intended to provide further explanation of the present disclosure. Unless otherwise defined, 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 belongs.

It should be noted that the terminology used herein is for the purpose of describing specific embodiments only, and is not intended to limit the exemplary embodiments according to the present disclosure. As used herein, unless the context clearly dictates otherwise, the singular is intended to include the plural as well, furthermore, it is to be understood that when the terms "comprising" and/or "including" are used in this specification, it indicates that There are features, steps, operations, devices, components and/or combinations thereof.

The embodiments of this disclosure and features of the embodiments may be combined with each other without conflict.

Example 1

Embodiment 1 of the present disclosure introduces an algorithm animation generation method based on a proxy mode and separation of front and back ends.

As shown in Figure 1, an algorithm animation generation method based on proxy mode and separation of front and back ends, including:

Front-end initialization stage: The front-end server initializes and loads the algorithm animation display page, and uses routing to map each page component to the corresponding position;

User-defined code stage: the user selects the running mode, programming language, sets the code execution label, enters test samples, writes custom code, and initiates a code submission request to the back-end server;

Back-end processing code generation data stage: After the back-end server receives the code from the front-end, it processes the code and returns the data that generates the code animation with the agreed format;

The front-end server generates the algorithm animation stage: the front-end server receives the data used to generate the code animation, and uses the data to generate the algorithm animation.

As one or more implementation manners, the front-end initialization phase includes: the front-end server initializes and loads the algorithm animation display page, and uses routing to map each page component to the corresponding position.

Specifically, when the front-end server initializes and loads the algorithm animation display page, the front-end server requests static resources from the Nginx server; the front-end server uses axios to request the data resources of the back-end server, that is, when the front-end server requests the back-end data resources, it first requests The Nginx server initiates a request, and the Nginx server request is forwarded to the corresponding service in the back-end for processing; the front-end Vue algorithm animation component.

The front-end Vue algorithm animation components specifically include:

The front-end algorithm animation component is a Vue component used to play algorithm animation. The component contains a canvas DOM element, and JavaScript can be used to draw and generate algorithm animation in the area where the canvas element is located. In order to generate algorithm animations more simply, various operation animations of the three data structures of array, tree and graph can be encapsulated. After sub-packaging, the front-end only needs to call the encapsulated method to generate one frame of the animation when the algorithm animation is displayed, and multiple frames can be connected together to form a complete algorithm animation. The underlying principle of encapsulating animation is to manipulate canvas DOM elements to draw, and finally generate animation.

In the process of using routing to map each page component to the corresponding location, use the routing plug-in Vue-Router in the Vue framework to map all the pages of the front-end server; use the route that can improve the loading speed of the page to load the route in a lazy way; the front-end will Using the Vue-Router plug-in, each Vue component in the page will be matched according to the Vue routing rules. The Vue routing rules can also be nested, which is very flexible and makes it easy to build a single-page application. Routing lazy loading allows components to be loaded only when they are needed, improving application performance and user experience.

As one or more implementations, the flowchart of the user-defined code stage is shown in Figure 2. When the user defines the code, a lot of information needs to be input, and the proxy class is used to write the code. The specific process is as follows:

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

(1) User selects the operating mode

There are three operating modes: array, tree and graph. The selection of the running mode depends on the type of the proxy class in the user program. If the tree proxy class is used in the code and the final target animation is the algorithm animation of the tree data structure, the selected running mode should also be the tree.

(2) The user selects the programming language

Users can use different programming languages to write code, and algorithm animation supports Java, C++, Python. After the code is sent to the backend server, a Docker container with the corresponding programming language runtime environment will be created according to the programming language selected by the user.

(3) The user enters the code to execute the label

The execution label of the execution table is used to briefly describe the algorithm in the code, mainly for marking, which can be filled in at will according to requirements.

(4) User input test sample

The user input test case will be used to initialize the raw data of the data structure in the user-defined code.

Second, the user writes custom code;

(1) Conceive the algorithm and use the proxy class to write the code

The user must first think about the data structure required in the algorithm, and implement the algorithm using an array, tree or graph proxy class.

(2) Use the specific methods provided by the proxy class to modify the data

These methods can record and store the operations performed in the proxy class, such as adding data, modifying data, etc. in the form of a sequence, to the memory, and output all this information when the program ends.

The methods provided in the array, tree, and graph proxy classes are listed below:

array

swap(index1,index2): Swap the elements at index1 and index2 in the array.

add(index,value): Adds an element whose value is value at the position of index index in the array.

get(index): Get the element whose index is index in the array.

remove(index): removes the element whose index is index in the array.

Tree (index is the position of the node in the complete binary tree, the tree is not required to be a complete binary tree, but the element position in the number of markers is marked using the strategy of the complete and binary tree)

get(index): Get the element at the position of index in the tree.

swap(index1, index2): Swap the elements at positions index1 and index2 in the tree.

insert(index,value): Insert a new leaf node on the empty leaf node at the index position in the tree, and the value of the leaf node is value.

remove(index): Remove the leaf node from the leaf node at the index position in the tree.

picture

emp(index): Mark the node in the graph numbered index as the emphasis state.

unemp(index): Mark the node numbered as index in the unemphasized state.

link(index1, index2): Marks the edge determined by the two graph nodes numbered index1 and index2 as the emphasized state.

unlink(index1,index2): Marks the edge determined by the nodes in the two graphs numbered index1 and index2 as the unemphasized state.

addPoint(position1, position2): Add a point to the position where the coordinates are (position1, position2) in the figure.

addLine(position1, position2, position3, position4): Add an edge between the points whose coordinates are (position1, position2) and (position3, position4) in the figure.

(3) Initiate a code submission request to the back-end server

The front-end server will initiate a POST request, and the Nginx server will forward the request to the controller corresponding to the back-end service. After that, the server processes the code and returns the animation data needed to generate the animation.

As one or more implementations, the flow chart of the data generation stage of the back-end processing code is shown in FIG. 3 , specifically:

First, create a Docker container with a code runtime environment;

The back-end server will first obtain the programming language type information in the user's POST request, and start the API of the back-end service according to the programming language information to create the corresponding Docker container. During the process of creating the container, the back-end server will also read the operation mode sent in the POST request, and the code execution tag will be stored in the database.

Second, save the code in the form of a file to the data volume created by the container, and run the code in the container;

The back-end server will read the user-defined code in the POST request, and then inject the test sample entered by the user into the code file as the raw data of the data structure proxy class, and then save the code file to the data volume created by the container So that the container can access and execute code.

Once again, after the program runs, obtain the data for generating the code animation, and destroy the container;

After the program runs, the change sequence of the algorithm data structure stored in the proxy class will be output. The change sequence of the algorithm data structure in the proxy class is one of the important data for generating algorithm animation. The service program of the backend server will capture the output information. After the user-defined code program is executed, the docker container can be destroyed to save the disk resources of the server.

Finally, the back-end server encapsulates the data for generating code animations as JSON;

The user wraps the output information of the change sequence of the captured data structure and the original data of the test sample input by the user sent by the POST request into a JavaScript object. It can be agreed according to the situation, but it must be ensured that the front-end browsing abides by the agreement.

As one or more implementation manners, the flow of the front-end server generating the algorithm animation phase is as follows:

First, parse the received JSON data;

The front-end parses the change sequence information and original data of the proxy data structure of the custom code from the JSON data. Both the change sequence of the proxy class data structure and the original data are in the form of JavaScript arrays.

Secondly, according to the parsed data, use JavaScript to manipulate the movement of DOM elements in the server to generate animations;

In the process of generating animation, the DOM object that JavaScript operates on is the canvas element. When generating an algorithm animation, first read the original data parsed by JSON, then use the API provided by JavaScript to draw the data structure on canvas according to the type of data structure at the beginning of the code algorithm, and then change the sequence drawing according to the data structure parsed by JSON Each frame of the animation and between each frame will add an animation transition effect, so that each frame of the animation is connected and played to form a watchable algorithm animation.

The design of the data structure proxy class and the design of the server architecture in this embodiment, the specific implementation scheme is as follows:

back end part

1. Design of data structure proxy class

(1) Design and implementation of array proxy class

Now take the proxy class of ArrayList in Java language as an example to discuss the specific implementation ideas and implementation details of the proxy class. First write a class named ArrayList, and add the following variables to the custom ArrayList: an ArrayList variable under the java.util package, the variable name is arr, a java.util.ArrayList variable whose generic type is String, and the variable name is operations, and then write the required methods in a custom ArrayList, such as get method, swap method, add method, remove method, and get, swap, add, and remove methods of the proxy class by calling the ArrayList variable under the java.util package. However, the operations performed will be written into operations before the call, such as swapping the elements at index 1 and index 2 during the execution of the program, and calling the method swap(1,2), operations will log "swap(1,2)" as a string.

(2) Design and implementation of tree proxy class

It can be seen that it is relatively simple to record the operation sequence of the data structure similar to the array. If you want to record the operation sequence of the tree and graph, you need to find a new way.

Regarding the animation of the tree, write a class BinaryTree, and the operations variable is used to record the operations on the tree. The basic operations of the tree include insertion, deletion, exchange and acquisition. When writing the insert, remove, swap, and get methods, the operations are written into operations when these methods are called. Recording these operations requires finding a way to locate exactly where the nodes are in the tree, and a complete binary tree provides a good idea. 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, set the corresponding index position to a special character. If the left child node of the node with index position 5 in the tree is empty, and now insert a new left child node for it, and the node's value is set to 1, the string "insert(10,1)" will be added to the operations variable. (The index of the parent node in the complete binary tree is n, the index corresponding to the left child node is 2n, and the index corresponding to the right child node is 2n+1). If you want to swap the position of the node with index 5 and its left child node, the string "swap(5,10)" will be added to the operations variable. If you want to delete the node with index 5, (the left and right subtrees of the deleted node are required to be empty), the string "remove(5)" will be added to the operations variable. To get the value of the node with index 5, the string "get(5)" is added to the operations variable.

(3) Design and implementation of graph proxy class

Regarding the animation of the graph, it is agreed that all two-dimensional graphs are in a Cartesian coordinate system. Each point in the graph can use two numbers to represent the coordinates of this point, and the line in the graph can use the coordinates of the two points. coordinates to represent. According to the above constraints, the changes of any point and line in the graph can be recorded, and a Graph class is defined, which contains the operations variable to record the operations on the graph. If you add a point at the position where the coordinates are (1,2) in the figure, add the string "addPoint(1,2)" to the operations variable, if you want to add a point at the coordinates (1,2) and the coordinates (3) ,4) add a line segment between the points, then add the string "addLine(1,2,3,4)" to the operations variable, delete the line segment and delete the point similar to the previous description.

2. The architecture design and implementation of the server

(1) Server execution implementation

First of all, the request sent by the front end will be forwarded by Nginx first. The dist folder packaged by Vue on the web side is also the static resource to be processed by Nginx. After the back end receives the request containing the user-defined code from the front end, A Data file will be created first on the server, and the user-defined original data in the JSON data sent from the front end will be written into the Data file, and then a code file will be created, the user's code will be written into this file, and the user will submit There is a limitation in the code that the data structures in the code such as lists, binary trees, etc. must be the proxy classes provided by this product, and any changes to these proxy class objects during the code execution process must also use the methods provided by the proxy class. , these proxy classes have a String type operations array to record all the operations done by these classes in the program. The proxy class also has the function of automatically injecting the data in the generated Data file. The proxy class is initialized when it is initialized. The data in the Data file will be saved in the class, and operations and raw data will be output to the console in JSON format at the end of the program. After the server writes all the code and data in the request to the file, if the user submits Java code, (the user can submit different programming language codes, and the backend can use Docker to generate containers of different images according to the type of programming language) The server will use a container generated based on Docker's openjdk image, mount the code file generated above to the container, and run the code in the Docker container. As mentioned above, after the code runs, a JSON string will be generated. This JSON string records the sequence of operations performed by the data structure in the program and the original data information. After the backend gets the JSON string, it returns it to Front-end, the front-end generates an animation of the algorithm based on the sequence of operations in this JSON string and displays it on the page.

(2) Server security design and implementation

As we all know, uploading the user's code to the server for execution is a big security risk. Some malicious users will submit some malicious code, which will bring unimaginable catastrophic consequences to the machine once executed. For example, some users can use code to continuously initiate CPU interrupt requests, causing the server to freeze. Some users implant mining programs into the server through code, so that the programs running normally on the server will be preempted by the mining program for CPU resources, which will completely paralyze the functions of the server. In order to avoid the above situation, Docker is used to isolate the code running environment and the server's own environment. When running the code, only one CPU is allocated to the Docker container running the code, so that even if there is malicious code, the CPU used by Docker is exhausted. resources, and will not affect the use of server functions other than the Docker container, because other functions of the server and Docker use two different CPUs, which do not interfere with each other and do not use any direct connection. If the user's code causes the Docker container to crash and hang directly during the execution process, the server will delete the code that caused the Docker container to crash, restart the Docker container, and the code that has been submitted to the server is not allowed to run during the restart of the Docker container. After waiting for the Docker container to restart successfully, it will run in sequence. This design makes the backend server have a certain self-healing ability.

front end

3. Submit custom code

(1) Enter the necessary information required to submit the code and write custom code

The front-end is built with the Vue framework, and Vue is used to develop all the pages of the web front-end server. The page will provide Vue input components for inputting the necessary information for submitting code and Vue input components for inputting custom code. Vue components are encapsulated in a single-page program for engineering development.

4. Send the code to the backend

The front-end uses axios to send HTTP requests, and encapsulates the information submitted by the user and custom code in a POST request and sends it to the back-end server.

5. Animation display stage

After the front end receives the JSON string, it first converts it into a JavaScript object, and extracts the original data information in the object and the sequence of changes in the data structure according to the key. The front-end encapsulates the generation of animation. The principle of encapsulation is to modularize the code that operates the DOM element canvas in the Vue algorithm animation component. After the modularization, a JavaScript array variable named mvns is provided to the outside world, and only the mvns array variable is required. By adding the corresponding data structure changes in the algorithm, the frame-by-frame playback of the algorithm animation can be realized, as shown in Figure 4, which is the frame-by-frame playback display of the in-order traversal algorithm animation of the tree.

This embodiment implements the data structure proxy class based on the proxy mode, which can output the change sequence of the data structure after the program runs; implements the server security architecture based on Docker; encapsulates the generation operation of the front-end algorithm animation, forming an easy-to-use and easy-to-use Algorithmic animation is played frame by frame; the interactive algorithm animation display with front and back ends is realized.

Embodiment 2

The second embodiment of the present disclosure introduces an algorithm animation generation system based on the proxy mode and the separation of front and back ends.

As shown in Figure 5, an algorithm animation generation system based on the proxy mode and the separation of front and back ends, including:

a front-end server initialization module, which 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, which is configured to generate custom code in the front-end server based on the information required by the code, and initiate a code submission request to the back-end server;

a back-end server processing module, which is configured for the back-end server to receive a code submission request initiated by the front-end server, process the received code, generate code animation data, and return the generated code animation data to the front-end server;

The algorithm animation generation module is configured for the front-end server to receive the code animation data returned by the back-end server, and to generate the algorithm animation in combination with the mapped preset positions.

The detailed steps are the same as the algorithm animation generation method based on the proxy mode and front-end and back-end separation provided in the first embodiment, and are not repeated here.

Embodiment 3

The third embodiment of the present disclosure provides a computer-readable storage medium.

A computer-readable storage medium stores a program thereon, and when the program is executed by a processor, implements the steps in the algorithm animation generation method based on the agent mode and front-end and back-end separation according to the first embodiment of the present disclosure.

The detailed steps are the same as the algorithm animation generation method based on the proxy mode and front-end and back-end separation provided in the first embodiment, and are not repeated here.

Embodiment 4

The fourth embodiment of the present disclosure provides an electronic device.

An electronic device, comprising a memory, a processor, and a program stored in the memory and running on the processor, when the processor executes the program, the agent-based mode and front-end and back-end described in Embodiment 1 of the present disclosure are implemented Steps in a separate algorithmic animation generation method.

The detailed steps are the same as the algorithm animation generation method based on the proxy mode and front-end and back-end separation provided in the first embodiment, and are not repeated here.

The above descriptions are only preferred embodiments of the present disclosure, and are not intended to limit the present disclosure. For those skilled in the art, the present disclosure may have various modifications and changes. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present disclosure should be included within the protection scope of the present disclosure.

Claims (10)

1. a kind of algorithm animation generation method based on proxy mode and front-end and back-end separation, is characterized in that, comprises: Load the algorithm animation display page through the front-end server, and map the animation display page to a preset position; Generate custom code in the front-end server based on the information required by the code, and initiate a code submission request to the back-end server; The back-end server receives the code submission request initiated by the front-end server, processes the received code, generates code animation data, and returns the generated code animation data to the front-end server; The front-end server receives the code animation data returned by the back-end server, and generates algorithm animation in combination with the mapped preset positions. 2. a kind of algorithm animation generation method based on proxy mode and front and back end separation as described in claim 1, it is characterized in that, before loading algorithm animation display page, front-end server initializes, is specially: front-end server to Nginx server To request static resources, use axios to request the data resources of the back-end server. When the front-end server requests the back-end data resources, it first initiates a request to the Nginx server, and the Nginx server request is forwarded to the corresponding back-end server for processing. 3. a kind of algorithm animation generation method based on proxy pattern and front-end and back-end separation as described in claim 1, it is characterized in that, in the process of loading algorithm animation display page, by the algorithm animation component of front-end server playing algorithm animation A Vue component, the Vue component adopts a DOM element containing a canvas, and uses JavaScript to draw and generate an algorithmic animation in the area where the DOM element containing the canvas is located. 4. a kind of algorithm animation generation method based on proxy mode and front-end separation as claimed in claim 3, is characterized in that, in the process that described animation display page is mapped to preset position, adopts route to each animation The display page components are mapped to the corresponding positions, that is, the routing plug-in Vue-Router in the Vue component framework is used to map the algorithm animation display page loaded and generated in the front-end server, and the algorithm animation display page is performed according to the Vue routing rules. Match, map the algorithm animation display page to the matching preset position. 5. a kind of algorithm animation generation method based on proxy pattern and front and back end separation as described in claim 1, it is characterized in that, user selects running pattern, programming language, sets code execution label and input test sample, writes self-defining Code; the front-end server initiates a POST request, the Nginx server forwards the request to the controller corresponding to the back-end server, and initiates a code submission request to the back-end server. 6. a kind of algorithm animation generation method based on proxy mode and front-end separation as claimed in claim 1, it is characterised in that the back-end server obtains the programming language type information in the user POST request, after starting according to the programming language type information The API of the end server is used to create the corresponding Docker container. During the process of creating the container, the back-end server reads the running mode sent in the POST request, executes the code and stores it in the database; Define the code, inject the test sample input by the user as the original data of the data structure proxy class into the code file, and save the code file to the data volume created by the container for internal access and execution of the code in the container; after the program runs, The change sequence of the algorithm data structure stored in the proxy class will be output, the service program of the back-end server will capture the output information, and the user will capture the output information of the data structure change sequence and the user input sent by the POST request. The original data of the test sample is packaged as a JavaScript object, and the output information captured by the service program of the back-end server and the output information captured by the user of the change sequence of the data structure are regarded as the value in the JavaScript object. 7. a kind of algorithm animation generation method based on proxy pattern and front-end separation as described in claim 1, is characterized in that, front-end server parses the change sequence information and the original data structure of self-defined code kind from JSON data kind of proxy data structure. The data, the change sequence of the proxy data structure and the original data are all in the form of JavaScript arrays; according to the parsed data, JavaScript is used to manipulate the movement of DOM elements in the server to generate animations. 8. An algorithm animation generation system based on proxy mode and front-end and back-end separation, is characterized in that, comprises: a front-end server initialization module, which 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, which is configured to generate custom code in the front-end server based on the information required by the code, and initiate a code submission request to the back-end server; a back-end server processing module, which is configured for the back-end server to receive a code submission request initiated by the front-end server, process the received code, generate code animation data, and return the generated code animation data to the front-end server; The algorithm animation generation module is configured for the front-end server to receive the code animation data returned by the back-end server, and to generate the algorithm animation in combination with the mapped preset positions. 9. A computer-readable storage medium on which a program is stored, characterized in that, when the program is executed by a processor, the algorithm based on proxy mode and front-end and back-end separation according to any one of claims 1-7 is implemented Steps in the animation generation method. 10. An electronic device comprising a memory, a processor and a program stored in the memory and running on the processor, wherein the processor implements any one of claims 1-7 when executing the program The steps in the algorithm animation generation method based on proxy mode and front-end and back-end separation described in item.

Images