基于 Angularjs&Node.js 云编辑器架构设计及开发实践

朱雀 2021-09-19 13:44 127阅读 0赞

*  [基于 Angularjs&Node.js 云编辑器架构设计及开发实践][Angularjs_Node.js]
    
     *  [一、产品背景][Link 1]
     *  [二、总体架构][Link 2]
        
         *  [1. 前端架构][1.]
            
             *  [a.前端层次][a.]
             *  [b.核心基础模块设计][b.]
             *  [c.业务模块设计][c.]
         *  [2. Node.js端设计][2. Node.js]
     *  [三、单元测试][Link 3]
     *  [四、持续集成及自动部署][Link 4]
     *  [五、打包][Link 5]
     *  [六、总结][Link 6]

## 一、产品背景 ##

产品是一个内部项目，主要是`基于语义网本体的云端编辑器，用于构建语义知识库`。抛开语义网本体概念不谈  
，简单说就是一个简易的visual studio 云端编辑器。而图形显示则是在百度脑图的基础上改进的，增加了自己的形状和颜色，以及其他功能。

![总览图][700]

> 具体语义网、本体是什么 ([http://baike.baidu.com/link?url=6ctsNtk-dthPu-3kiKK\_JdMikArIfvbD4VMAQuc685--88X4lggwo58R-q6zKAGlVUcN\_RlxQRr5rlPE3B12WK][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 等`

![总体][700 1]

### 1. 前端架构 ###

a.前端层次

前端核心功能是编辑器，由于业务复杂而多变，因此在逻辑上对前端进行了分层处理。系统由三层结构构成，  
由下至上分别为infrastructure、configuration、webapp构成，每层又含有若干模块。

![前端分层][700 2]

![代码结构][700 3]

在代码文件中`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实现对选项卡效果。

**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`,用于文件显示图标和右键菜单的配置

![新建菜单][700 4]

![文件图标][700 5]

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}));

![模块分区][700 6]

![代码清单][700 7]

在每个模块中包含了`单元测试(test)` `事件处理中心(event-handler)` `界面(html)` `控制器(controller)` 如下图所示：

![700 8][]

事件处理中心接受全局的事件，比如之前配置好的按钮的事件，其他模块与之通信的事件,均是在事件模块中处理。

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][http_www.cnblogs.com_vipyoumay_p_5331787.html]

## 四、持续集成及自动部署 ##

*  代码管理: gitlab(本地部署)
 *  CI服务器: jenkins(本地部署)
 *  构建部署：docker(本地部署)

> 整个配置太多了就不讲解了，有需要可以留言

## 五、打包 ##

采用grunt对前端打包,如何打包请自行百度。

## 六、总结 ##

整个项目工作量很大，我们团队6人，在规定时间内（包括需求设计一共3个月）完成，持续集成自动化部署给我们节约了很多时间，  
另外另外架构的设计也为我们在需求微调赢的了时间。

设计包括的内容很多，这里不能一一说完，如果有兴趣可评论或私信交流。

以上内容有任何错误或不准确的地方请大家指正，不喜勿喷！

如果你对编程感兴趣或者想往编程方向发展，可以关注微信公众号【筑梦编程】，大家一起交流讨论！小编也会每天定时更新既有趣又有用的编程知识！

[Angularjs_Node.js]: https://www.cnblogs.com/vipyoumay/p/5718278.html#%E5%9F%BA%E4%BA%8E-angularjsnodejs-%E4%BA%91%E7%BC%96%E8%BE%91%E5%99%A8%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E5%8F%8A%E5%BC%80%E5%8F%91%E5%AE%9E%E8%B7%B5
[Link 1]: https://www.cnblogs.com/vipyoumay/p/5718278.html#%E4%B8%80%E4%BA%A7%E5%93%81%E8%83%8C%E6%99%AF
[Link 2]: https://www.cnblogs.com/vipyoumay/p/5718278.html#%E4%BA%8C%E6%80%BB%E4%BD%93%E6%9E%B6%E6%9E%84
[1.]: https://www.cnblogs.com/vipyoumay/p/5718278.html#1-%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%9E%84
[a.]: https://www.cnblogs.com/vipyoumay/p/5718278.html#a%E5%89%8D%E7%AB%AF%E5%B1%82%E6%AC%A1
[b.]: https://www.cnblogs.com/vipyoumay/p/5718278.html#b%E6%A0%B8%E5%BF%83%E5%9F%BA%E7%A1%80%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1
[c.]: https://www.cnblogs.com/vipyoumay/p/5718278.html#c%E4%B8%9A%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1
[2. Node.js]: https://www.cnblogs.com/vipyoumay/p/5718278.html#2-nodejs%E7%AB%AF%E8%AE%BE%E8%AE%A1
[Link 3]: https://www.cnblogs.com/vipyoumay/p/5718278.html#%E4%B8%89%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95
[Link 4]: https://www.cnblogs.com/vipyoumay/p/5718278.html#%E5%9B%9B%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E5%8F%8A%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2
[Link 5]: https://www.cnblogs.com/vipyoumay/p/5718278.html#%E4%BA%94%E6%89%93%E5%8C%85
[Link 6]: https://www.cnblogs.com/vipyoumay/p/5718278.html#%E5%85%AD%E6%80%BB%E7%BB%93
[700]: http://qiniu.xdpie.com/03bdd9d074c95f8808c3256474994372.png?imageView2/2/w/700
[http_baike.baidu.com_link_url_6ctsNtk-dthPu-3kiKK_JdMikArIfvbD4VMAQuc685--88X4lggwo58R-q6zKAGlVUcN_RlxQRr5rlPE3B12WK]: http://baike.baidu.com/link?url=6ctsNtk-dthPu-3kiKK_JdMikArIfvbD4VMAQuc685--88X4lggwo58R-q6zKAGlVUcN_RlxQRr5rlPE3B12WK
[700 1]: http://qiniu.xdpie.com/07f23d1d543f59d4ef87e01ceb04135e.png?imageView2/2/w/700
[700 2]: http://qiniu.xdpie.com/21c1c700ab04f6e5a21f897dc2186466.png?imageView2/2/w/700
[700 3]: http://qiniu.xdpie.com/0dac19ff746ced13b4747a6e8583486f.png?imageView2/2/w/700
[toolbar]: http://qiniu.xdpie.com/ffa31706c426e9d9f8a2e092a5cb9f0a.png?imageView2/2/w/700
[700 4]: http://qiniu.xdpie.com/5a3ce4523c7c79f8d4866855d62c36fa.png?imageView2/2/w/700
[700 5]: http://qiniu.xdpie.com/62f29967f30b7f99d76948cdd2273ff8.png?imageView2/2/w/700
[700 6]: http://qiniu.xdpie.com/48c2974269d3394822ae127665a59a6a.png?imageView2/2/w/700
[700 7]: http://qiniu.xdpie.com/4776542e241495f8581e2ffd9a194437.png?imageView2/2/w/700
[700 8]: http://qiniu.xdpie.com/5f6da80ebcf3a74dfc88759699e6713d.png?imageView2/2/w/700
[http_www.cnblogs.com_vipyoumay_p_5331787.html]: http://www.cnblogs.com/vipyoumay/p/5331787.html