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

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

前言

一般來講 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;
  ...
});