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

發表於 2019-07-10 更新於 2020-12-27 分類於 Nodejs

Google AD

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

一般來講 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 作法是這樣

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

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 的程式碼

router.get('/',function(req, res){
  var name = req.query.name;
  var age = req.query.age;
  ...
});