---
# System prepended metadata

title: Day 11 - Express
tags: [2024 Node.js直播班]

---

# Day 11 - Express
###### 2024 Node.js 每日任務 (此份為我的作答)

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 應用程式架構」



題目
---
依循上方步驟在專案中安裝 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 連結** 提交至回報區表格中

## 回報流程(我的回報) 

![image](https://hackmd.io/_uploads/ryMBHeClA.png)


使用範例 app.js
```javascript=
const express = require('express')
const app = express()
const port = 3000

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

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