---
# System prepended metadata

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

---

---
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
```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 伺服器 章節）](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
![](https://i.imgur.com/WTYZJFC.png)

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



![](https://i.imgur.com/yeL2Kgi.jpg)

