超新手入門 Node.js(下)

#Node.js
超新手入門 Node.js(下)
五倍技術部
技術文章
超新手入門 Node.js(下)

安裝 Express

nodejs-app 專案資料夾中,使用 npm 來建立 package.json 檔案:

$ npm init

然後會提示你輸入一些資訊,例如專案名稱、版本、作者等等,如果不想輸入的話,可以直接按下 Enter,會使用預設值,但是 entry point 這部分要看你的專案是要使用哪個檔案當作進入點,如果是使用 app.js 的話,就輸入 app.js,如果是使用 index.js 的話,就輸入 index.js。本篇文章使用 app.js,所以輸入 app.js

Express 的 Hello World

一開始不免俗的也要試著用 Express 來建立一個 Hello World 的 Server,並且可以來比較一下使用 Express 和 Node.js 的差異。

const express = require('express')
const app = express()
const hostname = '127.0.0.1'
const port = 3000

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

app.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`)
})

這一段程式碼會建立一個 Express 的實例,hostname 指定 Server 的 IP,並且監聽 3000 這個 port,當有人連線到這個 127.0.0.1:3000 時,就會回傳 Hello World!

執行這個程式也是使用 node 指令來呼叫 app.js

Express Generator

Express Generator 是一個可以快速建立 Express 專案的工具,可以透過以下指令來安裝:

$ npm install express-generator -g

安裝完成後,就可以使用 express 來建立專案:

$ express nodejs-app

這樣就會在 nodejs-app 資料夾中建立一個 Express 專案,接著就可以進到 nodejs-app 資料夾中,執行 npm install 來安裝相依的套件。

現在的專案結構如下:

nodejs-app
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
├── node_modules
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

簡單介紹一下專案的結構:

  • app.js:主要的程式碼,包含了建立 Server 的程式碼。
  • bin/www:用來啟動 Server 的程式碼。
  • package.json:專案的設定檔,包含了專案的相依套件、指令等等。
  • public:靜態檔案的資料夾,例如圖片、CSS 檔案等等。
  • routes:路由的資料夾,用來處理不同的路由。
  • views:視圖的資料夾,用來放置視圖檔案,例如 HTML、Pug 等等。
  • node_modules:相依的套件資料夾。

要執行的話,就輸入以下指令:

$ npm start

打開瀏覽器,輸入 http://localhost:3000,看到以下畫面就代表成功了:

npm start 畫面

建立 CRUD API

接下來,會建立一個簡易的 Todo List API,包含了建立、讀取、更新、刪除的功能。內容會有 idtitlecompleted 這三個欄位。

建立路由

第一步先在 routes 資料夾中建立一個 todos.js 檔案,並且在 app.js 中引入這個檔案:

const todosRouter = require('./routes/todos')

app.use('/todos', todosRouter)

這樣就可以在 http://localhost:3000/todos 這個路徑下,使用 todosRouter 這個路由。

然後在 todos.js 中分別建立 GETPOSTPUTDELETE 這四個路由:

const express = require('express')
const router = express.Router()

let todos = [] // 用來存放資料

// 取得所有資料
router.get('/', (req, res) => {
  res.json(todos)
})

// 新增資料
router.post('/', (req, res) => {
  const todo = {
    id: new Date().getTime(), // 用時間當作 id
    title: req.body.title,
    completed: req.body.completed || false // 如果沒填入這個欄位,預設是未完成
  }
  todos.push(todo)
  res.json(todo)
})

// 修改資料
router.put('/:id', (req, res) => {
  const todoId = parseInt(req.params.id)
  const index = todos.findIndex((todo) => todo.id === todoId)
  if (index !== -1) {
    todos[index].title = req.body.title || todos[index].title
    todos[index].completed = Boolean(req.body.completed)
    res.json(todos[index])
  } else {
    res.status(404).send('待辦事項未找到')
  }
})

// 刪除資料
router.delete('/:id', (req, res) => {
  const todoId = parseInt(req.params.id)
  const index = todos.findIndex((todo) => todo.id === todoId)
  if (index !== -1) {
    const deletedTodo = todos.splice(index, 1)
    res.json(deletedTodo[0])
  } else {
    res.status(404).send('待辦事項未找到')
  }
})

module.exports = router

這裡使用了 todos 這個陣列來存放資料,每次新增、修改、刪除資料時,都會對這個陣列做操作。

使用 Postman 測試 API

接下來可以使用 Postman 來測試 API,例如新增一筆資料:

Postman 測試 API

輸入 JSON 格式的資料,並且選擇 POST 的方法,然後按下 Send 按鈕,就會新增一筆資料。

修改資料的話,就選擇 PUT 的方法,並且在 URL 中加上 id,例如 http://localhost:3000/todos/1697443796409,然後在 Body 中輸入要修改的資料,按下 Send 按鈕,就會修改資料。

修改資料

刪除資料的話,跟更新的方式差不多,選擇 DELETE 的方法,並且在 URL 中加上 id,例如 http://localhost:3000/todos/1697443796409,按下 Send 按鈕,就會刪除資料。

刪除資料

以上就是使用 Express 建立一個簡易的 CRUD API 的方式,如果想要更深入了解如何使用資料庫的話,例如像是使用 MongoDB 來讓整個 API Server 更完整的話,可以參考五倍學院開設的實體課程 - 前進 Node.js,後端實戰開發應用,由專業的 Tommy 講師帶領你來學習更多 Node.js 的相關知識。