[微精通：網頁設計Vue + Node.js + MySQL] 4.1.API & API伺服器 (下)

張貼者： 日期：
API可以說是一個資訊系統運作的核心，接下來我們將製作殭屍API用來處理殭屍系統的所有殭屍資料。 下半部，我們來說說如何實作。

 

image/svg+xml var express = require ( ' express ' ); var api = express (); var express = require( 'express' ); var api = express(); api . post ( ‘ /api/welcome ' , function ( req , res ) { res . send ( ‘ Welcome 殭屍 api~ ' ); } ); var express = require( 'express' ); var api = express(); api.post( '/api/welcome' , function (req, res) { res.send( 'welcome 殭屍 api~' ); }); api . listen ( 80 , function () { console.log( ' Zombie api 已啟動在 port 80! ' ); } ); // 略過⼀些程式 api. post ( ' /api/welcome ' , function (req, res) { res.send ( ' welcome 殭屍 api~ ' ); }); // 略過⼀些程式 有了 Node.js ，接下來如何開發我們的第⼀⽀殭屍 API? 1. 開啟應⽤程式 \ ⼯具程式 \ 終端機，輸入 ’node’ 。 2. 這時我們會進入 node 的編寫程式的環境，這確定了我們有 node.js 的環境了，但要怎麼開發殭屍 API 呢 ? 1. npm init ，初使化 Node.js ⽬錄 w4_1_2 1. ⾸先，我們先建立⼀個程式的⽬錄，⽬錄 可取名為取名為⽬前範例的⽬錄 ’w4_1_2' 。 2. 接著從應⽤程式中開啟 ’Visual Studio Code’ 。 3. 透過 File/Open ，選取 剛才建立的 ’w4_1_2' ⽬錄 4. 然後按 ’ 打開 ’ ，並信認此資料匣的作者以開啟⽬錄。 5. 點選 ’Terminal\New Terminal’ 開啟終端 機。這時因為我們開啟專案的⽬錄為 w4_1_2 ，因 此終端機開啟後的⽬錄也會在 w4_1_2 ⽬錄。 6. 接下來我輸入 npm init ，就會產⽣⼀些設定檔和套件，完成 w4_1_2 ⽬錄的套件管理初始化。從此這個⽬錄就會受到 Node.js 的套件控管。⽽ npm 是 'Node Package Manager' 的縮寫、 'init' 則是初始化 initial 的縮寫， npm init 即表⽰我們安裝了 Node Package Manager ，即安裝了套件管理的⼯具。 7. 查看 w4_1_2 ⽬錄，會發現多了⼀個 ’package- lock.json’ ，這個即是⽤來控管套件的檔。 2. npm install ，安裝 express 框架 w4_1_2 1. 輸入 ’npm install express --save’ 安裝 express 套件。其中的 -- save 參數，會讓安裝的套件 ’ 永久 ' 加入到 'package-lock.json' 的檔中。 2. 打開 ”package-lock.json” 檔，這邊會列出所有安 裝的套件來相關資料，除了 ”express” 外，還裝了 express 需要使⽤的相依套件，總共增加了 50 個套件。 3. ⽽每個套件的實際程式會存 放在新長出的 ”node_modules” ⽬錄中。 4. 特別的是，這個⽬錄是可被刪 除的，刪除後只需要在 Terminal 中輸入 ’npm install’ 這時 npm 即 會依照 'package-lock.json' 檔 中的套件描述進⾏套件的實際安 裝，之後就會再長出 'node_modules' ⽬錄。 3. express() 函式，建立殭屍 API 應⽤實體 w4_1_2 - server.js 1. 按右鍵新增⼀個與本範例同 名的 ”server.js" 檔。 1. 呼叫 require() 引入先前安裝的 express 套件，⽽ express 套件會傳回⼀個函式，我們把欲個函式放在 express 變數中。 2. 加上⼩括號 (()) 呼叫 express 變 數中的函式建立我們 API 的應⽤實體 物件，並放在 api 變數中。 4. post() 函式 +url ，提供 ’welcome'API w4_1_2 - server.js 先前提到 http 的⽅法有很多種，如： get 、 delete 、 put 等，不僅是 post ，使⽤ post 的原因是簡化範例，統⼀使⽤ post 作 api 的呼叫。 提 ⽰ 1. 在 express 物件上呼叫 post ⽅法，好建立⼀個會回傳 'welcome 殭屍 api~' 字串的 api ，⽽ post 表⽰ HTTP 存取的動作為 post 。 2. 第 1 個參數為 api 的路徑，到時這個路徑會變成我們存取 api 的 URL 。 3. 第 2 個參數是要執⾏的函式，這個匿名函式 會有兩個參數 req 與 res ，分別表⽰ request 與 response 物件，即對應我們前⾯說的 HTTP 的請求 Request 與回應 Response 。 4. 也因為 res 變數存的是作為 HTTP 協定回應的 response 物件， 因此上⾯會有⼀些⽅法可操作與回應相關的⽅法，⽽呼叫 send() ⽅法，即是將 welcome 殭屍 api~ 字串傳回給呼叫的⽤⼾。 5. listen() 函式，開啟殭屍 API 監聽服務 w4_1_2 - server.js 1. 準備好回傳 welcome~ 殭屍 api 的 api 後，接下來就可透過 listen() ⽅法，在 80 port 上監聽與處理呼叫 api 的請求，程式執⾏到此時等同於啟動 api 伺服器。 2. 第 1 個參數代入 80 ，表⽰使⽤ 80 port ，⽽ 80 port 是 HTTP 協 定的預設 port ，因為是預設，⽤⼾在呼叫 api 時可忽略不寫。 3. 第 2 個參數是⼀個函式，這個函式會在啟動時被呼叫，這邊簡單使⽤ console.log() 函式輸出⼀段 api 已啟動在 80 port 的訊息。 為何會有 port 的這東⻄ ? 原因是⼀台主機可以啟動多個服務，但主機在網路 中的 ip 通常只有⼀個，怎麼讓⼈家連進來時找到對應的服務呢 ? 這時就透過 port 來找到。 port 是不可重複的，當⼀個應⽤程式使⽤了 80 port ，就沒 有另⼀個應⽤可以在同⼀時間使⽤ 80 port 了。 提 ⽰ 6. node server.js ，啟動殭屍 API w4_1_2 - server.js 1. 接下來在 ternimal 中使⽤ ’node’ 指令執 ⾏ ’server.js’ 檔，即 'node server.js’ 。 2. 成功執⾏後會執⾏在 listen() 函式中的第 2 個參數的函式，會出 現 ’Zombie api 已啟動在 port 80!’ 的字樣在 console 上。 7. Postman ，測試殭屍 API 中的 'welcome'API 1. 打開進入 Postman 後，點 New 。 2. 接著選 ’HTTP Request’ 。 3. 在此輸入 url 網址 ’http://127.0.0.1/api/ welcome' ，其中 http:// 是指定通訊協定為 http ， 127.0.0.1 是⼀個特殊的 ip 表⽰你的這台電 腦，接下來是 ’/api/welcome’ ，這個就是我們在 程式中的寫到 post('/api/welcome') 。 w4_1_2 - server.js 4. post() 函式只能 處理 http ⽅法為 post 的請求，因此 Postman 也要選 ’POST' 。 5. 接下 Send 發送請求 Request 。 6. 最後會在回應 Response 的內 容 body 中得到 ’welcome 殭屍 api~’ ，這即是透過 res.send() 函式回傳的字串。 主機 電腦 表頭 Headers ⽅法 Method 內容 Body 請求 Request 表頭 Headers 狀態 Status 內容 Body 回應 Response 7. 以 HTTP 協定的圖做 說明 Postman 就像電 腦，發出⼀個請求 Request 。 8. ⽽主機上有我們⽤ Node.js 寫的 server.js 程式，它接收了 請求 Request ，並產⽣了回應 Response 回傳給 Postman 。

留言

張貼留言