一、产品背景

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

,简单说就是一个简易的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. 从2-3-4树到红黑树(下) Java与C的实现

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处   http://www.cnblogs.com/nullzx/ 相关博客: 从2-3-4树到红黑树(上) 从2-3-4树到红黑树(中) 1. 实现技 ...

  2. WaitType:SOS_SCHEDULER_YIELD

    今天遇到一个query,处于SOS_SCHEDULER_YIELD 状态,physical IO 不增加,CPU的使用一直在增长.当一个sql query长时间处于SOS_SCHEDULER_YIEL ...

  3. Entity Framework Code First添加修改及删除单独实体

    对于一个单独实体的通常操作有3种:添加新的实体.修改实体以及删除实体. 1.添加新的实体 Entity Framework Code First添加新的实体通过调用DbSet.Add()方法来实现. ...

  4. OPEN CASCADE Gauss Least Square

    OPEN CASCADE Gauss Least Square eryar@163.com Abstract. The least square can be used to solve a set ...

  5. VS2013中web项目中自动生成的ASP.NET Identity代码思考

    vs2013没有再分webform.mvc.api项目,使用vs2013创建一个web项目模板选MVC,身份验证选个人用户账户.项目会生成ASP.NET Identity的一些代码.这些代码主要在Ac ...

  6. Dijkstra算法优先队列实现与Bellman_Ford队列实现的理解

    /* Dijkstra算法用优先队列来实现,实现了每一条边最多遍历一次. 要知道,我们从队列头部找到的都是到 已经"建好树"的最短距离以及该节点编号, 并由该节点去更新 树根 到其 ...

  7. JS+CSS3实现带预览图幻灯片效果

    这个案例学习起来还有点吃力,目前还没有独自自己写出来过,贴出来以免忘记. 慕课网该课程原地址:http://www.imooc.com/learn/412 源码: <!DOCTYPE html& ...

  8. 确保 PHP 应用程序的安全

    开始之前在本教程中,您将学习如何在自己的 PHP Web 应用程序中添加安全性.本教程假设您至少有一年编写 PHP Web 应用程序的经验,所以这里不涉及 PHP 语言的基本知识(约定或语法).目标是 ...

  9. 网络通信简单实例BIO,NIO,AIO

    这里,我将做一个简单的通信程序,分别使用三种原始的通信工具:BIO,NIO,AIO. 功能就是一个服务器,一个客户端.服务器就是处理请求,返回响应.而客户端就是连接服务器,发送请求,接收响应. 第一步 ...

  10. 开启了HA的XenServer如何关闭虚拟机?

    可开启了HA很方便,在主机自己坏掉的情况下其中的虚拟机能自己飘到活的机器上并被运行起来,不过如果手动的需要关闭虚拟机的话在这情况下,该虚拟机会自己"复活"即便我们选的是关机. 此时 ...