关于zeppline大数据平台项目，国内大多都是项目整体后端偏多的介绍
关于其中zeppine-web-angular前端项目介绍微乎其微，所以做个前端项目整体大致介绍，给从未接触过大数据平台项目的小白（我当时就是）一点便捷
zeppline项目clone下来onenote-web有两个版本
新版本技术栈
1.项目介绍：
angular8 ，为了使用Angular DevTool 升级到了9，
启动 ng serve底层使用了webpack-dev-server，而webpack-dev-server又使用了http-proxy-middleware
集成的antd-design 组件库的 ng-zerro
https://ng-zorro.gitee.io/components/table/zh/#components-table-demo-size
前端zeppine-web-angular github项目地址
https://github.com/zeppelin-next/zeppelin-frontend-next
前端项目的设计文档
https://docs.google.com/document/d/1z_VscS81Xwx_3QaexKB2s0uEMEuWKsPXh9mWFRq0-hY/edit#heading=h.mlo5e2ew78xq
雖然一共只有4萬行代碼，但各种视图组件动态转换让我这个之前写vue和js的人一时还接受不了。
image.png
2.页面结构与后端交互：
其实主要功能集中在一个页面notbook
结构是 notebook > paragraph > result > table(等视图组件)
结构是 notebook > paragraph > result > table(等视图组件)
image.png
微信图片_20211220170752.png
对应的和后端主要交互websocket 结构也是一样。没几个http请求
3. 查询编辑器
用的是Monaco Edtor 和VSCODE的一样的编辑器，网上搜索会有介绍，这里就不赘述了
4. angular库
image.png
projects里封装了三个库
sdk 里定义了ws接受的op命令，和interface
visualization 里就是所有的视图封装
旧版本应用技术栈
angular.js1 + bower + webpack
webpack 用了webpack-dev-server
bower 的话，前端的包管理器，从GitHub上下载。
bower的简单使用教程：
https://blog.csdn.net/weixin_34248023/article/details/91932498
bower和npm的区别：
npm是进行后端开发中，使用的模块安装工具，而bower，是前端的模块安装工具。
比如，在安装express，socket.io时，当然使用的是npm，那么比如bootstrap，jquery等前端框架，需要使用bower
npm 是伴随 Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm 官网经过一次改版，打出的口号是，javascript 的包管理器，所以，其已经不在局限于是
Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。
npm 和 bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。
详情参考: https://www.cnblogs.com/aliwa/p/7677858.html
.bowerrc 和git都设置了代理后依旧无法从github上成功拉下包
{
"directory": "bower_components",
"json": "bower.json",
"proxy": "/)",
"https-proxy": "",
"strict-ssl": false
}
image.png
网友评论