data-structure接口返回值说明文档.md 60 KB

data-structure部分接口返回值说明文档

1.冒泡排序(交换排序的一种)

(1)符号说明

​ 1.颜色和意义

​ bule: 未排好序,不在比较或交换状态; 当完全排好序之后,所有值的颜色也是bule

​ green: 未排好序,在比较或交换状态

​ orange: 已排好序

​ 2.状态及意义

​ onCompare: 两个值正在比较当中

​ onExchange: 两个值正在交换当中,显示的是交换后的值和颜色

​ beforeCompare: 没有正在比较或正在交换的值,所有值要么处于已拍好序状态,要么处于没拍好序,但未比较且未交换状态。

​ AllSorted: 所有值都拍好序了,所有的值的颜色都是bule

​ 注:

​ 这里说明一下为什么没有交换后的状态(afterCompare)。因为在同一趟比较和交换当中,前一组值比较和交换完成之后就直接进入 下一组值的比较和交换状态了,而交换后的状态仅仅在一趟比较和交换完全完成之后且下一趟比较和交换还未开始的时候,此时的状态 既是上一趟比较结束后的afterCompare状态,也是下一趟比较未开始前的beforeCompare状态,所以这里统一归为beforeCompare状 态。另外,新加了AllSorted状态,这个状态在排序过程中仅出现一次,也是排序的最后状态类型。

(2)接口返回值格式(实际返回值response类型,json格式为{message:"", isSuccess:"",content:""},以下返回值只写了content部分)

{

​ initial:

​ [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ onSortingSates:

​ [

​ {

​ type:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ {

​ type:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ {

​ type:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ ...

​ ]

​ }

(3)postman测试实例(含response的其他部分)

URL: localhost:8080/bubble-sort/get-analysis-result?rule=ascending&content=9&content=8&content=7

RESONSE:

{

"content": {

​ "initial": {

​ "type": "beforeCompare",

​ "content": [

​ {

​ "value": 9,

​ "color": "blue"

​ },

​ {

​ "value": 8,

​ "color": "blue"

​ },

​ {

​ "value": 7,

​ "color": "blue"

​ }

​ ]

​ },

​ "onSortingStates": [

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 9,

​ "color": "green"

​ },

​ {

​ "value": 8,

​ "color": "green"

​ },

​ {

​ "value": 7,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "content": [

​ {

​ "value": 8,

​ "color": "green"

​ },

​ {

​ "value": 9,

​ "color": "green"

​ },

​ {

​ "value": 7,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 8,

​ "color": "blue"

​ },

​ {

​ "value": 9,

​ "color": "green"

​ },

​ {

​ "value": 7,

​ "color": "green"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "content": [

​ {

​ "value": 8,

​ "color": "blue"

​ },

​ {

​ "value": 7,

​ "color": "green"

​ },

​ {

​ "value": 9,

​ "color": "green"

​ }

​ ]

​ },

​ {

​ "type": "beforeCompare",

​ "content": [

​ {

​ "value": 8,

​ "color": "blue"

​ },

​ {

​ "value": 7,

​ "color": "blue"

​ },

​ {

​ "value": 9,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 8,

​ "color": "green"

​ },

​ {

​ "value": 7,

​ "color": "green"

​ },

​ {

​ "value": 9,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "content": [

​ {

​ "value": 7,

​ "color": "green"

​ },

​ {

​ "value": 8,

​ "color": "green"

​ },

​ {

​ "value": 9,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "allSorted",

​ "content": [

​ {

​ "value": 7,

​ "color": "blue"

​ },

​ {

​ "value": 8,

​ "color": "blue"

​ },

​ {

​ "value": 9,

​ "color": "blue"

​ }

​ ]

​ }

​ ]

},

"message": null,

"success": true

}

2.stack

(1)初始化栈的操作

​ stack有三个操作:初始化栈(可以指定栈大小,也可以不指定,使用默认值。),push,pop。初始化栈的操作不需要请求后端,只需 要在前端实现即可。

(2)push pop接口返回值格式(同样只写了response的content部分)

​ 1.push返回值://若push成功,content为push后的内容;若push失败,message显示原因,content显示原来栈的内容

​ {

​ capacity:

​ content:[1,2,3,4,5,...]

​ }

2.pop的返回值同push

(3)postman测试实例

1.push成功

URL: localhost:8080/stack/push?capacity=10&content=1&content=2&content=3&value=4

RESPONSE:

{

"content": {

​ "capacity": 10,

​ "size": 4,

​ "content": [

​ 1,

​ 2,

​ 3,

​ 4

​ ]

},

"message": null,

"success": true

}

2.push失败

URL: localhost:8080/stack/push?capacity=3&content=1&content=2&content=3&value=4

RESPONSE:

{

"content": [

​ 1,

​ 2,

​ 3

],

"message": "Error: stack overflow.",

"success": false

}

3.pop成功

URL:localhost:8080/stack/pop?capacity=10&content=1&content=2&content=3&content=4

RESPONSE:

{

"content": {

​ "capacity": 10,

​ "size": 4,

​ "content": [

​ 1,

​ 2,

​ 3

​ ]

},

"message": null,

"success": true

}

5.pop失败

备注:因为需要传空的content,不知道怎么传。

3.选择排序

(1)符号说明

1.颜色和意义

​ blue: 不在正在比较状态,也不属于已排好序的部分,也不是当前状态的待排序的最值(最大值或者最小值)

​ green: 正在比较中(比较是为了在未排序的部分筛选最值,作为下一个排序的值)

​ red: 比较进行到此刻所筛选出来的最值

​ orange: 已排好序的部分

2.状态和意义

​ beforeCompare: 有一部分排好序的值,其他没排好序的值全部未选中(即没有值被标记为最值(red),也没有值在比较当中(green))

​ onExtreme: 正在选择最值,因为最初选择最值和最值切换停止比较

​ onCompare: 正在比较当中

​ beforeExchange: 有两个(特殊情况下有一个)值是红色的,一个是当前选中的最值,一个是下一个该排序的位置上的值,它们两个值(如果这两个值不是同一个值的话)在等待交换位置

​ afterExchange: 两个红色的值已经完成了交换,交换过后多了一个已排好序的值

​ allSorted: 所有的值都已经排好序

(2)接口返回值格式(只含response的content部分,实际的json还包含外面的response其他部分)

{

​ initial:

​ [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ onSortingSates:

​ [

​ {

​ type:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ {

​ type:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ {

​ type:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ ...

​ ]

​ }

(3)postman实例测试

{

"content": {

​ "initial": {

​ "type": "beforeCompare",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ "onSortingStates": [

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 4,

​ "color": "red"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 4,

​ "color": "red"

​ },

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 2,

​ "color": "green"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "red"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "red"

​ },

​ {

​ "value": 1,

​ "color": "green"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "red"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "red"

​ },

​ {

​ "value": 0,

​ "color": "green"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "red"

​ }

​ ]

​ },

​ {

​ "type": "beforeExchange",

​ "content": [

​ {

​ "value": 4,

​ "color": "red"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "red"

​ }

​ ]

​ },

​ {

​ "type": "afterExchange",

​ "content": [

​ {

​ "value": 0,

​ "color": "red"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "red"

​ }

​ ]

​ },

​ {

​ "type": "beforeCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 2,

​ "color": "green"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "red"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "red"

​ },

​ {

​ "value": 1,

​ "color": "green"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "red"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "red"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ }

​ ]

​ },

​ {

​ "type": "beforeExchange",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "red"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "afterExchange",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "red"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "beforeCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "red"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "red"

​ },

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "red"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ }

​ ]

​ },

​ {

​ "type": "beforeCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExtreme",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "red"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ }

​ ]

​ },

​ {

​ "type": "beforeCompare",

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "allSorted",

​ "content": [

​ {

​ "value": 0,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ }

​ ]

},

"message": null,

"success": true

}

4.插入排序

(1)符号说明

1.颜色和意义

blue: 未被选中,还未排好序

green: 在比较当中或在移动当中(在移动当中显示移动后的位置)

red: 当前需要插入的值

orange: 已排好序

white: 空白bar (空白bar的color为white, value为0)

2.状态和意义

onSelect: 已选中下一个待插入目标,待插入目标已出列,但还未开始比较

onCompare: 正在比较

onExchange: 比较后发现逆序,与空白bar交换位置

onInsertion: 比较和交换后发现此时空白bar就是应该把当前值插入的地方,显示插入后的结果(所有bar只有blue和orange两种颜色)

allSorted: 所有的值都已排好序(全部为蓝色)

(2)接口返回值格式(只含response的content部分,实际的json还包含外面的response其他部分)

{

​ initial:

​ [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ onSortingSates:

​ [

​ {

​ type:

​ insertionIndex: //空白bar所在的位置,从0开始。也是red bar的index。只有type为onSelect, onCompare, onExchange,时,

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...] //insertionIndex才有意义,onInsertion状态没有空白bar

​ }, //因此,onInsertion状态的insertionIndex为该值插入的下标。

​ {

​ type:

​ insertionIndex:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ {

​ type:

​ insertionIndex:

​ content: [{value: ,color: },{value: ,color: },{value: ,color: },...]

​ },

​ ...

​ ]

​ }

(3)postman实例测试

{

"content": {

​ "initial": {

​ "type": "onInsertion",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 4,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ "onSortingStates": [

​ {

​ "type": "onInsertion",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onSelect",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "white"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 4,

​ "color": "green"

​ },

​ {

​ "value": 3,

​ "color": "white"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 3,

​ "color": "white"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onInsertion",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onSelect",

​ "insertionIndex": 2,

​ "content": [

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "white"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 2,

​ "content": [

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ },

​ {

​ "value": 2,

​ "color": "white"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "white"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 2,

​ "color": "white"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 2,

​ "color": "white"

​ },

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onInsertion",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onSelect",

​ "insertionIndex": 3,

​ "content": [

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "white"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 3,

​ "content": [

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ },

​ {

​ "value": 1,

​ "color": "white"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 2,

​ "content": [

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "white"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 2,

​ "content": [

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 1,

​ "color": "white"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "white"

​ },

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 2,

​ "color": "green"

​ },

​ {

​ "value": 1,

​ "color": "white"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 1,

​ "color": "white"

​ },

​ {

​ "value": 2,

​ "color": "green"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onInsertion",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "blue"

​ }

​ ]

​ },

​ {

​ "type": "onSelect",

​ "insertionIndex": 4,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 4,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 3,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ },

​ {

​ "value": 4,

​ "color": "green"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 3,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 2,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ },

​ {

​ "value": 3,

​ "color": "green"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 2,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "green"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ },

​ {

​ "value": 2,

​ "color": "green"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onCompare",

​ "insertionIndex": 1,

​ "content": [

​ {

​ "value": 1,

​ "color": "green"

​ },

​ {

​ "value": 0,

​ "color": "white"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onExchange",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 0,

​ "color": "white"

​ },

​ {

​ "value": 1,

​ "color": "green"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "onInsertion",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 0,

​ "color": "orange"

​ },

​ {

​ "value": 1,

​ "color": "orange"

​ },

​ {

​ "value": 2,

​ "color": "orange"

​ },

​ {

​ "value": 3,

​ "color": "orange"

​ },

​ {

​ "value": 4,

​ "color": "orange"

​ }

​ ]

​ },

​ {

​ "type": "allSorted",

​ "insertionIndex": 0,

​ "content": [

​ {

​ "value": 0,

​ "color": "blue"

​ },

​ {

​ "value": 1,

​ "color": "blue"

​ },

​ {

​ "value": 2,

​ "color": "blue"

​ },

​ {

​ "value": 3,

​ "color": "blue"

​ },

​ {

​ "value": 4,

​ "color": "blue"

​ }

​ ]

​ }

​ ]

},

"message": null,

"success": true

}

5.快速排序(交换排序的一种)

(1)符号说明

1.颜色和意义

yellow: 当前的pivot

purple: 已比较并被标记为比pivot大的部分

red: 当前与pivot比较的值

green: 已比较并被标记为比pivot小的部分

orange: 之前做过pivot,现在已经确定了最终的位置,即已排好序的部分

blue: 未选中且未排好序的部分

2.状态和意义

beforeSelectPivot: 还未选择一个pivot,只有orange和blue两种颜色

onSelectPivot: 选中一个pivot,还未开始比较和划分

onCompare: 某一个值正在比较当中,上一次比较的值已确定比pivot大或比pivot小

onExchange: 把比pivot小的值置换到storeIndex上去 (增序快排)

onConfirm: 已筛选出比pivot大的和比pivot小的值,将pivot与最远的比pivot小的值交换,确定pivot的最终位置

allSorted: 所有值都排好序了,所有的值都为蓝色

(2)接口返回值格式(只含response的content部分,实际的json还包含外面的response其他部分)ir

(3)postman实例测试

6.图

(1)符号说明

1.颜色和意义

2.状态和意义

(2)接口返回值格式(只含response的content部分,实际的json还包含外面的response其他部分)

1.URL:localhost:8080/graph/get-new-UDUWGraph

{

"content": {

​ "nodeNum": 7,

​ "edgeNum": 11,

​ "content": [

​ [

​ 0,

​ 0,

​ 0,

​ 1,

​ 0,

​ 0,

​ 0

​ ],

​ [

​ 0,

​ 0,

​ 1,

​ 0,

​ 1,

​ 1,

​ 0

​ ],

​ [

​ 0,

​ 1,

​ 0,

​ 0,

​ 1,

​ 1,

​ 0

​ ],

​ [

​ 1,

​ 0,

​ 0,

​ 0,

​ 1,

​ 1,

​ 1

​ ],

​ [

​ 0,

​ 1,

​ 1,

​ 1,

​ 0,

​ 1,

​ 1

​ ],

​ [

​ 0,

​ 1,

​ 1,

​ 1,

​ 1,

​ 0,

​ 0

​ ],

​ [

​ 0,

​ 0,

​ 0,

​ 1,

​ 1,

​ 0,

​ 0

​ ]

​ ]

},

"message": null,

"success": true

}

2.URL:localhost:8080/graph/get-new-UDWGraph

{

"content": {

​ "nodeNum": 7,

​ "edgeNum": 10,

​ "content": [

​ [

​ 0,

​ 9,

​ 0,

​ 6,

​ 0,

​ 0,

​ 0

​ ],

​ [

​ 9,

​ 0,

​ 7,

​ 0,

​ 9,

​ 0,

​ 0

​ ],

​ [

​ 0,

​ 7,

​ 0,

​ 7,

​ 1,

​ 2,

​ 2

​ ],

​ [

​ 6,

​ 0,

​ 7,

​ 0,

​ 4,

​ 0,

​ 0

​ ],

​ [

​ 0,

​ 9,

​ 1,

​ 4,

​ 0,

​ 6,

​ 0

​ ],

​ [

​ 0,

​ 0,

​ 2,

​ 0,

​ 6,

​ 0,

​ 0

​ ],

​ [

​ 0,

​ 0,

​ 2,

​ 0,

​ 0,

​ 0,

​ 0

​ ]

​ ]

},

"message": null,

"success": true

}

3.post请求:URL:localhost:8080/graph/get-breath-first-traversal?startVertex=0

前端传的json串:

{

"nodeNum": 7,

"edgeNum": 19,

"content": [

​ [

​ 0,

​ 0,

​ 1,

​ 1,

​ 1,

​ 1,

​ 0

​ ],

​ [

​ 0,

​ 0,

​ 1,

​ 1,

​ 1,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 0,

​ 1,

​ 1,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 1,

​ 0,

​ 1,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 1,

​ 1,

​ 0,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 1,

​ 1,

​ 1,

​ 0,

​ 1

​ ],

​ [

​ 0,

​ 1,

​ 1,

​ 1,

​ 1,

​ 1,

​ 0

​ ]

]

}

后端返回值:

/**

后端返回值的含义解析:

后端返回的json都是一个Response对象,去掉外层的response之后,返回的是{graph: ,content: }。

graph属性:表示现在已被渲染的图(也是原来后端传给前端的图,没有变,不需要重新渲染图,无意义,前端可以忽略这个属性。

content属性:表示图动态变化的内容,是一个数组。它将图的动态变化划分为一个一个的步骤,每一个步骤被描述为一个对象:

{

​ "type": "tryRoad", //步骤的类型,有"tryRoad"和"visit"两种。tryRoad意为“探路”,是一种尝试访问某个节点的行为。尝试访问某个节点不一定成功,可能某个节点已被访问过了,那么就不能重复访问。也可能是虽没被访问过,但是已有路径被标记为可以到达它,因此不需要再标记一个可行路径。所以探路可能会失败。若某节点经探路发现,还没有被访问或还没有被标记可行路径,那么探路成功。下个步骤就会visit这个节点。visit意为访问某个节点。当某一个节点还没被访问的时候,可以visit这个节点。节点通常先被探路,探路成功后,下面再被访问。

​ "end": 2, //无论是探路还是访问,“路径”都是指节点与节点之间的某个连线。end是探路或访问路径的结束节点。

​ "success": true, //探路是否成功

​ "start": 0 //探路或访问路径的开始节点。当type为visit的时候start没有意义,end代表访问的节点。

​ }

例如,上面的步骤对象代表了图的一个动态变化动作:沿路径0-2(从0开始,终点是2),从节点0对节点2进行试探,探路成功。

渲染效果:

  1. {

​ "type": "visit",

​ "end": 0,

​ "success": true,

​ "start": 0

​ },

//访问节点0(以end的值为准,此时start无意义),渲染为将节点0的轮廓(即一个圆圈)加粗(要很明显),证明它正在被访问。直到下一个节点被visit之前,这个节点的轮廓一直是被加粗的。

​ 2. {

​ "type": "tryRoad",

​ "end": 2,

​ "success": true,

​ "start": 0

​ },

//探路0-2,从0出发试探2有没有被访问过或有没有被标记过有可行路径到达,渲染为将0-2之间的连线的箭头改为从0指向2的红色带单箭头的连线(红色连线表明正在探这条路)(原图可能是灰色的双箭头连线)若,success=true说明2没有被访问过,则再次渲染为将这个连线的双箭头恢复,连线变为蓝色(蓝色连线表明路径可行。)。若success=false,则再次渲染为将这个连线的双箭头恢复,连线变为原来的灰色。(灰色代表路径不可行)(探路行为需要两次渲染,访问行为需要一次渲染。)

​ 3. {

​ "type": "visit",

​ "end": 2,

​ "success": true,

​ "start": 0

​ },

//访问节点2,同理,将节点2的轮廓加粗设为黑色。(直到下一个节点被访问了,那么取消这个节点的轮廓加粗效果。)

/*

{

"content": {

​ "graph": { //原来前端传给后端的图,没有变,不需要把图再渲染一遍。即,这个返回给前端的graph属性

​ "nodeNum": 7, //对前端渲染工作是不需要的,前端可以忽略这个返回值

​ "edgeNum": 19,

​ "content": [

​ [

​ 0,

​ 0,

​ 1,

​ 1,

​ 1,

​ 1,

​ 0

​ ],

​ [

​ 0,

​ 0,

​ 1,

​ 1,

​ 1,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 0,

​ 1,

​ 1,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 1,

​ 0,

​ 1,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 1,

​ 1,

​ 0,

​ 1,

​ 1

​ ],

​ [

​ 1,

​ 1,

​ 1,

​ 1,

​ 1,

​ 0,

​ 1

​ ],

​ [

​ 0,

​ 1,

​ 1,

​ 1,

​ 1,

​ 1,

​ 0

​ ]

​ ]

​ },

​ "content": [ //渲染的所有步骤内容,是一个数组,数组里的每一个对象是一个步骤,代表着图的一次动态变

​ { //化。

​ "type": "visit", //type是步骤的类型,end:是

​ "end": 0,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 2,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 3,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 4,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 5,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "visit",

​ "end": 2,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 0,

​ "success": false,

​ "start": 2

​ },

​ {

​ "type": "tryRoad",

​ "end": 1,

​ "success": true,

​ "start": 2

​ },

​ {

​ "type": "tryRoad",

​ "end": 3,

​ "success": false,

​ "start": 2

​ },

​ {

​ "type": "tryRoad",

​ "end": 4,

​ "success": false,

​ "start": 2

​ },

​ {

​ "type": "tryRoad",

​ "end": 5,

​ "success": false,

​ "start": 2

​ },

​ {

​ "type": "tryRoad",

​ "end": 6,

​ "success": true,

​ "start": 2

​ },

​ {

​ "type": "visit",

​ "end": 3,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 0,

​ "success": false,

​ "start": 3

​ },

​ {

​ "type": "tryRoad",

​ "end": 1,

​ "success": false,

​ "start": 3

​ },

​ {

​ "type": "tryRoad",

​ "end": 2,

​ "success": false,

​ "start": 3

​ },

​ {

​ "type": "tryRoad",

​ "end": 4,

​ "success": false,

​ "start": 3

​ },

​ {

​ "type": "tryRoad",

​ "end": 5,

​ "success": false,

​ "start": 3

​ },

​ {

​ "type": "tryRoad",

​ "end": 6,

​ "success": false,

​ "start": 3

​ },

​ {

​ "type": "visit",

​ "end": 4,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 0,

​ "success": false,

​ "start": 4

​ },

​ {

​ "type": "tryRoad",

​ "end": 1,

​ "success": false,

​ "start": 4

​ },

​ {

​ "type": "tryRoad",

​ "end": 2,

​ "success": false,

​ "start": 4

​ },

​ {

​ "type": "tryRoad",

​ "end": 3,

​ "success": false,

​ "start": 4

​ },

​ {

​ "type": "tryRoad",

​ "end": 5,

​ "success": false,

​ "start": 4

​ },

​ {

​ "type": "tryRoad",

​ "end": 6,

​ "success": false,

​ "start": 4

​ },

​ {

​ "type": "visit",

​ "end": 5,

​ "success": true,

​ "start": 0

​ },

​ {

​ "type": "tryRoad",

​ "end": 0,

​ "success": false,

​ "start": 5

​ },

​ {

​ "type": "tryRoad",

​ "end": 1,

​ "success": false,

​ "start": 5

​ },

​ {

​ "type": "tryRoad",

​ "end": 2,

​ "success": false,

​ "start": 5

​ },

​ {

​ "type": "tryRoad",

​ "end": 3,

​ "success": false,

​ "start": 5

​ },

​ {

​ "type": "tryRoad",

​ "end": 4,

​ "success": false,

​ "start": 5

​ },

​ {

​ "type": "tryRoad",

​ "end": 6,

​ "success": false,

​ "start": 5

​ },

​ {

​ "type": "visit",

​ "end": 1,

​ "success": true,

​ "start": 2

​ },

​ {

​ "type": "tryRoad",

​ "end": 2,

​ "success": false,

​ "start": 1

​ },

​ {

​ "type": "tryRoad",

​ "end": 3,

​ "success": false,

​ "start": 1

​ },

​ {

​ "type": "tryRoad",

​ "end": 4,

​ "success": false,

​ "start": 1

​ },

​ {

​ "type": "tryRoad",

​ "end": 5,

​ "success": false,

​ "start": 1

​ },

​ {

​ "type": "tryRoad",

​ "end": 6,

​ "success": false,

​ "start": 1

​ },

​ {

​ "type": "visit",

​ "end": 6,

​ "success": true,

​ "start": 2

​ },

​ {

​ "type": "tryRoad",

​ "end": 1,

​ "success": false,

​ "start": 6

​ },

​ {

​ "type": "tryRoad",

​ "end": 2,

​ "success": false,

​ "start": 6

​ },

​ {

​ "type": "tryRoad",

​ "end": 3,

​ "success": false,

​ "start": 6

​ },

​ {

​ "type": "tryRoad",

​ "end": 4,

​ "success": false,

​ "start": 6

​ },

​ {

​ "type": "tryRoad",

​ "end": 5,

​ "success": false,

​ "start": 6

​ }

​ ]

},

"message": null,

"success": true

}

(3)postman实例测试