ProcessOn 数据恢复

深碍√TFBOYSˉ_ 2022-03-25 06:38 358阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70]  
周六早晨上班，同事说 ProcessOn 上面的一个思维导图打不开了（一直转圈儿，没有任何内容），这是一个非常重要的思维导图，如果真出现问题，可能以后都不敢用 ProcessOn 了。我同事自己先和客服联系，由于他们周末不上班，此事无法解决。

我自己因为好奇，就想看看自己能不能恢复了，因此有了本文。

本文不涉及复杂的功能，整个处理过程只使用了 Chrome 浏览器，打开 F12 即可。

为了能看到正常思维导图的处理过程，先创建一个简单的思维导图，添加一个简单的内容。

进行下面操作前，先打开 F12 控制台，每次操作前都建议清空 Network 里面的内容。

## 对代码不懂的读者可以直接看最后面的代码 ##

粘贴到浏览器控制台执行按照提示操作即可。

## 获取历史 ##

ProcessOn 有历史功能，因此我第一步想到的是获取历史，然后还原到某个可用的版本。

下面开始详细的操作步骤：

1.  按下面方式，点击【历史版本】  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 1]
2.  查看此时的浏览器请求如下  
    ![在这里插入图片描述][20190119094511307.png]
3.  查看调用的方法（鼠标放到 jquery.js?\_…上面就会出现）  
    ![在这里插入图片描述][20190119094536597.png]
4.  看到 loadHistorys，点击该行的链接  
    ![在这里插入图片描述][20190119094614385.png]
5.  由于代码压缩过，点击代码左下角的 `{}` 按钮进行格式化，然后定位到如下位置  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 2]  
    可以看到上面的请求很简单的，复制这段代码修改如下：

//获取所有历史信息
    $.ajax({ 
        url: "/diagraming/get_versions",
        data: { 
            chartId: '思维导图的 ID，在浏览器地址栏的最后一部分'
        },
        cache: false,
        success: function(g) { 
            console.dir(g);
        }
    })

思维导图 ID 就是类似 `https://www.processon.com/mindmap/5c427b11e4b03334b5086fdc` 这个地址中的 `5c427b11e4b03334b5086fdc` 部分（该地址不存在，用你自己的地址测试）。执行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 3]  
上述代码执行后，会在控制台输出所有可用的历史版本，而且是倒序排列。展开想要还原的一个版本，示例如下：  
![在这里插入图片描述][20190119095227684.png]  
复制 `definitionId` 的值。

## 还原到指定的版本 ##

和前面类似，执行还原操作，查找对应的代码。

下面是几个操作步骤图。

1.  点击还原  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 4]
2.  获取指定版本的配置  
    ![在这里插入图片描述][20190119103458162.png]
3.  对应的代码如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 5]
4.  等待片刻，看到 restore  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 6]
5.  查看对应代码  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 7]  
    上面两段代码都很简单，这里不一一分析，直接来最终的代码。

## 完整操作代码 ##

代码如下：

//还原到指定的版本
    (function restore(){ 
        //根据当前浏览器地址获取 id
        var MAX_HISTORY_LENGTH = 10;
        var href = window.location.href;
        var chartId = href.substr(href.lastIndexOf('/') + 1);
        //获取所有历史
        $.ajax({ 
          url: "/diagraming/get_versions",
          data: { 
              chartId: chartId
          },
          cache: false,
          success: function(historyResp) { 
              if(historyResp && historyResp.list){ 
                  //获取最近 MAX_HISTORY_LENGTH 个历史
                  var historyList = historyResp.list;
                  var historyLength = historyList.length > MAX_HISTORY_LENGTH ? MAX_HISTORY_LENGTH: historyList.length;
                  if(historyLength == 0){ 
                    alert('当前没有历史版本，无法选择还原!');
                    return;
                  }
                  var historyHtml = '清选择要还原的历史版本:\n';
                  for(var i = 0; i < historyLength; i++){ 
                    var h = historyList[i];
                    historyHtml += '\n';
                    historyHtml += i + '. ' + h.fullName + ' <' + h.remark + '> : ' + h.createDate;
                  }
                  historyHtml + '\n 请输入要还原历史的序号:';
                  var choose = prompt(historyHtml);
                  if(choose === null){ 
                    return;
                  }
                  try { 
                    choose = Number(choose);
                  } catch(e){ 
                    alert('输入错误:' + e);
                    return;
                  }
                  if(choose > historyLength){ 
                    alert('序号超过可选范围');
                    return;
                  }
                  //获取历史详细信息
                  $.ajax({ 
                      url: "/diagraming/get_versiondef",
                      data: { 
                          id: historyList[choose].definitionId
                      },
                      success: function(b) { 
                          if (b.def == null) { 
                            alert('历史不存在');
                            return
                          }
                          if(confirm('确认要还原吗?')){ 
                            $.ajax({ 
                              url: "/mindmap/restore",
                              type: "post",
                              data: { 
                                def: b.def,
                                chart_id: chartId,
                                ignore: "def"
                              },
                              success: function() { 
                                alert('还原完成，刷新查看');
                                window.location.reload();
                              }
                            })
                          }
                      }
                  })
              }
          }
      });
    })();

用法：

1.  用谷歌或者急速内核浏览器打开有问题的思维导图
2.  按 F12 打开控制台  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 8]
3.  如上图，切换到 Console 标签，在下面输入框粘贴上述代码，回车执行
4.  按照下面提示进行操作  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 9]  
    ![在这里插入图片描述][20190119105924272.png]  
    ![在这里插入图片描述][20190119105931687.png]  
    最后确定后浏览器会自动刷新，此时可以看到效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70]: /images/20220325/6d46fb630def4bfeaee508198613514a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 1]: /images/20220325/e549684cad6a4c45ab57ad7d06cee710.png
[20190119094511307.png]: /images/20220325/8efc16941fda414f98ccbcafbc41671b.png
[20190119094536597.png]: /images/20220325/070268ba59fa49c9a15ca0316c0bf1c8.png
[20190119094614385.png]: /images/20220325/1b23faa584f549f392ccc4ca93b49cc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 2]: /images/20220325/de977abc0848476eb182ee3ff3112a42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 3]: /images/20220325/b207793d400c4341ae5cd94c2baf67fb.png
[20190119095227684.png]: /images/20220325/730665ca132c4d3dba7ce7adc1ec1686.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 4]: /images/20220325/76d71021ea634ca199d88ad6f5eae9f6.png
[20190119103458162.png]: /images/20220325/4d99d1c2aeda429c950f244c1000b511.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 5]: /images/20220325/177eb9e7b74c4891a120f1326da85edf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 6]: /images/20220325/d5cc3c627577487eaef4c59a4d21c0ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 7]: /images/20220325/a145667cc31f41178cd9fdab36a8fb6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 8]: /images/20220325/82e1bcaa498c4fcdae6001446b6985d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 9]: /images/20220325/f179d9784e5d4b0383aa1b9d7509fca7.png
[20190119105924272.png]: /images/20220325/c2a61c5808274248bccc76f9fceae675.png
[20190119105931687.png]: /images/20220325/ba2d5c0b1d284ec4bcd8566e8a89978a.png