DAY13 - Laravel Livewire 前端框架: 讓撰寫程式碼更容易！ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 13

自我挑戰組

PHP框架-Laravel自學挑戰系列第 13 篇

DAY13 - Laravel Livewire 前端框架: 讓撰寫程式碼更容易！

16th鐵人賽 laravel php

阿寶

2024-09-13 22:33:03

164 瀏覽

分享至

哈囉大家好～
在實作對資料庫數據進行操作前，還是想要先完成可以從前端接收使用者input的部分開始做，
畢竟之後做小專案也是會用到
所以還是決定要先解決前端的問題XD

之前嘗試使用blade template來撰寫前端，發現會需要在原PHP檔裡寫很多原生JavaScript，需要花很多時間，長篇幅的程式碼也讓易讀性降低。
在官方文檔裡查找了一下，Laravel Livewire前端框架支援開發者可以在不需要寫大量JavaScript程式碼的狀況下，實現動態、互動式的應用程式。

以下簡單整理的Livewire的特色：（BY 官方）

以Component為架構：製作可以重複使用的component！
Livewire component = PHP(Logic) + blade(UI)
自動處理狀態更新：Livewire 自動發送 AJAX 請求給伺服器來處理邏輯，將更新的HTML返回前端。
PHP處理前後端的互動：用PHP撰寫程式碼，避免複雜繁瑣的JavaScript開發。
即時DOM更新：不需要刷新頁面，可以即時更新UI（eg.表單驗證、塞選過濾⋯⋯等）。

那Livewire具體想要解決使用blade template上什麼樣的問題呢？

提升開發效率：語法和大部分主流前端框架類似，開發者可以很快上手。
降低寫JavaScript的比例：Liveware 處理動態互動的功能，讓開發者可以專注在撰寫PHP的邏輯。
前後端邏輯整合：不需要切換前後端的開發思維，將邏輯整合。

大致了解Livewire後，來試試看手感到底好不好XD

livewire在初次啟動Laravel專案時並沒有自動安裝，所以必須另外利用composer安裝套件：

composer require livewire/livewire

接下來就來實際創建一個component試試～
一樣用artisan命令列來創建component-navbar

php artisan make:livewire navbar

執行完成後就可以看到App/livewire目錄裡面有剛剛創建的navbar component(Navbar.php)
初始的程式碼內容如下：

<?php
namespace App\Livewire;

use Livewire\Component;

class Navbar extends Component
{
    public function render()
    {
        return view('livewire.navbar');
    }
}

除了這個檔案之外，也會在resources/views/livewire目錄底下找到對應component顯示的畫面：
(navbar.blade.php)

<div>
    {{-- Close your eyes. Count to one. That is how long forever feels. --}}
</div>

(官方的語錄也太浪漫了）

接著在navbar.blade.php中撰寫簡單的navbar:

<div>
    <h1>{{ $title }}</h1>
    <p>姓名: {{ $name }}</p>
    <ul>
        <li><a href="#hello">哈囉</a></li>
        <li><a href="#hi">你好</a></li>
        <li><a href="#night">晚安</a></li>
        <li><a href="#bye">掰掰</a></li>
    </ul>
</div>

這裡用到了兩個參數$title和$name，在這裡用到的變數必須要在Navbar.php裡面定義好：

<?php

namespace App\Livewire;

use Livewire\Component;

class Navbar extends Component
{
    public $title = 'IT 鐵人賽 - GOGO';
    public $name = '';
    public function render()
    {
        return view('livewire.navbar');
    }
}

這裡比較特別的是，我想要讓$name這個變數的值從外面傳進來，所以我把這個component放到另一個blade template中：（main.blade.php)

<!DOCTYPE HTML>
<html>
    <head></head>
    <body>
        <livewire:Navbar name="阿寶"/> #插入component，傳入name參數
        <h1>我是內容～</h1>
    </body>
</html>

在插入component的時候，要用<livewire:Component名稱 />這樣的形式撰寫！
個人認為livewire的語法和概念都非常像其他前端框架，所以寫起來也比較順手～
畫面上就會看到兩個不同blade拼在一起的畫面：