[Node.JS] 打造 todolist api 1 - 行前準備

發表於 更新於 分類於 閱讀次數：

上一篇文章完成了網頁伺服器服務的建置，這一次就更進一步的製作一個簡單的 todolist API，讓他有新增、修改、刪除的功能。

💎 流程、架構規劃

六角學院的課程中都會以流程圖的方式，這對於循序漸進完成程式功能會非常有幫助，在完成第一個版本後就可以嘗試重構和模組化，下面是我整理出的結構，每個人在撰寫程式碼時的構思不盡相同，可以自行規劃。

  • 工具
    • NPM/Yarn：套件管理工具
    • UUID 套件：用來建立待辦事項的 id
    • nodemon 套件：建立可即時更新的本地伺服器
    • POSTMAN 軟體：模擬 http 請求，做功能測試
    • Git/GitHub：版本控制
    • 代管平台（heroku）：api 服務上線
  • server：啟用 api 的主要程式碼
    • http：使用 node.js 原生的模組
    • headers：回傳 json 格式，開放跨域（CORS），提供 route 的五種請求方法
    • port：要加入環境變數（process.env.PORT）
  • route：依請求決定要執行的動作
    • OPTIONS：回應表頭就好
    • GET：回應全部待辦
    • POST：新增一筆待辦、回應全部待辦，需要檢查 body 內容
    • DELETE
      • 單筆：刪除一筆待辦、回應全部待辦，需要檢查 url 的 id
      • 全部：刪除全部待辦、回應全部待辦
    • PATCH：修改一筆待辦、回應全部待辦，需要檢查 url 的 id、body 內容
  • response：回傳資料優化
    • success：回傳（無內容或待辦資料）
    • false：回傳錯誤代碼及錯誤訊息
  • constants：常用的常數
    • （視實際撰寫的重複使用狀況獨立出來）

💎 建立專案環境

  1. 建立一個新專案資料夾。
  2. 執行 npm init 指令來製作 package.json 檔案。
  3. 執行 npm i uuid 來安裝 UUID 套件（後續待辦事項的編號使用）。

    Wiki - UUID
    npm - uuid

  4. 在專案資料夾中建立一個 server.js 檔案。
  5. 先參考官方範例在 server.js 內撰寫啟用伺服器的程式碼：
    1
    2
    3
    4
    5
    6
    7
    const http = require("http");
    const server = http.createServer((req, res) => {
        res.writeHead(200, {"Content-Type": "text/plain"});
        res.write("Hello");
        res.end();
    });
    server.listen(8000);

段落測試：

  1. 執行 nodemon server.js 測試是否有錯誤資訊（如果環境沒有 nodemon，請執行 npm i -g nodemon 全域安裝）
  2. 開啟任一瀏覽器，連線本地網址 http://127.0.0.1:8000，確認是否正常顯示回傳的資料。

💎 伺服器設定調整

  1. 修改預設 header
  • todolist api 設計成回傳 json 檔，所以要把 Content-Type 改成 application/json。
  • 加入開放哪些 Headers 和 Methods 的設定。
  • 加入允許所有來源的跨域連線請求（CORS）。

    跨域請求可以參考 MDN - CORS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // header 獨立成一個常數
    const headers = {
        'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'PATCH, POST, GET, OPTIONS, DELETE',
        'Content-Type': 'application/json'
    }

    const server = http.createServer((req, res) => {
        // 修改成使用變數
        res.writeHead(200, headers);
        // 修改成回傳 json 格式的內容
        // 此處需要注意，網路封包傳送的資料只有純字串，需要先轉換
        res.write(JSON.stringify({
           "test": "Hello"
        }));
        res.end();
    });
  1. 修改預設 port
  • 加入環境變數，佈署到代管服務才能正常運行。
    1
    2
    3
    4
    5
    const { PORT = 3000 } = process.env;

    ...

    server.listen(PORT);

段落測試：
開啟任一瀏覽器，連線本地網址 http://127.0.0.1:3000，確認是否正常顯示回傳的資料。

💎 結語

本篇文章已經完成基本的環境建立，並且整理出程式需要撰寫的內容，下一篇文章就可以依照這個結構逐步完成所有的功能。