利用K8S技術棧打造個人私有雲（連載之：私有雲用戶端打造）

【利用K8S技術棧打造個人私有雲系列文章目錄】

[利用K8S技術棧打造個人私有雲（連載之：初章） ]

[利用K8S技術棧打造個人私有雲（連載之：K8S叢集搭建）]

[利用K8S技術棧打造個人私有雲（連載之：K8S環境了解和練手）]

[利用K8S技術棧打造個人私有雲（連載之：基礎鏡像制作與實驗）]

[利用K8S技術棧打造個人私有雲（連載之：資源控制研究）]

[利用K8S技術棧打造個人私有雲（連載之：私有雲用戶端打造）]

利用K8S技術棧打造個人私有雲（連載之：總結）（Coming Soon...）

本人對前端其實不是很熟悉，也是最近才接觸。前端技術棧還是非常龐大的，為了能夠借助已經存在的輪子來造出一輛車，是以我選擇了Vue.js進行實踐。

我覺得初學Vue.js，掌握以下四個點應該基本就能上手幹活了：

聲明式地渲染

我所了解的Vue.js就是和jQuery一樣是一個前端架構，它的中心思想就是資料驅動，像遠古時代的老前輩jQuery是結構驅動，什麼意思呢，以前我們寫代碼時常用<code>$('.dom').text('我把值改變了')</code>，這種寫法先要獲得結構，然後再修改資料更新結構，而Vue的做法直接就是<code>this.msg="我改變了"</code>，然後msg就會同步到某個結構上，視圖管理抽象為資料管理，而不是管理dom結構了。

元件化的系統

基本可以了解為一個大的頁面都是由一個個小的元件所堆積起來了，Vue可以對每個小元件進行很好的描述，并寫成.vue格式的檔案，正如上圖所示。

用戶端的路由

傳統意義上的路由是由伺服器端根據一定的URL規則比對來傳回給前端不同的頁面代碼，而實際上前端也可以根據錨點的方式實作路由切換，是以在Vue.js裡面，隻需我們去配置路由表實作錨點路由即可，與後端無關。

狀态的管理

Vue的狀态管理依靠Vuex完成， 用其來管理Vue的所有元件狀态。

所謂的狀态可以是諸如：

sidebar的打開與關閉

theme主題的切換

cookie的内容切換

目前登入的使用者切換

...

開發大型單頁應用（SPA），會出現多個視圖元件去維護多個狀态，而且有交叉。遇到以上情況時候，你就應該考慮使用Vuex了，它能把元件的共享狀态抽取出來，當做一個全局單例模式進行管理。這樣不管你在何處改變狀态，都會通知使用該狀态的元件做出相應修改。

理論部分就講這些了，初學者不BB太多，下面說說用戶端頁面打造的情況吧。

首頁面

首先是首頁面，可以打開任何一個雲主機系統的頁面看，基本類似。目前左邊Sidebar就執行個體菜單是有用的。

頁面中心的主要内容是目前系統中建立的一些主機執行個體的情況預覽，一行一個，計劃可以對其進行删除和重新開機操作

頁面右上角點選 “建立” 按鈕即可以執行個體化一個主機

建立雲主機頁面

這裡計劃可以向XXX雲一樣可以自行選購配置，然後執行個體化，包括系統規格、CPU、記憶體、硬碟等等

雲主機配置選擇頁面

雲主機配置浏覽頁面

目前選擇好配置以後點選建立所得到的雲主機規格還是預設的，這些所選規格參數還未和實際執行個體化後的主機參數對應起來，裡面還有很多東西要研究。

<a href="https://yq.aliyun.com/users/article?spm=a2c4e.11153940.headeruserinfo.3.a4b4291aYulYvC">作者更多的原創文章在此</a>