【利用K8S技術(shù)棧打造個人私有云系列文章目錄】
- 利用K8S技術(shù)棧打造個人私有云(連載之:初章)
- 利用K8S技術(shù)棧打造個人私有云(連載之:K8S集群搭建)
- 利用K8S技術(shù)棧打造個人私有云(連載之:K8S環(huán)境理解和練手)
- 利用K8S技術(shù)棧打造個人私有云(連載之:基礎(chǔ)鏡像制作與實驗)
- 利用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)
基本可以理解為一個大的頁面都是由一個個小的組件所堆積起來了市咽,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)建所得到的云主機規(guī)格還是默認的矮烹,這些所選規(guī)格參數(shù)還未和實際實例化后的主機參數(shù)對應(yīng)起來,里面還有很多東西要研究罩锐。
后記
由于能力有限奉狈,若有錯誤或者不當之處,還請大家批評指正唯欣,一起學(xué)習(xí)交流嘹吨!