1.颜色和意义
bule: 未排好序,不在比较或交换状态; 当完全排好序之后,所有值的颜色也是bule
green: 未排好序,在比较或交换状态
orange: 已排好序
2.状态及意义
onCompare: 两个值正在比较当中
onExchange: 两个值正在交换当中,显示的是交换后的值和颜色
beforeCompare: 没有正在比较或正在交换的值,所有值要么处于已拍好序状态,要么处于没拍好序,但未比较且未交换状态。
AllSorted: 所有值都拍好序了,所有的值的颜色都是bule
注:
这里说明一下为什么没有交换后的状态(afterCompare)。因为在同一趟比较和交换当中,前一组值比较和交换完成之后就直接进入 下一组值的比较和交换状态了,而交换后的状态仅仅在一趟比较和交换完全完成之后且下一趟比较和交换还未开始的时候,此时的状态 既是上一趟比较结束后的afterCompare状态,也是下一趟比较未开始前的beforeCompare状态,所以这里统一归为beforeCompare状 态。另外,新加了AllSorted状态,这个状态在排序过程中仅出现一次,也是排序的最后状态类型。
{
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: },...]
},
...
]
}
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
}
stack有三个操作:初始化栈(可以指定栈大小,也可以不指定,使用默认值。),push,pop。初始化栈的操作不需要请求后端,只需 要在前端实现即可。
1.push返回值://若push成功,content为push后的内容;若push失败,message显示原因,content显示原来栈的内容
{
capacity:
content:[1,2,3,4,5,...]
}
2.pop的返回值同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
}
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
}
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
}
备注:因为需要传空的content,不知道怎么传。
1.颜色和意义
blue: 不在正在比较状态,也不属于已排好序的部分,也不是当前状态的待排序的最值(最大值或者最小值)
green: 正在比较中(比较是为了在未排序的部分筛选最值,作为下一个排序的值)
red: 比较进行到此刻所筛选出来的最值
orange: 已排好序的部分
2.状态和意义
beforeCompare: 有一部分排好序的值,其他没排好序的值全部未选中(即没有值被标记为最值(red),也没有值在比较当中(green))
onExtreme: 正在选择最值,因为最初选择最值和最值切换停止比较
onCompare: 正在比较当中
beforeExchange: 有两个(特殊情况下有一个)值是红色的,一个是当前选中的最值,一个是下一个该排序的位置上的值,它们两个值(如果这两个值不是同一个值的话)在等待交换位置
afterExchange: 两个红色的值已经完成了交换,交换过后多了一个已排好序的值
allSorted: 所有的值都已经排好序
{
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: },...]
},
...
]
}
{
"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
}
1.颜色和意义
blue: 未被选中,还未排好序
green: 在比较当中或在移动当中(在移动当中显示移动后的位置)
red: 当前需要插入的值
orange: 已排好序
white: 空白bar (空白bar的color为white, value为0)
2.状态和意义
onSelect: 已选中下一个待插入目标,待插入目标已出列,但还未开始比较
onCompare: 正在比较
onExchange: 比较后发现逆序,与空白bar交换位置
onInsertion: 比较和交换后发现此时空白bar就是应该把当前值插入的地方,显示插入后的结果(所有bar只有blue和orange两种颜色)
allSorted: 所有的值都已排好序(全部为蓝色)
{
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: },...]
},
...
]
}
{
"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
}
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: 所有值都排好序了,所有的值都为蓝色
1.颜色和意义
2.状态和意义
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进行试探,探路成功。
渲染效果:
"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
}