写在最后
还有一份JAVA核心知识点整理（PDF）：JVM，JAVA集合，JAVA多线程并发，JAVA基础，Spring原理，微服务，Netty与RPC，网络，日志，Zookeeper，Kafka，RabbitMQ，Hbase，MongoDB，Cassandra，设计模式，负载均衡，数据库，一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存，Hadoop，Spark，Storm，YARN，机器学习，云计算…
相关代码
$(“#flowBox”).droppable({
scope: ‘ss’,
drop: function (event, ui) {
var $chart = $(ui.draggable[0]);
var node = {};
node.id = “node” + Math.random().toString(36).substr(3, 10);
node.name = $chart.attr(“data-name”);
node.data_id = $chart.attr(“id”);
node.data_code = $chart.attr(“data-code”);
node.data_type = $chart.attr(“data-type”);
node.type = ‘chart’;
node.groupId = null;
node.width = 150;
node.height = 130;
node.left = miniview_position.left * miniview_percent + (ui.position.left - 100);
node.top = miniview_position.top * miniview_percent + (ui.position.top - 50);
node.EndpointList = getEndpointList(node);
addNode(node);
}
})
function drawNode(node) {
if(node.type == ‘chart’){
var nodeDiv = [‘
‘
’,‘
‘’].join(‘’);
$(“#flowBox”).append(nodeDiv);
// 拖拽改变大小
$(“#”+node.id).resizable({
autoHide: true ,
minHeight: 50,
minWidth:50,
aspectRatio:15/13,
containment: “parent”,
resize: function (event, ui) {
changeNodeSize(node.id,ui.size.width,ui.size.height)
//拖拽时点位跟着变动
jsPlumb.repaint(ui.helper);
jsPlumb.repaintEverything();
}
})
jsPlumb.draggable(node.id);
if(node.groupId !=null){
var el = eval(‘(’ + node.id + ‘)’);
var groupNode = dataNodeList.filter(function (itemNode) {
return itemNode.id == node.groupId;
})[0];
$(“#”+node.id).css(‘left’,(groupNode.left + node.left)+“px”);
$(“#”+node.id).css(‘top’,(groupNode.top + node.top)+“px”);
jsPlumb.addToGroup(node.groupId, el);
}
}
if(node.EndpointList !=null && node.EndpointList.length >0){
for (var i = 0; i < node.EndpointList.length; i++) {
jsPlumb.addEndpoint(node.id, {uuid:node.EndpointList[i].id,anchors:locationToAnchors(node.EndpointList[i].location,node)}, GetEndpointOptions(node.EndpointList[i]));
}
}
}
设备组管理
多个设备可以拉进一个设备组中一起管理，组㐓展开折叠。
jsPlumb通过事件控制组元素的新增和删除
//添加到组
jsPlumb.bind(“group:addMember”,function(evt) {
var nodeId = evt.el.id;
var groupId = evt.group.id;
var pos = evt.pos;
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
dataNodeList[i].groupId = groupId;
dataNodeList[i].left = pos.left;
dataNodeList[i].top = pos.top;
break;
}
}
});
//从组中删除
jsPlumb.bind(“group:removeMember”,function(evt) {
console.log(1)
var nodeId = evt.el.id;
var groupId = evt.group.id;
var pos = evt.pos;
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
dataNodeList[i].groupId = null;
dataNodeList[i].left = pos.left;
dataNodeList[i].top = pos.top;
break;
}
}
});
其他功能
其中还有放大缩小整个画布、导入导出，返回上一步等其他功能。下面附上所有的JavaScript代码，感兴趣的同学可以学习参考一下。
var miniview_position ={ top: 0, left: 0 };
var miniview_percent = 8;
var workflowInfo = {};
var dataNodeList = [];
var dataLineList = [];
var loadEasyFlowFinish = true;
var jsplumbSetting = {
// 动态锚点、位置自适应
//Anchors: [‘Top’, ‘TopCenter’, ‘TopRight’, ‘TopLeft’, ‘Right’, ‘RightMiddle’, ‘Bottom’, ‘BottomCenter’, ‘BottomRight’, ‘BottomLeft’, ‘Left’, ‘LeftMiddle’],
Container: ‘flowBox’,
// 连线的样式 StateMachine、Flowchart
Connector: ‘Flowchart’,
// 鼠标不能拖动删除线
ConnectionsDetachable: false,
// 删除线的时候节点不删除
DeleteEndpointsOnDetach: false,
// 连线的端点
Endpoint: [ “Dot”, { radius:2.5 } ],
// 线端点的样式
//EndpointStyle: { fill: ‘rgba(255,0,5,1)’, outlineWidth: 1},
LogEnabled: true,//是否打开jsPlumb的内部日志记录
// 绘制线
PaintStyle: { stroke: ‘black’, strokeWidth: 3 },
// 绘制箭头
//Overlays: [[‘Arrow’, {width: 12, length: 12, location: 1}]],
RenderMode: “svg”,
};
// jsplumb连接参数
var jsplumbConnectOptions = {
isSource: true,
isTarget: true,
// 动态锚点、提供了4个方向 Continuous、AutoDefault
anchor: “Continuous”
};
var jsplumbSourceOptions = {
/“span"表示标签，”.className"表示类，"#id"表示元素id/
filter: “.flow-node-drag”,
filterExclude: false,
anchor: “Continuous”,
allowLoopback: false
};
var jsplumbTargetOptions = {
/“span"表示标签，”.className"表示类，"#id"表示元素id/
filter: “.flow-node-drag”,
filterExclude: false,
anchor: “Continuous”,
allowLoopback: false
};
function BtnAddGroup() {
var node = {};
node.id = “Group”+ Math.random().toString(36).substr(3, 10);
node.name = ‘组’;
node.type = ‘group’;
node.groupId = node.id;
node.width = 300;
node.height = 300;
node.left = miniview_position.left * miniview_percent + (0);
node.top = miniview_position.top * miniview_percent + (0);
addNode(node);
}
var jsPlumbZoom = 1;
function BtnWorkflowSmall() {
jsPlumbZoom -= 0.05;
setZoom(jsPlumbZoom);
}
function BtnWorkflowBig() {
jsPlumbZoom += 0.05;
setZoom(jsPlumbZoom);
}
window.setZoom = function(zoom, instance, transformOrigin, el) {
transformOrigin = transformOrigin || [ 0, 0 ];
instance = instance || jsPlumb;
el = el || instance.getContainer();
var p = [ “webkit”, “moz”, “ms”, “o” ],
s = “scale(” + zoom + “)”,
oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + “%”;
for (var i = 0; i < p.length; i++) {
el.style[p[i] + “Transform”] = s;
el.style[p[i] + “TransformOrigin”] = oString;
}
el.style[“transform”] = s;
el.style[“transformOrigin”] = oString;
instance.setZoom(zoom);
};
/修改/
function BtnALLCancelSelection(){
$(“.nodeBox”).each(function(){
if($(this).hasClass(‘active’)){
$(this).removeClass(‘active’);
jsPlumb.removeFromDragSelection($(this));
}
})
}
$(function () {
$(“#flow-btns”).children().draggable({
helper: ‘clone’,
scope: ‘ss’
})
/修改/
$(“#flowBox”).droppable({
scope: ‘ss’,
drop: function (event, ui) {
var $chart = $(ui.draggable[0]);
var node = {};
node.id = “node” + Math.random().toString(36).substr(3, 10);
node.name = $chart.attr(“data-name”);
node.data_id = $chart.attr(“id”);
node.data_code = $chart.attr(“data-code”);
node.data_type = $chart.attr(“data-type”);
node.type = ‘chart’;
node.groupId = null;
node.width = 150;
node.height = 130;
node.left = miniview_position.left * miniview_percent + (ui.position.left - 100);
node.top = miniview_position.top * miniview_percent + (ui.position.top - 50);
node.EndpointList = getEndpointList(node);
addNode(node);
}
})
jsPlumb.ready(main);
function main() {
jsPlumb.importDefaults(jsplumbSetting);
jsPlumb.setContainer(‘flowBox’);
jsPlumb.setSuspendDrawing(false, true);
if (!!GetQuery(‘id’)) {
loadEasyFlowFinish =false;
var id = GetQuery(‘id’);
getAjax(“/WorkflowModule/Design/GetWorkflowInfo?id=” + id, {}, function (rs) {
var rs = eval(“(” + rs + “)”);
if (rs.status == “ok”) {
workflowInfo = rs.data;
dataNodeList = rs.data.WrokflowNodeList;
dataLineList = rs.data.WrokflowLinesList;
loadEasyFlow();
}
});
jsPlumbEvent();
}
}
setInterval(function(){
HistoryData();
},1000);
})
function jsPlumbEvent(){
// 单点击了连接线,
jsPlumb.bind(‘click’, function (conn, originalEvent) {
if(conn.id.substr(0,3)==‘con’){
lineClick(conn, originalEvent);
}
});
// 连线
jsPlumb.bind(“connection”, function (evt) {
var sourceId = evt.source.id;
var targetId = evt.target.id;
var sourceEndpointId = undefined;
var targetEndpointId = undefined;
var sourceNodeList = dataNodeList.filter(function (items) {
if (items.id == sourceId) {
return true;
}
return false;
});
var targetNodeList = dataNodeList.filter(function (items) {
if (items.id == targetId) {
return true;
}
return false;
});
if(sourceNodeList.length != 0){
sourceEndpointId = evt.sourceEndpoint._jsPlumb.uuid;
}
if(targetNodeList.length != 0){
targetEndpointId = evt.targetEndpoint._jsPlumb.uuid;
}
if (loadEasyFlowFinish) {
dataLineList.push({ sourceId: sourceId, targetId: targetId,sourceEndpointId:sourceEndpointId,targetEndpointId:targetEndpointId });
}
});
// 删除连线回调
jsPlumb.bind(“connectionDetached”, function (evt) {
var sourceEndpointId = evt.sourceEndpoint._jsPlumb.uuid;
var targetEndpointId = evt.targetEndpoint._jsPlumb.uuid;
deleteLine(sourceEndpointId, targetEndpointId);
})
//添加到组
jsPlumb.bind(“group:addMember”,function(evt) {
var nodeId = evt.el.id;
var groupId = evt.group.id;
var pos = evt.pos;
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
dataNodeList[i].groupId = groupId;
dataNodeList[i].left = pos.left;
dataNodeList[i].top = pos.top;
break;
}
}
});
//从组中删除
jsPlumb.bind(“group:removeMember”,function(evt) {
console.log(1)
var nodeId = evt.el.id;
var groupId = evt.group.id;
var pos = evt.pos;
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
dataNodeList[i].groupId = null;
dataNodeList[i].left = pos.left;
dataNodeList[i].top = pos.top;
break;
}
}
});
}
//单点击了连接线
function lineClick(conn, originalEvent){
var _layer = Getlayer();
_layer.open({
btn: [‘保存’, ‘删除’], //按钮
yes: function (index, layero) {
var lineText = parent.$(“#layui-layer” + index).find(“#lineText”).val();
conn.setLabel({
label: lineText,
cssClass: ‘labelClass’
});
for (var i = 0; i < dataLineList.length; i++) {
if (dataLineList[i].conn_id == conn.id) {
dataLineList[i].labelName = lineText;
dataLineList[i].labelCss = ‘labelClass’;
break;
}
};
_layer.close(index);
}, btn2: function (index, layero) {
jsPlumb.deleteConnection(conn)
_layer.close(index);
},
type: 1,
title: ‘连线信息’,
area: [‘420px’, ‘310px’], //宽高
content: ‘’
});
}
// 删除线
function deleteLine(sourceEndpointId,targetEndpointId) {
dataLineList = dataLineList.filter(function (line) {
if (line.sourceEndpointId == sourceEndpointId && line.targetEndpointId == targetEndpointId) {
return false
}
return true
})
}
/修改/
//加载流程图
function loadEasyFlow() {
$(“#flowBox”).empty();
//不在组里节点初始化
var dataNodeList1 = dataNodeList.filter(function (node) {
return node.groupId == null || node.type == ‘group’;
})
for (var i = 0; i < dataNodeList1.length; i++) {
var node = dataNodeList1[i];
drawNode(node);
}
//不在组里节点初始化
var dataNodeList2 = dataNodeList.filter(function (node) {
return node.groupId != null && node.type != ‘group’;
})
for (var i = 0; i < dataNodeList2.length; i++) {
var node = dataNodeList2[i];
drawNode(node);
}
loadLineList(dataLineList);
//折叠的组折叠
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].isCollapse == true && dataNodeList[i].type == ‘group’) {
jsPlumb.collapseGroup(dataNodeList[i].id);
}
}
jsPlumb.repaint($(“#flowBox”));
jsPlumb.repaintEverything();
setInterval(function () {
loadEasyFlowFinish = true;
}, 500);
}
/修改/
function loadLineList(_dataLineList){
// 初始化连线
for (var i = 0; i < _dataLineList.length; i++) {
var line = _dataLineList[i];
var sourceEndpoint = null;
if(line.sourceEndpointId != undefined){
var sourceEndpoints = jsPlumb.getEndpoints(line.sourceId);
var sourceEndpoint = sourceEndpoints.filter(function (itemEndpoint) {
return itemEndpoint._jsPlumb.uuid == line.sourceEndpointId
})[0];
}else{
sourceEndpoint = line.sourceId;
}
var targetEndpoint = null;
if(line.targetEndpointId != undefined){
var targetEndpoints = jsPlumb.getEndpoints(line.targetId);
var targetEndpoint = targetEndpoints.filter(function (itemEndpoint) {
return itemEndpoint._jsPlumb.uuid == line.targetEndpointId
})[0];
}else{
targetEndpoint = line.targetId;
}
// console.log(sourceEndpoint);
// console.log(targetEndpoint);
var curline = jsPlumb.connect({
source: sourceEndpoint,
target: targetEndpoint
}, jsplumbConnectOptions);
if(curline !=undefined){
_dataLineList[i].conn_id = curline.id;
if (line.labelName != “”) {
curline.setLabel({
label: line.labelName,
cssClass: line.labelCss
})
}
}
}
}
function changeNodeSite(e) {
var data = {};
data.nodeId = $(e).attr(“id”);
var position =$(e).position();
data.left = position.left;
data.top = position.top;
for (var i = 0; i < dataNodeList.length; i++) {
var node = dataNodeList[i];
if (node.id == data.nodeId) {
node.left = data.left;
node.top = data.top;
}
}
}
function onmouseoverNode(e) {
$(e).find(“.flow-node-operate”).show();
}
function onmouseoutNode(e) {
$(e).find(“.flow-node-operate”).hide();
}
var currentNode = null;
function onclickNode(e){
currentNode = e;
if($(currentNode).hasClass(‘active’)){
$(currentNode).removeClass(‘active’);
jsPlumb.removeFromDragSelection($(currentNode));
}
$(“#hide_input”).focus();
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
}
function hide_input_onkeydown(e) {
var event = window.event;
//删除
if(event.keyCode8 || event.keyCode46){ //8–backspace;46–delete
deleteNode(currentNode);
}
//选中
if(event.keyCode==13 && !$(currentNode).hasClass(‘nodeBox_group’)){ //13–回车
if($(currentNode).hasClass(‘active’)){
$(currentNode).removeClass(‘active’);
jsPlumb.removeFromDragSelection($(currentNode));
}else{
$(currentNode).addClass(‘active’);
jsPlumb.addToDragSelection($(currentNode), {
containment: ‘parent’
});
}
}
}
function ondblclickNode(e){
var nodeId = $(e).attr(“id”);
var _layer = Getlayer();
_layer.open({
btn: [‘确认’, ‘折叠’,‘展开’], //按钮
yes: function (index, layero) {
var data = {};
data.name = parent.$(“#layui-layer” + index).find(“#nodeInfoName”).val();
data.EndpointList = $nodeInfoTable.bootstrapTable(‘getData’)
var node ={};
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
dataNodeList[i].name = data.name;
dataNodeList[i].EndpointList = data.EndpointList;
node = dataNodeList[i];
break;
}
}
var tmp_dataLineList = dataLineList.filter(function (items) {
if (items.targetId == nodeId || items.sourceId == nodeId) {
return true;
}
return false;
});
jsPlumb.removeAllEndpoints(nodeId);
for (var i = 0; i < data.EndpointList.length; i++) {
jsPlumb.addEndpoint(node.id, {uuid:data.EndpointList[i].id,anchors:locationToAnchors(data.EndpointList[i].location,node)}, GetEndpointOptions(data.EndpointList[i]));
}
loadLineList(tmp_dataLineList);
_layer.close(index);
}, btn2: function (index, layero) {
var node ={};
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
dataNodeList[i].isCollapse = true;
node = dataNodeList[i];
break;
}
}
if(node.type==‘group’){
jsPlumb.collapseGroup(node.id);
}
_layer.close(index);
}, btn3: function (index, layero) {
var node ={};
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
dataNodeList[i].isCollapse = false;
node = dataNodeList[i];
break;
}
}
if(node.type==‘group’){
jsPlumb.expandGroup(node.id);
}
_layer.close(index);
},
type: 1,
title: ‘设备信息’,
area: [‘650px’, ‘540px’],
shadeClose: true, //开启遮罩关闭
content: nodeInfoView(),
success: function (layero, index) {
var data = {};
for (var i = 0; i < dataNodeList.length; i++) {
if (dataNodeList[i].id == nodeId) {
data = dataNodeList[i]
break;
}
}
parent.$(“#layui-layer” + index).find(“#nodeInfoName”).val(data.name);
n o d e I n f o T a b l e = p a r e n t . nodeInfoTable = parent. nodeInfoTable=parent.(“#layui-layer” + index).find(“#nodeInfoTable”);
parent.$(“#layui-layer” + index).find(“#btn_nodeInfo_add”).click(function(){btn_nodeInfo_add()});
parent.$(“#layui-layer” + index).find(“#btn_nodeInfo_delete”).click(function(){btn_nodeInfo_delete()});
nodeInfoSetData(data);
}
});
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
}
function nodeInfoSetData(data) {
//SetWebControls(data);
if(data.EndpointList ==undefined){data.EndpointList=[]}
nodeInfoConditionTable(data.EndpointList);
}
var $nodeInfoTable = null
function nodeInfoConditionTable(data) {
$nodeInfoTable.bootstrapTable({
data: data,
//toolbar: ‘#nodeInfoToolbar’, //工具按钮用哪个容器
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
最后
权威指南-第一本Docker书
引领完成Docker的安装、部署、管理和扩展，让其经历从测试到生产的整个开发生命周期，深入了解Docker适用于什么场景。并且这本Docker的学习权威指南介绍了其组件的基础知识，然后用Docker构建容器和服务来完成各种任务：利用Docker为新项目建立测试环境，演示如何使用持续集成的工作流集成Docker，如何构建应用程序服务和平台，如何使用Docker的API，如何扩展Docker。
总共包含了：简介、安装Docker、Docker入门、使用Docker镜像和仓库、在测试中使用Docker、使用Docker构建服务、使用Fig编配Docke、使用Docker API、获得帮助和对Docker进行改进等9个章节的知识。
关于阿里内部都在强烈推荐使用的“K8S+Docker学习指南”—《深入浅出Kubernetes：理论+实战》、《权威指南-第一本Docker书》，看完之后两个字形容，爱了爱了！
ta);
if(data.EndpointList ==undefined){data.EndpointList=[]}
nodeInfoConditionTable(data.EndpointList);
}
var $nodeInfoTable = null
function nodeInfoConditionTable(data) {
$nodeInfoTable.bootstrapTable({
data: data,
//toolbar: ‘#nodeInfoToolbar’, //工具按钮用哪个容器
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
最后
权威指南-第一本Docker书
引领完成Docker的安装、部署、管理和扩展，让其经历从测试到生产的整个开发生命周期，深入了解Docker适用于什么场景。并且这本Docker的学习权威指南介绍了其组件的基础知识，然后用Docker构建容器和服务来完成各种任务：利用Docker为新项目建立测试环境，演示如何使用持续集成的工作流集成Docker，如何构建应用程序服务和平台，如何使用Docker的API，如何扩展Docker。
总共包含了：简介、安装Docker、Docker入门、使用Docker镜像和仓库、在测试中使用Docker、使用Docker构建服务、使用Fig编配Docke、使用Docker API、获得帮助和对Docker进行改进等9个章节的知识。
[外链图片转存中…(img-fU0YTlpl-1715666669617)]
[外链图片转存中…(img-ao5POj80-1715666669618)]
[外链图片转存中…(img-fWsW1oAs-1715666669618)]
[外链图片转存中…(img-S7vp95Fv-1715666669618)]
关于阿里内部都在强烈推荐使用的“K8S+Docker学习指南”—《深入浅出Kubernetes：理论+实战》、《权威指南-第一本Docker书》，看完之后两个字形容，爱了爱了！
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
