livewire – 從 JavaScript 向後端 dispatch 某個方法

2023-12-04 / JSN / 0 Comments / 0 次瀏覽

假設我有一個運費的 livewire component 

// app/Livewire/Cart/ShippingMethod.php

namespace App\Livewire\Cart;
use Livewire\Component;

class ShippingMethod extends Component
{

    public function myName()
    {
        dd("從前端向後端請求成功");
    }

    //...
}

在 livewire 的 view 透過點擊，打算呼叫後端 ShippingMethod::myName()

狀況一：直接使用 <script> 的方式

{{-- resources/views/livewire/cart/shipping-method.blade.php --}}

@script
<script>
    $(".click-me").on("click", function () {
        $wire.myName()
    });
</script>
@endscript
<button type="button" class="click-me">ClickMe</button>

這裡要注意：

  • 如果不是使用 @vite 而是直接寫在 view 裡面的 JS 務必添加 @script (參考官方)
  • 可以透過 @wire 直接呼叫 Server-side 的方法

狀況二：使用 @vite 的方式

{{-- resources/views/livewire/cart/shipping-method.blade.php --}}

@vite('resources/js/foreground/cart/shippingMethod')
<button type="button" class="click-me">ClickMe</button>

// resources/js/foreground/cart/shippingMethod.js

$(function () {
    $(".click-me").on("click", function () {
        var wire = Livewire.getByName("cart.shipping-method")[0];

        // 這裡就可以直接 dispatch Server-side Methods
        wire.myName()
    });
})
  • 這裡會透過全域的 Livewire 取得你的 component 名稱，通常我們都會用路徑分類 components 因此注意，如果我的 Livewire 『app/Livewire/Cart/ShippingMethod.php』那麼依照官方的命名，名稱會是 『cart.shipping-method』
  • 依照官方說法，全域 Livewire 一律會返回 $wire 對象。這裡用 getByName 因為會是 [Proxy(Object)] 因此記得要用陣列 0 來取回。可以參考

Laravel – Sitemap 超簡單生成方式

2023-11-30 / JSN / 0 Comments / 0 次瀏覽

為了 SEO 我們須要在 public/sitemap.xml 自動生成。可以藉由第三方套件 https://github.com/spatie/laravel-sitemap

安裝

composer require spatie/laravel-sitemap

建立 command

這裡的方法，採用爬蟲自行前往訪問你的網站，就不須要手動指定每個網址。做好 command 指令以後，只須要放到 \App\Console\Kernel::schedule 指定什麼時候定時生成就可以了

public function handle()
{

    $file = public_path("sitemap.xml");
    $url = config("app.url");

    /**
     * 這裡須要用這個方法才能有效自動爬蟲。
     * 參考我的留言：{@link https://github.com/spatie/laravel-sitemap/discussions/505#discussioncomment-7299333}
     * 注意，config("app.url") 必須要是可以被真實訪問的網址，可以借用 ngrok 來測試。
     */
    SitemapGenerator::create($url)->shouldCrawl(function (UriInterface $url) {
        // 排除掉不需要爬蟲的路徑。排除的路徑建議同步到 robots.txt 中。
        $path = $url->getPath();

        return (strpos($path, '/login-with-google') === false) and
            (strpos($path, '/login-with-line') === false);

    })->configureCrawler(function (Crawler $crawler) {

        $crawler->ignoreRobots();

    })->writeToFile($file);
}

laravel – apache – 設定 .htaccess 將網址移除 index.php 與強制轉向 http to https

2023-11-30 / JSN / 0 Comments / 1 次瀏覽

目前我在 laravel 10 已經內建 .htaccess 只需要修改為

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # 強制轉換 https
    RewriteCond %{HTTPS} off
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # 移轉 /index.php 到 /
    RewriteCond %{THE_REQUEST} \s/index\.php [NC]
    RewriteRule ^(?:[^/]+/)?index\.php(?:/(.*))?$ /$1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

上方實測可以解決

  1. http:// 轉換到 https://
  2. /index.php 轉換到 /
  3. 當有 route 名稱的時候，例如 /index.php/about 強制轉換到 /about

Docker 替換儲存的地方

2023-11-14 / JSN / 0 Comments / 4 次瀏覽

一種是以直接修改 Docker Daemon 配置文件的方式，一種是用 rsync 的方式。基於安全，我建議使用 rsync 的方式。

使用 rsync 的方式

要知道 docker 的預設位置：

docker info | grep -i "docker root dir"

我在 ubuntu 會是 /var/lib/docker 。因為我的 /var/lib/docker 安裝在硬碟 sda2 容量不夠用，我希望移動到 sda3 的 /mnt/userdata/docker。以下提供完整的步驟來將 Docker 資料目錄從 /var/lib/docker 移動到 /mnt/userdata/docker，以釋放 sda2 的容量：

停止 Docker 服務

sudo systemctl stop docker

確保 /mnt/userdata 目錄存在，如果不存在，創建它

sudo mkdir -p /mnt/userdata

複製現有的 Docker 資料目錄到新的位置（這裡假設 sda3 已經掛載到 /mnt/userdata）

sudo rsync -aP /var/lib/docker/ /mnt/userdata/docker/

移動並作為備份原始的 Docker 資料目錄（強烈建議，之後沒問題再刪除）

sudo mv /var/lib/docker /var/lib/docker_backup

建立一個新的符號連結指向新的目錄

sudo ln -s /mnt/userdata/docker /var/lib/docker

啟動 Docker 服務

sudo systemctl start docker

確認 Docker 是否正確運作

sudo docker info

確認 /var/lib/docker 已經是符號連結到 /mnt/userdata/docker

ls -lh /var/lib/docker

如果一切正確，你應該能夠看到 /var/lib/docker 指向 /mnt/userdata/docker

使用 Docker Daemon

停止 docker 服務

sudo service docker stop

移動到新目錄，例如掛載的 mnt/userdata 底下

sudo mv /var/lib/docker /mnt/userdata/docker

修改配置文件，如果不存在就新增

sudo vim /etc/docker/daemon.json

添加以下內容

{
  "data-root": "/new/path/to/docker"
}

啟動 Docker 服務

sudo service docker start

ubuntu – 硬碟查詢與硬碟擴充方式

2023-11-14 / JSN / 0 Comments / 2 次瀏覽

常用指令

// 列出硬碟的分割區表信息
sudo fdisk /dev/sda -l

// 確保你選擇了正確的硬碟 /dev/sda，然後使用 n 命令創建新的分割區，接著使用 p 確認分割區表，最後使用 w 寫入更改
sudo fdisk /dev/sda
n
p
w

// 將新建的分區 /dev/sda3 格式化為 ext4 文件系統
sudo mkfs.ext4 /dev/sda3

// 創建一個目錄 /mnt/userdata，你可以自行命名，像我開了一個 userdata，並將 /dev/sda3 分區掛載到這個目錄
sudo mkdir /mnt/userdata
sudo mount /dev/sda3 /mnt/userdata

// 永久掛載：為了確保在重新啟動後仍然掛載新分割區，需要在 /etc/fstab 檔案中新增一行。 開啟文件並新增以下一行：
sudo vim /etc/fstab

// 在文件末尾添加：
/dev/sda3   /mnt/userdata   ext4   defaults   0   2

// 重新啟動主機
sudo reboot
// 然後使用 df -h 或 sudo fdisk /dev/sda -l 確認新分區已成功掛載。

// 如果你想確認特定路徑（例如 /mnt/userdata）是否成功掛載，你可以使用這個命令。
df -h /mnt/userdata
1 2 3 ... 82