亚洲成色www久久网站夜月,久久毛片免费看一区二区三区,欧洲人妻丰满av无码久久不卡

本篇文章給大家介紹一下怎么不使用一行 js 代碼，只使用 laravel livewire 來構(gòu)建實(shí)時(shí)搜索功能，希望對(duì)大家有所幫助！

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

最終結(jié)果-完全交互式搜索和分頁，無需Javascript

對(duì)于關(guān)注 Laracon 2019年的人來說，你們可能已經(jīng)看到了來自Caleb Porzio被稱為Livewire.的令人驚嘆的新套餐。正如他的網(wǎng)站上所描述的那樣：

livewire是一個(gè)針對(duì)laravel的全棧框架，它使構(gòu)建動(dòng)態(tài)前端變得像編寫普通PHP一樣簡單(從字面上看)。

我兩年前開始使用Laravel，我最大的挑戰(zhàn)之一就是構(gòu)建互動(dòng)頁面。Laravel讓我很容易跳入Web開發(fā)，但我發(fā)現(xiàn)跳到使用Vue.js或Reaction太令人困惑，總是導(dǎo)致另一層復(fù)雜性。當(dāng)Caleb展示他的簡單計(jì)數(shù)器時(shí)，我立即認(rèn)為Livewire將是搜索的理想選擇。我已經(jīng)在下面概述了如何使用Livewire通過分頁交互式搜索雄辯的記錄。

設(shè)置 Livewire (Livewire.)

composer require calebporzio/livewire

將其包含在你要搜索的所有頁面結(jié)束正文標(biāo)簽之前:

@livewireAssets </body> </html>

Livewire 的工作原理是將前端 Livewire 組件中的數(shù)據(jù)直接連接到后端 Livewire 控制器。然后，這些控制器可以重新呈現(xiàn)組件，而不需要重新加載整個(gè)頁面。我們的目標(biāo)是將搜索查詢從輸入表單傳遞到后端，然后使用它來搜索我們的 Eloquent 模型。每次搜索將更新頁面上顯示的數(shù)據(jù)！

填充數(shù)據(jù)庫 (選做)

在此示例中使用的是全新的 Laravel 應(yīng)用程序。如果你使用的是現(xiàn)成的應(yīng)用程序，可以跳過這一步，但是為了有一些數(shù)據(jù)來搜索，你可以用 Laravel 的默認(rèn)用戶工廠類來填充用戶表。將以下代碼添加到您的DatabaseSeeder.php文件：

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

然后運(yùn)行 php artisan db:seed，你將有500個(gè)用戶可以搜索！

創(chuàng)建搜索組件

首先，讓我們創(chuàng)建搜索控制器和 Livewire 視圖：

php artisan make:livewire search

這將在 AppHttpLivewire 下創(chuàng)建一個(gè)新的名稱為 Search.php 的「控制器」。它還會(huì)在 Livewire views 文件夾中創(chuàng)建一個(gè)名為 ?search.blade.php的視圖文件。

創(chuàng)建搜索框 + 公共變量

讓我們從 search.blade.php 開始，添加一個(gè)輸入表單并綁定到 Livewire:

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

通過設(shè)置 wire:model=”searchTerm” Livewire 將自動(dòng)更新 Search.php 控制器中名為 $searchTerm 的公共變量。現(xiàn)在我們來添加一下:

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

我把它包含在默認(rèn)的 Laravel 主頁上，但是你可以把它添加到任何你喜歡的頁面上。只需要在 blade 文件中添加 @livewire(‘search’) 就可以了。這是我們現(xiàn)在得到的：

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

顯示 Eloquent 記錄

首先將所有用戶傳遞給組件，并在一個(gè)簡單的列表中顯示它們(尚未進(jìn)行搜索)。因?yàn)槲覀円顾哂薪换バ?，所以需要?search.blade.php 文件中完成這些操作。只需創(chuàng)建另一個(gè)名為 $users 的公共變量，并設(shè)置其值為 User:: all()。

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

現(xiàn)在當(dāng)頁面渲染時(shí)，它將向搜索視圖傳遞一個(gè)名為 $users 的變量。我們可以像平常一樣使用 Blade，循環(huán)遍歷所有用戶:

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

現(xiàn)在我們看到所有的用戶:

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

搜索 Eloquent

為了得到我們想要的結(jié)果，我們希望根據(jù)用戶搜索的內(nèi)容過濾列表數(shù)據(jù)。與直接將 User::all() 返回到頁面不同，我們將使用 SQL 的內(nèi)置 ilike 子句來搜索數(shù)據(jù)庫以匹配記錄。因?yàn)橛行┯脩艨赡苤凰阉餍彰蛑虚g名，所以我們可以在搜索關(guān)鍵詞周圍使用 % 號(hào)，表示關(guān)鍵詞兩邊的任意數(shù)量的字符。所有這些實(shí)現(xiàn)加起來是這樣的:

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

就是這樣！打開網(wǎng)頁，我們現(xiàn)在可以立即搜索所有的結(jié)果。不用寫一行 Javascript 代碼！

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

使用 Livewire 的全交互式搜索組件

如何分頁？

我們的一些用戶有數(shù)百頁的內(nèi)容，我們需要一個(gè)簡單的方法來交互式搜索和對(duì)所有的結(jié)果分頁。下面的步驟將使用Livewire 配合 Laravel 的默認(rèn)分頁。

分頁 + 顯示

首先，添加默認(rèn)分頁鏈接 {{$users->onEachSide(1)->links()}}到search.blade.php來顯示分頁。為了使用 Eloquent 分頁, 則需要更新查詢語句為： $this->users = User::where(‘name’, ‘ilike’, $searchTerm)->paginate(10);

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

分頁鏈接現(xiàn)在出來了，并且實(shí)際有效！但是，您可能會(huì)注意到，每次點(diǎn)擊都會(huì)重新加載整個(gè)頁面，當(dāng)嘗試搜索和切換頁面時(shí)，它會(huì)拋出一個(gè)錯(cuò)誤。我們需要更新默認(rèn)的分頁視圖來使用 Livewire，讓它不會(huì)重新加載整個(gè)頁面。

創(chuàng)建自定義分頁

與其構(gòu)建一個(gè)全新的分頁系統(tǒng)，不如使用默認(rèn)的分頁系統(tǒng)并使用新的 Livewire 功能對(duì)其進(jìn)行修改。可以在 resources/views/vendor/pagination/找到默認(rèn)的 Bootstrap 分頁作為 bootstrap-4.blade.php。我們可以看到每個(gè)按鈕和頁碼都是設(shè)置為上一個(gè)或下一個(gè)URL的鏈接：

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

讓我們復(fù)制整個(gè)文件并創(chuàng)建一個(gè)名為 livewire-pagination.blade.php 的新自定義分頁視圖。然后刪除整個(gè)文檔中的所有 href=”url” 鏈接(應(yīng)該有三個(gè))，并將它們?cè)O(shè)置成 href=”#”，以使頁面不會(huì)重新加載。最后給每個(gè)鏈接添加一個(gè) ?Livewire click 的方法

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

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

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

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

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能

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

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

在 Controller 中更新分頁

現(xiàn)在，我們需要一種方法來基于所選的當(dāng)前頁面來更新分頁結(jié)果和組件。Laravel 的 Paginator 自帶了 currentPageResolver() 方法使我們可以預(yù)先設(shè)置要展示的頁面。我們可以將當(dāng)前頁碼傳遞給此方法，它將自動(dòng)更新結(jié)果。

為了獲得選定的頁碼，我們需要將傳遞到 setPage($url)方法中的 url 分開。我們還必須聲明一個(gè)公共的 $currentPage?？雌饋硐襁@樣：

無需JS，用 Laravel Livewire構(gòu)建實(shí)時(shí)搜索功能