使用 Laravel Livewire 进行 CRUD 操作
厌倦了使用传统方法创建枯燥乏味的界面？当我们想出一个使用 Laravel Livewire 执行 CRUD 操作的技术教程时，请把你的所有注意力都集中在这里。重要的是简单的事情；这些使用 Livewire 包创建、更新和删除记录的步骤使创建接口变得轻而易举。
Laravel Livewire 简介
在我们开始学习 Laravel Livewire CRUD 教程之前，让我们先了解一下 Livewire 的基本知识，以及它的用途和使用方式。
什么是活线？
Laravel Livewire 使您能够使用 Laravel 的便利构建界面。Livewire 是一个全栈框架，可以简化 Vue 或 React 带来的复杂性。第一个 livewire 版本于 2020 年 2 月发布。
在这篇博客中，我们将介绍使用 Laravel Livewire 的 CRUD 操作，包括在 Laravel 9 中实现 livewire 所需的所有必要步骤。在此之前，您可能需要从 Laravel 8 升级到 9。
Laravel Livewire CRUD 操作的先决条件和设置
Composer 安装在您的系统上（只需在终端中点击“composer”命令来检查 Composer 是否已正确安装）。如果您还没有 Composer，可以在此处 (https://getcomposer.org/) 获取它。
如何使用 Laravel Livewire 执行 CRUD 操作？
在这里，我们描述了如何使用最新版本的 Laravel (v 9.19) 实现 Livewire 包，并使用该包连续操作创建、更新和删除功能。
1.创建一个laravel应用
由于您熟悉使用终端创建 Laravel 应用程序，请打开终端并运行以下命令，然后在您的目录中创建一个新的 Laravel 应用程序。
作曲家创建项目 --prefer-dist laravel/laravel <应用名称_此处>
2.配置数据库详细信息
打开位于根文件夹中的 .env 文件，如果 .env 不存在，则运行以下命令从 .env-example 复制一份
cp .env .env-示例
您需要创建一个新数据库，您需要在 DB_DATABASE 中提及相同的数据库名称，并根据您的系统替换其余的 .env 变量
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=<数据库名称> DB_USERNAME=<数据库用户名> DB_PASSWORD=<数据库密码>
3.现在开始安装Livewire包
移动到您的应用程序根目录并运行以下命令来安装 livewire 包
作曲家需要 livewire/livewire
我们需要包含 livewire 样式和脚本（在将使用 Livewire 的每个页面上）。
<头> #其他样式在这里 @livewireStyles </头> <正文> # 其他身体部位在这里 @livewire('<component name here>')/您可以在应用程序的任何位置包含组件 @livewireScripts <script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/cdd21446ba36b2db414dbfc7aefa7411.js" data-minify="1" defer></script></body>
4.创建迁移和模型
我们需要为“posts”表创建迁移，我们还将为 posts 表创建一个模型。
请运行以下命令来制作迁移文件。执行以下命令后，将在 database/migrations 文件夹下创建新文件
php artisan make:migration create_posts_table
替换 create_posts_table 迁移文件中的以下代码：
<?php 使用 Illuminate\Database\Migrations\Migration； 使用 Illuminate\Database\Schema\Blueprint； 使用 Illuminate\Support\Facades\Schema； 返回新类扩展迁移 { /** * 运行迁移。 * * @return 无效 */ 公共功能向上（） { Schema::create('posts', function (Blueprint $table) { $表->id(); $table->string('title')->nullable(); $table->text('description')->nullable(); $表->时间戳（）； }); } /** * 反转迁移。 * * @return 无效 */ 公共功能向下（） { Schema::dropIfExists('帖子'); } };
运行以下命令在数据库中创建一个表，其中包含迁移中提到的列，执行以下命令后，您可以在数据库中看到新的“posts”表。
php 工匠迁移
现在，我们将使用以下命令创建一个后期模型。执行以下命令后，您可以在app/Models文件夹下查看新的模型文件：
php artisan make:model 发布
打开 app/Models/Post.php 并替换为以下代码
<?php 命名空间 App\Models； 使用 Illuminate\Database\Eloquent\Factories\HasFactory； 使用 Illuminate\Database\Eloquent\Model； 类 Post 扩展模型 { 使用 HasFactory； 受保护的 $fillable = [ '标题描述' ]; 公共 $timestamps = true; }
5.创建Post组件
现在我们将使用以下命令创建一个帖子组件
php artisan make:livewire 发布
执行上述命令后，您可以在 app/Http 和 resources/views 文件夹下看到一个新的 Livewire 文件夹。
上述命令的输出是：
组件创建 类：应用程序/Http/Livewire/Post.php 视图：资源/视图/livewire/post.blade.php
现在，打开app\Http\Livewire\Post.php并将以下代码更新到该文件中：
<?php 命名空间 App\Http\Livewire； 使用 Livewire\Component； 使用 App\Models\Post 作为帖子； 类 Post 扩展 Component { 公共 $posts, $title, $description, $postId, $updatePost = false, $addPost = false; /** * 删除动作监听器 */ 受保护的 $listeners = [ 'deletePostListner'=>'deletePost' ]; /** * 添加/编辑表单规则列表 */ 受保护的 $rules = [ '标题'=>'必填'， '描述'=>'必需' ]; /** * 重置所有输入字段 * @return 无效 */ 公共功能重置字段（）{ $this->title = ''; $this->描述=''; } /** * 渲染帖子数据 * @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View */ 公共函数渲染（） { $this->posts = Posts::select('id', 'title', 'description')->get(); 返回视图（'livewire.post'）； } /** * 打开添加帖子表单 * @return 无效 */ 公共函数 addPost() { $this->resetFields(); $this->addPost = true; $this->updatePost = false; } /** * 将用户输入的帖子数据存储在帖子表中 * @return 无效 */ 公共函数 storePost() { $this->验证(); 尝试 { 帖子::创建([ 'title' => $this->title, '描述'=> $this->描述 ]); session()->flash('成功','帖子创建成功！！'); $this->resetFields(); $this->addPost = false; } catch (\Exception $ex) { session()->flash('error','出错了！！'); } } /** * 以编辑帖子形式显示现有帖子数据 * @param 混合 $id * @return 无效 */ 公共功能 editPost($id){ 尝试 { $post = Posts::findOrFail($id); 如果（！$post）{ session()->flash('错误','未找到帖子'); } 别的 { $this->title = $post->title; $this->description = $post->description; $this->postId = $post->id; $this->updatePost = true; $this->addPost = false; } } catch (\Exception $ex) { session()->flash('error','出错了！！'); } } /** * 更新帖子数据 * @return 无效 */ 公共函数 updatePost() { $this->验证(); 尝试 { 帖子::whereId($this->postId)->更新([ 'title' => $this->title, '描述'=> $this->描述 ]); session()->flash('成功','帖子更新成功！！'); $this->resetFields(); $this->updatePost = false; } catch (\Exception $ex) { session()->flash('成功','出错了！！'); } } /** * 取消添加/编辑表单并重定向到发布列表页面 * @return 无效 */ 公共函数 cancelPost() { $this->addPost = false; $this->updatePost = false; $this->resetFields(); } /** * 从帖子表中删除特定的帖子数据 * @param 混合 $id * @return 无效 */ 公共函数 deletePost($id) { 尝试{ 帖子::查找($id)->删除(); session()->flash('success',"帖子删除成功！！"); }catch(\Exception $e){ session()->flash('error',"出错了！！"); } } }
现在，创建resources/views/home.blade.php并将以下代码更新到该文件中：
<!DOCTYPE html> <html> <头> <元字符集="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Livewire Crud</title> <link data-minify="1" href="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap。 min.css?ver=1683020080" rel="stylesheet" crossorigin="anonymous"> @livewireStyles </头> <正文> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="容器流体"> <a href="/">Livewire CRUD 博客</a> </div> </导航> <div 类="容器"> <div class="row justify-content-center mt-3"> @livewire('发布') </div> </div> @livewireScripts <script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/cdd21446ba36b2db414dbfc7aefa7411.js" data-minify="1" defer></script></body> </html>
现在，打开resources/views/livewire/post.blade.php并将以下代码更新到该文件中：
<分区> <div class="col-md-8 mb-2"> @if(session()->has('成功')) <div class="alert alert-success" role="alert"> {{ session()->get('成功') }} </div> @万一 @if(session()->has('错误')) <div class="alert alert-danger" role="alert"> {{ session()->get('error') }} </div> @万一 @if($addPost) @include('livewire.create') @万一 @if($updatePost) @include('livewire.update') @万一 </div> <div> <div class="卡片"> <div> @if(!$addPost) <button wire:click="addPost()" class="btn btn-primary btn-sm float-right">添加新帖子</button> @万一 <div class="表格响应"> <表类="表"> <头> <tr> <th>姓名</th> <th>描述</th> <th>行动</th> </tr> </thead> <正文> @if (计数($posts) > 0) @foreach ($posts as $post) <tr> <td> {{$post->title}} </td> <td> {{$post->描述}} </td> <td> <button wire:click="editPost({{$post->id}})" class="btn btn-primary btn-sm">编辑</button> <button onclick="deletePost({{$post->id}})" class="btn btn-danger btn-sm">删除</button> </td> </tr> @endforeach @别的 <tr> <td colspan="3" 对齐="中心"> 找不到帖子。 </td> </tr> @万一 </tbody> </表> </div> </div> </div> </div> </div>
我们需要在resources/views/livewire/下再创建两个文件，一个是 create.blade.php，第二个是 update.blade.php。
创建 create.blade.php 后，您可以将其替换为以下内容吗
<div class="卡片"> <div> <表格> <div class="form-group mb-3"> <label for="title">标题：</label> <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title"> @error('标题') <span>{{ $message }}</span> @enderror </div> <div class="form-group mb-3"> <label for="description">描述：</label> <textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea> @error('描述') <span>{{ $message }}</span> @enderror </div> <div class="d-grid gap-2"> <button wire:click.prevent="storePost()" class="btn btn-success btn-block">保存</button> <button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">取消</button> </div> </表格> </div> </div>
创建 update.blade.php 后，您可以将其替换为以下内容吗
<div class="卡片"> <div> <表格> <div class="form-group mb-3"> <label for="title">标题：</label> <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title"> @error('标题') <span>{{ $message }}</span> @enderror </div> <div class="form-group mb-3"> <label for="description">描述：</label> <textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea> @error('描述') <span>{{ $message }}</span> @enderror </div> <div class="d-grid gap-2"> <button wire:click.prevent="updatePost()" class="btn btn-success btn-block">更新</button> <button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">取消</button> </div> </表格> </div> </div>
6.定义路线
打开routes/web.php并将以下代码更新到该文件中：
路线::得到（'/'，功能（）{ 返回视图（'家'）； });
7.运行项目
现在，是时候在浏览器中检查上面的演示了，所以打开你的终端并从项目根目录执行以下命令。
php 工匠服务
上述命令的输出如下所示：
启动 Laravel 开发服务器：http://127.0.0.1:8000
所以现在打开你的浏览器并点击上面生成的链接。
（注意：URL 可能非常基于您系统中的可用端口）。
这是 github 存储库链接https://github.com/kishanpatelbacancy/laravel-livewire-demo
结论
当我们接近本博客的结尾时，请使用 Laravel Livewire 教程分享您对这些 CRUD 操作的想法和反馈。如果您正在考虑使用 Laravel Livewire 为您的商业理念开发界面，请从我们这里聘请 Laravel 开发人员，因为我们拥有世界上最顶尖的 1% 的技术人才。我们的开发人员精通 Laravel 的最新升级、功能和实施，我们遵循敏捷开发流程，以确保您的成功。
（言鼎科技）