使用 Laravel Livewire 進(jìn)行 CRUD 操作
厭倦了使用傳統(tǒng)方法創(chuàng)建枯燥乏味的界面？當(dāng)我們想出一個(gè)使用 Laravel Livewire 執(zhí)行 CRUD 操作的技術(shù)教程時(shí)，請(qǐng)把你的所有注意力都集中在這里。重要的是簡(jiǎn)單的事情；這些使用 Livewire 包創(chuàng)建、更新和刪除記錄的步驟使創(chuàng)建接口變得輕而易舉。
Laravel Livewire 簡(jiǎn)介
在我們開(kāi)始學(xué)習(xí) Laravel Livewire CRUD 教程之前，讓我們先了解一下 Livewire 的基本知識(shí)，以及它的用途和使用方式。
什么是活線(xiàn)？
Laravel Livewire 使您能夠使用 Laravel 的便利構(gòu)建界面。Livewire 是一個(gè)全?？蚣埽梢院?jiǎn)化 Vue 或 React 帶來(lái)的復(fù)雜性。第一個(gè) livewire 版本于 2020 年 2 月發(fā)布。
在這篇博客中，我們將介紹使用 Laravel Livewire 的 CRUD 操作，包括在 Laravel 9 中實(shí)現(xiàn) livewire 所需的所有必要步驟。在此之前，您可能需要從 Laravel 8 升級(jí)到 9。
Laravel Livewire CRUD 操作的先決條件和設(shè)置
Composer 安裝在您的系統(tǒng)上（只需在終端中點(diǎn)擊“composer”命令來(lái)檢查 Composer 是否已正確安裝）。如果您還沒(méi)有 Composer，可以在此處 (https://getcomposer.org/) 獲取它。
如何使用 Laravel Livewire 執(zhí)行 CRUD 操作？
在這里，我們描述了如何使用最新版本的 Laravel (v 9.19) 實(shí)現(xiàn) Livewire 包，并使用該包連續(xù)操作創(chuàng)建、更新和刪除功能。
1.創(chuàng)建一個(gè)laravel應(yīng)用
由于您熟悉使用終端創(chuàng)建 Laravel 應(yīng)用程序，請(qǐng)打開(kāi)終端并運(yùn)行以下命令，然后在您的目錄中創(chuàng)建一個(gè)新的 Laravel 應(yīng)用程序。
作曲家創(chuàng)建項(xiàng)目 --prefer-dist laravel/laravel <應(yīng)用名稱(chēng)_此處>
2.配置數(shù)據(jù)庫(kù)詳細(xì)信息
打開(kāi)位于根文件夾中的 .env 文件，如果 .env 不存在，則運(yùn)行以下命令從 .env-example 復(fù)制一份
cp .env .env-示例
您需要?jiǎng)?chuàng)建一個(gè)新數(shù)據(jù)庫(kù)，您需要在 DB_DATABASE 中提及相同的數(shù)據(jù)庫(kù)名稱(chēng)，并根據(jù)您的系統(tǒng)替換其余的 .env 變量
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=<數(shù)據(jù)庫(kù)名稱(chēng)> DB_USERNAME=<數(shù)據(jù)庫(kù)用戶(hù)名> DB_PASSWORD=<數(shù)據(jù)庫(kù)密碼>
3.現(xiàn)在開(kāi)始安裝Livewire包
移動(dòng)到您的應(yīng)用程序根目錄并運(yùn)行以下命令來(lái)安裝 livewire 包
作曲家需要 livewire/livewire
我們需要包含 livewire 樣式和腳本（在將使用 Livewire 的每個(gè)頁(yè)面上）。
<頭> #其他樣式在這里 @livewireStyles </頭> <正文> # 其他身體部位在這里 @livewire('<component name here>')/您可以在應(yīng)用程序的任何位置包含組件 @livewireScripts <script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/cdd21446ba36b2db414dbfc7aefa7411.js" data-minify="1" defer></script></body>
4.創(chuàng)建遷移和模型
我們需要為“posts”表創(chuàng)建遷移，我們還將為 posts 表創(chuàng)建一個(gè)模型。
請(qǐng)運(yùn)行以下命令來(lái)制作遷移文件。執(zhí)行以下命令后，將在 database/migrations 文件夾下創(chuàng)建新文件
php artisan make:migration create_posts_table
替換 create_posts_table 遷移文件中的以下代碼：
<?php 使用 Illuminate\Database\Migrations\Migration； 使用 Illuminate\Database\Schema\Blueprint； 使用 Illuminate\Support\Facades\Schema； 返回新類(lèi)擴(kuò)展遷移 { /** * 運(yùn)行遷移。 * * @return 無(wú)效 */ 公共功能向上（） { Schema::create('posts', function (Blueprint $table) { $表->id(); $table->string('title')->nullable(); $table->text('description')->nullable(); $表->時(shí)間戳（）； }); } /** * 反轉(zhuǎn)遷移。 * * @return 無(wú)效 */ 公共功能向下（） { Schema::dropIfExists('帖子'); } };
運(yùn)行以下命令在數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)表，其中包含遷移中提到的列，執(zhí)行以下命令后，您可以在數(shù)據(jù)庫(kù)中看到新的“posts”表。
php 工匠遷移
現(xiàn)在，我們將使用以下命令創(chuàng)建一個(gè)后期模型。執(zhí)行以下命令后，您可以在app/Models文件夾下查看新的模型文件：
php artisan make:model 發(fā)布
打開(kāi) app/Models/Post.php 并替換為以下代碼
<?php 命名空間 App\Models； 使用 Illuminate\Database\Eloquent\Factories\HasFactory； 使用 Illuminate\Database\Eloquent\Model； 類(lèi) Post 擴(kuò)展模型 { 使用 HasFactory； 受保護(hù)的 $fillable = [ '標(biāo)題描述' ]; 公共 $timestamps = true; }
5.創(chuàng)建Post組件
現(xiàn)在我們將使用以下命令創(chuàng)建一個(gè)帖子組件
php artisan make:livewire 發(fā)布
執(zhí)行上述命令后，您可以在 app/Http 和 resources/views 文件夾下看到一個(gè)新的 Livewire 文件夾。
上述命令的輸出是：
組件創(chuàng)建 類(lèi)：應(yīng)用程序/Http/Livewire/Post.php 視圖：資源/視圖/livewire/post.blade.php
現(xiàn)在，打開(kāi)app\Http\Livewire\Post.php并將以下代碼更新到該文件中：
<?php 命名空間 App\Http\Livewire； 使用 Livewire\Component； 使用 App\Models\Post 作為帖子； 類(lèi) Post 擴(kuò)展 Component { 公共 $posts, $title, $description, $postId, $updatePost = false, $addPost = false; /** * 刪除動(dòng)作監(jiān)聽(tīng)器 */ 受保護(hù)的 $listeners = [ 'deletePostListner'=>'deletePost' ]; /** * 添加/編輯表單規(guī)則列表 */ 受保護(hù)的 $rules = [ '標(biāo)題'=>'必填'， '描述'=>'必需' ]; /** * 重置所有輸入字段 * @return 無(wú)效 */ 公共功能重置字段（）{ $this->title = ''; $this->描述=''; } /** * 渲染帖子數(shù)據(jù) * @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View */ 公共函數(shù)渲染（） { $this->posts = Posts::select('id', 'title', 'description')->get(); 返回視圖（'livewire.post'）； } /** * 打開(kāi)添加帖子表單 * @return 無(wú)效 */ 公共函數(shù) addPost() { $this->resetFields(); $this->addPost = true; $this->updatePost = false; } /** * 將用戶(hù)輸入的帖子數(shù)據(jù)存儲(chǔ)在帖子表中 * @return 無(wú)效 */ 公共函數(shù) storePost() { $this->驗(yàn)證(); 嘗試 { 帖子::創(chuàng)建([ 'title' => $this->title, '描述'=> $this->描述 ]); session()->flash('成功','帖子創(chuàng)建成功！！'); $this->resetFields(); $this->addPost = false; } catch (\Exception $ex) { session()->flash('error','出錯(cuò)了！！'); } } /** * 以編輯帖子形式顯示現(xiàn)有帖子數(shù)據(jù) * @param 混合 $id * @return 無(wú)效 */ 公共功能 editPost($id){ 嘗試 { $post = Posts::findOrFail($id); 如果（！$post）{ session()->flash('錯(cuò)誤','未找到帖子'); } 別的 { $this->title = $post->title; $this->description = $post->description; $this->postId = $post->id; $this->updatePost = true; $this->addPost = false; } } catch (\Exception $ex) { session()->flash('error','出錯(cuò)了??！'); } } /** * 更新帖子數(shù)據(jù) * @return 無(wú)效 */ 公共函數(shù) updatePost() { $this->驗(yàn)證(); 嘗試 { 帖子::whereId($this->postId)->更新([ 'title' => $this->title, '描述'=> $this->描述 ]); session()->flash('成功','帖子更新成功??！'); $this->resetFields(); $this->updatePost = false; } catch (\Exception $ex) { session()->flash('成功','出錯(cuò)了??！'); } } /** * 取消添加/編輯表單并重定向到發(fā)布列表頁(yè)面 * @return 無(wú)效 */ 公共函數(shù) cancelPost() { $this->addPost = false; $this->updatePost = false; $this->resetFields(); } /** * 從帖子表中刪除特定的帖子數(shù)據(jù) * @param 混合 $id * @return 無(wú)效 */ 公共函數(shù) deletePost($id) { 嘗試{ 帖子::查找($id)->刪除(); session()->flash('success',"帖子刪除成功??！"); }catch(\Exception $e){ session()->flash('error',"出錯(cuò)了??！"); } } }
現(xiàn)在，創(chuàng)建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> </導(dǎo)航> <div 類(lèi)="容器"> <div class="row justify-content-center mt-3"> @livewire('發(fā)布') </div> </div> @livewireScripts <script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/cdd21446ba36b2db414dbfc7aefa7411.js" data-minify="1" defer></script></body> </html>
現(xiàn)在，打開(kāi)resources/views/livewire/post.blade.php并將以下代碼更新到該文件中：
<分區(qū)> <div class="col-md-8 mb-2"> @if(session()->has('成功')) <div class="alert alert-success" role="alert"> {{ session()->get('成功') }} </div> @萬(wàn)一 @if(session()->has('錯(cuò)誤')) <div class="alert alert-danger" role="alert"> {{ session()->get('error') }} </div> @萬(wàn)一 @if($addPost) @include('livewire.create') @萬(wàn)一 @if($updatePost) @include('livewire.update') @萬(wàn)一 </div> <div> <div class="卡片"> <div> @if(!$addPost) <button wire:click="addPost()" class="btn btn-primary btn-sm float-right">添加新帖子</button> @萬(wàn)一 <div class="表格響應(yīng)"> <表類(lèi)="表"> <頭> <tr> <th>姓名</th> <th>描述</th> <th>行動(dòng)</th> </tr> </thead> <正文> @if (計(jì)數(shù)($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" 對(duì)齊="中心"> 找不到帖子。 </td> </tr> @萬(wàn)一 </tbody> </表> </div> </div> </div> </div> </div>
我們需要在resources/views/livewire/下再創(chuàng)建兩個(gè)文件，一個(gè)是 create.blade.php，第二個(gè)是 update.blade.php。
創(chuàng)建 create.blade.php 后，您可以將其替換為以下內(nèi)容嗎
<div class="卡片"> <div> <表格> <div class="form-group mb-3"> <label for="title">標(biāo)題：</label> <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title"> @error('標(biāo)題') <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>
創(chuàng)建 update.blade.php 后，您可以將其替換為以下內(nèi)容嗎
<div class="卡片"> <div> <表格> <div class="form-group mb-3"> <label for="title">標(biāo)題：</label> <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title"> @error('標(biāo)題') <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.定義路線(xiàn)
打開(kāi)routes/web.php并將以下代碼更新到該文件中：
路線(xiàn)::得到（'/'，功能（）{ 返回視圖（'家'）； });
7.運(yùn)行項(xiàng)目
現(xiàn)在，是時(shí)候在瀏覽器中檢查上面的演示了，所以打開(kāi)你的終端并從項(xiàng)目根目錄執(zhí)行以下命令。
php 工匠服務(wù)
上述命令的輸出如下所示：
啟動(dòng) Laravel 開(kāi)發(fā)服務(wù)器：http://127.0.0.1:8000
所以現(xiàn)在打開(kāi)你的瀏覽器并點(diǎn)擊上面生成的鏈接。
（注意：URL 可能非?；谀到y(tǒng)中的可用端口）。
這是 github 存儲(chǔ)庫(kù)鏈接https://github.com/kishanpatelbacancy/laravel-livewire-demo
結(jié)論
當(dāng)我們接近本博客的結(jié)尾時(shí)，請(qǐng)使用 Laravel Livewire 教程分享您對(duì)這些 CRUD 操作的想法和反饋。如果您正在考慮使用 Laravel Livewire 為您的商業(yè)理念開(kāi)發(fā)界面，請(qǐng)從我們這里聘請(qǐng) Laravel 開(kāi)發(fā)人員，因?yàn)槲覀儞碛惺澜缟献铐敿獾?1% 的技術(shù)人才。我們的開(kāi)發(fā)人員精通 Laravel 的最新升級(jí)、功能和實(shí)施，我們遵循敏捷開(kāi)發(fā)流程，以確保您的成功。
（言鼎科技）