[黑科技] 使用 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