Skip to content
KentChien edited this page Dec 20, 2016 · 1 revision

Quick Start

###安裝 JSON-SERVER 先安裝(如已安裝可略過此步驟):在終端機輸入以下指令進行安裝

$ npm install -g json-server

###創建 server 作用資料夾 創建 JSON server 作用的資料夾(此步驟為集中管理用,若不需要,亦可略過),如 json-server-sources ###建立欲模擬的JSON資料檔案 在 json-server-sources 資料夾內建一個 customers.json 檔案,檔案內容如下:

{
    "customers": [
        { "id": 1, "first_name": "John", "last_name": "Smith", "phone": "0911-223-344" },
        { "id": 2, "first_name": "Kent", "last_name": "Chien", "phone": "0922-334-455" },
        { "id": 3, "first_name": "Rex", "last_name": "Li", "phone": "0933-445-566" }
    ]
}

###啟動JSON server 在終端機切換至 db.json 的所在資料夾,執行以下語法來啟動 json-server

$ json-server --watch customers.json

然後就可以在瀏覽器開啟 http://localhost:3000/customers,可以列出完整的 customers JSON array ###查看單筆資料 瀏覽器開啟 http://localhost:3000/customers/1,可以列出 id=1 的客戶資料如下:

{
  "id": 1,
  "first_name": "John",
  "last_name": "Smith",
  "phone": "0911-223-344"
}

###HTTP METHOD Support 亦可使用 POST 方法來新增一組 customer 資料,相同的,使用 PUTPATCH 方法可以修改一筆資料(*PUT 為完整更新,PATCH 為部分更新),使用 DELETE 方法可以移除一筆資料。(可以使用 Postman 這類的工具來進行測試)

Notes

###複寫 JSON sever 預設值 可以使用在json-server 作用的資料夾(意指 terminal pwd 所在的資料夾位置),新增一個 json-server.json 檔案,可以複寫 JSON server 的預設值,如下面範例將 JSON server 的預設 port 從 3000 修改為 4000

{
    "port": 4000
}

加上以上檔案以後,直接執行 json-server xxx.json 即可,不需要再加 -p--port 來修改預設 port

Clone this wiki locally