跳到主要內容

發表文章

目前顯示的是 三月, 2018的文章

[MongoDb] 如何從Docker 裡備份資料出來

基本上我們使用mongodump來備份資料, 如果資料庫在docker 容器裡的話, 我們可以使用docker exec 將mongodump的指令餵給容器去幫我們執行, 如下

> docker exec -it my-mongo-container mongodump -h localhost -d my-database
-it 建立終端機與建立容器輸入的連結
my-mongo-container: 容器名稱
my-database: 欲備份的資料庫名稱

mongodump在備份時, 會在dump資料夾下以資料庫的名稱建一個新的資料夾放備份資料

(進入容器看一下) admin@aubuntu:~$ docker exec -it my-mongo-container bash root@fe70f7f19df4:/# dir bin boot data dev docker-entrypoint-initdb.d dump etc home js-yaml.js lib lib64 media mnt opt proc root run sbin srv sys tmp usr var root@fe70f7f19df4:/# cd dump root@fe70f7f19df4:/dump# dir my-database

此時我們可以使用docker cp的指令將他們從容器內複製出來, 如下
> docker cp my-mongo-container:dump/my-database ./

admin@abuntu:~$ dir my-database

[Vue.js] 如何在頁面上顯示JSON

假設我們有一筆資料如下想要以JSON的格式顯示在網頁上

var data =
{
     'name' : 'andy'
     'age': 30
}

我們可以使用 JSON.stringify(data, null, 2) 來將資料轉成相對應的字串, 其中第三個參數設為 2 的目的是用來控制用來做縮排的空白數目,


再來, 使用 <pre> 標籤來顯示文字並保留縮排

<pre>{{JSON.stringify( data, null, 2)}} </pre>







[Vue.js] 如何在Vue套用 font awesome

前言

基本上在開發前端網頁時, 若是要豐富網頁的內容, 一定少不了使用一些圖示來增添美感,  為了能夠自由放大縮小圖片且不失真, 通常我們會使用SVG格式的圖片來美化UI。 這類的圖我們可以自己做或是從font awesome下載。 以下是介紹如何在Vue.js 的框架裡套用 font awesome




透過npm下載

npm install vue-awesome
npm install vue-awesome

註冊到 main.js
import 'vue-awesome/icons' import Icon from 'vue-awesome/components/Icon' Vue.component('icon',Icon)

使用(以按鈕為例)
<b-button> <icon name='save'></icon> Save </b-button>

python unit test 單元測試

前言:
隨著專案越寫越大, 我們不可能時常有美國時間做人體debug, 所以Unit Test 的必要性也日益增加, 以下是簡單的介紹, 如何使用python 做單元測試



假設我有一隻 db_helper.py 負責與資料庫溝通,

為了方便說明, 程式碼簡化如下

def get_user_data():      return 'andy lai'


Step 1.下載 pytest 模組

$ pip install pytest

Step 2. 建立測試腳本 test_mypython.py

此時的工作目錄下有以下這些檔案

db_helper.py test_mypython.py
注意: pytest 會去掃資料夾下 test_ 開頭的所有 python 腳本執行測試, 所以任何測試腳本務必前置 test



Step 3. 撰寫測試程式


我們預期呼叫db_helper.get_user_data()之後會得到 'andy lai'

import db_helper
def test_verify_get_user_data():     expect = 'andy lai'     result = db_helper.get_user_data()     assert expect == result


Step 4. 開始測試

在你的工作目錄下執行pytest

$ python -m pytest
這個指令的作用等於是, 將目前的工作目錄下所有檔案都掃一遍, 名稱含有test的檔案就會被執行測試


結果:





加入中斷點除錯
單元測試的過程中有辦法加入中斷點除錯嗎?

答案是"可以"


程式需修改如下

import db_helper
def test_verify_get_user_data():     expect = 'andy lai'     result = db_helper.get_user_data()     assert expect == result

if __name__ == '__main__':     import pytest     pytest.main()   


指定測試函式<

[Vue.js] 資料響應, 資料改變且重新渲染

假設我們有一個購物網站, 需要在頁面上顯示購物車裡的商品數量
<p> {{goods.count}} </p>
而這筆資料會在使用者操做 Add 按鈕後,產生變化
要實作這個功能很簡單, 將按鈕綁定我們addCount()方法, 並在方法內修改goods.count就能達到我們目的 
<button @click="addCount()"> Add </button>
...

export default      data() {   return {   goods: { count: 0 }   }   }      methods: {           addCount(){                this.goods.count ++;           }      }



基本上Vue會把定義在data()裡的屬性(property)轉換成getter/setter 
當setter被觸發時會告知組件相對應的watcher進行重新渲染
這也就是為什麼資料一旦更變, 頁面就會自動被更新的原因





但如果屬性是動態地被加上去的話, 
<p> {{goods.cost}} </p>

...

export default   data() {   return {   goods: { count: 0 }   }   }   methods: {   addCount(){         this.goods.count ++; this.cost =    this.goods.count * 100;   }   }
上面的程式碼就會有問題, 
因為在這種情況下cost並沒有被加入響應, 所以watcher根本不知道cost有改變
此時必須用以下的語法來手動加入響應
Vue.set( this.goods, 'cost', this.good *100)
完整語法如下

export default   data() {   return {   goods: { count: 0 }   }   }   methods: {

[Visual Studio] 如何用Package Manager Console 安裝套件到指定的專案

假設一個Solution裡面有多個專案(Project), 如下





但我只想將套件 EntityFramework 安裝到 BestMatchDialog.Sample


那我可以使用 Get-Project取得 BestMatchDialog.Sample



然後再把結果傳遞給 Intall-Package


完整語法如下:
PM> Get-Project *sample | Install-Package EntityFramework

Vue.js 組件數據傳遞 Pass Data To Another Component

在Vue的世界裡

我們如何把數據從組件A傳到組件B的

方法很簡單,如下

假設我有一個自訂義的組件 Header.vue, 我想在 App.vue 裡把數據 foodList傳給它

首先在 Header.vue 組件上, 我們使用必須開一個接口 foodList 去接收數據,

新增props屬性foodList

<script>      export default{           props:{ foodList:{                     type: Array,                     default: () => []                }           }      } </script>


接下來,
當我們在App.vue裡使用時Header.vue組件時 就可以順勢地把資料船過去
App.vue <template>      <MyHeader :foodList='foodList'></MyHeader> </template>
<script>      import MyHeader from './component/Header.vue'      export default {           name: 'app',           data(){                return {                     foodList:                     [                       {                         name: "rice",                         price: 50                      },                      {                         name: "noodle",                         price: 55                      },                      {

使用v-for出現錯誤訊息

在組件b-nav-item裡使用v-for產生導航列表時

<b-nav-item v-for="item in navItems"> {{ item.title }} </b-nav-item> 遇到以下的錯誤訊息

(Emitted value instead of an instance of Error) <b-nav-item v-for="item in navItems">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

原因是在 Vue 2.2 版之後, 當我們在組件(component)內使用v-for產生組件列表時, 必須明指定Key值, 讓Vue 用以區分每個元素, 藉以確保能正確的更新所有元素

解決方法:  使用v-bind來指定key值

<b-nav-item v-for="item in navItems" v-bind:key="item.titil"> Ref: https://cn.vuejs.org/v2/guide/list.html

Vue.js 錯誤訊息 Component template should contain exactly one root element

在編輯完vue 組件之後, 出現以下的錯誤訊息


(Emitted value instead of an instance of Error)
  Error compiling template:

  <MyHeader></MyHeader>
  <p>Hello</p>

  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.


 @ ./src/components/Intents/Intents.vue 11:0-370
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js


原因是出在我的template, 直接用了 <MyHeader> 和 <p> 這兩個元素


</template>

<MyHeader></MyHeader> <p>Intents</p>

</template>

但實際上, 如果有兩個以上的元素, 我們必需用 <div> 把他們包起來

</template>
<div> <MyHeader></MyHeader> <p>Intents</p> </div>
</template>


而當我們沒有照這個規則編寫template的話, 就會報錯








git commit 部分檔案

假設在開發過程當中, 如果某些功能善未完成, 但開發團隊可能需要我目前已經修該好的部分, 這個時候我可以用 git add -A 把所有東西東加上去, 也可以選擇性的commit 相關檔案

假設我只想要commit file_1.txt



使用 git add [想要加的檔案]

git add file_1.txt
然後再commit
git commit -m "update file_1.txt"