Nuxt 3 試玩一下後端取得url params

最近聽說Nuxt 3 beta出了，而且使用vite當作全站的打包工具，之前試用過vite，覺的不論在開發中或打包產生靜態檔案的速度都非常快，所以就來試用看看，可參考官網，下載來試用了一下，過然速度是非常快，雖然這個框架著重在前端，不過我想先看後端，看了一下這次Nuxt 3的後端使用h3的小套件來處來request和respose，我也是第一次聽說這個東西，並且整合得非常好，也就是說…他的後端應該無法配合其他框架，例如：express．

那我小用了一下這個小套件真的是非常輕巧，一般常用的例如取得query、method、cookies…等，可以參考這個網址討論

另外我想分享的是，比較常用的分析網址取得網址中的參數，例如(/api/product/:id)，要如何取得id，在這個套件的issue有人提到，並有人提出了兩個套件來解析網址，那在這邊我使用了url-patter，兩個我都有試過，另一個有點不太會用，所以就用這個了．

那在Nuxt 3預設所有資料夾底下的檔案，會自動匹配路由，所以如果新增一個檔案~/server/api/product.ts，並取得req.url，其實不會顯是完整的url，因此需要新增一個中介檔案~/server/middleware/handleRoute.ts，根據官方文件說明，在middleware資料夾下的所有檔案，都會在所有reuest經過這個中介層，因此這個檔案如下

import UrlPattern from 'url-pattern';

export default async (req, res) => {
    const pattern = new UrlPattern('/api/hello(/:id)');
    req.params = pattern.match(req.url);
}

在~/server/api/product.ts，就可以如下面方法使用params了

export default (req, res) => {
    console.log(req.params)
    res.end('Product id is:' + req.params.id)
}

另外如果要回應json，不用像express那樣使用res.json()，直接return 一個物件即可，真的是非常簡潔

export default (req, res) => {
    return { product_id: req.params.id }
}

至於其他如請求方法是Get或Post要怎麼處理，要不要抽出來寫function或物件，應該就看個人喜好了，反正依照h3的文件都有提供方法可以去得參數，之後有用再來看session怎麼用．

Leave a Reply 取消回覆