{ mxUtils.error('Browser is not supported!', 200, false); } else { // 在容器中创建图形 var graph = new mxGraph(container);
// 允许选择和单元格处理 graph.setEnabled(false); graph.setPanning(true); graph.setTooltips(true); graph.panningHandler.useLeftButtonForPanning = true;
// 鼠标停留到元素上边缘高亮显示 new mxCellTracker(graph);
// 更改节点的默认样式 var style = graph.getStylesheet().getDefaultVertexStyle(); // 定义形状 style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED; // 定义周长 style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; // 定义渐变色 style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style[mxConstants.STYLE_PERIMETER_SPACING] = 4; style[mxConstants.STYLE_SHADOW] = true;
// 更改边的默认样式 style = graph.getStylesheet().getDefaultEdgeStyle(); style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
style = mxUtils.clone(style); style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC; graph.getStylesheet().putCellStyle('2way', style);
graph.isHtmlLabel = function(cell) { return true; };
// 更改布局网格大小 graph.gridSize = 20;
// 创建布局更新算法 var layout = new mxFastOrganicLayout(graph);
// 移动布局内的元素 layout.forceConstant = 140;
// 添加一个按钮负责改变布局 document.body.appendChild(mxUtils.button('Arrange',function(evt) { var parent = graph.getDefaultParent(); layout.execute(parent); }));
// 开始布局更新 graph.getModel().beginUpdate(); try { // 加载自定义的格式文件 (TXT file) parse(graph, 'fileio.txt');
// 加载 mxGraph 格式文件 (XML file) //read(graph, 'fileio.xml');
// 在图形中创建默认组件 var parent = graph.getDefaultParent();
// 展示布局内容 layout.execute(parent); } finally { // 更新事务结束 graph.getModel().endUpdate(); } //双击事件 graph.dblClick = function(evt, cell) { var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell); this.fireEvent(mxe);
if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed() && cell != null) { mxUtils.alert('Show properties for cell '+(cell.customId || cell.getId())); } };
if (mxClient.IS_QUIRKS) { document.body.style.overflow = 'hidden'; new mxDivResizer(container); } } };
// 自定义文件格式解析器 function parse(graph, filename) { var model = graph.getModel();
// 创建默认窗体 var parent = graph.getDefaultParent();
var req = mxUtils.load(filename); var text = req.getText();
var lines = text.split('\n');
// 在表中创建一个顶点数组 var vertices = [];
// 开始更新事务 graph.getModel().beginUpdate(); try { for (var i = 0; i < lines.length; i++) { // 获取“:”位置 var colon = lines[i].indexOf(':');
// 忽略注释（以＃开头） if (lines[i].substring(0, 1) != "#" || colon == -1) { // 获取“,”位置 var comma = lines[i].indexOf(',');
// 获取节点或边的信息：
Printername
Status
Info
var value = lines[i].substring(colon+2, lines[i].length);
// 若为顶点 if (comma == -1 || comma > colon) { // 获取顶点ID("1"、"2"...) var key = lines[i].substring(0, colon);
// 若顶点ID存在 if (key.length > 0) { // 将顶点ID置于顶点数组内 vertices[key] = graph.insertVertex(parent, null, value, 0, 0, 80, 70); } } // 若为边 else if (comma < colon) { // 查找顶点数组中的源节点.eg.1,4: var source = vertices[lines[i].substring(0, comma)]; // 查找顶点数组中的目的节点 var target = vertices[lines[i].substring(comma+1, colon)];
// 若以上源节点与目的节点均存在 if (source != null && target != null) { // 插入一条普通边 var e = graph.insertEdge(parent, null, value, source, target);
// 采用特殊的2-Way 标签的风格:" 1,5: 
2-Way "
if (value.indexOf('2-Way') >= 0)
{
e.style = '2way';
}
}
}
}
}
}
finally
{
graph.getModel().endUpdate();
}
};
// 解析mxGraph XML文件格式 function read(graph, filename) { var req = mxUtils.load(filename); var root = req.getDocumentElement(); var dec = new mxCodec(root.ownerDocument);
dec.decode(root, graph.getModel()); };
<!-- 创建带网格壁纸和曲线的一个容器，请一定要定义的position和overflow的属性！根据在线API的54 页内容增加的大小侦听器 -->
<div id="graphContainer" style="position:absolute;overflow:auto;top:36px;bottom:0px;left:0px;right:0px;border-top:gray 1px solid;">
</div>
其中，读取的文件“fileio.txt”内容如下:
Custom file format for fileio.html (comments start with #, all vertices first)
Vertices (id: label)
1: 
Last, First
Status
Info
2: 
Errorcode
Status
Info
3: 
Warning
Status
Info
4: 
Groupname
Status
Info
5: 
Workplace
Status
Info
6: 
Information
Status
Info
7:
Printername
Status
Info
Edges (source-id,target-id: label)
1,2: Hint
1,3: 
News
1,4: Member
5,6: 
Details
5,7: 
Access
4,5: 
Access
1,5: 2-Way
很明显，fileio.txt文件中只是定义了节点、边及其相关标识，注意到其中定义了特殊的双向边。但此双向边是在文件中初始化完成的。自己需要改进。
基于此，自己可首先实现文件的写操作，然后实现文件读取并实现前台展现操作。
初步结果如下:
接下来的工作是实现日志处理，将每个操作映射为连续的正整数，并写入相应的数据库与相应文件内。文件格式如下:
Custom file format for fileio.html (comments start with #, all vertices first)
Vertices (id: label) 1: 1 2: 2 3: 3 4: 4 5: 5 6: 6 7: 7
Edges (source-id,target-id: label) 1,2: 2 1,3: 3
Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
