前言

在调研如何在测试平台中管理测试点拆分列表,相中了百度脑图的开源框架 https://github.com/fex-team/kityminder-editor ,于是尝试集成到我们的测试平台中。 以下是集成过程中一些关键点记录。

思路:

经过分析,大致需要以下功能:

开发过程:

1. 在数据库中设计新表,用以保存脑图内容。

设计字段包括: id,module,name,description,content 。

2. 在 flask 中分别增加相关的新增、编辑、查询、删除、复制等 html 页面、view 和 js 方法。

这部分是常规的功能,只需要在原有其他模块的基础上复制、修改即可。
重点: 脑图的基本信息编辑和脑图内容编辑分开在两个页面处理。 其中脑图基本信息(名称、备注等)是 flask 新开发的页面,而脑图内容则使用 kityminder-editor 提供的页面。

3. 脑图内容编辑展示:

直接使用 kityminder-editor 提供的页面。 在安装好 kityminder-editor 相关依赖后, 需要做的开发是脑图内容(json 格式的数据)的导出和导入。

3.1 数据导出保存:

kityminder-editor 提供了对应的数据导出方法: editor.minder.exportJson() 。 因此,只需要在页面中加一个 保存 按钮,并将导出的内容保存到数据库即可。

index.html 文件中 新增保存按钮:

<button id="exportData" onclick="exportData()">保存</button>

js 中的对应保存方法:

function exportData(){
    var jsonData=editor.minder.exportJson();
    jsonData = JSON.stringify(jsonData);
    console.log(jsonData);
    var minder_id = document.getElementById('minderId').value;
    $.ajax(
    {
        url: "/save_test_minder_content.json",
        data:{"content":jsonData,"id":minder_id},
        type: "post",
        dataType:"json",
        beforeSend:function()
        {
        return true;
        },
        success:function(data)
        {
        if(data)
        {
            // 解析json数据
            var data = data;
            if(data.code==200){
            alert('success!');
            // alert
            }else{
            alert('code is :'+data.code+' and message is :'+data.msg);
            }
        }

        else
        {
        alert('操作失败');
        }
        },
        error:function()
        {
        alert('请求出错');
        },
        complete:function()
        {
        // $('#tips').hide();
        }
});

}

3.2 脑图数据导入:

kityminder-editor 中 同样提供了数据导入方法: editor.minder.importJson(json),所以第一选择是使用该方法来导入从数据库中读取的脑图内容。

遇到的问题:

尝试后发现, kityminder-editor 提供的页面中会自动加载上一次保存的内容, 无法自动触发 editor.minder.importJson(json) 方法来导入新数据。

解决过程:

研究 kityminder-editor 相关代码发现,在页面中编辑脑图内容时,会自动将脑图内容保存到 localStorage 中: localStorage.__dev_minder_content 。 因此,如果要每次打开不同的脑图数据都自动加载新的数据内容,只需要在页面初始化时替换掉 localStorage 中的对应值即可。

对应 js 代码:

if (data.content!='{}'){    //  如果脑图内容不为空
                if (refreshJson==1){  // 如果是手动刷新, 则直接调用  importJson 方法导入新数据
                editor.minder.importJson(JSON.parse(data.content));
                alert('刷新成功!');
                }else {
                    window.localStorage.__dev_minder_content=data.content;   // 如果是新打开页面,将查询内容直接替换掉 localstorage 中保存的历史记录
                    }
            }else{
                localStorage.removeItem('__dev_minder_content');     // 如果新查询的脑图内容为空, 则直接删除 localstorage 的key ,重新初始化脑图内容
                if (refreshJson==1){
                   alert('刷新成功!');
                }
            }

集成效果:

查询页:

新增脑图信息页:

脑图内容编辑:


↙↙↙阅读原文可查看相关链接,并与作者交流