iT邦幫忙

0

JSON Server 使用

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

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

產生練習用的假資料

  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

參考資料


尚未有邦友留言

立即登入留言