Vic Lin
20
位追蹤者
追蹤
小弟是一位軟體工程師,樂於幫助他人,撰寫技術文章除了幫助自己複習以外,也希望可以幫助到他人,若文章內容有誤,還請大大不吝給予指教!
Vic Lin的沙龍
20
會員
161
內容數
加入
前往沙龍
加入
前往沙龍
發佈內容
我的成就
由新到舊
Vue 3.2 defineEmits 用法
父元件 傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m
2023-08-13
7
ASRock AMD DeskMini X300 超高CP自組筆記
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
2023-03-25
3
Nuxt3 使用 useFetch 取得數據
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023-03-10
3
Vue 3.2 defineProps 用法
父元件 傳遞變數時須加上冒號 子元件 接收props用法如下 本筆記參考: 1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2 2. https://juejin.cn/post/7
2023-03-10
0
Nuxt 3 動態路由
比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數,要用:to 本筆記參考: https://it
2023-03-10
0
SHARP印表機 - 設定掃描至NAS
位址登錄->網路資料夾中,輸入NAS資料夾路徑、NAS用戶帳密: 比如這邊我是NAS中有個scanner的user,專門用來掃描文件用的。
2023-03-08
3
SHARP印表機 - 使用Google SMTP寄掃描檔
首先要先設定兩步驟驗證: 2. 設定完就會出現應用程式密碼: 選取應用程式: 郵件 因為是印表機要用的,所以選取裝置選其他(自訂名稱): 按下產生後,即會產生一組應用程式密碼: 接著到印表機設定後台,找到SMTP設定: 主要伺服器: smtp.gmail.com 連接埠號碼: 465 傳送方位址/
2023-03-07
2
Gmail 匯出郵件 - 使用MBOX Viewer瀏覽
管理Google帳戶 -> 資料和隱私權: 下載您的資料 會進到Google匯出頁面: 選取Gmail按下一步: 選擇轉移目標: 我這邊選傳送到email->建立匯出作業 等完成後,會收到email: 收到的mail: 下載後的zip解壓縮,裡面有個.mbox檔案,這種檔案格式可用Mbox View
2023-03-07
0
Windows 11 停用自動更新
1. 開啟本機群組原則編輯器: 搜尋gpedit.msc 2. 路徑: 電腦設定 > 系統管理範本 > Windows 元件 > Windows Update > 管理使用者體驗 > 設定自動更新 3. 設定為已停用: 套用->確定 這樣就完成了,之後想更新系統,就要到「設定」的「Windows U
2023-03-07
0
Nuxt 3 安裝與入門
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
2023-02-17
3
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
2023-02-17
1
Laravel 使用 Google Calendar API
1. 使用composer安裝 2. publish the configuration 在config資料夾中會多出一個google-calendar.php 3. 取得Google API credentials (1) 到Google Cloud Platform頁面,選擇專案。 後記:
2022-08-02
5
Laravel collection map
Example code: $data['items']: $items: 本筆記參考: 1. https://docfunc.com/posts/36/foreacharraymap-%E8%88%87-laravel-collection-post
2022-08-01
2
cURL error 60: SSL certificate problem
Error: wamp解法: 1. 下載cacert.pem 到這邊下載: https://curl.se/docs/caextract.html 2. 將檔案放到ssl folder 路徑類似這樣,放在自己使用的php版本下: 3. 在php.ini中加入cacert.pem的path
2022-07-29
5
Reset CSS 與 Normalize.css
每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
2022-07-05
4
Java abstract class 與 interface 的差別
abstract class = 抽象類別 interface = 介面 抽象類別與介面都無法建立物件。 1. 使用abstract關鍵字來建立抽象類別,interface關鍵字建立介面。 interface只能繼承interface,且可以繼承多個:
2022-07-04
3
SCSS入門 - 在Vue中使用SCSS
SCSS與SASS都是CSS預處理器,可以幫助開發者更方便管理CSS程式碼,而SASS寫法上不須加上「{} ;」,而是用縮排來簡化,SCSS寫法上則類似CSS,可以兼容CSS語法,SASS則無法兼容CSS語法,以下將以SCSS為主來說明。 CSS/SCSS/SASS寫法差別 安裝scss編譯器
2022-06-30
4
Vue3 Composition API
續上篇,那是Vue 2 Options API的舊寫法,這邊改成用Vue 3 Composition API的寫法: Vue2: Vue3 setup() / ref / reactive Composition API可以直接在setup()裡面定義data跟method,簡潔許多。 props
2022-06-26
3
物件導向設計原則 - SOLID
本筆記除了以文字說明SOLID設計原則以外,並以Java code實際舉例。 Single Responsibility Principle (SRP) 單一職責原則 每個人負責屬於自己的職責,不該承擔太多職責,大家各自做自己應該做的事情,且不會互相干擾。 續上程式碼,修改如下: Output:
2022-06-26
1
Vue.js 快速入門
data() method 續上篇,這邊修改一下HomeView.vue的code。 Before: After: 在頁面最下方顯示 name: Vic,data method直接回傳name變數,在<template>中可以直接用{{ name }}將變數顯示出來。 結果如下: v-model
2022-06-22
2
Vue.js 環境建置 - Vue CLI
Vue CLI與React的create-react-app是類似的工具,目的都是為了讓開發者快速建置環境,節省複雜的安裝相關環境的時間,簡單的一個建立專案指令與設定,即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。 安裝Vue CLI: 選擇檢查程式碼的時機
2022-06-21
5
Laravel MongoDB CRUD
假設資料如下: local DB裡面的test Collection SELECT SELECT可以這樣寫: 由於config/database.php中設定的default DB_CONNECTION是mysql,所以這邊特別指定使用mongodb connection。 回傳結果如下: 軟刪除
2022-06-16
2
Laravel 使用 MongoDB - 環境建置
欲在Laravel中使用MongoDB,首先要確認有安裝MongoDB PHP driver,接著再安裝Laravel MongoDB套件,才能開始使用CRUD。 1. 安裝MongoDB PHP driver (1) 到這邊下載MongoDB PHP driver (3) 檢查是否正常 後記:
2022-06-15
2
MongoDB 簡介與安裝
MongoDB 簡介 MongoDB是一種開源的NoSQL文件資料庫(Document Database),MongoDB中可以有多個Database,每個Database中可以有多個Collection,每個Collection中可以有多個Document。 Windows 安裝 MongoDB
2022-06-15
1
Laravel broadcasting 廣播機制
在Laravel中想達到websocket效果,由後端主動傳訊給前端,需使用broadcasting 將event廣播出去,由前端來接收訊息。 因此在業界常看到使用Redis + socket.io的架構,也是本篇選擇的機制。 從伺服器廣播訊息到前端接收的流程,大概會是這樣: 安裝與設定Redis
2022-06-10
1
Laravel Event / EventSubscriber 用法
比如訂單出貨的時候,觸發一個訂單出貨事件,發送出貨email通知給user。 需先註冊event與listener,在EventServiceProvider的$listen中定義: 產生event與listener: 下指令可以方便產生事件與監聽器檔案: 產生的事件與監聽器如下: 事件訂閱者
2022-06-10
0
MySQL 悲觀鎖、樂觀鎖
假設有一張表,儲存一個iPhone商品跟剩餘庫存量。 如果商品庫存剩1個,明明是A先買到,這時候就已經沒庫存了,可是系統卻告訴B恭喜你搶到了,這種情況就更糟糕了,只剩下一支iPhone,卻跟兩個人(甚至更多人)都說有買到,也就是發生所謂的超賣問題。 悲觀鎖 Pessimistic Lock
2022-05-25
1
Laravel 使用 Swoole 打造 WebSocket 服務
Swoole是一個使用C語言寫出來的PHP extension,本篇筆記了如何使用Laravel+Swoole來打造websocket應用,包含從伺服器安裝到基本範例程式,有websocket基本觀念後,再花點時間,就能把程式改成多人聊天室或私頻聊天等應用了。 Requirement 安裝PHP:
2022-05-22
1
Laravel Notifications
Laravel Notifications(通知),是用來通知使用者應用程式訊息的功能,比如付款完成發送email或簡訊通知使用者,文章被訂閱通知等等。Notifications甚至還可以把通知訊息塞進DB,可以用來顯示在後台報表頁面中。 以下以發送email通知來舉例用法。 建立通知 發送通知
2022-05-20
1
Composer install/update/require 差別
Composer是PHP的軟體包管理系統,它提供用於管理PHP軟體和依賴庫關係的標準格式。(引用自維基百科) composer install composer update 這個指令會更新composer.json中指定的套件版本,比如在require中這樣寫: 但如果是這樣: 本筆記參考:
2022-05-19
1
Laravel 使用 Queue
當伺服器需要處理一些比較花時間的任務時(如發送Email、上傳影片等等),讓user等待直到執行完畢,是個很不明智的選擇,這時候就很適合使用Queue,讓工作在背景執行,使用者就能立刻做下一件事,不必在那邊等待。 .env: QUEUE_CONNECTION預設是sync 改成database:
2022-05-10
1
Laravel Middleware
建立middleware指令: 假設建立一個Test middleware: 新增的middleware檔案會在app/Http/Middleware路徑中。 註冊Middleware: Global Middleware: 2. Route Middleware route group用法如下:
2022-05-09
2
Laravel Eloquent SoftDeletes
Laravel 提供了快速套用軟刪除的方法,直接在Model中加上use SoftDeletes即可: 接著在程式中,假設要把文章1刪除,可以直接這樣寫: 另外,如果我再執行一次上述的Article::find(1)->delete(); 會發現有error: 所以上述改成這樣:
2022-05-09
1
Laravel Database Seeders
如上篇,使用Migration來做DB版本控制,但是會發現開發過程中若是要建立測試資料,要進DB一筆一筆手動新增或執行預先寫好的insert sql,其實有點麻煩,使用Laravel提供的Seeder功能,就可以解決這個問題。 指令如下,假設建立一個user table seeder:
2022-05-06
3
Laravel Form Request Validation
在Laravel中除了用Validator來驗證資料,還可以用Form Request Validation,建立一個驗證class,在request進入controller之前,會先在這邊做驗證,若驗證失敗則不會繼續執行Controller。 建立form request: 範例程式碼:
2022-05-06
0
Laravel insert data with Relationships
資料情境: 每個產品有多種顏色,每種顏色屬於一個產品(一對多)。 程式碼: Product Model: 本筆記參考: 1. https://stackoverflow.com/questions/40468976/inserting-with-relationships-in-laravel
2022-05-06
0
Next.js 入門
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
2022-05-03
2
Laravel Migrations
Laravel Migrate可以用來做資料庫版本控制,對開發團隊來說,可以快速修改Schema,了解每個工程師做了什麼change,比如新增、修改哪些欄位、表格等等,是非常實用的功能。 在開始之前,須先建立好DB,並設定好.env中的DB連線config。 建立migrate指令:
2022-05-03
0
Laravel Eloquent: 多對多查詢
假設資料情境是「每位員工可能屬於多個部門,每個部門可能包含多位員工」,這種多對多的關係。 資料情境: 程式碼: 在Model中使用belongsToMany建立多對多關係,employee_department則為中間關聯表的table name。 列出所有員工,帶上對應的部門資料: 完整程式碼:
2022-04-25
4
Laravel Eloquent: with(), has(), whereHas()
本篇主要是要探討,with/has/whereHas/doesntHave/whereDoesntHave之間的差別,以部落格文章及留言的例子來看。 資料情境: 程式碼與結果: with是把所有文章跟留言都找出來。 has是把所有有留言的文章找出來,不包含留言。
2022-04-25
2
Laravel with() vs join()
之前在執行某些專案的時候,常看到->with()這種寫法,因此一直都很好奇到底跟->join()寫法有什麼差別,哪一種寫法效能比較好呢? 資料情境: 假設現在情境是要撈出文章跟留言,目前共有2篇文章,每篇各有4萬筆留言,也就是留言table共有8萬筆資料: 程式碼: 實驗結果: 結論:
2022-04-24
4
Laravel Unit Testing
本筆記會以簡單的例子說明,如何在Laravel中進行unit test 與 feature test。 phpunit.xml則是設定檔,可以設定哪些檔案要做測試,哪些要排除在外等等。 使用命令建立新的test case: 建立feature test: 建立unit test: 執行測試:
2022-04-19
2
Laravel 使用 Redis
對於使用Laravel來講,可以直接用composer來安裝predis,可以說是相當方便: config/database.php: redis預設有16個資料庫,這邊是各個資料庫的連接設定。 要使用predis,要記得把env file中的REDIS_CLIENT改成predis。 .env:
2022-04-17
3
在Windows環境安裝Redis
Redis主要是運行在Linux系統環境中的,官方下載區找不到windows安裝程式,不過微軟有維護windows版本的,可以到github release page下載安裝。 直接下載msi來安裝: 測試是否安裝成功: 回傳PONG表示服務正常。 查看版本資訊: 列出所有key:
2022-04-17
1
Laravel get row with the max of a column, group by some cols
如上圖資料,想要group by g_id找到最大update_datetime的row:
2022-01-25
3
MySQL add column values
MySQL中欄位數字相加可以很容易達成: 但假如其中一個欄位是null,最終的total也會是null,可能不符合預期需求。 解決方法,使用COALESCE將null轉為0:
2022-01-11
2
Facebook 第三方登入 - 刪除資料Callback
若是用第一種callback方法,response json要包含連結跟unique code,這個連結是要給user查詢刪除狀態用的,從官方提供的範例PHP程式碼可得知。 Note: 別忘了圖1的「資料刪除回呼網址」記得填你的callback url。
2021-12-29
3
Laravel Eloquent group by count return wrong value
最近發現在laravel中$query->count()回傳的數量居然是錯的,原來是因為如果有下groupBy之後再去count就會得到錯的值,可以發現明顯與count($query->get()) return的數字不一致 (明明總共有100筆,卻回傳只有2筆)。 解決方法如下:
2021-12-29
1
MySQL DATE_FORMAT
本筆記參考: 1. https://www.w3schools.com/sql/func_mysql_date_format.asp
2021-12-21
3
jsPDF中文亂碼
解決方法其實就是載入中文字型: 1. 到jsPDF的repo可以看到有fontconverter資料夾,裡面有fontconverter.html,選擇ttf字型檔,這邊以微軟正黑體為例: 2. 上一步會生成msjh-normal.js,在程式中要import(這邊是React),接著設定這個字型
2021-12-13
5
Laravel collection delete column
假設有一包資料如下: 想把某個欄位拿掉,可以用forget: $data = $data->map(function($item) { return collect($item)->forget('show_order'); }); 本筆記參考: 1. https://stackoverf
2021-12-06
3
Laravel collection after sortBy array issue
在Laravel collection sortBy之後發現原本的array格式在資料回傳後居然變成json格式,以下依序描述問題與解法: 有一包data如下: $data = collect($data); 現在sortBy show_order欄位後,結果如下: $data = collect
2021-12-06
2
Laravel collection collapse
假設有個collection data如下圖上方資料,使用->collapse()後結果即為下圖下方資料,等於是把array的values整理成一包array (combine multiple arrays into one): 本筆記參考: 1. https://stackoverflow.
2021-12-03
3
CSS 偽元素 before/after
source code: E 提供兩個範例,其實before, after就如同字面上的意思,會在前後加上內容。 範例1簡單的在前後加上文字,如下所示,需特別注意,是在div內的範例1前後加上文字。 before/after除了可以加上文字以外,還可以作為裝飾效果。如範例2,利用position調
2021-11-27
4
網頁使用微軟正黑體bug
最近遇到客戶姓名中有"碧"這個字,發現後面會多一格空白: google了一下,改成用font-face的解法,發現碧後面還是會有一點點空格: 既然這是微軟正黑體粗體的bug,就直接把粗體改掉吧,font-weight設為500,就正常了,或者是換別的字型也是一種解法。 本筆記參考: 1.
2021-11-25
5
匯出docker中的mysql 資料
把指定DB的SQL檔案匯出到local: $ docker exec {CONTAINER} /usr/bin/mysqldump -u root --password=xxx {DATABASE} > backup.sql 只匯出db結構 add -d: $ docker exec {CONTAI
2021-11-23
5
CSS grid 達成類似 table colspan, rowspan 排版
css display grid可以達到類似table span的排版效果,但還是有些差異,table的span其實是合併,css grid比較像是要佔幾格的意思。 如下程式碼為例,colspan是要往右合併的意思,因此會少一個td。 E css grid colspan sample code:
2021-11-20
4
用 CSS grid 來實作 RWD
css grid在排版非常好用,搭配media query即可達到RWD的效果,以下直接附上sample code: E 結果如下: width > 1200px: width width width 接著刻意讓第三個框框高度設為400px,畫面結果如下: 可以看到第二列的格
2021-11-20
1
Laravel collection filter count
E
2021-11-17
4
PHP 生日西元年轉民國年
E 本筆記參考: 1. https://hivenson.pixnet.net/blog/post/191702742
2021-11-17
4
Laravel collection distinct values
collection concat找出不重複的值: ->unique('id')->pluck('id'); 本筆記參考: 1. https://stackoverflow.com/questions/42447682/distinct-values-with-pluck
2021-11-09
2
PHP calculate days in year/month
取得2021年11月共有幾天: $total_days = cal_days_in_month(CAL_GREGORIAN, 11, 2021); // $total_days=30 本筆記參考: 1. https://www.codegrepper.com/code-examples/php
2021-11-09
1
PHP sort two-dimensional array by column
// $data is a two-dimensional array array_multisort(array_column($data, 'column_name'), SORT_ASC, $data); array_multisort(array_column($data, 'colum
2021-10-26
1
Laravel Eloquent: ->keyBy()
如下圖範例,在最後->get()之後加上->keyBy('id'),可以把id這個欄位變成key,在資料處理過程很好用。 本筆記參考: 1. https://stackoverflow.com/questions/26865877/laravel-eloquent-return-array-ke
2021-10-25
3
Laravel ->with() get specific columns
情境: 每個客戶有多筆聯繫紀錄,contact table有customer_id這個foreign key。 Customer Model (Customer.php): ... public function contacts() { return $this->hasMany(Conta
2021-10-18
3
Laradock storage link file 404 not found
後端儲存在storage的圖片,透過http去存取都會404,後來發現是因為用Laradock,需進到container內把public/storage整個砍掉,然後在project root path重新建立軟連結,即可解決。 1. $ docker-compose exec workspace
2021-10-08
4
MySQL GROUP_CONCAT 長度限制
Laravel GROUP_CONCAT 出來的json格式錯誤,看起來是字串被截斷了,查了一下發現原來MySQL GROUP_CONCAT select出來的字串會有最大值的限制,預設是1024個字元。 1. 程式端解法: DB::statement('SET GLOBAL group_c
2021-10-08
1
css overflow-y: auto not working in iPad
筆記一下,原本寫成overflow-y: auto,在windows chrome瀏覽器有y scroll bar,唯獨iPad沒有scroll bar,解法如下: overflow-y: scroll; -webkit-overflow-scrolling: touch; 本筆記參考: 1. h
2021-10-07
4
React Hooks onclick call a callback function
React Hook onclick call a callback function with params, and change css style example: 本筆記參考: 1. https://www.codegrepper.com/code-examples/javascrip
2021-10-04
4
PHP 四捨五入保留N位小數與補0
四捨五入到小數點後第二位,並自動補0到小數點後第二位: sprintf("%.2f", round($num,2)) 本筆記參考: 1. https://www.cnblogs.com/ryanzheng/p/12292852.html
2021-10-04
1
PHP get client real ip behind Cloudflare
Laravel 透過request()->ip拿到的ip不是client real ip,原來是因為前面有一層cloudflare,解決方法如下,改用下面這段script來取ip: E 可以包成helper function方便使用。 值得一提的是,HTTP_CF_CONNECTING_IP有可能
2021-10-04
2
MySQL DATE_SUB
MySQL 取得現在日期半年前的日期: DATE_SUB(CURRENT_DATE(), INTERVAL 6 MONTH) 本筆記參考: https://www.w3schools.com/sql/func_mysql_date_sub.asp
2021-09-28
4
Laravel COUNT with IF condition and DISTINCT
Laravel中在某些條件下COUNT且指定欄位value重複只算一次: DB::raw('COUNT(DISTINCT customer.customer_id AND IF(contact_result.invalid_flag = "Y", 1, NULL)) AS contact_inval
2021-09-28
1
Laravel where date / Carbon 相關操作
//找出日期年份是2021年的 ->whereYear('datetime', 2021) //找出日期月份是7月的 ->whereMonth('datetime', 7) //找出小於等於一個月前的 (找出小於等於2021年6月的) ->whereDate('datetime', 'subM
2021-09-28
1
Laravel group by year/month
E 本筆記參考: 1. https://stackoverflow.com/questions/40529355/laravel-eloquent-group-by-month-year
2021-09-28
1
Laravel groupBy MIN() without ignore NULL
mysql中假設groupBy('customer_id') MIN('giveup_date'), 如果欄位中有NULL, 則預設會被忽略。 以下圖為例, 則會拿到2021-09-24 16:42:20。 實務上可能會遇到不想忽略NULL的情況, 解決方法如下: ->select( DB
2021-09-28
1
Getting Started with React Hooks
Create React App 提供了快速建立React App環境的方法: 1. 安裝node.js 2. 建立React project: $ npx create-react-app my-app 3. 啟動app $ cd my-app $ npm start npm start之後即打
2021-09-28
1
JavaScript async/await
上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下: E 其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被pri
2021-09-13
3
PHP Null Coalesce Assignment Operator
在PHP 7 版本之前,?: 這種寫法稱為,「Ternary Operator」: $data = isset($data) ? $data : 'hello'; PHP 7 之後,??這種寫法稱為「Null Coalescing Operator」: $data = $data ?? 'hell
2021-08-12
2
Wamp Server Mariadb import
1. $ C:\wamp64\bin\mariadb\mariadb10.6.3\bin\mysql.exe -u username -p --default-character-set=utf8 2. 選擇db: $ use dbname; 3. 匯入資料: $ source c:\xxx.sq
2021-07-27
1
Allowed memory size of xxx bytes exhausted
小弟在寫Laravel cronjob分析資料的時候,發現select某個table的data,dd()都沒任何反應,但如果資料量比較小就可以,後來去看php_error.log才發現下面這段錯誤訊息: PHP Fatal error: Allowed memory size of 1342177
2021-07-06
2
Laravel collection group by sum, concat
Laravel的collection提供了好用的groupby功能,可以做到像在sql中的group by sum, count等等: E 若要做到類似group by concat的功能,可使用$group->pluck('col_name')。 本筆記參考: 1. https://stackov
2021-05-26
1
MySQL group_concat merge two column to json
以下以Laravel為例,一般group_concat我們可能會這樣寫: E 但其實table_a_id, table_a_name可以merge成一個json,資料整理起來比較好看,可以改成這樣的寫法: E 最後response之前可以用php的json_decode把json string轉為o
2021-05-14
1
MySQL group_concat with if condition
有時候我們會需要只group concat某些條件,就可以像這樣寫: group_concat(DISTINCT IF(user.name != 'abc' AND b.b_id != c.c_id, c.name, NULL)) as d 符合這個條件的才給值,否則給null,由於group_co
2021-05-12
1
Laravel mysql group_concat don't ignore null
Mysql的group_concat預設會自動把null的忽略,但有時候我們會希望還是能夠concat到null的,可以用以下方法把null轉成空字串: DB::raw("group_concat(coalesce(`table`.`abc_col`, '') SEPARATOR ',') as a
2021-05-06
1
Laravel SQLSTATE[42000], 1055 Expression
select sql遇到類似這個問題: SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of ORDER BY clause is not in GROUP BY clause and contains no
2021-05-06
1
Laravel updateOrInsert / updateOrCreate
實務上有可能會遇到資料若存在就更新,不存在就塞進去,Laravel提供了好用的方法: E 表示用A, B, C三個欄位當作條件,如果值存在就更新D欄位的資料,如果不存在就insert一筆新的。 本筆記參考: 1. https://www.bestinterviewquestion.com/ques
2021-04-21
1
Laravel 允許cookie跨域傳送
將 Cookie SameSite屬性設定為None Secure。 config/session.php: 'secure' => env('SESSION_SECURE_COOKIE', true), 'same_site' => 'none', 本筆記參考: 1. https://ithel
2021-04-01
2
Laravel JWT login auth with email or phone
原本如果只用手機登入,可以這樣寫: E 如果允許user透過手機或email登入,可以改成這樣: E 原理是判斷輸入的是手機或信箱,決定要用cell/password 還是 email/password來驗證是否登入成功! 本筆記參考: 1. https://stackoverflow.com/q
2021-04-01
1
Laravel 存取FB graph API
安裝Facebook PHP SDK: $ composer require facebook/graph-sdk Sample code: E 本筆記參考: 1. https://github.com/facebookarchive/php-graph-sdk
2021-03-31
3
Laravel Socialite - Facebook 第三方登入
Laravel設定 1. 安裝Socialite: 在之前的google第三方登入文章有提到,不再贅述。 2. .env新增: FB_CLIENT_ID=xxx FB_CLIENT_SECRET=xxx FB_REDIRECT=http://yourdomain/facebook/authCall
2021-03-31
1
Laravel Failed to authenticate on SMTP server
Laravel中透過SMTP寄信,出現類似這種錯誤訊息: Failed to authenticate on SMTP server with username \"
[email protected]
\" using 3 possible authenticators. Authenticator LOGI
2021-03-12
2
Laravel 設定 CORS
從瀏覽器console看到類似這個error: ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 表示遇到CORS的
2021-03-12
1
[React]製作可重用Navbar Component
接續上一篇,navbar元件其實寫的不是很好,還不能說是可真正reuse,我們把程式改成這樣,透過props傳入navbar的items,定義好navbar title, li的href/name/active等等,就可以達到navbar元件無須改code就能重用的目的! Navbar 元件中用m
2021-02-03
1
用最簡單的範例,10分鐘入門React!
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
2021-02-02
2
React Hello World
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
2021-01-24
2
React webpack 開發環境安裝
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
2021-01-24
1
Laravel select primary key return 0
在select的時候發現回傳的primary key都是0,這時可能是因為primary key為非數字,如果沒有在model定義 auto increment是false, 預設會認為是true,所以要在model中多設定這行: public $incrementing = false; 本筆
2021-01-18
2
使用 Line Notify API 對群組進行通知
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後,點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後,複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
2021-01-15
2
Laravel ORM where中加入括號
直接從程式碼來看,假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) { $query->whereNotNull
2021-01-11
3
vocus 勳章
NFT
了解
如何蒐集勳章