Mock

前言 現代網站開發流行前後端分離的開發模式，前端通常使用 JavaScript 框架如 ReactJS, VueJS 或 AngularJS 來實作 UI 的呈現與渲染，而後端主要使用 RestFul 或 GraphQL 等方式來提供 API 給前端串接。 但專案開發需求時程通常都是又急又需要快速完成，前端工程師如果要等到後端把 API 完成後再來實作就可能會耽誤到 UI 的開發，所以常見的做法會是前後端討論完 API 的規格後 (包含輸出的資料格式與範例)，前端這邊會使用 Mock Data 來模擬後端 API 的輸出，然後來整合前端的程式。 各個軟體框架或是第三方套件 (如: Mock.js) 都有提供 Mock Data 的實作方式，然而在實務上這也衍生了 Mock Data 管理的問題，例如在執行原始碼版控時可能將 Mock 資料也推到公用版控主機，或是 Bundle 輸出 js 檔時，都可能把 Mock 資料也包進產出的 js 檔案中，如果 Mock 資料有包含機敏資料，就有外洩的可能。 所以本文介紹使用 Chrome 瀏覽器的開發者工具來進行 API Mock，除了讓 Mock 資料與專案原始碼脫鉤 (decouple)，也可以避免原本的前端專案資料夾過於雜亂，各個流程的 Mock 資料也可以另外進行版控，或是拿來用在 e2e 測試程式中，感覺起來是相對優雅而乾淨的做法。 第一步: 使用 The Dog API 建立一個範例專案 The Dog API 是由 That API Company 這間專門從事 API 開發的國際性公司所開發的 API，主要是提供給新手工程師練習串接 API 使用，我們會使用 The Dog API 來建立一個範例的前端程式。...