Day19 NodeJS-Express IV

前一篇说明了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>