這是在講關於一名叫 Koa 的全端勇士傳說-QueryString

前言

一般來講 QueryString 是一個非常常見的取得 url 方式,由於 koa 取得的方式與 Express 稍有點不同,所以這邊紀錄一下

QueryString

QueryString 是一個非常歷史悠久的傳值方式,透過網址後面加上一個 ? 號,然後透過 key/value,並使用 & 來做區隔

例如:http://localhost:3000/?name=Ray&age=27

那麼在 koa 上該如何實作呢?取得 QueryString 最主要方式是以下

1
2
ctx.query.name
ctx.query.age

你會發現很多都是透過 ctx 來做處理,所以接續上一章節 router 作法是這樣

1
2
3
4
5
router.get('/',async (ctx, next) => {
const name = ctx.query.name;
const age = ctx.query.age;
ctx.body = `Hello ${name},你的年齡是 ${age}`;
});

那麼我們就可以直接開啟瀏覽器於網址列上輸入 http://localhost:3000/?name=Ray&age=27

QueryString

如果說使用者沒有傳值的話,我們也可以透過 ES6 給予預設值,避免出現 undefined

1
2
3
4
5
router.get('/',async (ctx, next) => {
const name = ctx.query.name || 'Tom';
const age = ctx.query.age || 34;
ctx.body = `Hello ${name},你的年齡是 ${age}`;
});

那麼這樣子就算沒有網址列上沒有傳值,一樣可以帶入預設資料

預設資料

如果各別輸入傳值也是沒問題

各別傳值

補充

我在另一篇 Express 並沒有提到 QueryString 的取的方式,所以這邊順便補上 Express 如何取得 QueryString 的程式碼

1
2
3
4
5
router.get('/',function(req, res){
var name = req.query.name;
var age = req.query.age;
...
});

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ