基于代理模式和前后端分离的算法动画生成方法及系统

1.本公开属于互联网技术领域，具体涉及一种基于代理模式和前后端分离的算法动画生成方法及系统。


背景技术：

2.本部分的陈述仅仅是提供了与本公开相关的背景技术信息，不必然构成在先技术。
3.随着互联网技术的发展，计算机技术变得越来越热门，算法在计算机技术中有着举足轻重的作用，算法的学习却很枯燥且困难。
4.据发明人了解，现有技术中缺乏降低算法学习难度的相关研究。


技术实现要素：

5.为了解决上述问题，本公开提出了一种基于代理模式和前后端分离的算法动画生成方法及系统，基于代理模式、前端vue组件技术、后端服务器技术和前后端分离技术，通过生成算法代码的动画数据，根据动画数据生成可供观看的算法动画，将算法转换成令人舒适的动画供人观看学习，有效降低了算法学习的难度。
6.根据一些实施例，本公开的第一方案提供了一种基于代理模式和前后端分离的算法动画生成方法，采用如下技术方案：
7.一种基于代理模式和前后端分离的算法动画生成方法，包括：
8.通过前端服务器加载算法动画展示页面，将所述动画展示页面映射到预设位置；
9.基于代码所需信息在前端服务器中生成自定义代码，向后端服务器发起提交代码请求；
10.后端服务器接收到前端服务器所发起的提交代码请求，处理所接收到的代码，生成代码动画数据，将所生成的代码动画数据返回至前端服务器；
11.前端服务器接收后端服务器所返回的代码动画数据，结合所映射的预设位置生成算法动画。
12.作为进一步的技术限定，在加载算法动画展示页面之前，前端服务器进行初始化，具体为：前端服务器向nginx服务器请求静态资源，使用axios请求后端服务器的数据资源，在前端服务器请求后端数据资源的时候，先向nginx服务器发起请求，nginx服务器请求转发到对应的后端服务器中进行处理。
13.作为进一步的技术限定，在加载算法动画展示页面的过程中，通过前端服务器的算法动画组件播放算法动画的vue组件，所述vue组件采用含canvas画布的dom元素，通过javascript在含canvas画布的dom元素所在的区域进行算法动画的绘制和生成。
14.进一步的，在将所述动画展示页面映射到预设位置的过程中，采用路由将各个动画展示页面组件映射到相应的位置，即使用所述vue组件框架中的路由插件vue-router来映射前端服务器中所加载生成的算法动画展示页面，按照vue路由规则进行算法动画展示
页面各个vue组件的匹配，将算法动画展示页面映射到相匹配的预设位置。
15.作为进一步的技术限定，用户选择运行模式、编程语言、设置代码执行标签和输入测试样例，编写自定义代码；前端服务器发起post请求，nginx服务器将请求转发到后端服务器所对应的控制器中，向后端服务器发起提交代码请求。
16.作为进一步的技术限定，后端服务器获取用户post请求中的编程语言类型信息，根据编程语言类型信息启动后端服务器的api来创建相应的docker容器，后端服务器在创建容器的过程中读取post请求中发来的运行模式，代码执行标签，存入数据库；后端服务器读取post请求中的用户自定义代码，将用户输入的测试样例作为数据结构代理类的原始数据注入到代码文件之中，将代码文件保存至容器创建的数据卷中以供容器内部访问并执行代码；程序运行结束后，代理类中存储的算法数据结构的改变序列将会被输出出来，后端服务器的服务程序捕获到输出的信息，用户将捕获到数据结构的改变序列的输出信息和post请求发来的用户所输入的测试样例原始数据包装为javascript对象，后端服务器的服务程序捕获到输出的信息和用户捕获到数据结构的改变序列的输出信息均作为javascript对象中的值。
17.作为进一步的技术限定，前端服务器从json数据种解析自定义代码种代理类数据结构的改变序列信息和原始数据，代理类数据结构的改变序列和原始数据的形式都为javascript数组；根据解析后的数据，使用javascript操作服务器中的dom元素移动来生成动画。
18.根据一些实施例，本公开的第二方案提供了一种基于代理模式和前后端分离的算法动画生成系统，采用如下技术方案：
19.一种基于代理模式和前后端分离的算法动画生成系统，包括：
20.前端服务器初始化模块，其被配置为通过前端服务器加载算法动画展示页面，将所述动画展示页面映射到预设位置；
21.自定义代码模块，其被配置为基于代码所需信息在前端服务器中生成自定义代码，向后端服务器发起提交代码请求；
22.后端服务器处理模块，其被配置为后端服务器接收到前端服务器所发起的提交代码请求，处理所接收到的代码，生成代码动画数据，将所生成的代码动画数据返回至前端服务器；
23.算法动画生成模块，其被配置为前端服务器接收后端服务器所返回的代码动画数据，结合所映射的预设位置生成算法动画。
24.根据一些实施例，本公开的第三方案提供了一种计算机可读存储介质，采用如下技术方案：
25.一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如本公开第一方面所述的基于代理模式和前后端分离的算法动画生成方法中的步骤。
26.根据一些实施例，本公开的第四方案提供了一种电子设备，采用如下技术方案：
27.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的程序，所述处理器执行所述程序时实现如本公开第一方面所述的基于代理模式和前后端分离的算法动画生成方法中的步骤。
28.与现有技术相比，本公开的有益效果为：
29.本公开基于前后端分离的设计，提出一种使用代理模式的生成算法动画的方法；将代码中的数据结构的变化以动画的形式展示出来，形成代码程序所对应的完整的算法动画，前端服务器负责生成并展示动画，后端负责执行代码，前后端通过网络请求进行数据交互，分工明确，可维护性和可拓展性都很高。
附图说明
30.构成本公开的一部分的说明书附图用来提供对本公开的进一步理解，本公开的示意性实施例及其说明用于解释本公开，并不构成对本公开的不当限定。
31.图1是本公开实施例一中的基于代理模式和前后端分离的算法动画生成方法的流程图；
32.图2是本公开实施例一中的用户自定义代码阶段的流程图；
33.图3是本公开实施例一中的后端处理代码生成数据阶段的流程图；
34.图4是本公开实施例一中的自定义代码动画展示界面及算法动画的示意图；
35.图5是本公开实施例二中的基于代理模式和前后端分离的算法动画生成系统的结构框图。
具体实施方式
36.下面结合附图与实施例对本公开作进一步说明。
37.应该指出，以下详细说明都是例示性的，旨在对本公开提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本公开所属技术领域的普通技术人员通常理解的相同含义。
38.需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本公开的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。
39.在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。
40.实施例一
41.本公开实施例一介绍了一种基于代理模式和前后端分离的算法动画生成方法。
42.如图1所示的一种基于代理模式和前后端分离的算法动画生成方法，包括：
43.前端初始化阶段：前端服务器初始化并加载算法动画展示页面，使用路由将各个页面组件映射到相应的位置；
44.用户自定义代码阶段：用户选择运行模式、编程语言、设置代码执行标签、输入测试样例，编写自定义代码，向后端服务器发起提交代码请求；
45.后端处理代码生成数据阶段：后端服务器收到前端发来的代码之后，处理代码，并返回生成具有约定格式的代码动画的数据；
46.前端服务器生成算法动画阶段：前端服务器接收用于生成代码动画的数据，利用该数据生成算法动画。
47.作为一种或多种实施方式，前端初始化阶段包括：前端服务器初始化并加载算法动画展示页面，使用路由将各个页面组件映射到相应的位置。
48.具体的，前端服务器初始化并加载算法动画展示页面的过程中，前端服务器向nginx服务器请求静态资源；前端服务器使用axios请求后端服务器的数据资源，即前端服务器请求后端数据资源的时候，先向nginx服务器发起请求，nginx服务器请求转发到后端对应的服务进行处理；前端vue算法动画组件。
49.前端vue算法动画组件具体包括：
50.前端的算法动画组件是用来播放算法动画的vue组件，该组件中包含一个canvas画布dom元素，可以使用javascript在canvas元素所在的区域进行算法动画的绘制和生成。为了更加简单的进行算法动画的生成，可以将数组、树和图这三个数据结构的各种操作动画进行封装。进行分装后，前端在算法动画展示的时候只需要调用封装好的方法就可以生成动画的一帧，多个帧连续在一起就可以形成完整的算法动画了。对动画进行封装的底层原理就是操作canvas画布dom元素进行绘制，最终生成动画。
51.使用路由将各个页面组件映射到相应的位置的过程中，使用vue框架中的路由插件vue-router来映射前端服务器所有页面；采用能够提高页面加载速度的路由懒加载的方式加载路由；前端将会使用vue-router插件，将按照vue路由规则匹配页面中各个vue组件，vue路由规则也可以进行嵌套，十分灵活，使构建单页面应用变得轻而易举。路由懒加载可以使组件被需要的时候才进行加载，提高应用性能和用户使用体验。
52.作为一种或多种实施方式，用户自定义代码阶段的流程图如图2所示，用户自定义代码时需要输入很多信息，并使用代理类来编写代码，具体流程如下：
53.首先，用户输入提交代码所需的必要信息；
54.(1)用户选择运行模式
55.运行模式分为三种，分别是数组、树和图。运行模式的选择取决于用户程序中的代理类的类型，如果代码中使用的是树代理类，最终生成的目标动画是树数据结构的算法动画，那么选择的运行模式也应当是树。
56.(2)用户选择编程语言
57.用户可以使用不同编程语言来编写代码，算法动画支持java、c 、python。代码发送到后端服务器之后将会根据用户选择的编程语言来创建具有相应编程语言运行环境的docker容器。
58.(3)用户输入代码执行标签
59.该执行表执行标签用于简要描述一下代码中的算法，主要是用于标记，可以根据需求随意填写。
60.(4)用户输入测试样例
61.用户的输入的测试样例将会用来初始化用户自定义代码中的数据结构的原始数据。
62.其次，用户编写自定义代码；
63.(1)构思算法，使用代理类编写代码
64.用户首先要思考算法中所需要的数据结构，使用数组、树或者图代理类来实现算法。
65.(2)使用代理类提供的特定方法来修改数据
66.这些方法可以将代理类中进行的操作，例如增加数据、修改数据等等以序列的形
式记录并储存到内存中，程序结束的时候将这些信息全部输出。
67.下面列举了数组、树、图代理类中提供的方法：
68.数组
69.swap(index1,index2):交换数组中索引为index1和index2的元素。
70.add(index,value):在数组索引为index的位置添加一个值为value的元素。
71.get(index):获取数组索引为index的元素。
72.remove(index):删除数组索引为index的元素。
73.树(index为结点在完全二叉树中的位置，树不要求是完全二叉树，但是使用完全而二叉树的策略标记数中的元素位置)
74.get(index):获取树中位置为index的元素。
75.swap(index1,index2):交换树中位置为index1和index2的元素。
76.insert(index,value):在树中为index位置的空叶子结点上插入一个新的叶子结点，该叶子结点值为value。
77.remove(index):在树中为index位置的叶子结点上删除该叶子结点。
78.图
79.emp(index):将编号为index的图中节点，标记为强调状态。
80.unemp(index):将编号为index的图中节点，标记为非强调状态。
81.link(index1,index2):将图中编号为index1和index2的两个图中节点所确定的边标记为强调状态。
82.unlink(index1,index2):将图中编号为index1和index2的两个图中节点所确定的边标记为非强调状态。
83.addpoint(position1,position2):为图中坐标为(position1,position2)的位置处添加一个点。
84.addline(position1,position2,position3,position4):为图中坐标为(position1,position2)和(position3,position4)点之间添加一条边。
85.(3)向后端服务器发起提交代码请求
86.前端服务器将会发起post请求，nginx服务器将会请求转发到后端服务对应的控制器，之后服务器处理代码，返回生成动画所需要的动画数据。
87.作为一种或多种实施方式，后端处理代码生成数据阶段的流程图如图3所示，具体为：
88.首先，创建具有代码运行环境的docker容器；
89.后端服务器会先获取用户post请求中的编程语言类型信息，根据这个编程语言信息启动后端服务的api来创建相应的docker容器。后端服务器在创建容器的过程中也会读取post请求中发来的运行模式，代码执行标签，存入数据库。
90.其次，将代码以文件的形式保存至容器创建的数据卷中，在容器中运行代码；
91.后端服务器会读取post请求中的用户自定义代码，然后将用户输入的测试样例作为数据结构代理类的原始数据注入到代码文件之中，之后将代码文件保存至容器创建的数据卷中以供容器内部可以访问并执行代码。
92.再次，程序运行结束后，获取生成代码动画的数据，并销毁容器；
93.程序运行结束后，代理类中存储的算法数据结构的改变序列将会被输出出来，代理类中算法数据结构的改变序列是用于生成算法动画的重要数据之一。后端服务器的服务程序会捕获到输出的信息。用户自定义的代码程序执行结束之后，就可以销毁docker容器，节省服务器的磁盘资源。
94.最后，后端服务器将生成代码动画的数据封装为json；
95.用户将捕获到数据结构的改变序列的输出信息和post请求发来的用户所输入的测试样例原始数据包装为javascript对象，两种信息均作为javascript对象中的值，两种信息所对应的键可以视情况约定，但必须保证前端浏览遵守该约定。
96.作为一种或多种实施方式，前端服务器生成算法动画阶段的流程具体为：
97.首先，将收到的json数据进行解析；
98.前端从json数据种解析自定义代码种代理类数据结构的改变序列信息和原始数据。代理类数据结构的改变序列和原始数据的形式都为javascript数组。
99.其次，根据解析好的数据，使用javascript操作服务器中的dom元素移动来生成动画；
100.在生成动画的过程中，javascript操作的dom对象是canvas画布元素。生成算法动画时，首先读取json解析出的原始数据，之后根据数据结构的类型使用javascript提供的api在canvas绘制数据结构在代码算法开始时的样子，之后根据json解析出的数据结构改变序列绘制动画的每一帧，每一帧之间都会添加动画过度效果，这样将动画的每一帧都连接起来播放就可以形成可供观看的算法动画。
101.本实施例中的数据结构代理类的设计和服务器架构的设计，具体实现方案如下：
102.后端部分
103.1.数据结构代理类的设计
104.(1)数组代理类的设计实现
105.现在以java语言中的arraylist的代理类为例来讨论一下代理类具体的实现思路和实现细节。首先编写一个类命名为arraylist，在自定义的arraylist中加入以下变量：一个java.util包下的arraylist变量，变量名为arr、一个泛型为string类型的java.util.arraylist变量，变量名为operations，之后在自定义的arraylist中编写需要的方法，例如get方法、swap方法、add方法、remove方法，代理类的get、swap、add、remove方法是通过调用java.util包下的arraylist变量中的方法来实现的，但在调用之前会向operations中写入所进行的操作，比如在程序的执行过程中交换了索引1和索引2位置上的元素，调用了方法swap(1,2)，operations将会以字符串的形式记录下“swap(1,2)”。
106.(2)树代理类的设计实现
107.可以看出记录类似于数组的数据结构的操作序列是相对简单的，如果想要记录树和图的操作序列，就需要寻找新的办法。
108.关于树的动画，编写一个类binarytree，operations变量用于记录对树的操作。树的基本操作有插入、删除和交换和获取，在编写insert，remove，swap，get方法，调用这些方法的时候将操作写入operations中。记录这些操作需要找到一种方法准确地定位树中节点的位置，完全二叉树为提供了一个很好的思路。完全二叉树可以表示为一个数组的形式，数组的每一个索引可以定位一个树中的节点。假如某一个节点为空，就将对应索引位置置为
一个特殊字符。假如树中索引位置为5的节点的左子节点为空，现在为其插入一个新的左子节点，节点的置为1，则会向operations变量中加入字符串“insert(10,1)”(完全二叉树中父节点的索引为n，左子节点对应的索引为2n，右子节点对应的索引为2n 1)。假如要交换索引为5的节点和其左子节点的位置则会向operations变量中加入字符串“swap(5,10)”。如果要删除索引为5的节点，(要求被删除的节点左右子树为空)则会向operations变量中加入字符串“remove(5)”。如果要获取索引为5的节点的值，则会向operations变量中加入字符串“get(5)”。
109.(3)图代理类的设计实现
110.关于图的动画，约定所有的二维图均处在一个直角座坐标系中，图中的每一个点都可以用两个数字来表示这个点的坐标，图中的线可以用两个点的坐标来表示。根据以上的约束就可以记录图中任何一个点和线的改变，定义一个graph类，含有operations变量用于记录对图的操作。假如在图中坐标为(1,2)的位置上添加一个点，则向operations变量中添加字符串“addpoint(1,2)”，如果要在坐标为(1,2)和坐标为(3,4)的点之间添加一条线段，则向operations变量中添加字符串“addline(1,2,3,4)”，删除线段和删除点和前面的描述类似。
111.2.服务器的架构设计实现
112.(1)服务器执行实现
113.首先前端发送过来的请求首先会经过nginx进行请求转发，web端使用vue打包好的dist文件夹也是nginx所要处理的静态资源，后端收到前端发来的含有用户自定义的代码的请求后，将会在服务器上首先创建一个data文件，并将前端发来的json数据中用户定义的原始数据写入data文件，之后在创建一个代码文件，将用户的代码写入这个文件中，用户在提交代码的时候有一个限制是代码中的数据结构例如列表、二叉树等等必须是本产品提供的代理类，在代码执行的过程中对这些代理类对象的任何改变操作也必须使用代理类提供的方法，这些代理类中都拥有一个string类型的operations数组来记录这些类在程序中所做的所有操作，代理类也拥有将生成的data文件中的数据自动注入的功能，代理类在初始化的时候就会将data文件中的数据保存在类中，在程序运行结束的时候将会把operations和原始数据以json的格式输出到控制台上。服务器将请求中的代码和数据全部写入文件之后，假如用户提交的是java代码，(用户可以提交不同的编程语言代码，后端可以根据编程语言的类型来使用docker生成不同镜像的容器)这时服务器会使用根据docker的openjdk镜像生成的一个容器，将上面生成的代码文件挂载到容器上，并在docker容器中运行代码。如前面所说的，代码运行完会产生一个json字符串，这个json字符串记录着数据结构在程序中所进行的操作序列和原始数据信息，后端得到这个json字符串之后便将它返回给前端，前端根据这个json字符串中的操作序列来生成算法的动画在页面上展示。
114.(2)服务器安全设计实现
115.众所周知，让用户的代码上传到服务器来执行是有很大的安全隐患的，一些不怀好意的用户将会提交一些恶意代码，这些代码一旦执行就会给机器带来不可想象的灾难性后果，例如有的用户可以使用代码不断的发起cpu中断请求，使服务器卡死。还有的用户通过代码对服务器植入挖矿程序，这样的话服务器上正常运行的程序将会被挖矿程序抢占cpu资源，使服务器的功能彻底瘫痪。为了避免以上情况的发生，使用docker来隔离代码运
行环境和服务器本身的环境，在运行代码的时候，给正在运行代码的docker容器只分配一个cpu，这样即使有恶意代码耗尽docker所使用的cpu资源，也不会影响到docker容器以外的服务器功能的使用，因为服务器的其他功能和docker使用的完全是两个不同的cpu，它们之间不相互干扰，没用任何的直接联系。如果用户的代码在执行过程中导致docker容器直接死机挂掉，这时服务器会删除掉令docker容器死机的代码，重启docker容器，重启docker容器的过程中不允许已经提交到服务器的代码运行，必须等待docker容器重启成功之后在依次运行，这样的设计使后端服务器具有一定的自我修复性。
116.前端部分
117.3.提交自定义代码
118.(1)输入提交代码所需的必要信息以及编写自定义代码
119.前端使用vue框架搭建，使用vue来开发web前端服务器的所有页面，页面会提供输入提交代码所需的必要信息的vue输入组件和输入自定义代码的vue输入组件。vue组件都封装在一个单页面程序中，以便工程化开发。
120.4.将代码发送给后端
121.前端使用axios发送http请求，将用户提交的信息以及自定义代码封装在post请求中发送给后端服务器。
122.5.动画展示阶段
123.前端收到json字符串之后首先将其转化成javascript对象，根据键提取对象中的原始数据信息和数据结构的变化序列。前端对动画的生成进行了封装，封装的原理就是将vue算法动画组件中的操作dom元素canvas的代码进行模块化，模块化后对外提供一个名为mvns的javascript数组变量，只需要向mvns数组变量中添加对应的数据结构的改变就可以实现算法动画的逐帧播放，如图4所示，为树的中序遍历算法动画的逐帧播放展示。
124.本实施例实现了基于代理模式的数据结构代理类，可在程序运行结束后输出数据结构的改变序列；实现了基于docker的服务器安全架构；封装了前端算法动画的生成操作，形成简单易用的算法动画逐帧播放方式；实现了前后端分离的交互式算法动画展示。
125.实施例二
126.本公开实施例二介绍了一种基于代理模式和前后端分离的算法动画生成系统。
127.如图5所示的一种基于代理模式和前后端分离的算法动画生成系统，包括：
128.前端服务器初始化模块，其被配置为通过前端服务器加载算法动画展示页面，将所述动画展示页面映射到预设位置；
129.自定义代码模块，其被配置为基于代码所需信息在前端服务器中生成自定义代码，向后端服务器发起提交代码请求；
130.后端服务器处理模块，其被配置为后端服务器接收到前端服务器所发起的提交代码请求，处理所接收到的代码，生成代码动画数据，将所生成的代码动画数据返回至前端服务器；
131.算法动画生成模块，其被配置为前端服务器接收后端服务器所返回的代码动画数据，结合所映射的预设位置生成算法动画。
132.详细步骤与实施例一提供的基于代理模式和前后端分离的算法动画生成方法相同，在此不再赘述。
133.实施例三
134.本公开实施例三提供了一种计算机可读存储介质。
135.一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如本公开实施例一所述的基于代理模式和前后端分离的算法动画生成方法中的步骤。
136.详细步骤与实施例一提供的基于代理模式和前后端分离的算法动画生成方法相同，在此不再赘述。
137.实施例四
138.本公开实施例四提供了一种电子设备。
139.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的程序，所述处理器执行所述程序时实现如本公开实施例一所述的基于代理模式和前后端分离的算法动画生成方法中的步骤。
140.详细步骤与实施例一提供的基于代理模式和前后端分离的算法动画生成方法相同，在此不再赘述。
141.以上所述仅为本公开的优选实施例而已，并不用于限制本公开，对于本领域的技术人员来说，本公开可以有各种更改和变化。凡在本公开的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。