Express - RestfulAPI 起手教學 1

發表於 更新於 分類於 Disqus： 文章字數： 2.6k 所需閱讀時間 ≈ 5 分鐘

哈囉，大家好，這是一篇用 Express 建立 RestfulAPI 教學系列文章。同時間另外一篇系列文章是透過 Springboot 建立 RestfulaApi 教學持續進行中～我之後的文章會持續許多不同語言的 web 框架的教學文章。時代不同了，不能再用一套程式語言打天下，我個人認為至少需要熟悉兩種語言以上，且必須有靜態、動態語言包含在其中，才會知道其中不同的特性，還有其擅長的地方。

這系列的文章，主要內容為建立 RestfulApi 及 database 設計，最後利用 Swagger 建立線上 Api 文檔。其專案主要商業邏輯為，User 可以建立 Order、Order 裡面可以包含多個 Product。

要讀這系列文章最好是有點 node.js 基礎的唷～

廢話不多說，開始吧 ^^

建立專案

在建立專案之前，通常我們會先打開 IDE 或是 Editor。這時候就講究啦～每個人擅長用的工具都不一樣，而就開發 Node.js 而言，滿多人會使用 Visual Studio Code 的。我個人也使用過，不得不說 Visual Studio Code 的確是輕巧方便，比起原本肥大不堪的 Visual Studio，真的是好用多了。但我個人覺得 Visual Studio Code 要裝不少 Plugin 才能跟真正的 IDE 媲美。就我自己看法，我比較喜歡用 IDE 類型的。

在這邊推薦我常拿來開發 Node.js 的 IDE，一樣是 Jetbrains 系列的 WebStorm。如果有學生信箱，可以免費使用唷。因為我 WebStorm 跟 Visual Studio Code 都用過，我個人覺得 WebStorm 的功能還是相對多樣，而且真的很方便～

因此這系列的教學示範都是用 WebStorm 唷～

在 WebStorm 建立 Node.js 專案非常簡單，選擇左邊 Node.js 環境，Location 為專案位置，專案名稱我們取名為 node-rest-shop。再來選擇好 Node Interperter 及選擇 Package Manager。這些在你電腦安裝 Node.js 環境後，這些就能找到囉。

當然這系列文章是要介紹 Express 框架，我們也可以選擇左邊 Node.js Express App 快速建立 Express 框架。但是我個人是覺得對於只要建立 RestfulApi 而言，過於肥大了，因為它這個快速建立，已經幫我們建好許多模板了，我是覺得不需要這樣。我們一步一步從 Node.js 環境建立起 Express 框架。

安裝 Express

專案開啟後，馬上來安裝 Express。在 WebStorm 下方的 Terminal 上，輸入以下指令

1
npm install express

就會在該專案下安裝關於 express 的相關套件。

安裝完成後，就會發現在 package.json 檔案裡面發現 dependencies 裡面有 Express 囉。

簡單來講，package.json 裡面就是包含該專案的相關資訊，包括一些 script 指令，或是使用到哪些套件，都包含在裡面。而且當開始有安裝套件的時候，就會發現專案裡面會多一個資料夾叫 node_modules。這個資料夾裡面就是包含專案所需要的套件檔案。

啟動 Web Server

當安裝 Express 後，馬上就能寫程式來啟動我們的 Web Server 了！非常快速，程式碼也非常簡短，如下～

1
2
3
4
5
6
7
8
9
10
11
const express = require('express');
const app = express();
const port = 3000;

app.get('/', function (req, res, next) {
    res.send('Hello World');
});

app.listen(port, function () {
    console.log('Express app started on ' + port);
});

程式碼解釋：

1
2
3
const express = require('express');
const app = express();
const port = 3000;

只要 load express 這個 module 進來，並建立 express () 給 app 這個變數，就代表建立一個 express 應用程式。而通常 express 預設監聽 port 為 3000，因此這邊我們直接預設 port 為 3000。

1
2
3
4
5
6
7
app.get('/', function (req, res, next) {
    res.send('Hello World');
});

app.listen(port, function () {
    console.log('Express app started on ' + port);
});

我們建立透過 app 建立一個 get router，第一個參數代表 path 的路徑，我們設定其 path 為’/'，代表專案的 web server 的根路徑。第二個參數是一個回調函數，包含了三個參數，分別是 req、res、next。req 簡單來說就是 request 的縮寫，代表 http request。res 則是 response 的縮寫，代表 server 這邊要 response。next 則代表如果當前的函數，無法處理完全，則可以透過 next () 繼續往下傳遞。然後透過 app.listen 去監聽端口，開啟 web server。

最後執行 app.js 檔案的程式碼，如下

這樣就正式開啟 Web Server 囉～

讓我們去訪問 localhost 的 3000 端口網址，即可得到以下內容～

總結

這篇文章，主要帶大家快速建立 Express 框架，並且運行 Web Server。其他詳細內容，就等下一篇文章在說明了～不得不說 Express 的前置作業的確非常簡單又快速。所以現在不少人一開始就選擇該框架去做 Web 開發。我認為可以跟 Java 的 Spring Framework 去多多比較，也可以跟 Python 的 Flask、Django 去比較。每個不同框架都有其不同特性。

詳細內容可參考 Github Source Code：https://github.com/KennyChenFight/node-rest-shop/tree/section1

最後最後！請聽我一言！

如果你還沒有註冊 Like Coin，你可以在文章最下方看到 Like 的按鈕，點下去後即可申請帳號，透過申請帳號後可以幫我的文章按下 Like，而 Like 最多可以點五次，而你不用付出任何一塊錢，就能給我寫這篇文章的最大的回饋！