Joeの小屋

Laravel google api 反向地址查找註冊以及啟用 Geocoding API先到 GCP 註冊，前三個月免費，然後申請 api 創建金鑰點選 API 和服務->點選憑證->建立憑證->API 金鑰這樣子就建立成功囉 點選限制金鑰，可以將它選擇只用來使用 Geocoding API 啟用服務到Geocoding API點擊啟用 撰寫程式碼env修改.env檔案，加上以下程式碼GOOGLE_API=YOUR_API_KEY 利用經緯度取得地址Geocoding API有以下參數可選 language — 返回結果的語言 location_type — 一種或多種位置類型的過濾器 result_type — 一種或多種地址類型的過濾器 必填參數為 latlng — 填入 經度,緯度 中間不能有空格 key — 你的 google api key 以下範例result_type選用street_address表示返回準確的街道地址。 接下來我們使用 Guzzle HTTP client對GOOGLE API發出請求，而Illuminate\Http\C ...

JS 箭頭函式筆記箭頭函式比普通函式還要簡短，但是她沒有自己的this、arguments、super、new.target等語法，也不能被用做建構式(constructor) MDN 範例基本語法(參數1, 參數2, …, 參數N) => { 陳述式; }(參數1, 參數2, …, 參數N) => 表示式;// 等相同(參數1, 參數2, …, 參數N) => { return 表示式; }// 只有一個參數時,括號才能不加:(單一參數) => { 陳述式; }單一參數 => { 陳述式; }//若無參數，就一定要加括號:() => { statements } MDN 範例進階語法// 用大括號將內容括起來，返回一個物件字面值表示法：params => ({foo: bar})// 支援其餘參數與預設參數(param1, param2, ...rest) => { statements }(par ...

Laravel view composer在某些情況下須傳遞參數底層樣板，例如想要將網頁瀏覽人數放在layouts.app，就需要使用view composer 可以使用 class 的方式傳入，或是閉包 創建 Providers可以在App\View\Composers創建一個ProfileComposer檔案 <?phpnamespace App\View\Composers;class ProfileComposer{ public function compose($view) { $view->with('viewCount', 100); }} 然後創建一個Providers檔案，利用class或是閉包方式傳入，View::composer第一個參數為blade位置名稱 指令: php artisan make:provider ViewServiceProvider <?phpnamespace App\Providers;use App\View\Compose ...

JS let const 筆記let let 無法再次宣告 同一函數或塊範圍內重新聲明同一變量會引發SyntaxError let num = 1;let num = 2; // SyntaxError 但使用var是可以重新宣告的 let num = 1;var num = 2; 限制作用域 let不會在全域物件中建立，var則是在全域中建立(window) var x = "global";let y = "global";console.log(this.x); // "global"console.log(this.y); // undefined 利用迴圈查看 可以看到如果使用 let 宣告，並不會複寫，因為每一個迴圈等同於一個執行環境，程式碼執行之後 JavaScript 會將變數指向到該記憶體位置，因此就不會釋放掉，等到呼叫時就可以找到相關記憶體位置 for (let i = 0; i <= 10; i++) { setTimeout(function () { conso ...

JS 屬性特徵屬性特徵是甚麼我們可以使用Object.defineProperty調整屬性特徵，但defineProperty不能對子屬性造成限制，屬於淺層保護 可以調整特徵為: 值 可否寫入 可否被刪除 可否被列舉 此種用法比較常在大型專案使用到，例如Vue 列舉以下範例說明，可調整物件屬性的特徵，如果writable為false，對此屬性進行賦值，將會失敗，會有靜默的錯誤，可以在嚴格模式下查看，如想一次定義大量屬性特徵，可以使用defineProperties var example = { a: 1, b: 2, c: 3,};// 可設定物件屬性特徵Object.defineProperty(example, "a", { value: 4, // 設值 writable: false, // 可否寫入 configurable: true, // 可否被刪除 enumerable: true, // 可否被列舉});// 賦值example.a = 10;// 刪除delete example.a; ...

JS 原型鍊(Prototype Chain)物件擁有自己的屬性，他可以繼承原型，而原型也可以繼承其他原型，原先的物件可以使用.取用屬性，而如果在原本物件找不到此屬性，他就會向上查找直到找到屬性或是null(找到 null 就會報錯)，而如果有從一個原型新增出兩個實體，他們會共用同一個原型的方法 特性 一樣具有物件特性 向上查找 原型可共用發方法及屬性 原型在哪裡以下寫法為非正規寫法 以下範例可以看到陣列的原型，也可以為他的原型加上屬性，因為屬性是共用的，假如你新增其他陣列也可以使用getLast()方法。 建構式自定義原型利用函式建構物件，使用Prototype製作原型功能，在過去無規範如何製作原型功能，所以大多採用__proto__製作，後來ECMAScript 規範要使用[[Prototype]]製作原型功能，但之前開發者大多使用__proto__原型所以瀏覽器還保留此方法，所以如果現在看到[[Prototype]]就是瀏覽器還沒更新前的__proto__是往上追朔的原型。 proto 不屬於正規 JS，他是瀏覽器的方法，會導致同層所有資料被賦予新方法 prototype ...

Laravel Vue组件分割，動態加載组件環境使用 webpack 非 Vite 發現問題在laravel上開發Vue，往往都把組件註冊在app.js上，加載時會一次載入所有組件，造成client side網頁加載時間變長，影響使用者體驗 動態引入從laravel-mix(4.0.16)起，開始支援動態引入(Dynamic Import)，動態引入就是一種code splitting，可以將單一的bundle 切分成數個塊chunk，可搭配平行載入，或在有需要時才載入，又或是對一些不常變動的 chunk 個別做快取，來達到載入效能的優化。算是一種 Lazy Loading(等用到的時候再載入)的實現 解法Vue2解法配置可以選擇設定webpack.mix.js或.babelrc檔案擇一即可 webpack.mix.js配置在webpack.mix.js加上以下這行程式碼，laravel-mix必須是4.0.16版本以上 mix.babelConfig({ plugins: ['@babel/plugin-syntax-dynamic-import'], ...

在 Laravel 中使用 Vue 實現滾動載入在工作中有做到通知功能，想說可以讓通知呈現像 FB 這樣的效果 安裝 vue-infinite-loadingvue-infinite-loading npmnpm install vue-infinite-loading -S CDN<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script> Component在組件中使用 <template> <infinite-loading></infinite-loading></template><script>import InfiniteLoading from 'vue-infinite-loading';export default { components: { InfiniteLoading,
...

Notifications API 瀏覽器通知通知 APINotifications API允許我們向用戶顯示通知。 它非常強大且易於使用。在可能的情況下，它使用與原生應用程序相同的機制，提供完全原生的外觀和感覺。 我們可以將 Notifications API 分成兩個核心區域（這些是非技術性的，也不屬於規範的一部分）。調用 API (Invocation API) 控制如何使您的通知出現，包括樣式和振動。我們從頁面（或從服務器，在推送通知的情況下）創建（或調用）通知。交互 API 控制用戶與通知互動時發生的情況。 用戶交互在 service worker 中處理。 請求許可在創建通知之前，我們需要獲得用戶的許可。放在主 JS 文件中 Notification.requestPermission(function (status) { console.log("Notification permission status:", status);}); 顯示通知可以使用showNotification方法（“調用 API”）顯示來自應用程序主腳 ...

Laravel 使用 wasRecentlyCreated 來檢查模型是否創建如果在當前生命週期創建模型，則模型的wasRecentlyCreated屬性將設為true，否則為false 舉以下範例，假設我已經有一個名叫Joe的用戶，則wasRecentlyCreated會返回false $user = User::firstOrCreate(['name' => 'Joe']);// 將返回false，因為此筆項目已在資料庫，並未在此生命週期創建var_dump($user->wasRecentlyCreated); 當新增新用戶Cherry時，因是在此生命週期創建，則wasRecentlyCreated會返回true $user = User::firstOrCreate(['name' => 'Cherry']);// 將返回true，因為此筆項目在此生命週期新增var_dump($user->wasRecentlyCreated);