這是在講關於一名叫 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;
...
});
0%