Day17 NodeJS-Express II

今天要针对Routes和Middleware的部份进一步了解Express框架。

Express中的Routes

Routing(路由)在网页应用程序中是指网址路径与应用程序端点的比对(match)，以及应用程序接收用户端请求的方法，在Express里的路由方法就是前一天提过的衍生自HTTP方法的get()、post()等，而Routes指的是网址路径，即URL中的Path。在Express框架中，Route除了可以是字串，也可以是正规表示式，亦即可以依据需求规划应用於多个端点的路由方法比对，例如：当Route比对为/a?bcd，路由方法会针对Path是/acd或/abcd的端点回应，除此之外Route的设定也可以加入变数，这是今天的实作部份。

用用看不同的Routes

  1. 首先要把昨天的code拿出来用一下，目前已经有两个get()的路由方法，Route分别是/和/api。
app.get('/', (req, res)=>{
  res.send("<html><head></head><body><h1>Hello</h1></body></html>");
});

app.get("/api", (req, res)=>{
  res.json({firstName: "chw", lastName: "k"});
});
  1. 今天来加个可以显示客制化变数的页面，先建立一个Route为/job的get()路由方法，回传一个HTML页面。
app.get("/job", (req, res)=>{
  res.send("<html><head></head><body></body></html>");
});
  1. 藉由将/:<变数名称>加入Route，然後可以透过req.params.<变数名称>取得请求时附加的变数。
app.get("/job/:type", (req, res)=>{
  res.send(`<html><head></head><body><h1>Job: ${req.params.type}</h1></body></html>`);
});
  1. 在浏览器上网址栏以/job/<变数内容>可以改变显示页面内容。

https://ithelp.ithome.com.tw/upload/images/20211002/20139980eK6r6nfgTa.png

Express中的Middleware

Middleware又称为中介层，在Express中可以解释为在请求与回应的事件中间执行的部份，一个应用程序中可能有多个中介层同时存在，中介层可以用来处理许多不同的事件，今天以载入CSS档案作为说明。

  1. 在专案路径中建立一个资料夹public，并在其中建立静态档案，以CSS为例。
body {
    font-family: "Hack", Helvetica, sans-serif;
}
  1. 为了使建立的CSS档案能在网页作为回应回传的时候载入，需要在主程序中建立一个express.static()中介层，纪录静态档案存放位置，并以use()方法指定到一个路径/assets。
app.use("/assets", express.static(`${__dirname}/public`));
  1. 在主程序回应HTML页面的部份以/assets路径加入public资料夹中的CSS档案。
app.get('/', (req, res)=>{
  res.send("<html><head><link href=assets/style.css type=text/css rel=stylesheet /></head><body><h1>Hello</h1></body></html>");
});
  1. 可以从浏览器确认样式顺利载入。

https://ithelp.ithome.com.tw/upload/images/20211002/20139980IPt5xROZ4Q.png

补充一下

程序码中载入CSS档案的概念，是由回应页面中的<link/>物件，透过href向/assets路径提出请求载入style.css档案，而use()再透过对应的路径透过express.static()中介层寻找并读取style.css档案。

如果从浏览器的开发人员工具会发现Network里有两个请求：localhost与style.css，style.css的请求路径就是/assets/style.css。

https://ithelp.ithome.com.tw/upload/images/20211002/20139980fovVpp5lk3.png

小结

路径的设定、参数的加入以及中介层的使用让HTTP的请求与回应可以有更多的变化，特别是中介层，除了载入静态档案之外，use()方法透过不同的回呼函式也能有不同的应用，而在Express中常常用到的get()、post()等路由方法，因为是在处理请求与回应之间的动作，其实也归类为中介层，感觉学了一些基础发现要学的东西更多了/images/emoticon/emoticon16.gif

参考资料

https://expressjs.com/en/guide/routing.html

Learn and Understand NodeJS [课程]


<<:  [Day 17]独自一人的全端攻略(後端篇)

>>:  Day 27:DB也是假的 建立Mock SQLDelight

Day 1 : 前言与DevOps

前言 大家好，我是Lufor，第一次参加铁人赛。这是我的主要Blog网址: https://lufo...

【Day28】this - call, apply, bind 与严谨模式

call, apply, bind 方法 当我们对函式使用 call, apply, bind 这三...

防止使用者频繁送出 Request & 倒数计时重新发送认证码

以实务来说，总是会有一些情况导致使用者没办法正常收到认证码，所以系统必须具备 retry on fa...

铁人赛 Day11 -- 一定要知道的 CSS (八) -- 想要设定个文字而已有那麽难吗?

前言 此篇虽然不是非常专业，但基本文字设定应该是没什麽问题啦 再谈谈设定文字之前要先知道文字有哪几种...

观注的系列

之後会将铁人赛里的系列文做一个介绍 不过分类是依照我的想法 Google Assistant Goo...