rancher教程（三）： rancher 前端項目dashboard架構解析

簡介

本篇文章我將給大家講解一下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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。