---
# System prepended metadata

title: "\U0001F3C5 Day 11 - Express"
tags: [Node.js 直播班 - 2023 春季班]

---

---
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
```javascript
const express = require('express');
const app = express();
```
- 指定 port，並使用 app 監聽

```javascript
const port = 3000;
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
```
- 設定當接收到 GET request 時，回傳 `'Hello World!'` 文字

```javascript
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
![](https://i.imgur.com/WTYZJFC.png)

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




## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  
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)|





