数据透视怎么弄(数据透视怎么做)
1162
2022-05-29
简介
本篇文章我将给大家讲解一下rancher的dashboard项目的架构。
如果大家想要学习dashboard的前端架构,或者想要移植某个相似的功能到自己公司的容器开发平台,这将是一篇非常不错的入门文章。能够帮助你理清项目的技术栈和目录结构。
此外如果你要给rancher提交pr,也可以先从了解项目开始。
废话不多说让我们先来看看dashboard这个项目结构吧。
主要技术栈
打开dashboard的 package.json文件,项目所有的依赖包都映入眼帘,首先项目使用的是vue.js + nuxt.js。这两个框架是底层的。
用的nuxt是2.14.6版本。该版本对应的vue是2.x。
此外样式方面使用的sass与sass-loader
格式校验使用的eslint,测试使用的jest和cypress(这部分目前用的比较少)
http请求库使用的@nuxtjs/axios
在dashboard的项目中,还存储了一些文档,使用的storybook这个库来进行管理的
操作命令都在package.json中。
package.json中有些命令是直接调用shell脚本,所以对windows开发者很不友好。
如果遇到那个命令无法运行,可能是运行环境不一致。 或许rancher的开发人员人均mac。
在package.json中我看到了"@novnc/novnc": "^1.2.0", 这个包,这个依赖包我直接讲解过,它是用于实现wbe vnc的功能的核心包。web vnc简单来说就是在浏览器里访问某一条主机的桌面,并实质操作。你或许在一些云厂商平台使用过该功能,非常酷炫。其实原理是将桌面服务当做一个对外暴露的web 服务。对外使用socket输出文件流,该文件流可以被渲染成一个canvas画板,画板的内容就是主机的桌面,用户所有的鼠标操作,键盘操作,都会通过socket回传到主机,并进行相应。
可以看看我之前的一篇文章。
dashboard还使用d3做一些图表(竟然没有选择使用echarts),配合jquery完成一些dom操作。终端编辑器使用的"xterm": "^4.9.0",
此外还使用一些常用工具库lodash。解压库jszip,国际化i18n,状态管理vuex
项目目录
page根据nuxt架构的规定,该目录存放的所有文件都是一个单独的页面,这意味着你看到的页面,入口文件都在该目录下,并且你可以根据路径,找到文件。
比如
plugins这里边定义的都是一些插件,比如封装的aixos,VueCodemirror,i18n,
assets 存放的是svg,图片,以及公共样式文件。
chart 存放的是图表相关的组件。日志,监控,备份,istio相关模块用到的图表
components 该目录存放了项目里绝大多数的业务组件以及公共组件。
config 目录里存放的都是定义的静态常量。比如一些下拉框的选项,类型。
edit,detail与list 是抽离出来的编辑页面,详情页,列表页组件。属于基础组件,适用性很强。
store 存放的是vuex中定义的状态。
云原生 云端实践
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。