To jest post gościnny z Bacancy
Tired of creating boring and tiring Interfaces using traditional methods? Bring in all your attention here as we come up with a tech tutorial on executing the Operacje CRUD przy użyciu Laravel Livewire. It is the simple things that matter; these steps to create, update, and delete records with the Livewire package make it a piece of cake to create Interfaces.
Wprowadzenie do Laravel Livewire
Zanim zaczniemy od samouczka Laravel Livewire CRUD, przejdźmy do podstawowego zrozumienia Livewire oraz tego, co i jak jest używane.
Co to jest Livewire?
Laravel Livewire umożliwia tworzenie interfejsów z wygodą Laravel. Livewire to framework fullstack, który upraszcza złożoność Vue lub React. Pierwsza wersja livewire została wydana w lutym 2020 roku.
Na tym blogu będziemy prezentować CRUD operations using Laravel Livewire w tym wszystkie niezbędne kroki, które są wymagane do wdrożenia livewire w Laravel 9. Wcześniej możesz chcieć aktualizacja z Laravel 8 do 9.
Wymagania wstępne i konfiguracja operacji CRUD Laravel Livewire
Kompozytor zainstalowany w twoim systemie (wystarczy nacisnąć polecenie „kompozytor” w terminalu, aby sprawdzić, czy kompozytor jest poprawnie zainstalowany, czy nie). Możesz pobrać Composer tutaj (https://getcomposer.org/), jeśli jeszcze go nie masz.
Jak wykonywać operacje CRUD za pomocą Laravel Livewire?
Tutaj przedstawiliśmy, jak możesz zaimplementować pakiet Livewire z najnowszą wersją Laravel (v 9.19) i kolejno obsługiwać funkcje tworzenia, aktualizacji i usuwania za pomocą pakietu.
1. Utwórz aplikację laravel
Ponieważ jesteś zaznajomiony z tworzeniem aplikacji laravel za pomocą terminala, otwórz terminal i uruchom poniższe polecenie, a następnie utwórz nową aplikację laravel w swoim katalogu.
composer create-project --prefer-dist laravel/laravel application_name_here
2. Skonfiguruj szczegóły bazy danych
otwarty .env file which is located in the root folder, if .env is not existed then run the below command to make a copy from the .env-example
cp .env .env-example
Musisz utworzyć nową bazę danych, tę samą nazwę bazy danych, którą musisz podać w DB_DATABASE, a także zastąpić resztę zmiennej .env w oparciu o twój system
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
3. Przejdź teraz do instalacji pakietu Livewire
Przejdź do katalogu głównego aplikacji i uruchom poniższe polecenie, aby zainstalować pakiet livewire
composer require livewire/livewire
Musimy dołączyć styl i skrypt Livewire (na każdej stronie, która będzie korzystać z Livewire).
<head>
# other styles here
@livewireStyles
</head>
<body>
# other body parts here
@livewire(‘<component name here>’)/You can include component anywhere in your app
@livewireScripts
<script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/b810c1e775732c06a03141e7fcdf81a0.js" data-minify="1" defer></script></body>
4. Utwórz migrację i model
We need to create migration for the „posty” table and also we will create a model for posts table.
Uruchom poniższe polecenie, aby utworzyć plik migracji. Po wykonaniu poniższego polecenia nowy plik zostanie utworzony w folderze database/migrations
php artisan make:migration create_posts_table
Zastąp poniższy kod w utwórz_tabelę_postów plik migracji:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->text('description')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};Uruchom poniższe polecenie, aby utworzyć tabelę w bazie danych z wymienionymi kolumnami podczas migracji, po wykonaniu poniższego polecenia możesz zobaczyć nowe “posts” tabela w bazie danych.
php artisan migrate
Teraz utworzymy model postu za pomocą poniższego polecenia. Po wykonaniu poniższych czynności możesz wyświetlić nowy plik modelu w aplikacja/Modele teczka:
php artisan make:model Post
otwarty app/Models/Post.php i zastąp poniższym kodem
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'description'
];
public $timestamps = true;
}5. Utwórz komponent Post
Teraz utworzymy komponent postu za pomocą poniższego polecenia
php artisan make:livewire post
Po wykonaniu powyższego polecenia możesz zobaczyć nowy folder Livewire w folderze app/Http i resources/views.
Dane wyjściowe powyższego polecenia to:
COMPONENT CREATED
CLASS: app/Http/Livewire/Post.php
VIEW: resources/views/livewire/post.blade.phpTeraz otwarte app\Http\Livewire\Post.php i zaktualizuj następujący kod do tego pliku:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post as Posts;
class Post extends Component
{
public $posts, $title, $description, $postId, $updatePost = false, $addPost = false;
/**
* delete action listener
*/
protected $listeners = [
'deletePostListner'=>'deletePost'
];
/**
* List of add/edit form rules
*/
protected $rules = [
'title' => 'required',
'description' => 'required'
];
/**
* Reseting all inputted fields
* @return void
*/
public function resetFields(){
$this->title = '';
$this->description = '';
}
/**
* render the post data
* @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
*/
public function render()
{
$this->posts = Posts::select('id', 'title', 'description')->get();
return view('livewire.post');
}
/**
* Open Add Post form
* @return void
*/
public function addPost()
{
$this->resetFields();
$this->addPost = true;
$this->updatePost = false;
}
/**
* store the user inputted post data in the posts table
* @return void
*/
public function storePost()
{
$this->validate();
try {
Posts::create([
'title' => $this->title,
'description' => $this->description
]);
session()->flash('success','Post Created Successfully!!');
$this->resetFields();
$this->addPost = false;
} catch (\Exception $ex) {
session()->flash('error','Something goes wrong!!');
}
}
/**
* show existing post data in edit post form
* @param mixed $id
* @return void
*/
public function editPost($id){
try {
$post = Posts::findOrFail($id);
if( !$post) {
session()->flash('error','Post not found');
} else {
$this->title = $post->title;
$this->description = $post->description;
$this->postId = $post->id;
$this->updatePost = true;
$this->addPost = false;
}
} catch (\Exception $ex) {
session()->flash('error','Something goes wrong!!');
}
}
/**
* update the post data
* @return void
*/
public function updatePost()
{
$this->validate();
try {
Posts::whereId($this->postId)->update([
'title' => $this->title,
'description' => $this->description
]);
session()->flash('success','Post Updated Successfully!!');
$this->resetFields();
$this->updatePost = false;
} catch (\Exception $ex) {
session()->flash('success','Something goes wrong!!');
}
}
/**
* Cancel Add/Edit form and redirect to post listing page
* @return void
*/
public function cancelPost()
{
$this->addPost = false;
$this->updatePost = false;
$this->resetFields();
}
/**
* delete specific post data from the posts table
* @param mixed $id
* @return void
*/
public function deletePost($id)
{
try{
Posts::find($id)->delete();
session()->flash('success',"Post Deleted Successfully!!");
}catch(\Exception $e){
session()->flash('error',"Something goes wrong!!");
}
}
}Teraz utwórz zasoby/widoki/home.blade.php i zaktualizuj następujący kod do tego pliku:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="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/[email protected]/dist/css/bootstrap.min.css?ver=1672663261" rel="stylesheet" crossorigin="anonymous">
@livewireStyles
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Livewire CRUD Blog</a>
</div>
</nav>
<div class="container">
<div class="row justify-content-center mt-3">
@livewire('post')
</div>
</div>
@livewireScripts
</body>
</html>
Teraz otwarte zasoby/widoki/livewire/post.blade.php i zaktualizuj następujący kod do tego pliku:
<div>
<div class="col-md-8 mb-2">
@if(session()->has('success'))
<div class="alert alert-success" role="alert">
{{ session()->get('success') }}
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger" role="alert">
{{ session()->get('error') }}
</div>
@endif
@if($addPost)
@include('livewire.create')
@endif
@if($updatePost)
@include('livewire.update')
@endif
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
@if(!$addPost)
<button wire:click="addPost()" class="btn btn-primary btn-sm float-right">Add New Post</button>
@endif
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@if (count($posts) > 0)
@foreach ($posts as $post)
<tr>
<td>
{{$post->title}}
</td>
<td>
{{$post->description}}
</td>
<td>
<button wire:click="editPost({{$post->id}})" class="btn btn-primary btn-sm">Edit</button>
<button onclick="deletePost({{$post->id}})" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
@endforeach
@else
<tr>
<td colspan="3" align="center">
No Posts Found.
</td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Musimy utworzyć dwa dodatkowe pliki w resources/views/livewire/ jeden to create.blade.php, a drugi to update.blade.php.
Po utworzeniu create.blade.php możesz zastąpić go poniższą treścią
<div class="card">
<div class="card-body">
<form>
<div class="form-group mb-3">
<label for="title">Title:</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title">
@error('title')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="form-group mb-3">
<label for="description">Description:</label>
<textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="d-grid gap-2">
<button wire:click.prevent="storePost()" class="btn btn-success btn-block">Save</button>
<button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">Cancel</button>
</div>
</form>
</div>
</div>
Po utworzeniu update.blade.php możesz zastąpić go poniższą treścią
<div class="card">
<div class="card-body">
<form>
<div class="form-group mb-3">
<label for="title">Title:</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title">
@error('title')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="form-group mb-3">
<label for="description">Description:</label>
<textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="d-grid gap-2">
<button wire:click.prevent="updatePost()" class="btn btn-success btn-block">Update</button>
<button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">Cancel</button>
</div>
</form>
</div>
</div>
6. Zdefiniuj trasy
Open trasy/web.php i zaktualizuj następujący kod do tego pliku:
Route::get('/',function(){
return view('home');
});7. Uruchom projekt
Teraz nadszedł czas, aby sprawdzić powyższą wersję demonstracyjną w przeglądarce, więc otwórz terminal i wykonaj poniższe polecenie z katalogu głównego projektu.
php artisan serve
Dane wyjściowe powyższego polecenia będą wyglądać jak poniżej:
Uruchamianie serwera programistycznego Laravel: http://127.0.0.1:8000
Więc teraz otwórz przeglądarkę i kliknij wygenerowany powyżej link.
(Uwaga: adres URL może być bardzo oparty na dostępnym porcie w twoim systemie).
Oto link do repozytorium github https://github.com/kishanpatelbacancy/laravel-livewire-demo
Wniosek
Gdy zbliżamy się do końca tego bloga, podziel się swoimi przemyśleniami i opiniami na temat tych operacji CRUD, korzystając z samouczka Laravel Livewire. Jeśli rozważasz Laravel Livewire do tworzenia interfejsów dla swoich pomysłów biznesowych, Zatrudnij programistę Laravel od nas, ponieważ mamy 1% najlepszych talentów technicznych na świecie. Nasi programiści są biegli w najnowszych aktualizacjach, funkcjach i implementacjach Laravel, a my postępujemy zgodnie z procesami programistycznymi Agile, aby zapewnić Ci wygodny sukces.
