2024-07-09|閱讀時間 ‧ 約 24 分鐘

後端框架與API 開發(4-1) – Params

    ※ Params是什麼?

    在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。

    ※ Params的兩個功能:

    1. 建立一個「動態路由」。
    2. 讓網址上輸入的內容顯示在畫面裡。

    ※ Params的基本概念和運作方式:

    1. 使用者輸入網址:當使用者在瀏覽器上輸入一個網址後,瀏覽器會向伺服器發送一個「請求」。
    2. 伺服器處理請求:伺服器會根據已設定的路由來處理這個請求。這裡的路由可能包含一個或多個 params,這些 params 是在網址中由使用者輸入的內容。
    3. 取得 params:伺服器會從請求物件中取得 params,這些 params 就是使用者在網址上輸入的內容。
    4. 回應請求:伺服器會根據這些 params 來動態生成回應,然後將這個回應發送給瀏覽器。因此,使用者可以在瀏覽器上看到與他們輸入的網址相對應的內容。

    ※ 轉換為「動態路由」:

    在定義動態路由的時候,只需要把預計讓使用者動態輸入內容的部分變成一個變數就可以了,並且在變數前面使用 「:」 這個符號。這種在路由中使用的變數就稱作 params。

    // change into dynamic routes with params ':language'
    app.get('/popular/languages/:language', (req, res) => {
    res.send('<h1>Node.js is a popular language</h1>')
    })

    在路由設定時,我們設定了 app.get('/popular/languages/:language')。也就是說,現在瀏覽器只會去對比 /popular/languages/ 這段。至於 :language 的位置,可以是任何合法字串。

    ※ 將 params 的內容呈現於瀏覽器:

    //index.js
    router.get('/popular/languages/:language', (req, res) => {

      res.render('languages')})
    //languages.handlebars
    <img width="500" src="/static/image/angels-1.jpg" alt="">


    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.