---
tags: Node.js 直播班 - 2023 春季班
---

# 🏅 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 伺服器 章節）」

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

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

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

## 回報流程

將答案連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://i.imgur.com/WTYZJFC.png
-->

回報區
---

| 報數 | 組別／Discord 名字 | Codepen／HackMD／其他回饋 |
|:----:|:-------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 北 10 組 / Benson | [Github Benson - Day 11](https://github.com/ioveasdkre/HexschoolOperation/tree/main/NodejsEnterpriseClass/day40-tasks/day11/01_執行結果.png) |
| 2 | 北 1 組 / PittWu | [Blog Post - Day 11](https://pitt-wu-blog.vercel.app/docs/day11-express) |
| 3 | 北 8 組 / Zhao Chen | [GitHub - Day 11](https://github.com/zhao1995chen/NodejsEnterpriseClass/blob/master/daily-task/day11/screenshot.png) |
| 4 | 中 4 組 / jimkk159 | [HackMD - Day 11](https://hackmd.io/2o_muAlWTk-SjO-rMRTXTA) |
| 5 | 中 3 組 / Wendy | [Notion - Day 11](https://jewel-cellar-80e.notion.site/Day-11-Express-46bb1ea424c84de186937967997a52de) |
| 6 | 北 12 組 / Sam Lin | [GitHub - Day 11](https://github.com/samlin1122/hex-school/blob/main/daily-challenges/day11.md)
| 7 | 北 1 組 / MayYi | [HackMD - Day 11](https://hackmd.io/Z_h5YajoRP2EoAoJuEUpjQ)|
| 8 | 北 5 組 / 圈圈 | [HackMD - Day 11](https://hackmd.io/MCeQbTWBQ1ig7K-liq3Eeg?view)
| 9 | 北 13 組 / Louisa | [GitHub - Day 11](https://github.com/louisa0416/NodejsEnterpriseClass/blob/master/daily-task/day11/expressPage.jpg)
| 10 | 北 13 組 / sasha | [HackMD - Day 11](https://hackmd.io/@sashaye/Hy7xFzdb3)
| 11 | 中 4 組 / Zoey | [GitHub - Day 11](https://github.com/jsbo12551a/hexschool_homework/blob/main/README.md)|
| 12 | 北 5 組 / Albee | [GitHub - Day 11](https://github.com/albee-chang/hexschool-node-dailytask/tree/main/day11)|
| 13 | 北 16 組 / 啊培培 | [GitHub - Day 11](https://github.com/LABIBI-LG/Courses/tree/main/hexschool/nodeJS/Live_Course/Daily_Tasks/day11)|