JSON Server

• npm 套件
• 將 JSON 檔案 模擬成資料庫
• 可作 CRUD 的 API 模擬
• 預設支援跨網域 CORS & JSONP
• 僅作測試用，因為無權限控管功能
• JSON Server Github

安裝

• npm i -g json-server
• 建立 db.json 檔案 最外層必須是 Object

  {
    "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" }
    ],
    "comments": [
      { "id": 1, "body": "some comment", "postId": 1 }
    ],
    "profile": { "name": "typicode" }
  }

開啟 JSON Server

• json-server --watch db.json
• 前往 http://localhost:3000/posts/1 即可確認是否成功
• localhost:3000 可見有哪些資料
• 於 VSCode Console 可見 狀態碼 & 操作動作

更改 Port 號

json-server --watch db.json --port 3004

注意事項

• id 為不可變更且自動產生 (可省略不傳、亦可傳目前不存在的id)
• 若傳入相同 id 會噴錯 500
• 使用 POST,PUT,PATCH 必須使用 Content-Type: application/json 表頭，否則不會更新資料
• 在 VSCode Console 按下 s 輸入後可以迅速備份當前資料 !!!!
• 使用 POSTMAN 產生的 Code 有些 Header Chrome 會不建議修改

LiveServer Auto Reload 問題

• 與 LiveServer 一起使用會因為自動存檔而導致 請求無限發送 & 刷新頁面
• 解法 Alex宅幹嘛 1:19:50
• 原理: API Call => JSON Server 運作 => 改變 db.json
• => 檔案變了 Live Server Reload => 刷新頁面又再次執行 API Call (Loop)

  "liveServer.settings.ignoreFiles":[
    "db.json"   // 加上
  ],

Refused to set unsafe header

• Chrome 拒絕自訂的 Header
• 'Cache-Control' 則依照需求而訂

    const headers = { 
      Host: 'localhost:3000',
      'content-length': '19',
      Connection: 'keep-alive',
      'accept-encoding': 'gzip, deflate',
      'User-Agent': 'PostmanRuntime/7.15.0',
      // 正常的 request 不需要此 token
      'Postman-Token': 'b0a75f76-8b4a-4a9f-b398-9f7a1cd7bf51,9a5e1c49-89ed-4e7d-b3d3-30bf3ab8ab5b',
    }

JSON

• JSON 最後一項屬性不用加 , 號
• 只用雙引號
• 無註釋的語法

Content-Type: application/x-www-form-urlencoded

• 最常見的提交方法
• 以 key1=val1&key2=val2 的方式編碼
• jQuery 默認提交方式
• PHP中以 $_POST['title'] 取得對應值

  Content-Type: application/x-www-form-urlencoded;charset=utf-8
  url/?title=test&name=Tom

API 練習

• GET 取得
• POST 新增資料
• PUT 修改資料(完整、會將原本包含的刪除)
• PATCH 修改資料(局部、只更動修改部分)
• DELETE 刪除

POSTMAN

• Chrome 插件連結(已棄用、可能出錯)
• Window版下載 (推薦)
• JSON Viewer(Chrome上瀏覽JSON用 推薦!)
• 模擬 API 呼叫，免寫 JavaScript Code
• 還能幫你產生 JavaScript XHR 或 jQuery Code !!!!!!!

在 Send按鈕的下面有個 Code 選擇 JavaScript

產生練習用的假資料

• JSON Generator 線上產生(好用)
• Faker.js 庫
• 自行撰寫JS再複製

  const data = { users: [] }
  // Create 1000 users
  for (let i = 0; i < 1000; i++) { data.users.push({ id: i, name: `user${i}` }) }
  return data

靜態資源

• 更新靜態資源 必須重新啟動 JSON Server

• 法1: 建立 public 資料夾 (內部放資源 index.html...等)
  public/index.html => localhost:3000 即可取得
• 法2: json-server db.json --static ./資料夾名

自訂路徑

• 建立 routes.json
• 必須起動才能使用
• json-server db.json --routes routes.json

  {
    "新的路徑": "預設的路徑",
    // 用 /api/posts 取代原本的 /posts
    "/api/*": "/$1",
    // 用 /api/posts/1  取代 /posts/1
    "/:resource/:id/show": "/:resource/:id",
    // 用 posts/html 取代 /posts?category=html
    "/posts/:category": "/posts?category=:category",
    // 用 articles?id=1 取代 /posts/1
    "/articles\\?id=:id": "/posts/:id"
  }

JSON Server 進階操作

篩選資料 / 搜尋全文 (?q)

• GET 直接利用網址待入參數
• ?q=關鍵字 搜尋所有屬性的內容
• _like 相似於的判斷 (支援 RegExp)

  // url?屬性=值&另屬性=值
  GET /posts?author.name=Tim&year=1800
  // 支援 RegExp
  GET /posts?title_like=server

分頁功能

• _page 為第幾頁，預設為一頁10筆
• _limit 為一頁幾筆 (optional)

  GET /posts?_page=7
  GET /posts?_page=7&_limit=20

字串 & 數值大小於

• _gte 大於等於
• _lte 小於等於
• _ne 不等於

  GET /posts?views_gte=10&views_lte=20
  GET /posts?id_ne=1
  GET /posts?title_like=server

排序 Sort

• 參數為 asc正數(預設)、 desc倒數

• _sort
• _order

  GET /posts?_sort=views&_order=asc
  // 選擇一數性並排序
  GET /posts/1/comments?_sort=votes&_order=asc
  // 多個屬性排序
  GET /posts?_sort=user,views&_order=desc,asc

選取範圍 Slice

• _start
• _end 或 _limit

  GET /posts?_start=20&_end=30
  GET /posts/1/comments?_start=20&_end=30
  GET /posts/1/comments?_start=20&_limit=10

參考資料

• 六角
• 保哥
• 作者 Github 文檔