2020年10月1日 星期四

vue的筆記

 目錄

//mvvm

//綁定

//資料綁定的方式

//修飾符

//按鍵修飾符

//縮寫

//class 動態切換

//computed

//表單裡各元素的v-model綁定

//元件: 能夠獨立儲存自己的狀態

//vue 的生命週期



//切換className的各種寫法

//v-bind:style

//v-if 進階

//v-for 進階

//v-on進階

//computed 跟watch 監聽

//表單綁定進階


//元件進階

//props 將資料從外層傳入內層

//props 進階

//props 定義型別

//emit 元件向外傳遞資料的方法

//slot 元件插槽

//is 來動態切換原件


//es6 語法

//var 、 let 差異

//展開語法...

//解構賦值

//縮寫

//箭頭涵式

//template string

//陣列方法


//set、get

//filters

//extend 

//mixin

//directive 自訂義指令 (可參考官方教程=>自訂義指令)

//載入套件


//vue CLI

//vue CLI 環境

//webpack

//使用vue-cli 下載第三方套件

//SPA



//Vue-Router

//Vue-Router 動態路由

//Vue-Router 在同一個頁面載入多個元件

//Vue-Router 參數設定

///Vue-Router 自訂義事件 切換路由


官方文檔: https://cn.vuejs.org/v2/api/#data


webpack:將程式使用的語言、檔案、打包成browser會到的檔案(js、css、jpg..)



vue CLI : 整合套件 ->用這個來實現webpack ->可實現spa


cli 命令列介面 (command line interface)



ctrl+p  路由->可以找到檔案


//vue 的生命週期


//用alert 來觀察 vue 元件的建立與釋放 (<keep-alive>先註解,在加回來看看差異)


1. 未打開keep-alive


//順序:

(1) beforeCreate (資料還沒準備好,會打印undefined) => created => beforeMount => mounted (這步vue已經掛載到實體上) => 內容顯示在畫面上


(2) 在輸入欄隨便打字 => updated


(3) 按下 hide child  => beforeDestroy => destroyed (vue 物件被銷毀)





2. 打開keep-alive


//如果再切換頁籤,要保留資料狀態


<keep-alive> 存在時 activated、deactivated 兩個方法才會觸發 ; beforeDestroy、destroyed 不執行


//順序:

(1) beforeCreate (資料還沒準備好,會打印undefined) => created => beforeMount => mounted (這步vue已經掛載到實體上) => activated(<keep-alive> 存在時才會觸發)  => 內容顯示在畫面上


(2) 在輸入欄隨便打字 => updated


(3) 按下 hide child  => deactivated (資料狀態會保留)


(4) 再次按下show child => activated


//摘要 : 

1. 要操作ajax至少要到created (多數人會在mounted)


2. 要保留資料狀態,用keep-alive


//mvvm

mvvm :  model: 資料 、 viewModel :自動綁定的部分(資料連接器)、view: 圖層    ((vue 是透過資料狀態操作畫面))


//綁定

在scrypt 建立vue 物件,並在html標籤裡 裡使用vue物件裡面的data呈現文字

綁定:

1. vue 一次只能綁定一個元素  用vue 物件裡面的el , 如果是綁id , el=> #id; 綁class el=>.class

2. 不可使用巢狀方式建立 

3. 如果之後又建立一個vue物件,綁定之前物件綁定過的屬性,後面會蓋掉前面的


//資料綁定的方式


//要改變html標籤的狀態用 v-bind


1. v-model : 綁定到該div 綁定vue物件,data的內容,可以動態的操作{{message}}要呈現的內容


2. v-text : 可以寫將{{message}}內容寫到一個新的div


3. v-html : 可以直接新建一個新的html 標籤,但不推薦,因為會被攻擊


4. v-bind : 可以把 vue物件裡面 data的內容,綁定到html 屬性上,也可以綁定class


5. v-for: 要顯示多個資料列時可以用(list) ,如果不用index,可以寫 item in list


6. v-if : 當條件為true,才會顯示綁定的內容 =>判斷是直接寫在字串裡


....pre 標籤: 可以查看 vue 物件 data裡的資料結構 =>開發模式才會用


7. v-on : 控制觸發事件,搭配vue 物件裡面自己新增methods


....this 只到綁定的vue 物件


8. v-once :單次綁定


//修飾符


    情境

如果畫面有卷軸,沒有使用修飾符的情況下,a href="#",點擊會讓畫面回到最上方

1. 方法1: 在methods裡使用event.preventDefault();

2. 方法2: 使用修飾符 prevent  =>在v-on綁定事件後面加上


....文件參考:事件處理.事件修飾符 https://cn.vuejs.org/v2/guide/events.html 



//按鍵修飾符


ex: 使用按鍵觸發事件

keyup.enter


//縮寫

v-on: => @

v-bind: => :


//class 動態切換


1. v-bind:class="{'要切換的class名': 判斷式 }"  

   (1)本身是一個物件,如果有多個class要切換,用,隔開

   


2. click事件不一定要函數 true=!true 也可以切換狀態


//computed

//特性


1. computed裡面宣告的都會是func


2. 會有一個回傳值,可顯示在畫面上{{函數名}}


3. 觸發條件: vue物件裡面data 的值 發生"變動",就會觸發


4. 與methods 差異


 如果資料量大,computed 自然會比較慢

 只要資料變動就會觸發,無形之中執行次數也會增加勒

 因此在大量資料時,會建議透過 methods 減少不必要的運算喔

 

//表單裡各元素的v-model綁定


v-model 的綁定與 computed 呈現效果 很像


1. input(text)


2. textarea


3. input(checkbox)

   a. 可綁定一個bool 進行切換

   b. 當綁定array,可以將checkBox 裡的value加入array


4. input(radio) 單選題

   可綁定一個string 變數,點擊可將radio 裡的value 加入變數


5. select 下拉式選單

   記得裡面的項目要用option (disabled即不可選)

   可綁定一個string 變數,點擊可將option 裡的value 加入變數

   

//元件: 能夠獨立儲存自己的狀態


1. 使用Vue.component('自訂義名',{})   這個自訂義名不能大寫...


2. {}裡有一個data的func,用這個func return 一個物件


3. {}裡 template  自訂義元件的樣式 ,想要顯示的文字是寫在 template 裡面


4. 元件可以重複使用


//切換className的各種寫法


1. 一般寫法"{'rotate':isTransform,'bg-danger':boxColor}"


2. 物件寫法 objectClass.rotate  ; 如果className 包含- 可改用objectClass['bg-danger']


3. 陣列寫法  ['btn-outline-primary','active'],或是在vue 物件裡定義一個變數,再用其他事件觸發


//v-bind:style

1. :style={樣式屬性:'樣式的值'}   如果有 - 改成駝峰式


2. 物件寫法 styleObject


3. 陣列寫法 [styleObject,styleObject2] 可以套用多種屬性


//v-if 進階


1. v-if、v-else : v-else 會跟最近的v-if連動,如果不符合v-if的條件,就會顯示v-else


2. template 標籤在開發者工具是看不到的,但可以該標簽下v-指令


3. v-else-if 會跟相鄰的v-if 連動,這樣會連帶地一起比較


4. key 如果沒有加key ,vue會將input 跟labal 看作相同元件,而去做高效能的切換,input常常沒有被換到,所以要加上key,讓他重新渲染


5. v-if 、 v-show差異  v-show 是兩個元素都會渲染在頁面上,只是用display:none 讓你看不見而已;  v-if 會直接動態新增、移除該元素


//v-for 進階


1. 對於陣列、物件都可使用  ,v-for對物件使用時,index會取到其屬性


2. 反轉陣列,最好補上key,沒有key會預設使用 "快速置換",input裡面的內容不會跟著轉換(要以什麼為key可自訂義)


3. 過濾(filter)


4. 無法運行的情況  (用console看,會被修改,但畫面不會,雖然js允許,但vue不允許)

   (1)直接修改陣列長度

  (2)要修改陣列的值,不可直接透過index

   (3)要修改值,要使用vue set   => Vue.set(目標,索引,值)


5. 可用於顯示數字


6. Template 的運用   

  (1)可於裡面自己組合html標籤 (template的作用是模板占位符,可帮助我们包裹元素,或者下vue指令,但在循环过程当中,template不会被渲染到页面上,開發者工具看不到)


7. v-for v-if 運用


8. v-for 與 元件  : 現在建議元件使用 v-for 都加上 key(一般都會建議綁ID,因為不會重複)


//computed 跟watch 監聽

watch : 監聽某個變數 

1. watch:{ 變數名 : 函數}


//表單綁定進階

1. select  option 記得綁 :value


2. 多選 使用multiple


3. 勾選題,讓他切換時不只顯示true 、 false  使用  true-value、false-value


4. v-model修飾符

   (1)lazy : 點外框才會顯示內容

   (2)number : 顯示的內容轉數字

   (3)trim : 去空白

   

//v-on進階

//修飾符


1. .stop   => click時,會因為 JS事件冒泡 的原因,會觸發到外層標籤,用stop就不會向外擴散


2. .prevent => 停止觸發效果


3. .capture =>讓事件冒泡,變成由外而內   (計算會擴散到哪層,先事件冒泡,再倒過來,這樣就好理解了)


4. .self => 只有綁定的標籤本身會觸發


5. .once =>只會觸發一次


//按鍵修飾符


1. 可以按規定的數字當作修飾符,也能觸發效果 ex: enter =13


2. 別名修飾 - .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right


3. 組合修飾符  .ctrl, .alt, .shift, .meta  => @keyup.shift.enter 一定要按 shift+enter 才會觸發


//滑鼠修飾符

1. .left


2. .right


3. .middle


//元件進階


//依照畫面,可以將網頁分成 標頭、主要內容、邊邊的導覽列... 將這些畫面分別管理,已達重複使用的效果 ,稱為元件


//元件裡的資料是互相獨立的,也可互相傳遞, prop:將資料向內傳遞(資料更新就會觸發)、 emit event(透過觸發事件),將資料向外傳遞


1. 局部註冊:只有註冊的應用程式能使用  在vue物件裡面 新增一個components


2. 全域註冊:所有應用程式都能使用 Vue.component


3. x-template


4. 使用props將元件外層的元素傳入內層,元件"綁定的名稱"不能有大寫=>  再由內層傳到 x-template,內層的資料名改成  元件"綁定的名稱"


5. is 來動態切換template  遇到html tbody時


6. 元件裡面的data 要使用func return 一個物件


//props 將資料從外層傳入內層


1. 元件裡面用props 名稱可以大寫,但寫在html 要改成-,然後全小寫 超爛....


2. 動態傳遞 v.s. 靜態傳遞  ,差別在於 元件綁定時 有 ":" 動態綁定的是 vue物件裡面的data 屬性 


3. 靜態傳遞 綁定的是寫死的值  ,元件綁定時 沒有 ":"


//props 進階


1. 單向數據流

   (1)運用props時,會有單向數據流的限制,不允許藉由修改input的值,來改變data裡的url,因此需要先增一個變數來接他


2. 物件傳參考特性 

   (1)js 傳遞物件是傳參

3. 尚未宣告的變數 

   (1)使用v-if


4. 維持狀態與生命週期

   (1) 使用keep-alive

   

//props 定義型別

//有時候需要運用傳入的數值來計算


1. 定義型別、預設值

// props : {

//     vue物件的data裡的字段: {

//       type: Number,

//       //也可以給預設值

//       default : 300

//     }

//   },


2. html傳入值時,有分動態屬性(:)=>如果傳數字會幫你轉number、靜態屬性 =>傳進去的資料都是string


//emit 元件向外傳遞資料的方法


1. 元件可以自訂義事件(事件名稱可自訂),來觸發外面的methods


2. 再由原件內部運用this.$emit(自訂義事件); 綁定到自訂義事件


3. this.$emit也可傳遞參數,由元件內部傳遞參數出來,就算html 不是寫func(參數),也能接收到參數


//slot 元件插槽

//元件可以替換部分內容


1. 在模板裡面使用slot 標籤 (適用於只有要插入一段文字)


2. 在模板內特定位置插入文字

   (1)在html標籤加上slot屬性,模板裡加上name屬性,取一樣的名字


3. 插入之後,html標籤也會替換進去,會渲染到頁面上,但如果是用template標籤,則不會渲染到頁面


//is 來動態切換原件

動態切換,前面要加:


//es6 語法

//var 、 let 差異


1. var 、 let 差異

   (1) 作用域不同 var : func scope 、  let : block 以{}為分界

   (2) 使用var定意義的變數,如果外面沒有包func,會變成全域變數,難以控管


2. const

   (1) 宣告常數,之後不能再修改

   (2) 宣告物件,裡面的屬性值,可以修改  (因為物件式傳參,只要不要改參考都可以 )  改參考 : family={} 這樣會報錯

   

//es6 

//展開語法...


1. 合併陣列


2. 表示不定參數


3. 將其他陣列的值,值複製到其他陣列,避免傳參的原因,修改到原本參考的陣列


//es6 語法

//解構賦值

1. 對陣列使用 

   (1)會照順序給,可以跳過  let [ming2, ,aunt]=family;

   (2)左邊變數不夠,右邊超過的部分就不會給   let [ming1,jay1]=family;


2. 對物件使用

   (1)會找到物件對應的屬性  let { GinyuName } = GinyuTeam;  => 找到GinyuTeam裡 GinyuName屬性 的值,給予GinyuName 變數

   (2)可以物件對應的屬性值,給予新的變數 let { Jeice:gogoName } = GinyuTeam;  =>在GinyuTeam,找到Jeice的屬性值,賦予gogoName

   (2)可以給預設值 let { family2: ming4 = '小明' } = {};


3. 變數值的交換 [Goku,Ginyu]=[Ginyu,Goku];


4. 字串的應用 let [a,b,c,d,e] =str;


//es6 

//縮寫


1. 如果新的屬性名跟來源變數的名稱一樣,可以縮寫 => 物件裡只寫屬姓名


2. 縮寫為物件函數  showPosture () {}   (跟箭頭函數不一樣~~)

 

3. 用... 把物件放到另一個物件 ,對新物件操作,就不會影響到原本的物件


//es6 語法  

//箭頭涵式


1. 如果只有一行,可把{}縮寫


2. 如果只有一個參數,()可省略


3. 無參數 ()=>{}


4. 箭頭涵式沒有 arguements 這個參數的變數


5. 不是所有情境都適合arrow func


6. this的差異

   (1)傳統func 的 this : 看涵式的呼叫方式     EX. a物件裡定義Afunc ,呼叫方式:a.Afunc ,那func裡面的this就是指向a

   (2)arrow func 的 this 是變數定義時所在的物件


7. vue物件裡的methods ,建議使用傳統涵式


8. 避免被this 搞,在涵式裡宣告一個變數=this 是最安全的,可確保this 是指向自己所在的物件


//es6 語法

//template string


1. 使用``與${}  就跟C#拼接字串很像


2. 也可插入js 語法


//es6 語法

//陣列方法


1. forEach 與 map

   (1)map 有return值(陣列)

   (2)會將原本陣列的值取出來,return 一個新的陣列

   (3)如果沒有寫return,會回傳 [undefined, undefined, undefined, undefined]  看你的item數

   (4)不太適合用來過濾 if>2000之類的,因為會回傳undefined


2. filter

   (1)會回傳一個陣列[]

   (2)可以下判斷式 return true

   (3)直接return false 會回傳一個空[]


3. find

   (1)回傳的是item的值 (第一個符合條件的) obj、str...

   (2)適合來判斷單一條件

   (3)直接return false 會打印undefined


4. every

   (1)回傳一個 bool

   (2)"所有"條件都符合,才會是true


5. some

   (1)回傳一個 bool

   (2)"只要有一個"條件符合,就會是true


6. reduce

   (1)適合用來加總

   (2)會歷遍[]裡面的值,從[index]開始運算,並將結果暫存到prev中,在與[index+1]繼續做運算,直到歷遍所有元素

   

//set、get


1. 應用於一開始data的資料結構沒辦法定義很明確時


2. 去開發者工具,把vue物件的this打印出來,可以觀察他的結構


3. 看console裡面data,是使用get、set去寫入資料、綁定,並去監控這個數值,如果受到更動,就會馬上反映到前台上(一開始會顯示(...))


4. 如果資料沒有顯示get、set,代表沒有進入vue的綁定裡面


5. 使用$set方法   $set(目標data,data裡資料的key,要寫入的值)


//filters

//想要再呈現的內容加上 符號 或是 小數點


1. 再呈現的內容使用 | ,後面帶在元件自定義的涵式


2. 可以重複使用


3. 可以下多個filter (前面的數值執行完,帶入下一個filter的參數)


4. 全域註冊Vue.filter()  局部註冊 : 元件內使用 filters


//extend 

//應用: 當有多個元件,只有少部分差異(color)

1. 把重複的部分拉出來,寫在Vue.extend(),作為基底(除了props),各自不同的部分再覆寫就好了


2. 繼承Vue.extend()的元件,自己新增的data不會把原本的取代掉,而是會疊加上去


3. 除非定義原本就存在的變數,就會覆寫掉


4. 除了會執行繼承的newExtend裡面的mounted,自己定義的mounted也會執行


//mixin


1. 應用於程式碼有部分重複時,可以單獨拉出來寫成 物件  (跟extend有點像)


2. 在原本的原件 使用 mixins ,是他一個陣列[],最後將 物件放入,可載入多個


//directive 自訂義指令 (可參考官方教程=>自訂義指令)

//如判斷輸入文字是email、重新整理後數標會focus同樣地方


1. 宣告一個Vue.directive(自訂譯名稱,{官方提供的hook})


2. 在要使用的html標籤加上 v-自訂譯名稱


3. directive裡是可以傳參數進去的 , v-自訂譯名稱={參數名: 參數值}


//hook函數

1. bind : 當第一次被綁定時會調用


2. inserted : 注入節點時會調用


3. update : 更新時會調用


//hook函數可用的參數

1. el :所绑定的元素,可以用来直接操作 DOM, 跟document.querySelector 是一樣的效果


2. binding : 詳細見文檔,裡面有很多屬性值


3. vnode : vue的虛擬節點



//除了可以寫固定值,當不確定v-model的綁定內容,可以用以下方法

1. 去  vNode => data => directives 可以找到v-model綁定的值


2. 去  vNode => context => 裡面有一個跟v-model綁定的model一樣的屬性,剛好是我們input的值


//載入套件


1. 注意版本


2. 使用webpack載入,使用方式

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);


//----------------------------------------------------------------------------


//vue CLI


1. webpack的開發工具 (npm)


2. 可以使用很多第三方套件(bootstrap, vue Router)


3. 可運行Sass、Bebel


4. 方便開發SPA   (如果要開發非SPA網站就不太方便)


5. 簡單搭建開發環境(生成很多資料夾)  , 只要把dist資料夾給後端即可


//vue CLI 環境


1. 要先安裝npm


2. 安裝vue-cli  指令: npm install -g vue-cli


3. 查詢可用樣板 vue list (課程是用webpack)


4. 使用樣板  指令: vue init 樣板名稱 資料夾名


5. 進到資料夾,看到package.json 是安裝套件的主檔案


6. 執行npm install (把一堆module載近來)


7. 檢視vue-cli環境是否安裝成功 指令: npm run dev 會運行資料夾底下src檔案


8. 正式環境 指令:  npm run build  (運行後會產生dist檔案,只能運作在http server)


9. 所有src的內容,都會打包注入到index.html 下面 <!-- built files will be auto injected -->


10. static 放的是不會被編譯的檔案 src/assets : 會被編譯的檔案


11. main.js 是所有vue的進入點


12. .Vue的檔案都是一個一個元件裡面包含

    (1)x-template

(2)html

(3)style

13. 圖檔會被編譯成base64


//webpack

1. 進入點(entry)是 "main.js" (.jpg、.vue .scss 等檔案會載入這個檔案透過loader工具)


2. webpack 會監控"main.js" 只要有變動,就會進行編譯,最後輸出(output)成.js .css等檔案


3. 原始碼在build 裡面 webpack.base.conf.js 是最需要關注的

   (1)resolve=> extension 可省略的副檔名

   (2)alias 可以設定路徑 : 目前設定@代表src

   (3)module 裡有很多loader ,可以設定規則,向市圖檔設定10000(10KB以上轉成base64),沒有就輸出圖檔+hash

   

4. config 資料夾名

   (1)index.js :整個編譯環境的設定 port 、 host

   (2)dev.env、prod.env 都是寫vue的時候可以使用的環境變數


5. 試著在畫面呈現dev.env的文字

   (1) 找到HelloWorld元件,在msg加入 process.env.變數名

   

//使用vue-cli 下載第三方套件


跟著課程安裝 bootstrap (以sass方式)


1. 指令: npm install bootstrap node-sass sass-loader 

2. 因為sass-loader新版本會有問題,所以先移除,安裝舊版本 指令: npm install --save-d sass-loader@7.1.0


3. 測試是否安裝成功 去App.Vue 的style 加上 lang="scss" 看看是否能夠使用


4. HelloWorld.Vue裡的sty;e 有加 scoped 是限制樣式只能在該元件運行


5. 安裝vue-axios (ajax) 指令: npm install --save axios vue-axios


6. 在entry(main.js) 載入axios


7. 在APP.Vue 加入created 方法 測試 axios

//SPA


1. 路由後面 #/路由: 這是模擬路由,變更時只會替換部分元件


//Vue-Router

//(要新增資料夾,查看如何使用vue cli影片)

1. 路由後面 #/路由(其實就是替換的原件): 這是模擬路由,變更時只會替換部分元件


2. 安裝vue-Router  指令: npm install vue-router --save


3. 在src 新增一個router 檔案 router/index.js  當作路由的配置檔


4. 載入 官方元件 vue、vue-router  (注意大小寫),並使用Vue.use()   ,選一個元件當作自己的首頁並載入  


5. 匯出元件給main.js   export default  , 並在main.js 載入 ./router  (沒有看到./ 會從node module 載入)  ,下方new Vue 再加入router

   export default

   (1)name //元件呈現的名稱

   (2)path //對應的虛擬路徑

   (3)component //對應的原件


6. 將App.Vue 的HelloWorld元件 換成<router-view> 看看效果


7. 製作分頁  切換頁面   將a標籤=> router-link 、 href 標籤=> to = path 或是  :to ={name: '首頁'}


8. 巢狀路由  在原本配置的路由 加入 children:[] ,即可以加入子元件,記得要載入


//Vue-Router 動態路由

//可以鎖定要載入的ajax資料 

//ex : randomuser 的api  ?seed如果填固定值,則會取到同一筆資料


1. 載入axios 指令: npm install --save axios vue-axios  並在main.js載入


2. 將一個路由的path 改成 /:自定義參數


3. 可以在元件生成的時候(created) 打印 this.$route.params.參數 查看參數的值 


//Vue-Router 在同一個頁面載入多個元件


1. 在app.vue 新增router-view   


2. 在設定路由的檔案 index.js 使用 components {} 可以放入多個元件  default: 預設顯示 沒有定義 name 的 router-view   ,其他依序可以配置自訂在router-view 定義的name


3. 預設顯示子元件時,記得把上層的name註解掉,才不會出現警告


//Vue-Router 參數設定


1. 構造配置: Router配置文件(index.js) 還有哪些參數可以設定


2. mode : 路徑的配置方法 history => 切換頁面就不用 # 井字號   !!!!!注意: 如果沒有# 代表是使用後端的路由,要前後端配合,不太推薦使用


3. base: 當路徑不是在根目錄下


4. linkActiveClass : 模糊比對    (用開發者工具,點擊一個router-link ,他會幫你加上 router-link-active) ,使用這個方法可以替換加上的名稱


5. linkExactActiveClass : 絕對路徑比對


///Vue-Router 自訂義事件 切換路由


1. 在要自訂義事件的原件下方,加入methods (可參考官方提供的API,上一頁、切換到指定頁面...)


2. this.$router.push('/page/child2'); 到指定頁面


3. this.$router.replace('/page/child2');  跳到指定頁面,不會再瀏覽器留下紀錄,按上一頁不會回到這個頁面


4. this.$router.back();   回到上一頁


5. this.$router.go(-1);   回到上一頁


2020年7月21日 星期二

docker 相關指令

docker 相關指令


映像檔相關指令

  • 建立映像檔
       docker build -t {映像檔名} .  :記得在dockerfile所在的目錄輸入





容器相關指令


  • 運行容器

       docker run

       run 以 Image 來建立 Container
       示例:
       docker run -it --name {想要取的名稱} -p 5555:80 {images}


       相關參數:
       -p  {本機port}:{容器port}  : 指定把容器的 port 綁到本機的 port

       -d  :  背景執行

       -i  :  讓 Container 的標準輸入保持打開

       -t  :  讓Docker分配一個虛擬終端(pseudo-tty)並綁定到 Container 的標準輸入上

       -v  : 可以指定本地資料夾映射到容器內的哪個資料夾

       --name 可以幫自己容器取名字
--------------------------------------------------------------------------------------
       run 與 start 差異

       ctrl+p + ctrl+q 可以跳出bash而不停止容器

  • 移除容器
       docker rm {容器id}
       相關指令
       -f : 強制停止,不然rm前都需要先stop容器
  • 查看容器
       docker ps
       相關指令
       -a : 查看執行過的容器
       --format : 排版  ex: docker ps --format table"{{.欄位}}/t{{.欄位}}/t"


將檔案推上Docker Hub

1. 為image加上tag,加完用docker images就會看到
    docker tag ${image Name} DockerHub 帳號/image Name

2.推上去DockerHub 
    docker login=> docker push DockerHub 帳號/image Name

3. 拉下來
    docker pull 

將image 匯出成壓縮檔(tar)

    docker save -o 自己取檔名.tar ${image name}

    docker export ${image name} > 自己取的檔名.tar

     

    ***********************
    save 、 export差異   export會將容器內所改變的東西全部打包匯出,
    可 save 單純只儲存 Image ,所以為了持續使用 Container 要使用 export 這個指令
    ***********************
    相關參數 :
      -o : 輸出檔案

將image匯入

   docker import - 自己取個鏡像名 < tar檔

    cat tar檔 | docker import - 自己取個鏡像名

Docker Volume功能:可把資料寫在實體機器上
    
    1. docker run -it -v 實體檔案位置:容器內檔案位置 {image name}
      2. 自己建立一個volume:
              docker volume create  自己取名字,然後再用-v 映射到container 檔案

共享兩個Container檔案(-v跟--volume一樣)
     
     1. 先開啟一個container

            docker run -it -v 實體檔案:容器內檔案位置 --name=容器1 image name

      2. 開啟第二個container 使用--volume-from 容器1

            docker run -it -v-from 容器1 --name=容器2 image name

查看容器訊息

    docker inspect









2020年7月14日 星期二

telegram bot

1. First Bot 的 token

1071865921:AAF-yxkGqL3ICDkUsXGhrMXA3r9KjW8be28

2. channel ID

-1001218272236





3. telegram bot 資訊(First Bot)


{"ok":true,"result":{"id":1071865921,"is_bot":true,"first_name":"First Bot","username":"austin72905_bot","can_join_groups":true,"can_read_all_group_messages":false,"supports_inline_queries":false}}

4. 設一個webhook才能接收訊息(用getUpdate得到的資訊)


{"ok":true,"result":[{"update_id":76191705,
"message":{"message_id":83,"from":{"id":1143269186,"is_bot":false,"first_name":"Austin","last_name":"Lin","username":"austin72905TW","language_code":"zh-hans"},"chat":{"id":1143269186,"first_name":"Austin","last_name":"Lin","username":"austin72905TW","type":"private"},"date":1584461581,"text":"\u5b89\u5b89"}}]}


5. bot 傳送訊息

https://api.telegram.org/bot1071865921:AAF-yxkGqL3ICDkUsXGhrMXA3r9KjW8be28/sendMessage?chat_id=1143269186&text=%E4%BD%A0%E5%A5%BD

6. bot 傳送訊息的JSON

{"ok":true,"result":{"message_id":92,"from":{"id":1071865921,"is_bot":true,"first_name":"First Bot","username":"austin72905_bot"},"chat":{"id":1143269186,"first_name":"Austin","last_name":"Lin","username":"austin72905TW","type":"private"},"date":1584505179,"text":"\u4f60\u597d"}}


7. 設定webhook 響應方式

(1)通用URL
(2)First bot 設定

(3)在家用的
https://api.telegram.org/bot1071865921:AAF-yxkGqL3ICDkUsXGhrMXA3r9KjW8be28/setwebhook?url=https://8a287be6.ngrok.io


------------- norok 部分 ------------------

ngrok 網址

https://blog.alantsai.net/posts/2018/04/devtooltips-5-ngrok-allow-public-to-access-localhost-website-and-sql-server

8. ngrok token:

1ZHbSkF627Mpm53irDWZRBiyXRf_7fMVtb2turMtV1mafZaaB

9. ngrok 隨機產生的網址

ngrok http -host-header=rewrite https://localhost:23283/
家裡的:
ngrok http -host-header=rewrite https://localhost:44351/






---------telegram bot 相關網址--------------------


c# telegram bot library


webhook 概念


http://studyhost.blogspot.com/2016/06/telegram-bot.html

C# 透過 Telegram Bot 發送訊息

一步步打造 Telegram Bot

telegram bot 文擋

Python Telegram Bot 教學 (by 陳達仁)

淺談開發機器人php





-------interface(介面)的用處--------------


為何設計service 曾要先寫介面?
將實現與使用分離開來,只要專注在實現就好
Controller一定要儘量少的邏輯,其實反過來說,是指Service的邏輯應該高內聚,這樣Controller如Service的耦合自然就是最低,Controller真真正正的坐到,不用理會Service的實現,只需要呼叫即可。

iservice   service 分開
controller 跟 service 分開
第三方機器人的service不寫在第三方專案就要寫在第四方?
(第三方機器人不能直接呼叫第三方專案)
過多的商業邏輯處理反而會讓 Controller 的流程控制與商業邏輯混在一起





2019年10月25日 星期五

JS學習 typeof、 instanceof、嚴謹模式

66
4:20 instanceof

1. typeof  目的:能檢查型別
    (1)數值
    (2)字串
    (3)物件
    (4)陣列 ---> 會顯示物件

            可使用 Object.prototype.toString.call() 來檢查



    --->result



    (5)函數
    (6)null  --->萬年bug 會出現物件 (5:14)
    (7)undifined
   
    * 陣列、null會顯示物件其他都會顯示其原本型別



2. instanceof 告訴物件是否在原型鍊上

    --->result


3. 嚴謹模式
 "use strict"  一定要放在函數或是整份文件的第一行

JS學習 Object.create、 polyfill、ES6建立物件方法

6-63
3:10
4:48 只是創造一個物件,並在這個物件上建立新物件

Object.create( 原型 );

1.Object.create會用它的原型建立空物件,它的原型就是你傳入Object.create的東西

   --->austin 的原型物件就會變成person (這邊顯示不出來)

2.可以設定新物件的屬性



























3. 6:23~10:54 polyfill

4.  3:49  6-64   

2019年10月24日 星期四

JS學習 for in

0:26
1.for  in  遍歷屬性和方法

   ---result


   --->1:19   0,1,2 其實是名字   autin 、ally 是值

2. 一般情況建議不使用for in 因為可能會遍歷到他的 原型



   --->plus 是名字  reckless是值
132

JS學習 prototype2

9:10  字串會被轉為物件,但數值不會
5:53


1. 可以在字串或是數值後面增加新的屬性



---> "austin"字串被自動轉換為物件
--->所有字串都可以取用這個方法

2. 數值不會自動被轉換為物件



建議平常不要用函數運算子將"純值"轉換為物件  6-61

JS學習 new 、.prototype

7:41 57
10:00 目的:可以使用函數來創造物件
14:50 函數建構子

1. 使用new時會創造一個新的空物件,讓this指向新的空物件記憶體位置
建立新物件時建議用大寫... Person,會比較好debug
記得加  new  ,否則執行時會出現undifined



   --->result


--->加入new之後


   --->result





5-58
1:50 一旦用new運算子呼叫函數,原型屬性就有意義了
3:56
5:13
7:57 將方法設定在原型裡,可增加效能(重要)



1.  當在.prototype 裡加入新的屬性, 指向其原型的物件,都會新增屬性

   ---> Austin跟Ally都指向同一個prototypc 因此都新增了屬性


vue的筆記

 目錄 //mvvm //綁定 //資料綁定的方式 //修飾符 //按鍵修飾符 //縮寫 //class 動態切換 //computed //表單裡各元素的v-model綁定 //元件: 能夠獨立儲存自己的狀態 //vue 的生命週期 //切換className的各種寫法 //v...