MUKI space*
Front-end Development,
Effective Note-Taking.
用 Geolocation API 和 Leaflet Routing Machine 實作叫車導航功能
使用 Geolocation API 和 Leaflet Routing Machine 可以實現叫車導航功能。Geolocation API 提供使用者的經緯度，而 Leaflet 是輕量級地圖工具，用於顯示地圖和標記。Leaflet Routing Machine 則專門用於路線規劃和導航，能計算兩點間的路徑，並提供距離和時間資訊。這些工具的結合可實現從位置追蹤到路線導航的完整流程，適用於叫車服務中，Geolocation API 提供即時位置，Leaflet 負責地圖呈現，Leaflet Routing Machine 負責路線計算與導航視覺化。
在實作中，使用者輸入地址後，系統會自動計算司機的路線並顯示在地圖上，預估距離和時間。模擬啟動後，司機標記沿路線移動，顯示即時距離。此功能不僅適用於叫車服務，也適合物流追蹤、旅遊規劃和遊戲開發。完整程式碼可參考範例連結，並可深入了解 Leaflet 和 Routing Machine 的其他功能。...
用 Geolocation API 取得與追蹤使用者地理位置
Geolocation API 是 HTML5 Web API 中一個強大的工具，允許網頁存取使用者的地理位置，能提供導航、在地服務等功能。此 API 注重隱私，只有在使用者授權的前提下才能取得位置資訊。Geolocation API 的核心功能包括取得使用者目前位置、持續監控位置變化及提供位置精準度資訊。瀏覽器可透過 GPS、網路位置及 IP 位址來確定使用者位置。
使用 Geolocation API 前需檢查瀏覽器支援性，並透過 `getCurrentPosition()` 方法取得當前位置。此方法接受三個參數：成功回調、錯誤回調及選項設定。為了即時追蹤位置變化，可使用 `watchPosition()` 方法，並結合地圖服務如 OpenStreetMap 來顯示位置。若使用者拒絕授權，需引導其修改瀏覽器設定以重新啟用地理位置功能。此 API 提供的功能強大且安全，但需經過使用者同意以保護隱私。...
使用 Ngrok 掛 API 代理出現 err_ngrok_6024 的解決方法
使用 Ngrok 免費版代理 API 時，因為前導頁導致出現 ERR_NGROK_6024 錯誤。這是因為 API 網址被導向前導頁，無法直接訪問 API 資料。由於 API server 是本機測試環境，無法修改 header 或使用攔截器解決。
可以透過 Chrome Extension Requestly 來解決此問題。安裝後，設定 HTTP 規則，添加 URL 規則：https://.ngrok-free.app/ 和 https://*.ngrok-free.app，並加入 ngrok-skip-browser-warning: true。這樣就能跳過 Ngrok 的介紹頁，成功取得 API 資料。此方法適用於本機開發，如需正式上線，建議使用 Ngrok 付費版。...
用 Next.js 的 Server Components 時，該用 fetch() 還是 axios 呼叫 api？
在 Next.js 的 Server Components 中，選擇使用 fetch() 或 axios 呼叫 API 是常見的問題。fetch() 是內建於瀏覽器的函式，支援 Promise 和 async/await 語法；axios 是第三方函式庫，提供額外功能如請求進度監聽和自動 JSON 轉換。Next.js 特別針對 fetch() 進行優化，包括自動記憶請求、資料快取和重新驗證功能，使 fetch() 在 Server Components 中更具優勢。
由於這些優化，建議在使用 Server Components 時考慮使用 fetch()。切換至 fetch() 時需注意將回傳資料轉成 JSON 格式、使用 URLSearchParams() 處理參數，以及檢查 response.ok 以確保沒有 HTTP 錯誤。選擇哪種方法應根據需求和偏好決定。...
Vue 父元件傳遞 API 資料給子元件
Vue 父子元件可以傳遞資料，但若在 onMounted 時渲染非即時資料，可能會報 undefined。此時可使用 watch 監聽資料變化，確保父元件資料改變時，子元件能即時處理。
使用 Vue3 + TypeScript + setup 語法糖，父元件透過 props 傳遞資料給子元件，子元件利用 watch 監聽 props.data，資料變化時執行 fetchData 操作，達到資料同步更新。...
使用 Vite 整合 axios 攔截器與 axios proxy
使用 Vite 整合 axios 攔截器與 axios proxy，首先在 Vite 設定檔中掛代理，並使用 env 環境變數設定 API 位置。接著，透過載入 loadEnv 模組來讀取環境變數，並在 Vite 中整合代理設定。這樣可以避免使用 webpack，提升開發效率。
使用 axios 攔截器來處理請求和回應，將 Vite 的代理設定整合進來，解決跨域問題。最後，封裝 api 並提供在 SFC 的範例程式碼，示範如何在 Vue 中呼叫 API。整體流程簡化了開發過程，並提升了程式碼的可維護性。...
vue 在離開頁面時，會取消所有的 api 請求，使用 axios 搭配 AbortController signal API
Vue 使用 axios 搭配 AbortController 來取消頁面離開時的 API 請求，提升換頁速度並節省資源。使用前需確認 axios 版本為 v0.22.0 以上，因為新版已改用 AbortController。Vue2 可在 beforeDestroy 中使用 abort，Vue3 則在 onBeforeUnmount 中使用。每個請求可有自己的 AbortController 實體，以便取消指定請求。升級 axios 時需注意相容性問題，建議逐步升級並尋求有經驗的工程師協助。
在 axios 攔截器中設定 AbortController 需謹慎，以免導致 API 錯誤。若 config 需同時傳 signal 和其他資料，可調整參數傳入方式。在多 API 請求情境下，為每個請求建立獨立的 AbortController 實體，確保能取消指定請求。...
Vue 3 整合 Vuex 與使用 Axios 攔截器
Vue 3 整合 Vuex 與使用 Axios 攔截器，重構設定 axios 攔截器並加入 vuex。新增 .env 環境變數檔，開發用檔名加 .local 以忽略 git。使用代理 proxy 處理跨域問題，依環境變數動態設定 API 地址。
axios 目錄結構設計為管理 api 和設定攔截器，登入後 API 帶 token。使用 provide 和 inject 呼叫 API，取代 Vue.prototype 作為全域引入。在 Vuex 使用 axios 攔截器，但 $http 和 api 需重新 import。...
jQuery Ajax API 實作以及 Template 介紹
jQuery AJAX 可簡單實現 CRUD，適合初學者反覆練習。API 是前後端溝通的接口，透過 JavaScript 和 AJAX 操作資料。CRUD 包含 Create、Read、Update、Delete，是前端必學技能。
留言板實作展示 CRUD，使用 jQuery 語法組合 HTML 字串，操作 DOM 顯示留言。更新留言需用表單操作，刪除留言較簡單。運用 $.ajax 呼叫 API，並用 jQuery 提供使用者回饋。未來將介紹 jQuery Template 簡化流程。...