無需JS， 用 Laravel Livewire構建實時搜尋功能

Laravel 9 保姆級視訊教學，想學不會都難！進入學習

最終結果-完全互動式搜尋和分頁，無需Javascript

對於關注 Laracon 2019年的人來說，你們可能已經看到了來自Caleb Porzio被稱為Livewire.的令人驚歎的新套餐。正如他的網站上所描述的那樣：

livewire是一個針對Laravel的全棧框架，它使構建動態前端變得像編寫普通PHP一樣簡單(從字面上看)。

我兩年前開始使用Laravel，我最大的挑戰之一就是構建互動頁面。Laravel讓我很容易跳入Web開發，但我發現跳到使用Vue.js或Reaction太令人困惑，總是導致另一層複雜性。當Caleb展示他的簡單計數器時，我立即認為Livewire將是搜尋的理想選擇。我已經在下面概述瞭如何使用Livewire通過分頁互動式搜尋雄辯的記錄。

設定 Livewire (檔案)

composer require calebporzio/livewire

將其包含在你要搜尋的所有頁面結束正文標籤之前:

@livewireAssets  

Livewire 的工作原理是將前端 Livewire 元件中的資料直接連線到後端 Livewire 控制器。然後，這些控制器可以重新呈現元件，而不需要重新載入整個頁面。我們的目標是將搜尋查詢從輸入表單傳遞到後端，然後使用它來搜尋我們的 Eloquent 模型。每次搜尋將更新頁面上顯示的資料！

填充資料庫 (選做)

在此範例中使用的是全新的 Laravel 應用程式。如果你使用的是現成的應用程式，可以跳過這一步，但是為了有一些資料來搜尋，你可以用 Laravel 的預設使用者工廠類來填充使用者表。將以下程式碼新增到您的DatabaseSeeder.php檔案：

然後執行 php artisan db:seed， 你將有500個使用者可以搜尋！

建立搜尋元件

首先，讓我們建立搜尋控制器和 Livewire 檢視：

php artisan make:livewire search

這將在 App\Http\Livewire 下建立一個新的名稱為 Search.php 的「控制器」。 它還會在 Livewire views 資料夾中建立一個名為 search.blade.php的檢視檔案。

建立搜尋方塊 + 公共變數

讓我們從 search.blade.php 開始，新增一個輸入表單並繫結到 Livewire:

通過設定 wire:model="searchTerm" Livewire 將自動更新 Search.php 控制器中名為 $searchTerm 的公共變數。 現在我們來新增一下:

我把它包含在預設的 Laravel 主頁上，但是你可以把它新增到任何你喜歡的頁面上。 只需要在 blade 檔案中新增 @livewire('search') 就可以了。 這是我們現在得到的：

顯示 Eloquent 記錄

首先將所有使用者傳遞給元件，並在一個簡單的列表中顯示它們(尚未進行搜尋)。 因為我們要使它具有互動性，所以需要在 search.blade.php 檔案中完成這些操作。 只需建立另一個名為 $users 的公共變數，並設定其值為 User:: all()。

現在當頁面渲染時，它將向搜尋檢視傳遞一個名為 $users 的變數。 我們可以像平常一樣使用 Blade，迴圈遍歷所有使用者:

現在我們看到所有的使用者:

搜尋 Eloquent

為了得到我們想要的結果，我們希望根據使用者搜尋的內容過濾列表資料。 與直接將 User::all() 返回到頁面不同，我們將使用 SQL 的內建 ilike 子句來搜尋資料庫以匹配記錄。 因為有些使用者可能只搜尋姓名或中間名，所以我們可以在搜尋關鍵詞周圍使用 % 號，表示關鍵詞兩邊的任意數量的字元。 所有這些實現加起來是這樣的:

就是這樣！ 開啟網頁，我們現在可以立即搜尋所有的結果。 不用寫一行 Javascript 程式碼！

使用 Livewire 的全互動式搜尋元件

如何分頁？

我們的一些使用者有數百頁的內容，我們需要一個簡單的方法來互動式搜尋和對所有的結果分頁。 下面的步驟將使用Livewire 配合 Laravel 的預設分頁。

分頁 + 顯示

首先，新增預設分頁連結 {{$users->onEachSide(1)->links()}}到search.blade.php來顯示分頁。 為了使用 Eloquent 分頁, 則需要更新查詢語句為： $this->users = User::where('name', 'ilike', $searchTerm)->paginate(10);

分頁連結現在出來了，並且實際有效！ 但是，您可能會注意到，每次點選都會重新載入整個頁面，當嘗試搜尋和切換頁面時，它會丟擲一個錯誤。 我們需要更新預設的分頁檢視來使用 Livewire，讓它不會重新載入整個頁面。

建立自定義分頁

與其構建一個全新的分頁系統，不如使用預設的分頁系統並使用新的 Livewire 功能對其進行修改。可以在 resources/views/vendor/pagination/找到預設的 Bootstrap 分頁 作為 bootstrap-4.blade.php。我們可以看到每個按鈕和頁碼都是設定為上一個或下一個URL的連結：

讓我們複製整個檔案並建立一個名為 livewire-pagination.blade.php 的新自定義分頁檢視。然後刪除整個檔案中的所有 href=」url」 連結(應該有三個)，並將它們設定成 href=」#」，以使頁面不會重新載入。最後給每個連結新增一個 Livewire click 的方法

wire:click="setPage('{{$paginator->previousPageURL()}}')"

更新後的分頁看起來像這樣:

我們還需要使用新方法 setPage(url) 更新我們的控制器:

要顯示此自定義的分頁，我們可以通過向 links 函數傳遞路徑直接在 blade 檢視模板中連結到它:

{{$users->onEachSide(1)->links('livewire-pagination')}}

在 Controller 中更新分頁

現在，我們需要一種方法來基於所選的當前頁面來更新分頁結果和元件。Laravel 的 Paginator 自帶了 currentPageResolver() 方法使我們可以預先設定要展示的頁面。我們可以將當前頁碼傳遞給此方法，它將自動更新結果。

為了獲得選定的頁碼，我們需要將傳遞到 setPage($url)方法中的 url 分開。我們還必須宣告一個公共的 $currentPage。看起來像這樣：

現在只要單擊分頁按鈕，結果就會更新以顯示正確的頁面。當使用者搜尋時，他們的結果也將被分頁，並且每次搜尋時分頁都將重置以避免混淆:

Laravel 9 保姆級視訊教學，想學不會都難！進入學習

希望這會對你有所幫助！我計劃繼續進行此工作，因此請讓我知道任何想法/問題。您可以在Twitter上關注我@branickweix

原文地址：https://medium.com/@branick/search-with-laravel-livewire-cb6dcd4ad541

譯文地址：https://learnku.com/laravel/t/40775

【相關推薦：】

以上就是無需JS， 用 Laravel Livewire構建實時搜尋功能的詳細內容，更多請關注TW511.COM其它相關文章！