跳到主要內容

發表文章

目前顯示的是 3月, 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

[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',

[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                      },                      {

使用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"