Day19 NodeJS-Express IV

2021 iThome 鐵人賽

DAY 19

自我挑戰組

學習NodeJS的30天系列第 19 篇

13th鐵人賽 get express node.js

chwk

2021-10-04 22:34:19

1253 瀏覽

分享至

前一篇說明了Express中的樣板引擎與樣板的使用，是比較偏向前端的部份，今天的主題是前端和後端資料傳遞的那一塊：Get方法請求的query string。

Ｑuery String

這邊的Query String指的是透過Get方法提出請求時，以字串形式接在URL後面的請求內容，通常以?與URL分隔並以&區分請求參數，例如：localhost:2000?firstName=chw&lastName=k表示提出內容firstName為chw和lastName為k的請求。

實作看看

今天一樣從前面的程式碼來修改說明Query String的請求方法。

// 原始程式碼
let express = require("express");
let app = express();
let port = process.env.PORT || 2000;

app.use("/assets", express.static(`${__dirname}/public`));
app.set("view engine", "ejs");

app.get("/job/:type", (req, res)=>{
  res.render("job", {TYPE: req.params.type});
});

app.listen(port);

由於Query String接續在URL後面，參數的取得方式跟URL中以:<參數名稱>所提供的參數類似，都是透過req的屬性可以取得，因此只要在get()方法裡面的render()加上<變數名稱>: req.query.<參數名稱>，就可以存取Query String的參數，並透過變數傳遞給樣板使用。

app.get("/job/:type", (req, res)=>{
  res.render("job", {TYPE: req.params.type, QSTR: req.query.qstr});
});

在前端頁面也要加上可以顯示參數內容的變數以確認效果。

<html>
  <head>
    <link href="/assets/style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <h1>Job: <%= TYPE %></h1>
    <!--加入顯示Query String參數的內容-->
    <h2>Query String: <%= QSTR %></h2>	
  </body>
</html>