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

簡單架構設定

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

  1. 載入http

    1
    const http = require('http');
  2. 使用createServer產生服務
    使用方式就是從http裡面使用方法,而裡面需要放的是requestListener,如果參考文件的話,可以發現這個requestListener有兩個參數分別叫做req, res,可以用來判斷使用者發送的請求是什麼類型,還有回傳的資料是什麼。
    以這個例子,會用一個server接住產生的服務。

    1
    const server = http.createServer((req, res) => {...});
  3. 設定port
    接著使用剛剛宣告過的server去設定需要監聽的port。
    意思是當你啟動這個服務的時候,你可以在指定的port連結和這個服務互動。

    1
    server.listen(5000);

測試服務

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

1
2
3
4
5
6
7
const http = require('http');

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

server.listen(5000);
  1. 放入回傳訊息
    再來我們要開始使用它了,可以在裡面使用res.end表示你已經處理完這個請求了!
    因此可以回傳簡單的HTML:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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);
  2. 啟動程式
    安裝好Nodejs後,如果你的程式寫在app.js
    那麼指令只需要輸入:

    1
    node app.js
  3. 查看
    打開瀏覽器輸入:http://localhost:5000
    你就會看到成功地顯示出來了!

Header的使用

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

1
2
3
4
5
6
7
8
9
10
11
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了。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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);
  2. 判斷REST
    再來請思考一下,該如何讓使用者按下按鈕之後,能夠馬上看到結果畫面呢?
    因此裡面需要加上if…else…來判斷使用者是否回傳資料過來了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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);
  3. 接收body資料
    再來我們為了接收使用者丟的body,我們使用on來取得chunk data
    可以先輸出看資料的樣貌:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    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

  1. 處理資料
    為了取得username,使用split切割取得資料
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    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);

如此一來,你就大致完成了POST了!

看到這邊,你對Nodejs有什麼感想嗎?
你的反應是不是:天呀~怎麼會有這麼麻煩的東西呀!!!光是一個POST就要搞這麼麻煩

沒錯,而且在維護上的成本也要投入很多在上面,只要一不小心就很容易寫出dirty code。
那麼…該如何改善呢?Express.js改善了這個問題。