nVisual前端集成SDK使用说明

 

目前客户需要搭建自己的可视化产品,但需要使用nVisual的可视化视图功能,根据目前项目实施需求,决定做了一款简单版的SDK视图插件,这个小插件的主要功能是嵌入到客户项目里给客户提供 ‘详细视图’‘拓扑视图’或者是‘主视图’的展示功能.目前已经开发完毕,这里做一下简单介绍.

一、具体功能介绍

主要功能是展示 Nvisual 的四个视图面板、一个属性面板和所有封装好的api接口,分别是 主视图、 详细视图、拓扑视图、链路查看、流量查看、属性面板 ,以及目前正在Nvisual标准版中所有的api接口(意思让客户直接调用封装好的方法,而不是客户自己去处理大量接口)

二、构建思路

主要思路是为了和标准版代码保持完全同步, 就在标准版项目内容重新建立了一个打包项目, 主要是webpack来打包主页面中所用到的所有js文件.webpack的特性就是模块化打包将关联的js文件打包到一起.

这种方式保持了一致性,不需要另外开发一套代码, 但是缺点也比较明显那就是体积比较大,打包后大小为 4.6MB.

三、项目结构和搭建

具体项目结构需要用截图来展示;

1.最外层的Nvisual(NVISUAL)

是标准版代码的文件夹,下面存放的包括 标准版 和 sdk项目的所有文件;

2.Nvisual(NVISUAL)下面的一级文件

这些文件属于标准版,规则都是VUE脚手架的项目结构,这里不做描述;

3.nvisual_HtSdk_demo

这个文件夹是SDK项目的所有代码

4.nvisual_HtSdk_demo下一级的目录

Build – webpack.base.conf.js // webpack 的配置公共

Build – webpack.dev.conf.js // webpack 的测试配置

Build – webpack.prod.conf.js // webpack 的打包配置

Public // 是用来存放不需要编译打包的独立的第三方插件和一些静态文件的

Src  // 是用来存放打包入口文件、demo文件 和 全部的sdk源代码

Src – index.js // demo的入口文件 ,里面主要是 demo的交互逻辑点击事件等

Src – index.html // demo的页面

Src – sdk // sdk 源码部分

Src – sdk – nvisual-sdk.js // sdk源码的入口文件

Src – sdk – collectionMethodsBase.js // 不需要视图的基础方法集合“主要是获取数据, 比如 获取目录树、模型库数据的增删改查、工单数据的增删改查

Src – sdk – collectionMethodsDetailedView.js // 对外提供详细视图的方法集合;

Src – sdk – collectionMethodsLinkView.js // 对外提供的链路视图的方法集合

Src – sdk – collectionMethodsMainView.js // 对外提供的主视图的方法集合

Src – sdk – collectionMethodsTopologyView.js // 对外提供的拓扑视图的方法集合

Src – sdk – view – * // 这个文件夹下的文件都是各个视图的入口文件

Src – sdk – nvisual – index.js // 标准版代码的入口文件

Src – sdk – axios- index.js // sdk的axios请求配置

四、具体开发细节

主要流程:

Sdk 主流程:

1. nvisual-sdk.js 入口文件 ->登录 配置基本参数 加载第三方依赖如

2. 加载各个视图的主文件

3. 加载基础方法集合 collectionMethodsBase.js

4. 各个视图的方法集合 比如 collectionMethodsMainView.js

5. 调用CreateView 创建视图 返回对应的视图对象(方法合集) 实例化  标准版代码;

demo的主流程:

从打包入口文件nvisual_HtSdk_demo/src/index.js开始,初始化dom. 初始化点击事件、初始化Nvisual插件对象

五、sdk的使用方法