一、产品背景

产品是一个内部项目,主要是基于语义网本体的云端编辑器,用于构建语义知识库。抛开语义网本体概念不谈

,简单说就是一个简易的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值告诉是否通过过滤

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

渲染按钮 的步骤如下:

  • 获取菜单中当前类型需要显示的按钮。
  • 根据按钮的类型图标等显示按钮。

动态改变按钮 (在选中文件或元素不同时按钮会呈现可用和不可用状态) 的步骤如下:

  • 双击或单击事件激活过滤管道
  • 执行按钮数组中所有enableHandler方法。
  • 返回为false时发起一个buttonstatusChanges事件。
  • 菜单controller接受此事件改变按钮数据,最终改变界面元素(双向绑定)。

除此之外还包括FileConfigurationServiceConfiguration,用于文件显示图标和右键菜单的配置

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个月)完成,持续集成自动化部署给我们节约了很多时间,

另外另外架构的设计也为我们在需求微调赢的了时间。

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

基于 Angularjs&Node.js 云编辑器架构设计及开发实践的更多相关文章

  1. 【原创】基于Docker的CaaS容器云平台架构设计及市场分析

    基于Docker的CaaS容器云平台架构设计及市场分析 ---转载请注明出处,多谢!--- 1 项目背景---概述: “在移动互联网时代,企业需要寻找新的软件交付流程和IT架构,从而实现架构平台化,交 ...

  2. 基于AngularJS的企业软件前端架构[转载]

    这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...

  3. AngularJS + Node.js + MongoDB开发

    AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包 ...

  4. 云ATM架构设计

    云ATM架构设计 启动程序(Start.java) public class Start { public static void main(String[] args) { MainView vie ...

  5. Vue项目架构设计与工程化实践

    摘自Berwin<Vue项目架构设计与工程化实践>github.com/berwin/Blog/issues/14 1.Vue依赖套件 vuex:项目复杂后,用vuex来管理状态 elem ...

  6. no.2淘宝架构背后——零售业务中台架构设计探讨及实践读后感

    2017年8月12日,袋鼠云首席架构师正风在“网易博学实践日:大数据与人工智能技术大会”进行<淘宝架构演进背后——零售业务中台架构设计探讨及实践>演讲分享.传统零售行业如何选择应对新经济模 ...

  7. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  8. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  9. 在阿里云ECS CentOS7上部署基于MongoDB+Node.js的博客

    前言:这是一篇教你如何在阿里云的ECS CentOS 7服务器上搭建一个个人博客的教程,教程比较基础,笔者尽可能比较详细的把每一步都罗列下来,包括所需软件的下载安装和域名的绑定,笔者在此之前对Linu ...

随机推荐

  1. Security5:Execute AS 和 impersonate 权限

    principal 是统称,包括login,user,role等,可以向作为安全主体的用户授予权限,principal分为server level和database level. 登录名是Server ...

  2. js高程读书笔记(第4章--变量、作用域和内存)

    JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何总数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 1. ...

  3. window下Nodejs的部署

    nodejs http://nodejs.org/#download npm node cli.js install npm -gf //可以安装最新版的NPM node cli.js install ...

  4. Python第一天 - 函数

    ---恢复内容开始--- (一)定义一个函数 def 函数名(参数): 函数体 return 返回值 例: def mySum(x , y): return int(x)+int(y)print(my ...

  5. Android调用系统相机功能

    在常规应用开发过程中,我们经常会使用到手机的相机功能,通过调用系统相机方便快捷的帮助我们实现拍照功能,本篇我将带领大家实现一下,如何通过调用系统相机实现拍照. 第一种:调用系统相机拍照,通过返回的照片 ...

  6. JAVA基础代码分享--求圆面积

    问题描述 用户输入圆的半径,计算并显示圆的面积 代码分享 /** * @author hpu-gs * 2015/11/25 */ public class Circle { public stati ...

  7. Android Fragment---执行Fragment事务

    转载博客:http://blog.csdn.net/think_soft/article/details/7272853 在Activity中使用有关Fragment的添加.删除.替换以及用它们执行其 ...

  8. isPrototypeOf&&getPrototypeOf

    在JavaScript这个一切皆为对象的世界里,难免会判断原型链的问题.那么我们就有必要了解了解isPrototypeOf和getPrototypeOf这两个方法咯. 1.isPrototypeOf ...

  9. 【集合框架】JDK1.8源码分析之IdentityHashMap(四)

    一.前言 前面已经分析了HashMap与LinkedHashMap,现在我们来分析不太常用的IdentityHashMap,从它的名字上也可以看出来用于表示唯一的HashMap,仔细分析了其源码,发现 ...

  10. Sql Server 聚集索引扫描 Scan Direction的两种方式------FORWARD 和 BACKWARD

    最近发现一个分页查询存储过程中的的一个SQL语句,当聚集索引列的排序方式不同的时候,效率差别达到数十倍,让我感到非常吃惊 由此引发出来分页查询的情况下对大表做Clustered Scan的时候, 不同 ...