使用Laravel Scout和Vue.js构建《搜索功能》

今天，我们将学习如何使用Laravel Scout和Vue.js构建简单的搜索功能。如果你不知道Laravel Scout是什么，这里是Laravel文档所说的：

Laravel Scout提供了一个简单的基于驱动程序的解决方案，用于将全文搜索添加到您的Eloquent型号。使用模型观察员，Scout会自动保持您的搜索索引与您的雄辩记录同步。

这是一个官方软件包，默认情况下不包括在Laravel中，但您仍然可以使用Composer进行操作，并在Laravel应用程序中使用。它与Algolia驱动程序一起运送，但您可以轻松刷卡驱动程序，文档说明：

编写自定义驱动程序很简单，您可以随意使用自己的搜索实现来扩展Scout。

在潜入代码之前，我们来看看我们将要开发的内容：

＃安装Laravel：

要安装Laravel，请打开您的终端并cd进入您的文件夹并运行以下命令：

执行该命令后，将文档根目录更改为指向公用文件夹，并确保存储和引导/缓存目录中的目录可由Web服务器写入。

安装Laravel的最后一步是生成一个用于加密用户会话和其他数据的应用程序密钥，您可以通过运行以下操作来实现：

如果您在浏览器中打开您的网站，您应该看到完全相同的页面：

＃数据库配置：

将.env.example文件重命名为.env并添加您的数据库名称，用户和密码。

我将使用SQLite进行此演示，随时使用MySQL或任何您喜欢的数据库管理系统。

如果您没有指定数据库名称，Laravel假定它位于database / database.sqlite中。

＃模型和迁移：

对于这个小型应用程序，我们只需要一个产品型号和产品表。

继续生成这两个：

当将-m标志传递给php artisan make:model命令时，将为您生成迁移。这是一个很棒的诀窍！

这些是我们目前感兴趣的领域：

PHP:

class CreateProductsTable extends Migration/*** Run the migrations.* @return void*/public function up()Schema::create('products', function (Blueprint $table) {$table->increments('id');$table->string('title');$table->string('image');$table->integer('price');$table->text('description');$table->timestamps();});/*** Reverse the migrations.* @return void*/public function down()Schema::dropIfExists('products');

保存文件并迁移表： php artisan migrate

＃虚拟数据：

使用Laravel模型工厂，我们将生成一些假数据进行测试。将这些行添加到数据库/工厂/ ModelFactory.php中：

我们的模型工厂准备好了，让我们创建一些数据。在你的命令行运行：php artisan tinker然后：factory(App\Product::class, 100)->create();。您可以创建任意数量的记录，100个听起来完美。

＃路由和控制器：

这两个路线都是我们需要的这个应用程序，所以让我们继续创建它们。

GET：/ home路线，这条路线将呈现我们的网站首页。

routes / web.php：

你可以使用控制器，但我真的不认为这条路线是必要的。

GET：api /搜索此路由负责处理搜索请求。

路线/ api.php

要创建SearchController类，只需运行：php artisan make:controller Api\SearchController。如果您还不知道，在控制器的类名中添加命名空间时，Laravel会自动为您创建文件夹，并将生成的控制器放在其中。

＃安装Laravel Scout：

安装和配置Laravel Scout是一件轻而易举的事，你可以拉使用包： composer require laravel/scout。当作曲家完成它的事情时，将ScoutServiceProvider添加到config / app.php配置文件的providers数组中：

接下来，您应该使用vendor：publish Artisan命令发布Scout 配置。此命令将发布scout.php配置文件到您的配置目录：

最后，将Laravel \ Scout \ Searchable特征添加到产品中，使其可搜索：

＃将数据导入Algolia

现在，Laravel Scout已安装并准备就绪，现在是安装Algolia驱动程序的时候了

我们现在需要做的是将我们之前生成的数据导入Algolia，如果您想要跟进本教程，您可以创建一个免费的帐户（不需要信用卡）。

完成创建您的帐户浏览后 https://www.algolia.com/api-keys，并复制您的应用程序ID和管理API密钥，并将它们放在.env文件中，如下所示：

在你的终端运行

如果您做的一切正常，您应该看到这个消息，这意味着所有的产品表数据都被复制到Algolia的服务器。

您可以通过浏览您帐户中的“ 指数”页面来验证。

＃编写搜索方法：

回到app \ Http \ Controllers \ Api \ SearchController.php中的搜索方法。

/*** Search the products table.* @param Request $request* @return mixed*/public function search(Request $request)// First we define the error message we are going to show if no keywords// existed or if no results found.$error = ['error' => 'No results found, please try with different keywords.'];// Making sure the user entered a keyword.if($request->has('q')) {// Using the Laravel Scout syntax to search the products table.$posts = Product::search($request->get('q'))->get();// If there are results return them, if none, return the error message.return $posts->count() ? $posts : $error;// Return the error message if no keywords existedreturn $error;

不要忘记导入产品型号use App\Product; 现在，浏览http://example.com/api/search?q=code应该返回数据的JSON表示形式。

＃前端设置：

在本教程中，我们不会太专注于设计，所以这里是我们将要使用的模板，将其复制/ 转载到resources / home.blade.php文件中。

HTML:

Search with Laravel Scout and Vue.js!Search!

您可以看到，我所做的一切都是设置一些样板并导入Twitter Bootstrap，您不应该将CDN用于现实生活中的应用程序，但由于这只是一个快速的演示，这很好。

＃导入Vue.js和vue-resource：

在body结束标记之前添加这些行：

再次，您应该使用依赖管理器进行这些类型的操作，但是超出了本教程的范围，所以现在很好。

下一步是在public / js /文件夹中创建app.js文件（如果已经存在，请删除它），这是现在将要保留的内容：

这意味着我们将Vue实例绑定到HTML body标签，使得我们的JavaScript只能在HTML body标签之间被识别。

＃Vue.js数据和绑定：

要捕获用户在搜索输入中写入的内容，显示结果，显示错误消息或显示搜索按钮，我们需要在el属性下添加这些行：

这将迫使我们改变我们的HTML一点，这是我们需要做的：

将v-model属性添加到搜索输入以将其绑定到我们的数据对象中的query属性

2.显示搜索...按钮执行一个动作时，与正常显示的搜索按钮一样。

Search!Searching...

3.与上面的错误信息相同，我们将在div的结束标签下添加“ well well-sm ”

为了使用Vue.js显示数据，我们使用了胡塞尔语法{{ }}，但由于Laravel使用相同的语法，所以我们需要通过@在开头添加来解析它。

＃获取和显示数据：

剩下的最重要的一步是获取数据。我们将首先将事件侦听器附加到我们的搜索按钮，我们通过将@click属性添加到它来实现：

html:

Search!

让我们创建搜索功能并将其插入到

javascript：

methods: {search: function() {// 清除错误信息。this.error = '';// 清空数组，以便我们可以填充新内容。this.products = [];// 将加载属性设置为true，这将显示“搜索…”按钮。this.loading = true;// 对API进行GET请求并将查询传递给它。this.$http.get('/api/search?q=' + this.query).then((response) => {// 如果有错误，则设置错误消息，如果不填写数组。response.body.error ? this.error = response.body.error : this.products = response.body;// 请求已完成，再次将加载更改为false。this.loading = false;//清除查询。this.query = '';});

最后，该产品的HTML应该与产品的ID一起下降。

HTML：

@{{ product.title }}@{{ product.description }}$@{{ product.price }}Add to cart

我们在那里做的是使用v-for指令创建一个循环，并显示数据就像我们在使用胡子语法之前一样。

而且，您应该在服务器上运行相同的网站：

＃结束语：

如果你准备建立自己的搜索系统。本教程的代码源可向小编获得，只需要留下你的邮箱即可。如果您有任何问题或疑问，请随时在评论部分写下评论，我乐意为您提供帮助。

来自
 https://baijiahao.baidu.com/po/feed/share?wfr=spider&for=pc&context=%7B%22sourceFrom%22%3A%22bjh%22%...