nightwatch chromeDriver版本問題

vue-cli 預設的e2e測試為nightwatch
使用vue-cli預設不用設定即可跑起e2e測試
如果遇到以下錯誤訊息
Error: An error occurred while retrieving a new session: “session not created: This version of ChromeDriver only supports Chrome version 77”

來自測試安裝的chromeDriver與現在自己機器上的Chrome版本不相符
vue-cli預設安裝nightwatch帶的chromeDriver為77
查一下機器上跑的Chrome版本為80.x
只要重新安裝
npm install chromeDriver@80 --save-dev
即可正常運作

quasar table 取server資料 分頁使用

1.元件設定
  1.rows-per-page-options：設定option供選擇每頁顯示幾筆(對應rowsPerPage)
  2.pagination: 對應分頁設定
  3.@request:當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination

<q-table
  :data="items"
  :rows-per-page-options="[50,100]"
  :pagination.sync="pagination"
  @request="onRequest"
>

2.script
  1.設定pagination物件
    page: 目前第幾頁 要操作載下一頁 需要將第幾頁更新回這裡
    rowsPerPage: 每頁幾筆,當在元件操作切換要顯示的數量，要寫回這裡
    rowsNumber: 總筆數，這要由server取得的資料來更新
  2.doQuery真正執行server查詢的function
    在執行真正查詢所需要的分頁參數 ex取第二頁資料
    這些值都是由pagination設定值拿來當作參數
    pagination設定值會因為元件的操作而動態變化
  3.設定的onRequest handler
    當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination
    要將取得的資料寫回pagination 再執行查詢
    執行查詢的doQuery會去讀取pagination內的資料來執行

data() {
  return {
    pagination: {
      items: [], // table要顯示的資料
      page: 1, // 目前第幾頁
      rowsPerPage: 50, // 每頁幾筆
      rowsNumber: 20 // 總筆數
    }
  }
}
methods: {
  async onRequest (props) {
    const { page, rowsPerPage } = props.pagination
    this.pagination.page = page
    this.pagination.rowsPerPage = rowsPerPage
    await this.doQuery()
  },
  async doQuery () {
    // 將pagination內的分頁資料 設定到api所需要吃的參數
    const queryParams = {
      countPerPage: this.pagination.rowsPerPage
      currentPage: this.pagination.page
    }
    // 假設呼叫api 吃queryParams參數執行server query
    const response = await doAPIfetch(queryParams)
    // 假設api回傳 data(查詢結果) 與meta(包含分頁資料)
    this.items = response.data
    this.meta = response.meta
    // 將分頁資訊取得的資料總量寫回pagination.rowsNumber
    this.pagination.rowsNumber = this.meta.total
  }
}

axios 加上before after處理

使用axios如果需要在
request送出前 加工送出去的資料
或接收到response後 加工收到的結果
可以使用這樣的結構去攔截修改
1.建立request物件
2.送出request前加工送出資料
  可以加入header或調整送出內容
3.接收到api回應後 做資料整理

const myRequest = axios.create({
  ...
})
myRequest.interceptors.request.use(config => {
  // 修改config內容 就是
  config.headers[xxx] = xxxx //加上header
  return config
})
myRequest.interceptors.response.use(
  response => {
    .... // 自行處理
    return response 
})

例如axios送出資料
需要以x-www-form-urlencoded 格式送出
除了需要加上content-type設定外
還需要在送出去之前 對於資料先做轉換(需另外用qs處理)

import Qs from 'qs'
myRequest.request.use(config => {
  config.data = Qs.stringify(config.data)
  return config
})

Klima - Fluorescent Stars

假日裡 當所有的人在酒吧裡狂歡
我只想一個人靜靜的躺在床上
閉上眼 數著一個 又一個 滿天的星星

小時候 躺在床上睡覺
眼睛盯著天花板
在天花板上 貼上螢光貼紙
黑暗中 一點點的亮光 總讓人可以進入彷彿
浩瀚 未知的世界
從沒想過 可以貼滿整面的牆
讓螢光的黃色星光 閃爍在黑暗中
這是遙遠的想像

Klima的專輯 已經在電腦裡躺了很久
打開才發現自己錯過了這個聲音好久

Fluorescent Stars

It's saturday night
And i don't want to go out
I'm staying in bed
Watching the stars on my wall
My friends are in a bar
Drinking beers and telling jokes
I'm here on my own
Counting the stars
So many of them
My eyes are closing
So many of them
One, two, three, four hundred
The noise from the street
Is coming to my ears
But they've decided to be deaf tonight
And concentrate on the stars
So many of them
My eyes are closing
So many of them
One, two, three four hundred

dart專案建立與基本指令使用

1.dart安裝與環境設定
  透過dart官網說明即可順利安裝dart sdk
  https://dart.dev/get-dart
  dart也有像npm一般可以取得其他網路上open的package的地方
  https://pub.dev/
2.環境設定
  pub指令相當於node的npm指令 用來安裝或執行
  dart 安裝好即包含了pub指令 就如同node安裝好也會帶有npm一樣
  但需要設定路徑到系統內可以確保指令可以被認得
  mac因為是透過homebrew安裝dart 所以不需要特別設定就可使用
  linux需要設定在rc檔案內(ex: .bashrc或 zshrc)加入路徑

export PATH="$PATH:/usr/lib/dart/bin"
export PATH="$PATH":"$HOME/.pub-cache/bin"

3.建立專案
  dart 本身提供可以建立預設專案模板的工具stagehand
  我們需要先透過pub指令來安裝stagehand
  之後就可以透過stagehand來產生各種預設的專案目錄

pub global activate stagehand // 安裝stagehand
stagehand // 列出可用的樣本
stagehand // ex: stagehand console-simple 產生樣板

  目錄下pubsepc.yaml為專案的設定檔案包含專案內需要使用的package都寫在這裡
  注意：要先產生目錄 在目錄內執行 產生樣板的指令
4.pub指令
  pub與npm的差異是透過pub global安裝package會將package統一存放在
  .pub-cache目錄下 再提供各專案使用

1.pub global activate: 由網路上安裝新的package 會安裝到 .pub-cache/global_packages下
2.pub global list: 列出已經安裝可以使用的pacckage
3.pub get: 如果目錄下已經有pubsepc.yaml設定檔案 會依照設定安裝package
4.pub upgrade: 將目錄下pubsepc.yaml已經設定的package 升級
5.pub downgrade: 反過來做package降級
6.pub run 執行指定的檔案
   ex: pub run bin/main  等同執行  dart bin/main.dart

  參考https://dart.dev/tools/pub/cmd
5.dart與node 對照

dart ==== node
pub  ==== npm
pubsepc.yaml === package.json
pub get=== npm install