JSON-SERVER從0開始

• 一款npm 套件
• 使用 JSON 檔案模擬資料庫
• 快速建立 RESTful API，幫助前端開發
• 無權限控管功能

安裝與設定

安裝NPM (如果如果安裝過node.js，請略過此步驟)

• npm 的全名是 Node Package Manager
• 安裝Node.js時，會順便安裝NPM
  1. 到node.js官網下載LTS版本 https://nodejs.org/en/
  2. 安裝過程一律 next直到finish
  3. 在終端機(命令提示字元) 輸入 npm -v
     有出現版號就表示成功
  • 如出現提示'環境變數未設定'，請依下圖做設定
    
    
    

1. 安裝json-server本體

• 開啟 指令視窗 並輸入npm install -g json-server
  

2. 建立 db.json檔案

• 新增 db.json檔案
  db.json 範本

  ​​​​    {
  ​​​​        "users": [
  ​​​​            {
  ​​​​                "id": 1,
  ​​​​                "name": "Stark",
  ​​​​                "age": "33"
  ​​​​            },
  ​​​​            {
  ​​​​                "id": 2,
  ​​​​                "name": "Happy",
  ​​​​                "age": "35"
  ​​​​            },
  ​​​​            {
  ​​​​                "id": 3,
  ​​​​                "name": "Pepper",
  ​​​​                "age": "28"
  ​​​​            }
  ​​​​        ],
  ​​​​        "toDo": [
  ​​​​            {
  ​​​​                "id": 1,
  ​​​​                "content": "把冰箱發霉的檸檬拿去丟",
  ​​​​                "isDone": true
  ​​​​            },
  ​​​​            {
  ​​​​                "id": 2,
  ​​​​                "content": "打電話叫媽媽匯款給我",
  ​​​​                "isDone": false
  ​​​​            },
  ​​​​            {
  ​​​​                "id": 3,
  ​​​​                "content": "整理電腦資料夾",
  ​​​​                "isDone": true
  ​​​​            },
  ​​​​            {
  ​​​​                "id": 4,
  ​​​​                "content": "繳電費水費瓦斯費",
  ​​​​                "isDone": false
  ​​​​            },
  ​​​​            {
  ​​​​                "id": 5,
  ​​​​                "content": "推廣六角",
  ​​​​                "isDone": true
  ​​​​            }
  ​​​​        ]
  ​​​​    }
  

3. 啟動 json-server

• json-server --watch db.json
• 查看預設網址 http://localhost:3000/
• 想變更預設port ?
  json-server --watch db.json --port 3004

三步驟，大功告成!

RESTful API 使用方式

推薦可以使用Postman做API測試

GET：取得資料

• 取得全部users資料
  http://localhost:3000/users
• 取得users id=2的資料
  http://localhost:3000/users/2
• 取得users name=Happy的資料
  http://localhost:3000/users?name=Happy
• 模糊查詢
  http://localhost:3000/users?name_like=a
  • 會出現所有name含有a的資料

DELETE : 刪除

• 刪除單筆資料 (method: DELETE)
  http://localhost:3000/users/5

POST ：新增資料

• 每筆資料一定都要有唯一的id，沒給id的話，json-server會自動補上
  id重複的話，會回傳500
• Content-Type: application/json
• Method: POST
• url: http://localhost:3000/users
• Body:

{
	"id": 4,
	"name": "Peter",
	"age": "30"
}

PUT：修改資料 (完整)

與POST方式相似，會將新資料完全取代舊資料，沒寫到的屬性會被刪除

• Content-Type: application/json
• Method: PUT
• url: http://localhost:3000/users/4

PATCH：修改資料 (局部)

與PUT方式相似，僅更新有變動的部分，其餘資料不會變

• Content-Type: application/json
• Method: PUT
• url: http://localhost:3000/users/4

參考文獻

• JSON Server 官方Github
• 六角學院文件 ← 強力推薦!! 內含影音教學