利用K8S技術(shù)棧打造個人私有云(連載之:私有云客戶端打造)


封面圖片

【利用K8S技術(shù)棧打造個人私有云系列文章目錄】

注: 本文原載于 My Personal Blog:CodeSheep · 程序羊 创倔!


Vue.js初摸

本人對前端其實不是很熟悉嗡害,也是最近才接觸。前端技術(shù)棧還是非常龐大的畦攘,為了能夠借助已經(jīng)存在的輪子來造出一輛車霸妹,所以我選擇了Vue.js進行實踐。

我覺得初學(xué)Vue.js知押,掌握以下四個點應(yīng)該基本就能上手干活了:

  • 聲明式地渲染
    我所理解的Vue.js就是和jQuery一樣是一個前端框架叹螟,它的中心思想就是數(shù)據(jù)驅(qū)動,像遠古時代的老前輩jQuery是結(jié)構(gòu)驅(qū)動台盯,什么意思呢罢绽,以前我們寫代碼時常用$('.dom').text('我把值改變了'),這種寫法先要獲得結(jié)構(gòu)静盅,然后再修改數(shù)據(jù)更新結(jié)構(gòu)良价,而Vue的做法直接就是this.msg="我改變了",然后msg就會同步到某個結(jié)構(gòu)上蒿叠,視圖管理抽象為數(shù)據(jù)管理明垢,而不是管理dom結(jié)構(gòu)了。

  • 組件化的系統(tǒng)

組件樹結(jié)構(gòu)

基本可以理解為一個大的頁面都是由一個個小的組件所堆積起來了市咽,Vue可以對每個小組件進行很好的描述痊银,并寫成.vue格式的文件,正如上圖所示施绎。

  • 客戶端的路由
    傳統(tǒng)意義上的路由是由服務(wù)器端根據(jù)一定的URL規(guī)則匹配來返回給前端不同的頁面代碼溯革,而實際上前端也可以根據(jù)錨點的方式實現(xiàn)路由切換贞绳,因此在Vue.js里面,只需我們?nèi)ヅ渲寐酚杀韺崿F(xiàn)錨點路由即可致稀,與后端無關(guān)冈闭。

  • 狀態(tài)的管理
    Vue的狀態(tài)管理依靠Vuex完成, 用其來管理Vue的所有組件狀態(tài)豺裆。
    所謂的狀態(tài)可以是諸如:

    • sidebar的打開與關(guān)閉
    • theme主題的切換
    • cookie的內(nèi)容切換
    • 當前登錄的用戶切換
    • ...

開發(fā)大型單頁應(yīng)用(SPA)拒秘,會出現(xiàn)多個視圖組件去維護多個狀態(tài),而且有交叉臭猜。遇到以上情況時候躺酒,你就應(yīng)該考慮使用Vuex了,它能把組件的共享狀態(tài)抽取出來蔑歌,當做一個全局單例模式進行管理羹应。這樣不管你在何處改變狀態(tài),都會通知使用該狀態(tài)的組件做出相應(yīng)修改次屠。

理論部分就講這些了园匹,初學(xué)者不BB太多,下面說說客戶端頁面打造的情況吧劫灶。


私有云客戶端打造

  • 主頁面

首先是主頁面裸违,可以打開任何一個云主機系統(tǒng)的頁面看,基本類似本昏。目前左邊Sidebar就實例菜單是有用的。

頁面中心的主要內(nèi)容是當前系統(tǒng)中創(chuàng)建的一些主機實例的情況預(yù)覽涌穆,一行一個怔昨,計劃可以對其進行刪除和重啟操作

頁面右上角點擊 “創(chuàng)建” 按鈕即可以實例化一個主機

私有云主頁面
  • 創(chuàng)建云主機頁面

這里計劃可以向XXX云一樣可以自行選購配置,然后實例化宿稀,包括系統(tǒng)規(guī)格趁舀、CPU、內(nèi)存祝沸、硬盤等等

創(chuàng)建云主機頁面
  • 云主機配置選擇頁面
云主機配置選擇頁面
  • 云主機配置瀏覽頁面
云主機配置瀏覽頁面

目前選擇好配置以后點擊創(chuàng)建所得到的云主機規(guī)格還是默認的矮烹,這些所選規(guī)格參數(shù)還未和實際實例化后的主機參數(shù)對應(yīng)起來,里面還有很多東西要研究罩锐。


后記

由于能力有限奉狈,若有錯誤或者不當之處,還請大家批評指正唯欣,一起學(xué)習(xí)交流嘹吨!



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搬味,一起剝皮案震驚了整個濱河市境氢,隨后出現(xiàn)的幾起案子蟀拷,更是在濱河造成了極大的恐慌,老刑警劉巖萍聊,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件问芬,死亡現(xiàn)場離奇詭異,居然都是意外死亡寿桨,警方通過查閱死者的電腦和手機此衅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來亭螟,“玉大人挡鞍,你說我怎么就攤上這事≡だ樱” “怎么了墨微?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長扁掸。 經(jīng)常有香客問我翘县,道長,這世上最難降的妖魔是什么谴分? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任锈麸,我火速辦了婚禮,結(jié)果婚禮上牺蹄,老公的妹妹穿的比我還像新娘忘伞。我一直安慰自己,他們只是感情好钞馁,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布虑省。 她就那樣靜靜地躺著,像睡著了一般僧凰。 火紅的嫁衣襯著肌膚如雪探颈。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天训措,我揣著相機與錄音伪节,去河邊找鬼。 笑死绩鸣,一個胖子當著我的面吹牛怀大,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播呀闻,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼化借,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了捡多?” 一聲冷哼從身側(cè)響起蓖康,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤铐炫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蒜焊,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體倒信,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年泳梆,在試婚紗的時候發(fā)現(xiàn)自己被綠了鳖悠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡优妙,死狀恐怖乘综,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情套硼,我是刑警寧澤瘾带,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站熟菲,受9級特大地震影響看政,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜抄罕,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一允蚣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呆贿,春花似錦嚷兔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至竟块,卻和暖如春壶运,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背浪秘。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工蒋情, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人耸携。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓棵癣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親夺衍。 傳聞我的和親對象是個殘疾皇子狈谊,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349