Node.js #套件2 -Json-server

May 30, 2023

《 Json-server 》

Json-server 提供了一個快速且方便的方式來自行建立虛擬的 API 伺服器，並使用JSON 檔案作為資料來源，可以在本機端運行，所以在專案開發中還沒有真正後端伺服器時，可使用Json-server套件快速建立一個模擬的 API，進行前端的測試。

➤ 步驟一：

在專案程式碼中開啟終端機，輸入指令「npm install json-server -D」將Json-server套件進行下載。(※在指令後面加上-D的原因是，安裝的套件就會記錄在package.js的devDependencies中，表示此套件是用於開發中使用)

➤ 步驟二：

自行創建一個json檔，如果手邊還沒有可用資料，想先測試的話可參考以下程式碼內容：

[ json ]

{
    "list":[
        {"id":1,"title":"事件1","isDone":false},
        {"id":2,"title":"事件2","isDone":false},
        {"id":3,"title":"事件3","isDone":false},
        {"id":4,"title":"事件4","isDone":false},
        {"id":5,"title":"事件5","isDone":false},
        {"id":6,"title":"事件6","isDone":false}
    ]
}

接著在程式碼的終端機中，可將以下兩種指令擇一輸入：(我在這裡的json檔案名稱為db，故以下皆以db為範例)

輸入指令「npx json-server db.json」→可顯示資料
輸入指令「npx json-server --watch db.json」→資料更動可同步顯示

(※備註：npx命令用於檢查本地項目中是否安裝了"json-server"，如果有的話它會運行本地版本，否則會自動下載並運行最新版本的"json-server")

指令輸入後會跑出成功的資訊以及Resources的網址(圖一)，可先將Resources的網址在瀏覽器跑看看成果(圖二)。

➤ 步驟三：

創建一個js檔，在檔案中放置以下js內容，並將步驟二產生出來的Resources的網址放進axios.get(‘’)中

[ Js ]

const axios = require('axios')
axios.get('http://localhost:3000/list') //放入步驟二Resources的網址
.then(response => console.log(response.data))

在程式碼終端機輸入指令「node 你創建的檔案名稱.js」(我在這裡的js檔案名稱為index)，有跑出資料就表示成功囉。

Node.js #套件2 -Json-server

Written by Penny