rancher教程(三): rancher 前端项目dashboard架构解析

网友投稿 1098 2022-05-29

简介

本篇文章我将给大家讲解一下rancher的dashboard项目的架构。

如果大家想要学习dashboard的前端架构,或者想要移植某个相似的功能到自己公司的容器开发平台,这将是一篇非常不错的入门文章。能够帮助你理清项目的技术栈和目录结构。

此外如果你要给rancher提交pr,也可以先从了解项目开始。

废话不多说让我们先来看看dashboard这个项目结构吧。

主要技术栈

rancher教程(三): rancher 前端项目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小时内删除侵权内容。

上一篇:云桌面平台远程办公有哪些优势?
下一篇:input type="submit" 和"button"的区别
相关文章