mxgraph簡單應(yīng)用demo分享 --- 聰聰工作室

項目成功運(yùn)行頁面如下:

運(yùn)行結(jié)果

這是一個Springboot的Maven聚合的垂直分布式項目,項目結(jié)構(gòu)如下:

項目結(jié)構(gòu)

如上圖所示,這是一個Springboot的Maven聚合的垂直分布式項目,包含多個子項目,gateway網(wǎng)關(guān),mongo-service 服務(wù),mx-graph主項目,mx-graph-cloud項目springCloud微服務(wù)。

集成springcloud微服務(wù),? parent項目mx-graph-cloud,mx-graph項目的pom配置如下:

mx-graph的pom配置

單機(jī)single與cloud的切換通過activation中的標(biāo)簽activeByDefault為true實(shí)現(xiàn)切換:


微服務(wù)配置切換

index.html 文件源碼:

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]--> <!DOCTYPE html> <html> <head> <title>Grapheditor</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="styles/grapheditor.css"> <script type="text/javascript"> // Parses URL parameters. Supported parameters are: // - lang=xy: Specifies the language of the user interface. // - touch=1: Enables a touch-style user interface. // - storage=local: Enables HTML5 local storage. // - chrome=0: Chromeless mode. var urlParams = (function(url) { var result = new Object(); var idx = url.lastIndexOf('?'); if (idx > 0) { var params = url.substring(idx + 1).split('&'); for (var i = 0; i < params.length; i++) { idx = params[i].indexOf('='); if (idx > 0) { result[params[i].substring(0, idx)] = params[i].substring(idx + 1); } } } return result; })(window.location.href); // Default resources are included in grapheditor resources mxLoadResources = false; </script> <script type="text/javascript" src="js/Init.js"></script> <script type="text/javascript" src="deflate/pako.min.js"></script> <script type="text/javascript" src="deflate/base64.js"></script> <script type="text/javascript" src="jscolor/jscolor.js"></script> <script type="text/javascript" src="sanitizer/sanitizer.min.js"></script> <script type="text/javascript" src="frame/js/mxClient.js"></script> <script type="text/javascript" src="js/EditorUi.js"></script> <script type="text/javascript" src="js/Editor.js"></script> <script type="text/javascript" src="js/Sidebar.js"></script> <script type="text/javascript" src="js/Graph.js"></script> <script type="text/javascript" src="js/Format.js"></script> <script type="text/javascript" src="js/Shapes.js"></script> <script type="text/javascript" src="js/Actions.js"></script> <script type="text/javascript" src="js/Menus.js"></script> <script type="text/javascript" src="js/Toolbar.js"></script> <script type="text/javascript" src="js/Dialogs.js"></script> </head> <body class="geEditor"> <script type="text/javascript"> // Extends EditorUi to update I/O action states based on availability of backend (function() { var editorUiInit = EditorUi.prototype.init; EditorUi.prototype.init = function() { editorUiInit.apply(this, arguments); this.actions.get('export').setEnabled(false); // Updates action states which require a backend if (!Editor.useLocalStorage) { mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req) { var enabled = req.getStatus() != 404; this.actions.get('open').setEnabled(enabled || Graph.fileSupport); this.actions.get('import').setEnabled(enabled || Graph.fileSupport); this.actions.get('save').setEnabled(enabled); this.actions.get('saveAs').setEnabled(enabled); this.actions.get('export').setEnabled(enabled); })); } }; // Adds required resources (disables loading of fallback properties, this can only // be used if we know that all keys are defined in the language specific file) mxResources.loadDefaultBundle = false; var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) || mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage); // Fixes possible asynchronous requests mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr) { // Adds bundle text to resources mxResources.parse(xhr[0].getText()); // Configures the default graph theme var themes = new Object(); themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement(); // Main new EditorUi(new Editor(urlParams['chrome'] == '0', themes)); }, function() { document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>'; }); })(); </script> </body> </html>

Demo分享

聰聰工作室?

孤獨(dú)的帝星@郭云輝??

獨(dú)家發(fā)布

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容