---
tags: Node.js 直播班 - 2022 春季班
---
# 🏅 Day 11

## Express

Express 是一個 Node.js 的 web 框架，接下來我們會使用它來實作 API，回傳 JSON 給前端使用

### 安裝 Express

- 開啟新的專案，並在此專案路徑下先執行 `npm init -y` 建立 package.json
- 執行 `npm install express --save`
- 在專案中新增 app.js，並引入 express 模組，express 是一個 function，執行後會建立一個 app

const express = require('express');
const app = express();

- 指定 port，並使用 app 監聽

const port = 3000;
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

- 設定當接收到 GET request 時，回傳 `'Hello World!'` 文字

app.get('/', (req, res) => {
  res.send('Hello World!')
})

- 執行`node app.js`，並造訪` http://localhost:3000/`，若設定成功則會看到頁面出現 Hello World!

### 參考資源

[安裝 Express](https://expressjs.com/zh-tw/starter/installing.html)
[Express "Hello World" 範例](https://expressjs.com/zh-tw/starter/hello-world.html)

[Express - Node.js Web 應用程式架構 （可看到 開啟 web 伺服器 章節）](https://courses.hexschool.com/courses/1670869/lectures/39299596)（章節影片）

### 題目
依循上方步驟在專案中安裝 express，並參考此[範例](https://expressjs.com/zh-tw/starter/hello-world.html)，造訪頁面時會回傳 Hello World 文字

完成圖如下：造訪 ` http://localhost:3000/`（或自訂的 port) 並有回傳 Hello World

請將完成後的畫面截圖，並將截圖貼到 HackMD，將 **HackMD 連結** 提交至回報區表格中

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式：請在「回報區」貼上 CodePen 或 HackMD 連結回報答案 (為了統計人數，請同學依序加上「報數」)

<!-- 解答

https://i.imgur.com/WTYZJFC.png
-->

回報區
---

| 報數 | 組別 / 名字 | Codepen / HackMD / 其他回饋 |
| ---- | -------------------- | -------------------------------------------------------------------- |
| 1 | 第 2 組 / Vic | https://i.imgur.com/1nRvLwe.jpg |
| 2 | 第 9 組 / 黃士桓 | https://hackmd.io/z_3MRGjJRWujdS45nuCnhw |
| 3 | 第 3 組 / Hobby | [HackMD](https://hackmd.io/@hobbyling/day11) |
| 4 | 第 5 組 / Hazel | [HackMD@Hazel](https://hackmd.io/@hazelwu/day11) |
| 5 | 第 2 組 / Genos | [HackMD](https://hackmd.io/5A8AcAMeSSOA96WvjFH48g) |
| 6 | 第 4 組 / 小宥 | [HackMD](https://hackmd.io/N_PxvO9rTUOIYoE9qgAHAQ) |
| 7 | 第 6 組 / Ruta | [HackMD](https://hackmd.io/zUkoYVQcRfC783Pn7hCKog) |
| 8 | 第 4 組 / sihle | [HackMD](https://hackmd.io/@bugbug777/rkhWlsJrq) |
| 9 | 第 8 組 / Hank | [HackMD](https://hackmd.io/@TFOivyvXT-qpG6SieUTfgw/B1jq55krq) |
| 10 | 第 14 組｜East | [HackMD](https://hackmd.io/1VVYh6GfQwmln6FiXW5eFA) |
| 11 | 第 2 組｜peter | [HackMD](https://hackmd.io/@peterchen1024/HkMDkRJSq) |
| 12 | 第 3 組 / HedgehogKU | [HackMD](https://hackmd.io/YKBneqe6TgK4EsR2DvKsBw) |
| 13 | Naiky | [HackMD @Naiky](https://hackmd.io/@UWBC7rrORiKaLSBg226mZg/ryfmaYJS5) |
| 14 | 第 3 組 / hiYifang | [HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/HkiSA6Jrc) |
| 15 | 第 11 組 / Han Lai | [HackMD](https://hackmd.io/@laihan/ryNFm2kH9) |
|16 |第 9 組 / konstante |[HackMD](https://hackmd.io/hswQVsz8Q8W9OLNLbCaAAA?view)|
| 17 | 第 2 組 / joe Chang | [HackMD](https://hackmd.io/uaRTw9c0TgOrADyXMmGL0Q?view#422---Express) |
| 18 | 第 4 組 / 苡安 | [HackMD](https://hackmd.io/hb4cIAdgTjORDlSjerZosQ)
| 19 | 第 1 組 / Claire | [HackMD](https://hackmd.io/vo2OGUvVRFSSvMDywNlulg)
| 20 | 第 3 組 / Adam Hsu | [HackMD](https://hackmd.io/@S9gD__kVTSiQUupQNn_4FQ/B1a7SGgSc)|
|21| 第 13 組 / KFC |[HackMD](https://hackmd.io/FGNigXeZS5urmG4r7YSgyA?view)|
|22| 第 2 組 / wendy.li | [HackMD](https://hackmd.io/sdpInFMAQkW0xneCvRD47A)|
|23| 第 1 組 / Jerry Huang | [HackMD](https://hackmd.io/CrDbQzBkTSCPsfRPsHzOXg)|
|24| 第 2 組 / Rikkubook | [HackMD](https://hackmd.io/rFbsD2qUSJS2mjKvlWK88w)|
|25| 第 7 組 / jason06286 | [Picture](https://i.imgur.com/SweIVMq.png)|
|26| 第 3 組 / justin | [HackMD](https://hackmd.io/9tDnGm76QhOJWDgix0rtbA)|
|27| 第 15 組 / Tofu | [HackMD](https://hackmd.io/lQMUt_4NQ1aqb603SUjpEA)
|28| 第 10 組 / 橘子 | [HackMD](https://hackmd.io/IzybN8eJScaWYX609k3o6Q) |
| 29 | 0 / Aya | https://stackblitz.com/edit/node-r6zkk3 |
|30| 第 12 組 / Jimmy | [HackMD](https://hackmd.io/B0aZOAaCTTi7d9r8hsJpbg) |
| 31 | 第 15 組 / Chiu | [HackMD](https://hackmd.io/bChP1SHxRM6sb38_LHfPBw) |
| 32 | 第 16 組 / 皓皓 | [HackMD](https://hackmd.io/@cutecat8110/ryM1M04rc) |
| 33 | 第 10 組 / Otis | [HackMD](https://hackmd.io/@wAXXVY7eQ2WkcVtv8Vopzg/SJujkFSrq) |
| 34 | 第 1 組 / Ed Huang | [HackMD](https://hackmd.io/SOz8lyvaRter77_HzoZsHg?view) |
| 35 | 第 9 組 / Reynold | [HackMD](https://hackmd.io/@dL7AuQEMQ6KpCSRHaYElOA/H1N271dr5)|
| 36 | nick6303 | [HackMD](https://hackmd.io/smQu_XUmSKSjv5GgdFe6Wg?both) |
| 37 | uniza | [HackMD](https://hackmd.io/6O5jL60IT_inhXO8ovau5w)|
| 38 | 第 1 組 / snow | [HackMD](https://hackmd.io/@snowsuika/rymhtsiH5)|
| 39 | 第 15 組 / yolala | [HackMD](https://hackmd.io/c6CANTH1T-CPx9LORpKQsA?both)|
| 40 | 第 5 組 / Nap | [HackMD](https://hackmd.io/@8x8YzkXNSzafUSO3LZTmUw/Bya7kH0Bq)|
| 41 | 第 3 組 / 小葉 | [HackMD](https://hackmd.io/@FyKv37KcRSWqAO_e336w8g/HJmgjNAr5)|
| 42 | 第 11 組 / mandy | [HackMD](https://hackmd.io/Bt7T9F13ScCGdeQPAN3RzQ)|
| 43 | 第 1 組 / Emily Hsi | [HackMD](https://hackmd.io/@EmilyHsi/Sy5OzgWU9)|