使用NodeJS建置REST API

nodejs在前幾年是一個非常熱門的框架，因為他使用上非常容易上手，而在短時間之內爆紅。最常見的就是在小團體或是新創團隊，希望在短時間之內建立簡易的後端小程式，而nodejs就會是相對合適的選擇。以下就來看nodejs的使用方式吧。

簡單架構設定

讓我們來看看純用Nodejs如何寫一個後端

載入http
1
const http = require('http');
使用createServer產生服務
使用方式就是從http裡面使用方法，而裡面需要放的是requestListener，如果參考文件的話，可以發現這個requestListener有兩個參數分別叫做req, res，可以用來判斷使用者發送的請求是什麼類型，還有回傳的資料是什麼。
以這個例子，會用一個server接住產生的服務。
1
const server = http.createServer((req, res) => {...});
設定port
接著使用剛剛宣告過的server去設定需要監聽的port。
意思是當你啟動這個服務的時候，你可以在指定的port連結和這個服務互動。
1
server.listen(5000);

測試服務

上面的建置大概會長這樣：

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('request');
});

server.listen(5000);

放入回傳訊息
再來我們要開始使用它了，可以在裡面使用res.end表示你已經處理完這個請求了！
因此可以回傳簡單的HTML：

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('INCOMING REQUEST');
  console.log(req.method, req.url);

  res.end('<h1>You success!</h1>');
});

server.listen(5000);

啟動程式
安裝好Nodejs後，如果你的程式寫在app.js
那麼指令只需要輸入：
1
node app.js
查看
打開瀏覽器輸入：http://localhost:5000
你就會看到成功地顯示出來了！

你可以根據需求加入Header來讓Server或Client方便辨識這個請求主要是在做什麼事情。
以上面那個例子，如果你不希望把HTML變成一個網頁顯示給你看的話，你可以加入Header方便辨識。

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('INCOMING REQUEST');
  console.log(req.method, req.url);
  
  res.setHeader('content-type', 'text/plain');
  res.end('<h1>You success!</h1>');
});

server.listen(5000);

重新啟動之後，你會發現輸出直接顯示文字給你看。
當然，你也可以加入header方便辨識這個請求是html

1	res.setHeader('content-type', 'text/html');

建置REST API

以上前情提要帶完之後，再來就是重頭戲，如何建立REST API了。

設計表單
以下我們先設計簡易的表單，並且form submit的請求設為POST
當使用者按下送出時，將會和後端進行互動：

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('INCOMING REQUEST');
  console.log(req.method, req.url);
  
  res.setHeader('Content-Type', 'text/html');
  res.end(
      '<form method="POST"><input type="text" name="username"><button type="submit">Create User</button></form>'
  );
});

server.listen(5000);

判斷REST
再來請思考一下，該如何讓使用者按下按鈕之後，能夠馬上看到結果畫面呢？
因此裡面需要加上if…else…來判斷使用者是否回傳資料過來了。

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('INCOMING REQUEST');
  console.log(req.method, req.url);
  
  if (req.method === 'POST') {
    // ...
  } else {
    res.setHeader('Content-Type', 'text/html');
    res.end(
      '<form method="POST"><input type="text" name="username"><button type="submit">Create User</button></form>'
    );
  }
});

server.listen(5000);

接收body資料
再來我們為了接收使用者丟的body，我們使用on來取得chunk data
可以先輸出看資料的樣貌：

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('INCOMING REQUEST');
  console.log(req.method, req.url);
  
  if (req.method === 'POST') {
    let body = '';
    req.on('end', () => {
      console.log(body);
      res.end('<h1>' + userName + '</h1>');
    });

    req.on('data', (chunk) => {
      body += chunk;
    });

  } else {
    res.setHeader('Content-Type', 'text/html');
    res.end(
      '<form method="POST"><input type="text" name="username"><button type="submit">Create User</button></form>'
    );
  }
});

server.listen(5000);

傳送之後你會發現Nodejs接收到的資料為：username=xxx

處理資料
為了取得username，使用split切割取得資料

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('INCOMING REQUEST');
  console.log(req.method, req.url);

  if (req.method === 'POST') {
    let body = '';
    req.on('end', () => {
      const userName = body.split('=')[1];
      res.end('<h1>' + userName + '</h1>');
    });

    req.on('data', (chunk) => {
      body += chunk;
    });
  } else {
    res.setHeader('Content-Type', 'text/html');
    res.end(
      '<form method="POST"><input type="text" name="username"><button type="submit">Create User</button></form>'
    );
  }
});

server.listen(5000);