数字化技能提升教程，数字化时代生存宝典

首页 / 开发 / 后端开发 / Laravel教程

Laravel实时搜索框

浏览：87
Laravel
Laravel
类型：后端开发

Laravel是一款基于PHP的开源Web开发框架，由TaylorOtwell创建并于2011年发布。提供了一套简洁、富有表现力的语法，能够通过编写较少的代码来实现复杂的任务。本套Laravel教程内容详尽，涵盖从Laravel的基本概念介绍、环境安装、配置设置到深入应用开发的各个方面。无论是新手入门还是进阶提升，都能在本教程中找到相应的指导和灵感。

百科词条 访问网站

本教程将基于AJAX为Laravel构建一个实时搜索功能，当用户在搜索框中输入内容时，结果会立即显示，而无需刷新页面。步骤涉及连接数据库、模型、控制器、视图和路由等，即使是Laravel、PHP或数据库新手也能轻松操作。

本教程使用的是Windows系统、XAMPP（用于 Apache + MySQL）和用于运行Laravel命令的CMD（命令提示符）。这些选择仅用于演示。使用Windows + XAMPP是因为这是一个常见的配置，许多人都可以在自己的机器上尝试。如果使用的是Mac或Linux 系统，路径和命令可能略有不同，但步骤相同。

以下是本教程中将要构建的内容：

  • 一个包含一些演示数据的 MySQL 产品表；
  • 一个带有搜索框的 Laravel 页面；
  • 当用户在搜索框中输入内容时，匹配的产品会立即显示在下方，无需重新加载页面。

一、前提条件

在开始编写代码之前，请确保已安装以下软件：

1、PHP 8.x 或更高版本 – Laravel 需要 PHP 才能运行。

2、Composer – Laravel 的依赖管理器。

3、Laravel 12.x – 本教程将使用的版本。

4、MySQL（通过 XAMPP）– 用于存储产品数据。

5、代码编辑器 – VS Code 或喜欢的任何编辑器。

6、CMD（或 PowerShell）– 将在此处运行所有 Laravel 命令。

二、设置数据库

首先，准备用于存储产品数据的数据库：

打开 XAMPP 并启动 Apache 和 MySQL。

启动 Apache 和 MySQL

打开 phpMyAdmin（http://localhost/phpmyadmin）。

打开 phpMyAdmin

创建一个名为 live_search_db 的新数据库

新数据库

对于现代 Web 开发，最佳实践是使用 UTF-8 排序规则，例如 utf8mb4_general_ci。

点击“创建”按钮。

这将创建一个数据库来存储我们的产品记录。可以随意命名，只需记住这个名称，因为我们稍后会在 .env 文件中使用它。

创建一个数据库

三、创建新的Laravel项目

现在将使用 Composer 创建一个新的 Laravel 项目：

打开 CMD 并导航到 XAMPP 项目文件夹。例如：

cd C:\xampp\htdocs

创建新的Laravel项目

运行以下命令创建一个名为 live-search 的新 Laravel 项目：

composer create-project laravel/laravel live-search

新 Laravel 项目

完成后，导航到项目文件夹：

cd live-search

导航到项目文件夹

此时已经拥有一个空白的 Laravel 项目。可以将其视为画布——现在我们将在此基础上构建实时搜索功能。

四、配置数据库

现在数据库已准备就绪，需要将 Laravel 项目连接到它。通过编辑位于项目根文件夹中的 .env 文件来完成此操作。该文件包含应用程序的所有必要配置设置。

打开 .env 文件并查找数据库部分。我的 .env 文件位于以下路径：C:\xampp\htdocs\live-search。

配置数据库

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=live_search_db

DB_USERNAME=root

DB_PASSWORD=

需要使用以下信息更新它：

  • DB_CONNECTION=mysql — 这告诉 Laravel 我们正在使用 MySQL 数据库；
  • DB_HOST=127.0.0.1 — 这是 XAMPP 服务器运行的本地地址；
  • DB_PORT=3306 — 这是 MySQL 的默认端口；
  • DB_DATABASE=live_search_db — 这是我们刚刚创建的数据库的名称；
  • DB_USERNAME=root — 这是 XAMPP 中 MySQL 的默认用户名；
  • DB_PASSWORD= — root 用户的默认密码为空，因此我们将其留空。

配置数据库

保存这些更改后，Laravel 将准确地知道在哪里存储和获取所有产品数据。下一步是在新数据库中创建实际的 products 表。

现在 Laravel 知道在哪里存储和获取我们的产品。下一步是创建 products 表。

五、创建Products表

现在项目已连接到数据库，需要创建一个表来存储我们的产品。在 Laravel 中使用迁移来完成此操作，它就像数据库模式的版本控制系统。

首先，返回到命令提示符或终端并运行以下命令。这将为我们的产品表生成一个新的迁移文件。

php artisan make:migration create_products_table

创建Products表

接下来，打开位于 database/migrations/ 文件夹中的新文件。

创建Products表

将 up()函数替换为：

public function up()

{
Schema::create('products', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->string('description');

$table->decimal('price', 10, 2);

$table->timestamps();

});

}

创建Products表

将替换此函数中的现有代码，以指定产品所需的列：

  • $table->id()：将为我们的表创建一个自增主键，用于唯一标识每个产品；
  • $table->string('title')：将添加一个用于产品标题的列；
  • $table->string('description')：将添加一个用于产品描述的列；
  • $table->decimal('price', 10, 2)：创建一个列来存储价格，并精确到小数位数；
  • $table->timestamps()：将添加两个列：created_at 和 updated_at，Laravel 会自动管理它们。

替换 up() 函数中的代码后，保存文件。现在我们可以运行迁移，将这些更改应用到数据库并创建表。

php artisan migrate

创建Products表

运行此命令后，Laravel 将执行 up() 函数中的代码，并在 live_search_db 数据库中创建 products 表。

可以通过检查 phpMyAdmin 来确认，将在其中看到包含我们刚刚定义的所有列的新表。

创建Products表

六、使用虚拟数据填充表

现在我们的表已经准备就绪，我们需要向其中添加一些产品，以便进行搜索。在 Laravel 中，最好的方法是使用 Seeder 文件。Seeder 文件可以让你轻松地使用虚拟或测试数据填充数据库。

首先，让我们通过在终端中运行以下命令来创建一个新的 Seeder 文件：

php artisan make:seeder ProductSeeder

使用虚拟数据填充表

这将在 database/seeders/ProductSeeder.php 创建一个新文件。打开此文件，并将现有的 run() 函数替换为以下代码。此代码会将五种不同的产品（例如 T 恤、牛仔裤和笔记本电脑）插入到我们的新表中。

use Illuminate\Database\Seeder; use Illuminate\Support\Facades\DB; class ProductSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { DB::table('products')->insert([ [ 'title' => 'T-shirt', 'description' => 'A comfortable cotton t-shirt.', 'price' => 15.00, ], [ 'title' => 'Jeans', 'description' => 'Classic blue denim jeans.', 'price' => 45.50, ], [ 'title' => 'Laptop', 'description' => 'Powerful laptop for all your needs.', 'price' => 1200.00, ], [ 'title' => 'Keyboard', 'description' => 'Mechanical keyboard with RGB lighting.', 'price' => 75.25, ], [ 'title' => 'Mouse', 'description' => 'Ergonomic wireless mouse.', 'price' => 30.00, ] ]); } }

保存文件后，需要告诉 Laravel 运行这个数据填充器。打开主 DatabaseSeeder.php 文件（也在 database/seeders 文件夹中），并在 run() 函数中添加以下代码：

$this->call(ProductSeeder::class);

使用虚拟数据填充表

最后，返回终端并运行主数据填充命令。这将执行我们的 ProductSeeder 并将虚拟数据填充到 products 表中。

php artisan db:seed

使用虚拟数据填充表

现在可以在 phpMyAdmin 中查看 products 表，了解所有新条目。

使用虚拟数据填充表

七、创建控制器

现在我们的数据库已经有一些虚拟数据，我们需要创建一个控制器来管理搜索页面的逻辑。可以将控制器视为应用程序的“中间人”。它接收来自网站的请求，确定如何处理，并返回响应。

在本例中，我们希望控制器处理两件事：显示搜索页面和处理搜索查询。我们将在控制器中设置两个独立的函数来管理这些任务。

要创建控制器，只需在终端中运行以下命令：

php artisan make:controller SearchController

创建控制器

这将在 app/Http/Controllers/SearchController.php 目录下自动创建一个新文件。现在，打开该文件并将其内容替换为以下代码。

代码包含两个主要部分：

  • index()：此函数很简单。它的唯一作用是向用户显示搜索页面；
  • search()：此函数处理实时搜索请求。它接收用户输入的内容，在数据库中搜索匹配的产品，然后将结果返回到页面。它还包含输入验证，以确保安全性。

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Product; class SearchController extends Controller { public function index() { // This will show the search page return view('search.search'); } public function search(Request $request) { $request->validate([ 'search' => 'nullable|string|max:255' ]); if($request->ajax()) { $products = Product::where('title', 'like', '%' . $request->search . '%')->get(); $output = ''; if($products->count() > 0) { foreach($products as $product) { $output .= '<tr>'. '<td>'.$product->id.'</td>'. '<td>'.$product->title.'</td>'. '<td>'.$product->description.'</td>'. '<td>'.$product->price.'</td>'. '</tr>'; } } else { $output .= '<tr><td colspan="4">No results found</td></tr>'; } return response($output); } } }

八、创建视图

现在控制器已经准备就绪，是时候构建用户界面了。这是用户实际看到并与之交互的内容。在 Laravel 中，前端是使用视图构建的。

首先，在 resources/views/ 目录下创建一个名为 search 的新文件夹。然后，我
在新创建的文件夹内，创建一个名为 search.blade.php 的文件。

接下来，将以下代码添加到新的 search.blade.php 文件中。

<!DOCTYPE html> <html> <head> <meta name="_token" content="{{ csrf_token() }}"> <title>Live Search</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div class="container mt-5"> <h3>Products Info</h3> <input type="text" class="form-control" id="search" placeholder="Search products..."> <table class="table table-bordered table-hover mt-3"> <thead> <tr> <th>ID</th> <th>Product Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody></tbody> </table> </div> <script> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') } }); $('#search').on('keyup', function(){ let query = $(this).val(); $.ajax({ type: 'GET', url: '{{ url("search") }}', data: {search: query}, success: function(data){ $('tbody').html(data); } }); }); </script> </body> </html>

这段代码包含了我们搜索页面的 HTML 结构以及一些用于处理实时搜索功能的 JavaScript 代码。

以下是代码功能的简要概述：

  • HTML 代码创建了一个简单的页面，包含搜索栏和用于显示搜索结果的表格；
  • meta name="_token" 对于安全性至关重要。它有助于保护应用程序免受跨站请求伪造 (CSRF) 攻击；
  • JavaScript 代码使用 jQuery 监听用户在搜索栏中输入的内容。每次按下按键时，它都会向 SearchController 发送一个 AJAX 请求，然后 SearchController 返回匹配的产品。

九、设置路由

这是我们设置的最后一步。我们需要创建路由来告诉 Laravel 如何将 URL 连接到我们新的 SearchController。路由就像应用程序的地图，引导用户浏览器的请求到达正确的控制器函数。

打开 routes/web.php 文件并添加以下代码：

use App\Http\Controllers\SearchController;

Route::get('/', [SearchController::class, 'index']);

Route::get('/search', [SearchController::class, 'search']);

设置路由

这两行代码的作用如下：

  • Route::get('/', …): 这会将应用程序的主页 (/) 连接到 SearchController 中的 index() 函数。这样，​​当用户访问主 URL 时，他们就会看到刚刚创建的搜索页面；
  • Route::get('/search', …): 此路由用于实时搜索功能。它将 /search URL 连接到控制器中的 search() 函数。搜索页面上的 JavaScript 会将所有请求发送到此路由。

十、测试实时搜索

要查看实时搜索的实际效果，需要启动 Laravel 开发服务器。打开终端并运行以下命令：

php artisan serve

接下来，打开浏览器并访问 http://127.0.0.1:8000/。应该会看到创建的搜索页面。

现在，只需在搜索栏中输入产品名称，例如“笔记本电脑”或“T恤”。输入时，搜索结果会立即显示在搜索框下方，这得益于我们构建的实时搜索功能。

测试实时搜索

到目前为止就已经成功在 Laravel 中构建了实时搜索功能。现在可以探索更多高级功能，例如搜索多列或为搜索结果添加更多样式。

广告合作

广告合作

QQ群号：4114653

QQ群号：4114653

温馨提示：

  1. 本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。邮箱：2942802716#qq.com（#改为@）。
  2. 本站原创内容未经允许不得转裁，转载请注明出处“站长百科”和原文地址。
Laravel
上一篇Laravel Blade模板