[黑科技] 使用 Laravel Livewire 來構建實時搜索功能（不使用一行 JS 代碼）

原文連接： https://learnku.com/laravel/t...

討論請前往專業的 Laravel 開發者論壇： https://learnku.com/Laravel

最終結果-徹底交互式搜索和分頁，無需Javascript

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

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

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

設置 Livewire (文檔)

composer require calebporzio/livewire

將其包含在你要搜索的全部頁面結束正文標籤以前:

@livewireAssets </body> 
</html>

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:

<input type="text" wire:model="searchTerm" />

經過設置 wire:model="searchTerm" Livewire 將自動更新 Search.php 控制器中名爲 $searchTerm 的公共變量。 如今咱們來添加一下:

我把它包含在默認的 Laravel 主頁上，可是你能夠把它添加到任何你喜歡的頁面上。 只須要在 blade 文件中添加 [@livewire](http://twitter.com/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。看起來像這樣：

如今只要單擊分頁按鈕，結果就會更新以顯示正確的頁面。當用戶搜索時，他們的結果也將被分頁，而且每次搜索時分頁都將重置以免混淆:

---

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

原文連接： https://learnku.com/laravel/t...

討論請前往專業的 Laravel 開發者論壇： https://learnku.com/Laravel