基於 Angularjs&Node.js 雲編輯器架構設計及開發實踐

来源:http://www.cnblogs.com/vipyoumay/archive/2016/07/29/5718278.html
-Advertisement-
Play Games

基於 Angularjs&Node.js 雲編輯器架構設計及開發實踐 ...


一、產品背景

產品是一個內部項目，主要是基於語義網本體的雲端編輯器，用於構建語義知識庫。拋開語義網本體概念不談
，簡單說就是一個簡易的visual studio 雲端編輯器。而圖形顯示則是在百度腦圖的基礎上改進的，增加了自己的形狀和顏色，以及其他功能。

總覽圖

具體語義網、本體是什麼 (http://baike.baidu.com/link?url=6ctsNtk-dthPu-3kiKK_JdMikArIfvbD4VMAQuc685--88X4lggwo58R-q6zKAGlVUcN_RlxQRr5rlPE3B12WK)

二、總體架構

整個系統是由三層構成,分別為UI、API、Infrastructure:

UI層

UI層主要是用於用戶交互界面，目前主要是基於Web的顯示方式，未來可擴展移動app。web端採用單頁面程式，
所有數據通過ajax請求，最後通過nginx反向代理將前端站點和API站點部署在同一功能變數名稱下。

技術：Html5、Css3、Es5
框架: agularjs

API

在API層中主要提供UI端所需要的API以及對外的雲API。

技術：node.js
框架: express等

Infrastructure

基礎層主要提供知識庫相關操作，以及數據相關操作,基礎層主要是基於Apache jena（Jena是一個語義網本體框架）的封裝。以及對阿裡雲一些服務的封裝比如資料庫，緩存等。

技術: java
框架:spring spring.data jena 等

總體

1. 前端架構

a.前端層次

前端核心功能是編輯器，由於業務複雜而多變，因此在邏輯上對前端進行了分層處理。系統由三層結構構成，
由下至上分別為infrastructure、configuration、webapp構成，每層又含有若幹模塊。

前端分層

代碼結構

在代碼文件中app文件對應webapp層，configuration文件對應configuration層，lib文件對應infrastructure層。

infrastructure層包含了系統所使用的基礎框架，包括下麵若幹框架：

  • Editor: 自行開發WebIDE佈局框架，主要用於WebIDE的佈局設計等。
  • Kity: 百度前端團隊的腦圖框架，主要用於類圖顯示等。
  • Util: Util主要涵蓋了第三方的庫例如jQuery、bootstrap、eventbus等除Editor和Kity外其他庫均屬於Util範疇。

configuration層包含了系統所需要配置的文件，主要由以下幾個部分構成：

  • MenuConfiguration: 用於應用程式頂部菜單和右鍵菜單的配置。
  • FileConfiguration: 用於對編輯器所支持的文件配置。
  • ServiceConfiguration: 用於伺服器端請求配置。
  • Theme: 定義了系統基本皮膚和皮膚擴展。

webapp層包含了界面顯示的頁面模塊均為單頁面程式：

  • UserDashboard: 用戶工作台入口，管理項目，新增項目等。
  • EditSpace: 編輯器工作區。

b.核心基礎模塊設計

Edtior：是編輯器的功能基礎，用於控制編輯器視窗佈局、分割、樣式等，主要包括三個核心類：

  • Editor: 每個編輯器只有一個Editor對象，是編輯器的基礎對象，其他對象都可以組合至Editor對象中。
  • Tabcontainer：Tabcontainer對象是editor下的一個區域對象，用於控制佈局、定位、顯示、變化等特性，在Editor中可以有多個Tabcontainer。
  • Panel：Panel對象是Tabcontainer下的一個內容對象，用於控制內容，一個Tabcontainer下可以有多個Panel實現對選項卡效果。
var Editor = require('/lib/editor-ui/src/editor/editor');
 var editorUi = new Editor('#container');
 editorUi.init('Split5');

 // region top
 console.log(editorUi.getTabContainer('split5-top').getSize());
 module.exports = window.editorUi = editorUi;

 var Panel = require('/lib/editor-ui/src/panel/panel');
 var containerTop = editorUi.getTabContainer('split5-top');
 containerTop.isTabCard = false;
 containerTop.addPanel(new Panel({name: '點擊我隱藏', template: editSpaceTemplateConfiguration.toolBarTemplate}));

 // endregion

 // region left
 var containerLeft = editorUi.getTabContainer('split5-bottom-left');
 containerLeft.direction = 'left';
 containerLeft.addPanel(new Panel({name: 'left點擊我隱藏', templateHtml: 'left我是內容'}));
 containerLeft.addPanel(new Panel({name: 'left點擊我隱藏1', templateHtml: 'left我是內容1'}));
 containerLeft.addPanel(new Panel({name: 'left點擊我隱藏2', templateHtml: 'left我是內容2'}));

MenuConfiguration:用於應用程式頂部菜單和右鍵菜單的配置,由於菜單功能複雜多變因此採用配置結構。其中頂部工具欄菜單最為複雜，因為根據選中內容不同，需要動態隱藏或顯示。我們採用了管道式處理方式，執行邏輯雙擊或 單擊界面上的任何元素激發依次管道過濾，在管道過濾中每個按鈕維護自己的過濾邏輯返回bool值告訴是否通過過濾。

toolbar

{
     "name": "新建本體",
     "cssClass": "kop-tool-bar-ontology",
     "disabledCssClass": "kop-tool-bar-ontology-disabled-icon",
     "commandName": "toolbar/ontology/new",
     "enableHandler": "newOntologyEnableHandler",
     "children": []
 }

渲染按鈕 的步驟如下：

  • 獲取菜單中當前類型需要顯示的按鈕。
  • 根據按鈕的類型圖標等顯示按鈕。

動態改變按鈕 （在選中文件或元素不同時按鈕會呈現可用和不可用狀態） 的步驟如下：

  • 雙擊或單擊事件激活過濾管道
  • 執行按鈕數組中所有enableHandler方法。
  • 返回為false時發起一個buttonstatusChanges事件。
  • 菜單controller接受此事件改變按鈕數據，最終改變界面元素（雙向綁定）。

除此之外還包括FileConfiguration和ServiceConfiguration,用於文件顯示圖標和右鍵菜單的配置

新建菜單

文件圖標

var fileConfiguration =[{
  "type":"owl",  //文件類型
  "iconSkin":"/asset/img/ico.jpg"
},...]
var serviceConfiguration = {
 "host": "http://dev.onteditor.ad.6starhome.com/api/"
}

c.業務模塊設計

EditSpace是編輯器業務模塊，由以下幾個子模塊構成,每個模塊在項目初始化時通過調用editor框架將模版註入至頁面中：

  • 頭部(Headbar)
  • 工具欄(Toolbar)
  • 項目區(ProjectWindows)
  • 導入區(ExportWindows)
  • 設計區(DesignWindows)
  • 屬性區(PropertyWindows)
  • 編輯區(EditWindows)
  • 狀態欄(StatusBar)

在系統初始化時候加入各種模塊

var Panel = KOP.EditorUI.Panel;
           var TabContainer = KOP.EditorUI.TabContainer;
           // endregion

           // region 左邊框初始大小，禁用選中效果
           var leftSpace = editorUi.getTabContainer('split8-main-space-wrap');
           leftSpace.getObject().width(300);
           editorUi.getTabContainer('split8-main-space-edit').getObject().height(250);

           // region 頭部模版註入
           var headBarContainer = editorUi.getTabContainer('split8-top');
           headBarContainer.addPanel(new Panel({template: editSpaceTemplateConfiguration.headBarTemplate}));

模塊分區

代碼清單

在每個模塊中包含了單元測試(test) 事件處理中心(event-handler) 界面(html) 控制器(controller) 如下圖所示：

事件處理中心接受全局的事件，比如之前配置好的按鈕的事件，其他模塊與之通信的事件,均是在事件模塊中處理。

function onNewClass($scope) {
           $scope.$on('toolbar/class/new', function (e, param) {
                     });
       }

2. Node.js端設計

Nodejs端主要是對各種業務的組裝，通過express框架暴露RestfulAPI,這裡不再贅述。

三、單元測試

可參看之前文章 http://www.cnblogs.com/vipyoumay/p/5331787.html

四、持續集成及自動部署

  • 代碼管理: gitlab(本地部署)
  • CI伺服器: jenkins(本地部署)
  • 構建部署：docker(本地部署)

整個配置太多了就不講解了，有需要可以留言

五、打包

採用grunt對前端打包,如何打包請自行百度。

六、總結

整個項目工作量很大，我們團隊6人，在規定時間內（包括需求設計一共3個月）完成，持續集成自動化部署給我們節約了很多時間，
另外另外架構的設計也為我們在需求微調贏的了時間。

設計包括的內容很多，這裡不能一一說完，如果有興趣可評論或私信交流。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 利用反射載入類
    反射：java.lang.reflect 要被載入的類： 載入運行的類： 輸出的結果： Program start.loading WaitingforLoaderConstructor of WaitingforLoader without anything.Constructor of Wait ...
  • java Enum 用法示例
    運行結果： 60SundaySundayTuesdayWednesdaytrue7MondayTuesdayWednesdayThursadyFridaySaturdaySunday ...
  • 併發 並行 同步 非同步 多線程的區別
    1. 併發：在操作系統中，是指一個時間段中有幾個程式都處於已啟動運行到運行完畢之間，且這幾個程式都是在同一個處理機上運行。其中兩種併發關係分別是同步和互斥 2. 互斥：進程間相互排斥的使用臨界資源的現象，就叫互斥。 3. 同步：進程之間的關係不是相互排斥臨界資源的關係，而是相互依賴的關係。進一步的說 ...
  • java測試1
    發大水 ...
  • Django1.8教程——從零開始搭建一個完整django博客（二）
    在上一節中，我們已經創建了一個Django模型Post，並使Post模型與資料庫同步。這一節中，我們將介紹Django管理站點，通過Django管理站點來管理我們創建的Post模型實例。 為你的模型創建一個控制管理站點 好了，我們已經定義了一個post模型，現在，我們將要創建一個簡單的管理站點，來管 ...
  • JAVA類與對象（二）
    類是組成java程式的基本要素，是java中的一種重要的複合數據類型。它封裝了一類對象的狀態和方法，是這一類對象的原型。一個類的實現包括兩個部分：類聲明和類體，基本格式： class <class name> { 屬性 方法 } 其中，class是關鍵字，用來定義類。“class <class na ...
  • 多平臺下Modbus通信協議庫的設計（一）
    1.背景 1.1.範圍 MODBUS 是 OSI 模型第 7 層上的應用層報文傳輸協議， 它在連接至不同類型匯流排或網路的設備之間提供客戶機/伺服器通信。 自從 1979 年出現工業串列鏈路的事實標準以來， MODBUS 使成千上萬的自動化設備能夠通信。 目前，繼續增加對簡單而雅觀的 MODBUS 結 ...
  • 設計模式學習歷程（二）————從簡單工廠到策略模式
    學習完了簡單工廠模式以後，感覺可以用於解決大多數多演算法選擇的問題了，接下來看一個新的例子，也是借用《大話數據結構》一書的例子，要實現的是一個商場促銷的計算軟體，輸入商品的單價和數量，還有銷售策略（如打折，返現），然後計算出總的價格。 首先可以從這個問題中抽象出兩個演算法類，一個是打折演算法類，需要提供打 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類